dev-flow

← all skills

screenshot-to-page

Generate a real, working page (route + components) inside an already-scaffolded app from a single UI screenshot, applying the project's DESIGN.md tokens and the existing UI library (shadcn, Base UI, MUI, or Coss). Reads a screenshot from .workflow/screenshots/, plus .workflow/DESIGN.md and .workflow/meta.json for tokens and stack, then writes the route into the codebase at the project root. Use when the user says "fai questa pagina dallo screenshot", "build the home page from this image", "/journal route from this PNG", "convert this mockup to code", or the orchestrator routes here from phase scaffolded with unmapped screenshots present. Not for: scaffolding the app from scratch (use design-md-to-app), extracting tokens from Figma (use figma-to-design-md), or wiring backend modules (use module-add).

When it applies

References it ships

Get it

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

Read screenshot-to-page/SKILL.md on GitHub →