Agent skill · software engineering · yonatangross
design-to-code
Mockup to React component via Stitch, 21st.dev and Storybook MCP, reusing existing components first. Use when building UI from a mockup or screenshot. To call Storybook MCP tools alone, use storybook-mcp-integration.
Why this skill is useful
Adds a complete mockup-to-React component pipeline with executable scripts for design extraction and adaptation that are not available in public documentation.
What it needs
Requires 21st-dev-magic, stitch, storybook-mcp installed locally. About 9k tokens when loaded. Last updated 2026-08-06. 215 stars on the source repository.
What this skill does
Design to Code Convert visual designs into production-ready React components using a four-stage pipeline: Extract, Match, Adapt, Render. Pipeline Overview Argument Resolution Step 0: Detect Input Type and Project Context Stage 1: Extract Design Context If stitch MCP is available: If stitch MCP is NOT available (fallback): Resolution budget (Opus 5.5 / CC 2.1.111+): Mockups up to 2,576 px on the long edge (~3.75 MP, 3× prior ceiling) produce better component boundaries and spacing extraction. Full-page desktop mockups at native resolution are now in-budget; previously they had to be resized down and lost fine detail. Only downscale inputs exceeding 2,576 px. Extract and produce: Color palette (hex/oklch values) Typography (font families, sizes, weights) Spacing patterns (padding, margins, gaps) Component structure (headers, cards, buttons, etc.) Layout pattern (grid, flex, sidebar, etc.) Stage 2: Match Components (Storybook-First) Priority 1 — Check project's own Storybook (if storybook-mcp available): Priority 2 — Search 21st.dev (if no Storybook match and 21st-dev-magic available): Priority 3 — Filesystem fallback (if no MCP servers available): Present matches to user: Stage 3: Adapt to Project Merge the extracted design context with matched/generated components: 1. Apply project tokens — Replace hardcoded colors/spacing with project's design tokens 2. Apply shadcn style classes — If SHADCNSTYLE detected, use style-correct class names: Luma: rounded-4xl buttons/cards, shadow-md + ring-1 ring-foreground/5, gap-6 py-6 Nova: compact px-2 py-1, reduced margins, tight spacing Lyra: rounded-none, sharp edges, monospace-friendly Mira: ultra-dense, minimal padding 3. Match naming conventions — Follow project's component naming patterns 4. Add TypeScript types — Full type safety with Zod validation for any data props 5. Include tests — MSW handlers for API-backed components, render tests for static 6. Responsive — Mobile-first with breakpoints matching project's system 7. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills yonatangross/design-to-code