Skip to main content
UDSUrban Design SystemBuild a multi-component HTML demoSITE 2026.06.10.1
Color
Brand
Font
Scale
Density

Cursor Workflows

This site asks Cursor to do most of the design-system housekeeping — bumping versions, syncing Figma, writing changelogs, rebuilding release notes. You type a plain-English prompt; Cursor picks the right tool. This page is the map: what's in the toolbox, what each tool does, and which prompts trigger what.

Say this — get that

The most common prompts and what they trigger. Type them in Cursor chat — you don't need to memorize skill names or workflows.

boltQuick start
chat"UDS updated"

Bring the docs site up to a new Figma release.Reads both Figma files, applies safe updates, asks before anything risky, and rebuilds the release notes in Figma.

UsesWorkflow 1uds-updated
chat"Sync nav-header from Figma"

Pull one component's latest Figma into the docs.Deep-inspects the Figma component, updates the spec / CSS / examples, writes a per-component changelog entry, rebuilds Figma release notes.

UsesWorkflow 2sync-figma-component-spec
chat"Add a tooltip component"

Scaffold a brand-new component end to end.Creates the folder, every required file, the sidebar link, the docs-page placeholder, and a starter changelog entry.

UsesWorkflow 3new-component
chat"Build the Figma page for Button"

Generate the canonical seven-card component canvas in Figma.Builds Header / Anatomy / Variants / Sub-components / Usage / Accessibility / Meta cards from the spec data, all token-bound.

Usesfigma-component-card
chat"Lab me an Avatar"

Start a code-first draft playground.Creates a hidden dev route where you can preview and tune a component idea before recreating it in Figma.

Usesuds-component-lab
chat"Factory me an Avatar"

Draft a new UDS component directly in Figma.Builds a token-bound component set on a brand-new draft page. You accept it by renaming the page; the docs site catches up on the next "UDS updated."

Usesgenerate-uds-figma-component
chat"Audit our specs"

See which components have the most spec gaps.Returns a completeness report — same scoring as the "Spec X/22" pill — with the three highest-impact fields to fill in next per component.

Usesspec-audit

What's in the toolbox

Four kinds of guidance, ordered from always-on background discipline to called-on-demand specialists to enforced-by-CI safety nets. Each kind lives in its own folder and plays a different role.

mapConcept primer
policy

Rule

A standing instruction Cursor reads on every relevant task. Sets the project's discipline.

Like "always wear a seatbelt."

.cursor/rules/23
menu_book

Skill

A how-to procedure Cursor loads on demand when your prompt matches. Cursor itself follows the steps.

Like "how to change a tire — read the manual when you need it."

.cursor/skills/10
support_agent

Subagent

A specialist contractor. Spawns in its own context, does its job, returns one structured report, then disappears.

Like "call the mechanic."

.cursor/agents/7
verified

CI Audit

A bash script that runs on every PR. Failing audits block merge. Catches the failure modes humans and agents skip.

Like the MOT inspection.

scripts/audit-*.sh12

The whole toolchain

Browse by category. Workflows show the end-to-end flows Cursor stitches together. The other tabs list every rule, skill, subagent, and audit individually.

exploreCatalog

Four end-to-end flows the toolchain supports, from biggest scope (a new UDS release) to smallest (one component fix). Orchestrator skills tie multiple steps together; the specialist skills inside can also be invoked on their own.

1

UDS version release

Figma UDS Version: X.Y page bumps and the user confirms a release. The biggest flow — touches every Figma file, every changed component, both release-note frames, and the SITE build.

8 steps10 audits gate it
chatTriggers"UDS updated""Figma updated""sync UDS from Figma"
  1. 1
    Preflight

    Confirms Figma is readable, then walks both files to find the version bump, status changes, new components, and renamed components.

    figma-capability-checkfigma-inventory
  2. 2
    Token audit

    Direct read of every Figma Variable. Reports added / removed / renamed tokens, value changes per mode, and alias-graph validity.

    figma-token-audit
  3. 3
    Component inspections

    For each changed component: a deep node-tree, variant-matrix, token-binding, and accessibility read — compared against the docs-site spec.

    figma-component-inspector
  4. 4
    Snapshot release

    Archives the current uds/ folder into versions/<old>/uds/, bumps uds/version.json, refreshes manifests.

    release.sh
  5. 5
    Apply safe changes

    High-confidence non-breaking changes apply automatically. Anything risky stops for explicit user confirmation.

    import-figma-tokenssync-figma-component-specsync-figma-component-statuslink-figma-nodesnew-component
  6. 6
    Re-check contrast

    Rebuilds the aggregated changelog and component manifest, then reviews token pairings in the Contrast Checker across all six themes.

    aggregate-changelog.shaggregate-components.sh/contrast-checker
  7. 7
    Figma release notes

    Rebuilds the Release Notes frame on the current version page in BOTH Figma files. The two files always end up with identical text.

    sync-figma-release-notes
  8. 8
    Docs changelog

    Bumps the SITE build counter, appends the SITE changelog entry, cache-busts what changed, pushes to main. GitHub Actions deploys to GH Pages.

    SITE_CHANGELOG
