Design to code

Skill onfire7777/universal-ai-skills-library/skills/design-to-code

Implements UI from design mockups (Figma, Sketch, or image) with pixel-accurate layout, responsive behavior, and design tokens.From its SKILL.md

Install

npx -y skills add onfire7777/universal-ai-skills-library --skill design-to-code

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

13 stars13 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its file declares

Copied from the file, not written here

The file declares its own license as Unspecified. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

2.8 KB, 584 tokens by cl100k_base, as published. Nobody here has run it

Design to Code (Restore Design Mockups)

Faithfully convert design mockups (Figma/Sketch/image) into frontend code, ensuring consistency in layout, spacing, typography, colors, and interactions.

Trigger Scenarios

User says "design to code," "implement according to design," "slice images," or "convert design to code"
Provides Figma/Sketch link, design screenshot, or annotations
Needs to implement UI for a specific page/component

Execution Process

1. Analyze the Design Mockup

Annotations: dimensions, spacing (padding/margin/gap), font size and line height, colors (including opacity), border radius, shadows, borders
Hierarchy: component division, nesting relationships, reusable modules
States: default / hover / focus / disabled / loading / empty / error
Responsive: breakpoints, layout changes at different widths (grid, wrapping, hiding)

2. Align Design Tokens

Map colors, font sizes, and spacing to existing project CSS variables or Tailwind configuration whenever possible
If no existing tokens, use variable naming (e.g., --color-primary) during implementation for future unification

3. Implementation Priority

Layout: Build skeleton with Flex/Grid to ensure alignment and spacing
Typography: font family, size, weight, line height, color
Visuals: background, borders, border radius, shadows
Interaction States: hover/focus/disabled, etc.
Responsive: breakpoints and flexible layouts
Animations: add transitions/animations if specified in design

4. Self-Check for Fidelity

Key dimensions match design mockup (allowing 1–2px difference)
Fonts and colors match design
Layout is reasonable and without misalignment at main breakpoints
Interactive elements have clear state feedback

Output Conventions

Use existing project tech stack (e.g., Next.js, Tailwind, SCSS, component libraries)
Componentization: extract reusable parts into clearly named components
Semantic HTML + appropriate ARIA (buttons, links, forms)
Note any deviations from design and reasons (e.g., compatibility, accessibility) when necessary

Common Correspondences

Design Mockup	Implementation Method
8px grid	Spacing uses multiples of 8 (8/16/24/32)
Typography hierarchy	Corresponds to semantic classes like heading/body/caption or design tokens
Blur/Frosted glass	backdrop-filter + semi-transparent background
Multi-line truncation	line-clamp or -webkit-line-clamp
Safe area	padding combined with env(safe-area-inset-*)

What ships with it: 3 files

1.8 KB alongside SKILL.md