dev-flow

← all skills

design-md-to-app

Generate or customize a frontend app from a DESIGN.md (Google design.md spec): reads its tokens and produces a working React app pre-styled to match. Next.js 16 + App Router only; pre-16 refused. Four UI libraries — shadcn/ui, Base UI, MUI, Coss/UI (via coss-ui) — and TanStack Form + Zod (default) or react-hook-form. Bumps phase to scaffolded. Use when the user has a DESIGN.md and wants to scaffold an app, set up a theme, or customize shadcn / Base UI / MUI from its tokens: "use this DESIGN.md to start an app", "DESIGN.md → app", "scaffold from design.md", "applica il DESIGN.md a shadcn / Base UI / MUI", "crea l'app dal DESIGN.md", "init shadcn con questo DESIGN.md". Not for: mobile apps (use rn-bootstrap), writing PRDs (use prd-from-idea), or generating pages after the scaffold exists (use screenshot-to-page).

When it applies

References it ships

Get it

/plugin install dev-flow@dev-flow      # the whole suite
./install.sh --platform claude        # or drop dist/design-md-to-app.skill into Claude Code

Read design-md-to-app/SKILL.md on GitHub →