skills.rest
jiushiwon
jiushiwonCOMMUNITY
Explore all skills by this author →
GitHub

ui-replica-skill

Convert UI screenshots and design mockups into runnable HTML, Vue, or React code.

44|11|Updated Jun 1, 2026
Search Tags:#html generation#react#vue#design tokens#screenshot to code#ui replication#prototype conversion
One-click install
npx skills add https://github.com/jiushiwon/wg-skills --skill ui-replica-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-replica-skill
Source: https://github.com/jiushiwon/wg-skills/tree/main/ui-replica-skill
Command: npx skills add https://github.com/jiushiwon/wg-skills --skill ui-replica-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill solves the difficulty of accurately converting UI screenshots, prototypes, and design mockups into runnable, maintainable web code without losing the original layout, visual hierarchy, or styling details.

Core Features & Use Cases

  • Structured Visual Analysis: Breaks images into pages, sections, cards, and elements while identifying colors, typography, spacing, borders, shadows, icons, and special components.
  • Design Token Consolidation: Extracts and standardizes visual tokens for consistent colors, spacing, radii, shadows, and font scales.
  • Multi-Stack Code Generation: Produces single-file HTML with Tailwind CSS by default, or generates Vue, React, uni-app, and project-integrated implementations when requested.
  • Complex Element Handling: Simulates charts, maps, QR codes, forms, animations, and upload interfaces with code before falling back to clearly documented placeholders.
  • Use Case: Give the Skill a Stitch, Figma, or AI-generated interface screenshot and ask it to recreate the page as a responsive Vue component with an accompanying structure analysis and visual token table.

Quick Start

Ask the UI replica skill to recreate the attached screenshot as a single-file HTML page.

Frequently Asked Questions about ui-replica-skill

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

FAQPage Schema
How do I convert a UI screenshot into runnable code?▼

To convert a UI screenshot into runnable code, provide the image to the Skill, which analyzes the visual structure, extracts design tokens, and generates production-ready HTML, Vue, or React components preserving the original layout.

Can I generate Vue or React components from a Figma design mockup?▼

Yes, you can generate Vue or React components from a Figma design mockup. The Skill performs structured image analysis and produces stack-aware code for Vue, React, uni-app, or single-file HTML projects.

How does screenshot to code handle responsive design and complex elements?▼

Screenshot to code handles responsive design and complex elements by applying responsive behavior and simulating charts, maps, and forms with code, falling back to clearly documented placeholders only when necessary.

What are design tokens and how are used during UI replication?▼

Design tokens are standardized visual attributes like colors, spacing, radii, and font scales extracted during UI replication. They are consolidated to ensure consistent styling across the generated codebase.

Does this tool work with AI-generated interfaces and Stitch designs?▼

Yes, this tool works with AI-generated interfaces and Stitch designs. It accurately converts these screenshots into maintainable web code without losing the original visual hierarchy or styling details.

What are the limitations of converting prototypes to code automatically?▼

A limitation of converting prototypes to code automatically is that highly complex elements may require fallback documented placeholders, and visual validation guidance is needed to ensure the generated responsive code matches the original mockup perfectly.

Related Skills

Explore More Design & Creative Skills→
FoundationForgeFoundationForge

design-critique

Critique UI designs from Figma links, screenshots, or descriptions.

Official
Intermediate
KuassKuass
1

mockup-to-code

Convert UI mockups and design files into React, Vue, or HTML/CSS code.

Community
Advanced
jg-chalk-iojg-chalk-io

moai-lang-tailwind-css

Apply Tailwind CSS utility classes with design tokens and responsive breakpoints.

Community
Advanced
ambush0421ambush0421

frontend-ui-ux-engineer

Redesign React components with improved visual hierarchy and interaction design.

Community
Intermediate