skills.rest
scsm-unrestrict
scsm-unrestrictCOMMUNITY
Explore all skills by this author →
GitHub

design-to-code

Converts design mockups and screenshots into HTML/CSS or framework component code.

1|Updated Aug 18, 2026
Search Tags:#html#css#figma#responsive#screenshot#pixel-perfect#design-to-code
One-click install
npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill design-to-code-scsm-unrestrict
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-to-code
Source: https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent/tree/main/frontend-engineer/skills/design-to-code
Command: npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill design-to-code-scsm-unrestrict

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Turning a design image, screenshot, or Figma export into working frontend code often produces results that drift from the original: wrong colors, off spacing, missing states, and broken responsive behavior. This Skill provides a structured workflow for pixel-accurate design-to-code restoration with verification against the source image. ## Core Features & Use Cases - Structured design reading: Uses vision tools to transcribe text, measure dimensions, extract exact color values, and OCR long screenshots before writing any code. - Token-first implementation: Extracts colors, typography, spacing, radii, and shadows into CSS variables, builds semantic HTML structure, and implements mobile-first responsive layouts. - Pixel-level verification: Compares the rendered result against the original design with pixel-diff tooling, plus a checklist covering colors, fonts, spacing, states, and narrow-screen behavior. - Use Case: A designer hands you a landing page screenshot. The Skill guides you to extract design tokens, build the page in React or plain HTML/CSS, then screenshot the result and diff it against the original to catch every deviation. ## Quick Start Ask the agent to implement this design screenshot as a responsive HTML page and verify it against the original image.

Frequently Asked Questions about design-to-code

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

FAQPage Schema
How do I convert a design screenshot to HTML/CSS code?▼

Read the image with vision tools to extract layout structure, exact colors, typography, and spacing, then build semantic HTML with CSS variables for design tokens. Finish by rendering the result and running a pixel diff against the original to catch deviations.

How to implement a Figma design in React or Vue?▼

Extract design tokens (colors, fonts, spacing, radii) from the design first, then split reusable regions into framework components while respecting the project's existing styling approach such as CSS Modules, Tailwind, or scoped styles.

Can design-to-code handle responsive layouts from a single mockup?▼

Yes. It uses a mobile-first approach with flex/grid, clamp() for fluid typography, and srcset for images. Breakpoints are inferred from content behavior, and narrow-viewport rendering is checked for folding, wrapping, and overflow issues.

What happens when images or icons are missing from the design assets?▼

Missing assets are never invented. Placeholders such as placehold.co are used instead, and a list of missing assets is included in the delivery notes. Existing project icon libraries are preferred before falling back to placeholders.

How do I verify my implementation matches the original design?▼

Render the implementation with a screenshot tool and run a pixel diff against the original design image. Then walk a checklist covering colors, fonts, spacing, borders, shadows, interactive states, and text overflow.

Related Skills

Explore More Software Engineering Skills→
AIDotNetAIDotNet
634

product-design-image-to-code

Implements a reference image or mockup as a responsive interactive frontend prototype.

Official
Advanced
Hyeonjun0527Hyeonjun0527
1

validate

Run lint, format, typecheck, and build verification pipelines on code changes.

Community
Intermediate
nigamelasticnigamelastic

web-design-guidelines

Provide framework-agnostic guidelines for accessible, responsive HTML/CSS/JS interfaces aligned with WCAG 2.2.

Community
Advanced
partme-aipartme-ai
610

ant-design-react

Guide Ant Design React component usage with TypeScript and design system support.

Official
Intermediate