design-to-code

# Design to Code Convert visual designs into production-ready React components using a four-stage pipeline: Extract, Match, Adapt, Render. ```bash /ork:design-to-code screenshot of hero section # From description /ork:design-to-code /tmp/mockup.png # From screenshot /ork:design-to-code https://example.com/pricing # From URL ``` ## Pipeline Overview ``` Input (screenshot/description/URL) │ ▼ ┌─────────────────────────┐ │ Stage 1: EXTRACT │ Stitch MCP → HTML + design context │ build_site │ Generate up to 5 screens from prompt │ get_screen_code / _image │ Extract React/HTML + PNG for each └─────────┬───────────────┘ │ ▼ ┌─────────────────────────┐ │ Stage 2: MATCH │ 1. Storybook MCP → check existing │ Storybook-first lookup │ 2. 21st.dev → search public registry │ Then 21st.dev fallback │ 3. Filesystem → grep codebase └─────────┬───────────────┘ │ ▼ ┌─────────────────────────┐ │ Stage 3: ADAPT │ Merge extracted design + matched │ Apply project tokens │ components into final implementation │ Customize to codebase │ Tests + types included └─────────┬───────────────┘ │ ▼ ┌─────────────────────────┐ │ Stage 4: RENDER │ Register as json-render catalog entry │ Generate Zod schema │ Same component → PDF, email, video │ Add to defineCatalog() │ Multi-surface reuse via MCP output └─────────┬───────────────┘ │ ...