skills.rest
tuantiensiu
tuantiensiuCOMMUNITY
Explore all skills by this author →
GitHub

mockup-to-code

Convert UI mockups into React, Vue, or HTML/CSS starter code.

1|Updated Jan 10, 2026
Search Tags:#frontend#prototyping#design-to-code#design-systems#component-library#mockup#ui-to-code
One-click install
npx skills add https://github.com/tuantiensiu/todo-app --skill mockup-to-code
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup-to-code
Source: https://github.com/tuantiensiu/todo-app/tree/main/.opencode/skill/mockup-to-code
Command: npx skills add https://github.com/tuantiensiu/todo-app --skill mockup-to-code

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converting UI mockups, screenshots, and design-system concepts into production-ready code reduces manual translation time and preserves visual fidelity.

Core Features & Use Cases

  • Analyze design assets to extract layout, typography, spacing, and components
  • Break designs into reusable components and define prop interfaces
  • Generate starter code in React, Vue, or plain HTML/CSS from designs and system tokens

Quick Start

Convert a Figma design into React components with a starter template.

Frequently Asked Questions about mockup-to-code

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

FAQPage Schema
How do I convert Figma designs into React components?▼

To convert Figma designs into React components, the skill analyzes UI mockups to extract layout, typography, and spacing, then generates starter code with defined prop interfaces and reusable component structures.

Can I generate Vue or plain HTML/CSS from a UI mockup?▼

Yes, you can generate Vue or plain HTML/CSS from a UI mockup. The skill translates design assets into production-ready code, allowing you to output starter implementations across React, Vue, or standard HTML/CSS formats.

What is the process for breaking down a design into reusable components?▼

The process for breaking down a design into reusable components involves a structured workflow where the skill analyzes design assets, extracts visual properties, and defines prop interfaces to output modular, production-ready code implementations.

Does design-to-code translation work with Sketch files?▼

Yes, design-to-code translation works with Sketch files. The skill supports converting design assets from tools like Figma and Sketch by analyzing the visual properties to generate structured, framework-specific starter code.

What's the best way to translate design-system tokens into starter code?▼

The best way to translate design-system tokens into starter code is by using the skill's structured workflow to map extracted typography and spacing rules directly into framework-specific reusable components and prop interfaces.

Related Skills

Explore More Design & Creative Skills→
staruhubstaruhub
662

ui-analyzer

Analyze UI design screenshots to generate React TypeScript components with Tailwind CSS.

Community
Intermediate
magic3007magic3007
10

frontend-design

Translate frontend requirements into production-ready UI with code samples.

Community
Advanced
mahou-labsmahou-labs
1

normalize

Normalize feature UI to align with design-system tokens and components.

Official
Advanced
c-bassoc-basso

frontend-design

Automates design-to-code workflows for React, Vue, or HTML/CSS frontend interfaces.

Community
Advanced