mockup-to-code

Name: mockup-to-code
Availability: InStock
Author: tuantiensiu

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

Ready to run

npx skills add https://github.com/tuantiensiu/todo-app --skill mockup-to-code

💬 Prompt for ChatGPT / Claude Chat▼

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.