sso-design-code-loop

ARCHIVED

"The outcomes are less about knowing what file links to what file as knowing that the Figma component is structured in a way that mirrors how it's structured in code. I think less components and more variables and tokens to start. I imagine there being a system of inventorying the links between the two, and also a Storybook / similar component that lets me preview in code before rebuilding the whole server." — Katy, 2026-05-26

STAGES

  1. proposal08-14
  2. requirements08-14
  3. design08-14
  4. tasks08-14
  5. build—
  6. archived08-14

CAPABILITY

  • figma-code-parity5 requirements

OUTCOMES — AND HOW EACH IS MEASURED

  • ○1.1**Spacing variable lookup matches Tailwind utility** — User can pick a `space/{n}` Figma Variable on a frame's Auto Layout and find the matching `gap-{n}` / `p-{n}` class in code at the same pixel value, with the variable name cited verbatim in the component's parity row.not stated
  • ○1.2**Typography token lookup matches Tailwind class** — User can pick a `text/{size}` Figma Variable on a text node and find the matching `text-{size}` class in code with identical font-family, font-size, line-height, and font-weight, with the variable name cited verbatim in the component's parity row.not stated
  • ○1.3**Reader checks parity at a glance** — User can open [`figma-source.md`](../../../experiments/simple-seed-organizer/docs/figma-source.md), scan the component table, and see every row showing a parity status from `{full, partial, drifted, not-yet-linked}` with a legend defining each value immediately above the table.not stated
  • ○1.4**Visit preview route without signing in** — User can run `npm run dev` in `experiments/simple-seed-organizer/prototype/app/`, open `http://localhost:3009/dev/components` in an unauthenticated browser, see each priority component rendered with mock props, and watch HMR update the page when they edit a component source file.not stated
  • ○1.5**Walk the loop on one component end-to-end** — User can take `ViabilityBadge` (fallback: `SeedPill`) through the full loop — spacing/typography Variables applied to its Figma frame, parity row in `figma-source.md` set to `full`, rendered on `/dev/components` with mock props — and edit a token on either side and see the other side track without ambiguity.not stated

WHAT HAPPENED

  1. ARCHIVED

    proposal and specs and design and tasks and archive landed

    2026-08-14 · 1 pull request
    • #370chore(openspec): drain the change queue and collapse to one schema

History read from a manifest built at 2026-09-30 (09e7bcc).

1 pull request, found by commits touching the change folder