Screenshot to Modular Code

A Codex skill for turning UI screenshots and mockups into implementation-ready code without generating a giant one-file page. It first extracts a structured UI spec, then builds the page module by module.

中文版本：README.zh-CN.md.

What It Solves

Screenshot-to-code workflows often jump straight from image to full-page code. That usually creates brittle layout, hard-coded pixels, duplicated design tokens, and components that are difficult to reuse.

This skill forces a better sequence: analyze the UI first, document the visible design system, split the page into modules, then generate code in controlled batches.

Who It Is For

This skill is for developers using Codex, Claude Code, Cursor, or similar coding agents to implement UI from screenshots, product mockups, or design references.

It is especially useful when you want the agent to:

• extract layout, color, typography, spacing, and interaction clues before coding
• reuse an existing project stack and design system
• split implementation into header, sidebar, content, cards, tables, and final composition
• avoid one huge generated component
• make uncertainty explicit when the image is blurry, cropped, or partially hidden

What It Enforces

• Ask for the target stack only when it cannot be inferred
• Output a structured UI spec before code
• Estimate HEX colors, typography, spacing rhythm, and component order
• Mark unreadable screenshot regions instead of guessing silently
• Reuse existing project tokens and components when available
• Generate code module by module
• Avoid default tests, Storybook stories, dependencies, routes, and API calls unless requested

Skill Preview

Core rule: do not generate the whole page in one shot unless the user explicitly asks or the page is trivial. First extract a UI spec, then implement by modules.

Full skill: SKILL.md

How To Use

Install the skill into your Codex skills directory, then restart Codex.

mkdir -p ~/.codex/skills/screenshot-to-modular-code
curl -L https://raw.githubusercontent.com/aidenfausto/screenshot-to-modular-code/main/SKILL.md \
  -o ~/.codex/skills/screenshot-to-modular-code/SKILL.md

Then upload a UI screenshot or mockup and ask the agent to implement it.

Example prompt:

Use this screenshot as the reference. First extract the UI spec, then implement it in the current Vue project module by module.

License

MIT. See LICENSE.md.