ds-specslisted

Build and maintain an LLM-readable design system that is also a two-way bridge to Figma — a three-tier spec tree (foundations/tokens → components → patterns), a closed token layer with three-layer indirection, a CI-ready audit script that blocks hardcoded values, and a reconcile report that diffs Figma variables, component sets, variants, and bindings against the specs. Use this skill whenever the user says "create a design system," "set up a design system," "make my design system LLM-readable," "tokenize this," "write specs for my components," "my prototype is drifting," or "the AI keeps picking different colors." ALSO use it for any syncing between Figma and code — "push my specs to Figma," "sync from Figma," "does Figma match my code," "my Figma and code have drifted apart," "generate Figma docs pages from my specs," or any request involving Figma variables, variant sets, component properties, or bound variables alongside a codebase. Works for greenfield and retrofit, Tailwind and plain CSS — detect which
ejun-9/ds-specs · ★ 0 · Web & Frontend · score 70

Install: claude install-skill ejun-9/ds-specs

# LLM-readable design systems Based on Hardik Pandya's method: https://hvpandya.com/llm-design-systems Skill authored with Claude Opus 5 (high reasoning effort). ## The problem this solves An LLM makes 200–300 visual micro-decisions per coding session. Each one is individually reasonable. Together they aren't a design system — they're 200 guesses. Next session, zero memory, 200 *different* guesses. By session ten the prototype looks like three products built by three teams. Three LLM failure modes, three countermeasures: | Failure | Countermeasure | |---|---| | Fabricates plausible values (`padding: 12px`) | **Closed token layer** — pick from a finite named set | | No cross-session memory | **Spec files** — read at the start of every session | | Silent drift, upstream and within-session | **Audit script** — exit code 1, runs in CI | The goal: every visual decision becomes a *lookup*, never a guess. Human taste goes in once. The LLM follows it mechanically after that. ## Pick the mode first Three entry points. Route before anything else. | User says | Mode | Go to | |---|---|---| | "create a design system," "tokenize this," "my prototype is drifting" | **Build** | Step 0 below | | "push my specs to Figma," "generate Figma docs pages from my specs" | **Push** | `references/figma-bridge.md` → Direction 1 | | "sync from Figma," "does Figma match my code," "my Figma and code have drifted apart" | **Reconcile** | `references/figma-bridge.md` → Direction 2 | Phrases are il