design-to-code

Description

Mockup-to-component pipeline using Google Stitch, 21st.dev, and Storybook MCP. Accepts screenshots, descriptions, or URLs as input and produces production-ready React components. Checks existing Storybook components before generating, orchestrates design extraction via Stitch MCP, component matching via 21st.dev registry, adaptation to project design tokens, and a self-healing Storybook verification loop that retries up to three times. Use when converting visual designs to code, implementing UI from mockups, or building components from screenshots. To call the MCP tool surface on its own, with no design to convert, use storybook-mcp-integration. A reusable SKILL.md agent skill by yonatangross.

Community Metrics

Categories

• Skills

Tags

• skill
• claude-skill
• github
• en

Capabilities

• 207 stars
• SKILL.md package

Information