Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add memi-design/design-skills --skill design-to-code-handoffgit clone --depth 1 https://github.com/memi-design/design-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/memi-design/design-skills/design-to-code-handoff)<a href="https://agentmods.dev/skills/memi-design/design-skills/design-to-code-handoff"><img src="https://agentmods.dev/badge/skills/memi-design/design-skills/design-to-code-handoff/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/memi-design/design-skills/design-to-code-handoff"><img src="https://agentmods.dev/badge/skills/memi-design/design-skills/design-to-code-handoff.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00048 | $0.00745 |
| Opus 5.5 | $0.00019 | $0.00298 |
| Sonnet 5.5 | $0.00010 | $0.00149 |
| Haiku 4.5 | $0.00005 | $0.00075 |
Grade A, and why
design-to-code-handoff scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 29d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 36 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design-to-code handoff
When to use
Use this workflow for a bounded screen or component when a Figma selection, Paper canvas, or exported design must become code in an existing web product. Use component-catalog to plan a library without a supplied design and token-architecture for a cross-surface token change. A link alone is not a specification: the codebase is the implementation authority and the design is evidence for the intended result.
1. Capture the source
Record the exact Figma file and node, Paper canvas and selection, export hash, or screenshot URL; include the source revision or source timestamp. Capture dimensions, variants, interaction states, responsive constraints, text, assets, and linked tokens. Establish acceptance criteria for the requested screen and states with the user or task before coding. If access is unavailable, use supplied exports and mark missing states as unresolved. Do not infer measurements or behavior from a static screenshot.
2. Map to the existing system
Read local instructions, tokens, components, Storybook stories, routes, and test conventions before editing. Make a short mapping table for each significant element:
| Design element and source | Existing component/token | Decision | Confidence and open difference |
|---|
Mark a decision as reuse, extend, or new. Reuse only when semantics, behavior, and supported states fit; a visual resemblance alone is insufficient. Before extending or adding, check the component API, callers, stories, and accessibility contract. If the design conflicts with an existing token or component, record the conflict and resolve it against the system owner or task requirements; do not quietly fork the system. Give confidence as high, medium, or low and name the supporting evidence.
3. Implement a thin slice
Start with the smallest representative state and use the repository's component API, token names, accessibility conventions, and test setup. Add or update Storybook stories for applicable default, interactive, empty, loading, error, and disabled states; omit inapplicable states explicitly. If the project has no Storybook, use its existing component preview or test fixture and record that substitution. Keep source assets traceable and check their use rights. Stop and surface a decision when interaction, asset rights, or responsive behavior is unknown and would change the implementation contract.
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 29d ago First seen · 36 lines · 48 tokens per session scan A fcd0186405b3
design-to-code-handoff is a skill published in the GitHub repository memi-design/design-skills (7 stars, last pushed 1mo ago), licensed MIT. It adds 48 tokens to every session and 745 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-29.
Other skills, from other repositories
design-to-code-check
Compares a component or screen's design spec with its code and logs each gap as a build error or spec gap. Use it for design QA, handover review or sign-off: whenever someone asks if a build matches its design or spec, even one component with the spec pasted in. System-wide drift: drift-detection.
design-engineering
Premium design engineering skill for agentic workflows — produces high-end, distinctive UI designs using DESIGN.md as the portable contract across Pencil MCP (in-IDE canvas), Figma MCP (team handoff + design tokens), and Google Stitch (vibe exploration + AI generation). Enforces anti-generic principles, WCAG 2.2 AA…
building-components
The workflow for building, rebuilding, or restyling any design-system component (Button, Dialog, Select, Table, Tabs, Tooltip, and so on). Trigger whenever the user says "let's do the dialog", "restyle X", "bring in / pull in a component", "build the select", "rebuild this atom", or starts work on an item from the…
gsp-color
Design color systems — palettes, contrast, semantic mapping, dark mode — use when: pick colors, build a palette, semantic tokens, dark mode pairings, brand color, accent color.
gsp-typography
Design type systems — scale, pairing, fluid type, vertical rhythm — use when: pick fonts, font pairing, type scale, vertical rhythm, fluid typography, body and heading sizes.
analyze-component-set-figma
Analyze a Figma COMPONENTSET as a state machine for code generation — extract variant axes (state/size/etc.), map state variants to CSS pseudo-classes (hover→:hover, focus→:focus-visible, disabled→:disabled, error→[aria-invalid]), and compute per-variant visual diffs (only what changes per state). Use when generating…