design-to-code
Mockup-to-component pipeline using Google Stitch, 21st.dev, and Storybook MCP. Accepts a screenshot, a description, or a URL and produces production-ready React components, checking existing Storybook components before generating anything new. Use when implementing UI from a mockup or screenshot. To call the MCP tool surface on its own, with no design to convert, use storybook-mcp-integration.
- License
- MIT
- Compatibility
- Claude Code 2.1.220+. Optional: stitch (official Google Stitch), 21st-dev-magic, storybook-mcp (@storybook/addon-mcp) MCP servers.
Pinned to revision 1ff988bd66da, so it is the text this page describes rather than whatever the author pushed since.
Pre-approved tools experimental
Experimental field. Support varies between clients, so this list is what the author declared, not what your client will enforce.
- Read
- Write
- Edit
- Glob
- Grep
- Bash
- WebFetch
- WebSearch
- AskUserQuestion
- Agent
- TaskCreate
- TaskUpdate
- TaskList
- mcp__21st-dev-magic__search
- mcp__21st-dev-magic__search_picker
- mcp__21st-dev-magic__get_component
- mcp__21st-dev-magic__get_theme
- mcp__21st-dev-magic__get_usage
Files
- skills/design-to-code/SKILL.md
- skills/design-to-code/rules/_sections.md
- skills/design-to-code/rules/catalog-registration.md
- skills/design-to-code/test-cases.json
Every link opens the file at its source, pinned to the revision this page describes.