Let me introduce this Skill. It was developed and refined through multiple project presentations to clients, and has been repeatedly validated in my own practice.

This is a Codex & Claude Skill specifically designed to convert visible UI reference images into high-quality HTML/CSS.

It breaks down design restoration into a verifiable workflow: first, analyze the page structure; then, distinguish which elements should be implemented in code and which should be retained as image assets; and finally, calibrate repeatedly through real browser screenshots to reduce that “close but cheap” visual deviation.

Core capabilities:

1. Screenshot / Mockup / Figma export → HTML Suitable for converting visual references such as SaaS pages, Dashboards, Landing Pages, empty states, and product interface screenshots into high-fidelity HTML/CSS pages.

2. Analyze design first, then write code It first generates a concise page map: layout proportions, component hierarchy, color system, typography hierarchy, spacing, border-radius, shadows, and complex visual assets — avoiding structural drift from jumping directly from image to code.

3. Separate code UI from image assets Navigation, cards, forms, buttons, tables, etc. are implemented with HTML/CSS; logos, complex illustrations, product screenshots, people images, 3D visuals, etc. are treated as assets — not forced into CSS drawing.

4. Canvas size and browser preview adaptation Clearly distinguishes between the reference canvas and the display viewport, avoiding overflow, cropping, scaling misalignment, excessive black bars, etc. when a fixed-size design is viewed in a browser.

5. Real browser screenshot verification After implementation, it renders in a browser and takes a screenshot. It compares with the reference image to check layout, proportions, spacing, fonts, colors, cropping, and overall density, then iteratively corrects specific errors.

6. Suitable for high-fidelity visual reproduction, not for generating design from text alone This Skill is primarily used for restoring existing visual references. If you only describe a page idea without a screenshot or mockup, you should use the normal frontend design process instead of triggering this workflow.

A visual restoration workflow Skill that turns UI screenshots into high-quality HTML/CSS. Through analysis, asset separation, canvas adaptation, and screenshot verification, it transforms vague visuals into editable asset files.

You can also use this Skill to restore the design of a specific module you want.

Using a calendar screenshot example to directly generate, the result is very good. https://github.com/KyrieCheungYep/ky-design-to-html-skill…

KyrieCheungYep/ky-design-to-html-skill

Source: https://github.com/KyrieCheungYep/ky-design-to-html-skill

KY Design to HTML Skill

KY Design to HTML is not a UI-to-image skill. It is primarily focused on converting existing UI screenshots or design drafts into HTML/CSS, emphasizing asset separation, canvas adaptation, screenshot verification, and visual error correction. Designed for use with Codex / Claude as a design screenshot to HTML/CSS skill.

It is suitable for scenarios like:

• Give an AI a UI screenshot and have it convert it to HTML/CSS
• Turn a landing page design draft into a static web page
• Restore SaaS pages, admin pages, empty state pages into front-end pages
• Prevent AI from directly generating HTML from an image that results in distorted layout, blurry assets, or incorrect proportions

What problem does this skill solve?

Many people directly tell the AI:

Generate HTML based on this image.

But this often fails.

Because the AI is forced to do three things at once:

• Understand the page structure
• Replicate the visual style
• Temporarily draw complex visual assets

This skill makes the AI break down the task first:

• Which parts should be written in HTML/CSS
• Which parts should be treated as image assets
• What canvas proportion should the page use
• After writing, take a screenshot to verify where it doesn’t match

The core workflow is:

1. First, analyze the page map
2. Separate code structure and visual assets
3. Set design draft canvas and browser display proportions
4. Write HTML/CSS
5. Take a browser screenshot for verification
6. Compare and correct visual errors

Installation

Codex

Copy the ky-design-to-html folder to:

~/.codex/skills/ky-design-to-html

Claude

Copy the ky-design-to-html folder to:

~/.claude/skills/ky-design-to-html

Usage

In Codex or Claude, you can say:

Use $ky-design-to-html to recreate this UI screenshot as a standalone HTML/CSS page.

Or in Chinese:

使用 ky-design-to-html,把这张 UI 截图还原成一个 HTML/CSS 页面。

File Structure

ky-design-to-html/
├── SKILL.md
├── agents/
│   └── openai.yaml
├── references/
│   ├── asset-handling.md
│   └── visual-error-taxonomy.md
└── scripts/
    └── screenshot_page.py

Notes

The goal of this skill is not to let the AI generate a perfect page in one go.

Its goal is to let the AI work through the correct workflow:

Analyze → Separate assets → Set canvas → Write code → Screenshot → Compare → Correct

The true restoration quality comes from the screenshot calibration step.

Kyrie (@KyrieCheungYep): I’ve organized it into a skill and uploaded it to GitHub. When you get an AI-generated image or any design you like and want to turn it into HTML, you can use this skill to generate it👇🏻