skills.rest
idy-00
idy-00COMMUNITY
Explore all skills by this author →
WebsiteGitHub

image-to-code

Converts reference screenshots and mockups into token-driven, accessible UI code.

Updated Jul 20, 2026
Search Tags:#accessibility#design system#design tokens#wcag#mockup#ui generation#screenshot to code
One-click install
npx skills add https://github.com/idy-00/paytrack --skill image-to-code-idy-00
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image-to-code
Source: https://github.com/idy-00/paytrack/tree/main/backend/.agents/skills/image-to-code
Command: npx skills add https://github.com/idy-00/paytrack --skill image-to-code-idy-00

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Recreating a design from a screenshot often produces one-off, hardcoded UI that ignores the underlying design system and fails accessibility checks. This Skill infers the design system behind a visual reference and rebuilds it as token-driven, verified code. ## Core Features & Use Cases - Design System Inference: Analyzes a reference image to extract palette, type scale, spacing, radius, and layout archetype, then maps them to a 3-tier DTCG token theme. - Token-Driven Rebuild: Generates a single theme.css and rebuilds layout and components with shared primitives, all 8 states, and accessibility wired in. - Verification Gates: Validates contrast in light and dark modes, detects hardcodes and emoji, and compares a rendered screenshot against the reference. - Use Case: A designer hands you a landing page mockup; the Skill infers its design language, builds a matching component set on one token theme, and confirms WCAG AA contrast before delivery. ## Quick Start Rebuild this attached screenshot as accessible, token-driven UI code and verify it against the reference.

Frequently Asked Questions about image-to-code

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn a screenshot into code?▼

Provide the reference image and the Skill infers its palette, type scale, spacing, radius, and layout archetype, then rebuilds the UI as token-driven components. It finishes by rendering the result and comparing a screenshot side-by-side with the reference.

How to convert a design mockup into a design system?▼

The Skill samples the mockup's colors, typography, spacing rhythm, and radius language, then maps them to a 3-tier DTCG token theme in a single theme.css. Components are rebuilt on that shared token layer rather than as one-off styled copies.

Does image-to-code produce a pixel-perfect copy of the reference?▼

No, it matches the design system, not exact pixels. It also does not reproduce photographs, logos, or copyrighted copy from the reference, substituting generic placeholders instead.

Does the generated UI meet accessibility contrast requirements?▼

Yes, every color pair is validated with contrast scripts in both light and dark modes against WCAG AA. A sampled brand color that fails AA is adjusted, since accessibility gates override aesthetic choices.

What verification checks run on the rebuilt UI?▼

Verification runs npm run verify, which checks token resolution, AA contrast in light and dark, absence of hardcodes and emoji, and real-render WCAG compliance. A rendered screenshot is also compared against the reference's design language.

Related Skills

Explore More Design & Creative Skills→
binan-makerbinan-maker

recreate-screenshot

Recreate UI screens from screenshots or image references with pixel-perfect accuracy.

Community
Advanced
SpinBoxxSpinBoxx

design-system-patterns

Standardize design tokens, theming, and component architecture across products.

Community
Advanced
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate
vikingokftvikingokft

stitch::extract-design-md

Extract a Stitch-compatible DESIGN.md from frontend source code.

Official
Intermediate