2

Mid-release component sync

One or a few components get a fresh Figma read between releases. No version bump — just the changed components, their changelog entries, and a Figma release-notes refresh.

6 steps4 audits gate it
chatTriggers"sync nav-header from Figma""<component> renamed in Figma"
  1. 1
    Deep inspect

    Locates the canonical Figma component set, walks the node tree, captures variants and token bindings, classifies every finding by confidence and risk.

    figma-component-inspector
  2. 2
    Apply spec sync

    Updates the spec, CSS, examples, impl, and playground for every high-confidence non-breaking finding. Stops on anything risky.

    sync-figma-component-spec
  3. 3
    Per-component changelog

    Adds an entry to that component's changelog.json for the current UDS version, then runs the aggregator to refresh the global changelog.

    aggregate-changelog.sh
  4. 4
    Update sync-state snapshot

    Records the captured Figma node IDs, variant matrix, and nested instances so the next sync can diff against this run.

    .cursor/figma/state/
  5. 5
    Figma release notes

    Mandatory whenever the global changelog changes — rebuilds the Release Notes frame on the current version page in both Figma files.

    sync-figma-release-notes
  6. 6
    Docs changelog

    Appends a SITE changelog entry describing the sync. Cloudflare and Next.js handle cache invalidation on deploy.

    SITE_CHANGELOG
3

Add a new component

Scaffold a brand-new component on the docs site — folder, files, sidebar link, page placeholder, starter changelog entry. The component starts at placeholder status; the spec fills in over time.

4 steps
chatTriggers"add a tooltip component""scaffold a new pagination component""new component called X"
  1. 1
    Scaffold the folder

    Creates the new uds/components/<id>/ folder with every required file: CSS stub, spec.json, status.json, changelog.json with the initial "added" entry, impl.json, playground.js, examples/.

    new-component
  2. 2
    Wire into the docs site

    Adds the sidebar link, the page placeholder, the component CSS import, and (if interactive) the JS registration.

  3. 3
    Refresh manifests

    Aggregates the new component into components.json and folds its starter changelog entry into CHANGELOG.json.

    aggregate-components.shaggregate-changelog.sh
  4. 4
    Docs changelog

    Appends a SITE changelog entry announcing the new component. Cloudflare and Next.js handle cache invalidation on deploy.

    SITE_CHANGELOG
4

Single component edit

Smallest scope — one component's CSS, examples, or playground gets adjusted. Often a Figma-comment follow-up or an a11y review fix. Per-component changelog is still mandatory.

4 steps
chatTriggers"fix the bento chevron color""tighten button padding"
  1. 1
    Source-of-truth check

    Any edit under uds-docs/uds/ has to come from Figma (or revert toward Figma parity). Cursor cites the Figma read first; it won't apply an audit-detected "fix" on its own.

    uds-source-of-truth
  2. 2
    Edit the file

    Change only the targeted file in uds/components/<id>/. Token-first CSS only — no raw hex / sizes / spacing.

  3. 3
    Per-component changelog

    Adds an entry to that component's changelog.json describing the fix; the aggregator picks it up.

    aggregate-changelog.sh
  4. 4
    Docs changelog & release notes

    Appends the SITE changelog entry. If the global changelog actually changed, Figma release notes rebuild too.

    SITE_CHANGELOGsync-figma-release-notes
stars

You don't have to memorize any of this

Saying "sync the bento dropdown from Figma," "audit our specs," or "scaffold a new tooltip component" is enough. Cursor picks the right skill or subagent based on the description, the rules guarantee the version bump / per-component changelog / aggregate / snapshot / Figma release notes / cache-bust all land, and the CI audits hard-fail if anything is silently skipped. Less ceremony, fewer mistakes, more time on actual design.