skills.rest
ReadyToGo-Education
ReadyToGo-EducationOFFICIAL
Explore all skills by this author →
GitHub

ui-reverse-engineer

Converts UI reference images into single-file HTML with extracted design tokens and Image Manifest.

15|16|Updated May 6, 2026
Search Tags:#html generation#accessibility#design tokens#pixel-perfect#image sourcing#component spec#ui reconstruction
One-click install
npx skills add https://github.com/ReadyToGo-Education/fluxo_criativo --skill ui-reverse-engineer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-reverse-engineer
Source: https://github.com/ReadyToGo-Education/fluxo_criativo/tree/main/.claude/skills/ui-reverse-engineer
Command: npx skills add https://github.com/ReadyToGo-Education/fluxo_criativo --skill ui-reverse-engineer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Reverse-engineers a user-provided UI screenshot or mockup into a faithful, production-ready single-file HTML artifact.

Core Features & Use Cases

  • Pixel-faithful recreation: Preserves intentional imperfections, including asymmetry, overlaps, and decorative “artistic chaos.”
  • Design-system extraction: Extracts design tokens (colors, spacing, radius, typography, z-index, motion) and converts them into a normalized schema.
  • Reusable component architecture: Produces a component and typography manifest with anatomy, variants, and constraints.
  • Reliability for images: Enforces a mandatory Image Manifest and prevents broken Unsplash-ID links by using a tiered image sourcing protocol.

Quick Start

Use the ui-reverse-engineer skill on the uploaded UI screenshot and ask it to rebuild the design as a single-file HTML page.

Frequently Asked Questions about ui-reverse-engineer

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

FAQPage Schema
How do I convert a UI screenshot to HTML code?▼

To convert a UI screenshot to HTML, upload the image and the tool reverse-engineers it into a single-file HTML page with pixel-accurate recreation, extracted design tokens, and a component architecture.

Can I extract design tokens from an image mockup?▼

Yes, you can extract design tokens from an image mockup by analyzing the screenshot to capture colors, spacing, radius, typography, z-index, and motion, converting them into a normalized schema.

How do I turn a Figma export into production-ready HTML?▼

Turn a Figma export into production-ready HTML by using the image to generate a faithful single-file artifact that preserves intentional imperfections, includes an Image Manifest, and enforces full accessibility constraints.

Does UI reconstruction preserve asymmetric and overlapping design elements?▼

UI reconstruction preserves asymmetric and overlapping design elements by maintaining pixel-faithful recreation that intentionally keeps decorative artistic chaos and original layout imperfections intact.

How are missing images handled when generating HTML from a screenshot?▼

Missing images are handled during HTML generation through a mandatory Image Manifest that uses a deterministic tiered image sourcing protocol, preventing broken links and ensuring reliable visual output.

What is the best way to generate an accessible single-file HTML page from a UI reference?▼

The best way to generate an accessible single-file HTML page from a UI reference is to process the screenshot through a tool that enforces full accessibility constraints and outputs a self-contained production-grade artifact.

Related Skills

Explore More Design & Creative Skills→
easingthemeseasingthemes
6

dx-figma-extract

Extract design context, tokens, and screenshots from a Figma URL.

Community
Advanced
sjoerdbeentjessjoerdbeentjes

frontend-design

Design production-grade frontend interfaces with accessible, responsive HTML/CSS/JS.

Community
Intermediate
PhucMPhamPhucMPham

ai-artist

Craft optimized prompts for LLMs, image generators, and video tools.

Community
Advanced
Eva813Eva813
2

pixel-diff

Compare two screenshots at the pixel level and generate a diff image with JSON statistics.

Community
Intermediate