Individual skill

screenshot-to-code

Turns a screenshot, mockup, Figma export, or photo of a UI into working front-end code - React + Tailwind CSS v4 by default, or Next.js, Vue, or plain HTML/CSS - matching layout, spacing, colors, and typography, then renders the result and compares it against the image to close visual gaps. Use whenever the user shares an image of a website, app screen, dashboard, component, or wireframe and wants it built, cloned, recreated, or "made real", or says "code this up", "build this design", or "match this screenshot".

screenshot-to-code/SKILL.md

Read pinned source

Source commit b2267d9171af4f56848d82992381b20b89b44056

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: No
Repository scan complete: No
Skill scan complete: No
Observed behavior: Not checked yet
Last checked: Nov 10, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 427
Repository last updated: Oct 20, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

agent-skills Repository topic
ai-agents Repository topic
anthropic Repository topic
claude Repository topic
claude-code Repository topic
claude-skills Repository topic
developer-tools Repository topic
llm Repository topic
prompt-engineering Repository topic
sales-automation Repository topic
design Derived category
engineering Derived category
design-interface Derived category
engineering-web Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 5,904 bytes
SKILL.mdcore · 5,904 bytes
references/stack-setup.mddoc · 3,195 bytes
references/visual-check.mddoc · 2,003 bytes

Read excerpt


# Screenshot to Code

Recreate the UI in the image as clean, responsive, accessible code, then check the render against the image.

## Workflow

1. **Pick the target stack.** If the user is inside a project, match it: read `package.json` for React/Next/Vue and the Tailwind version, and reuse existing components, tokens, and icon libraries. Do not ask when the repo already answers it. With no project:
   - Single screen or quick prototype: one self-contained `index.html` (Tailwind via the browser build, see [references/stack-setup.md](references/stack-setup.md)).
   - App or multi-screen: React + TypeScript + Tailwind v4 on Vite.
   - User mentions Next.js, SSR, or routing: Next.js App Router.

2. **Write a short spec before coding.** Looking at the image, note:
   - Layout regions top to bottom (nav, hero, sidebar, grid, footer) and the grid or flex structure of each
   - Design tokens: 3-6 colors as hex, font family guess and the type scale, spacing rhythm (usually multiples of 4px), corner radius, shadow style