name: design-to-html description: Convert visual design mockups/images to pixel-perfect HTML/CSS code through iterative refinement. Use when user wants to: (1) Convert a design image/screenshot to HTML code, (2) Generate web pages from visual mockups, (3) Create HTML that matches a design pixel-by-pixel, (4) Iteratively improve HTML to match visual design. Triggers on phrases like "convert design to HTML", "from image to code", "pixel-perfect HTML", "design mockup to code". metadata: openclaw: requires: env: [] primaryEnv: null

Design to HTML

Convert visual design images to pixel-perfect HTML/CSS through iterative refinement with automated visual comparison.

Workflow

Input: Design image (PNG/JPG)
Output: HTML/CSS code + comparison report

Process:
1. Analyze design → Generate initial HTML
2. Render HTML → Compare with original
3. Generate diff report → Optimize HTML
4. Repeat 5 times or until 95% match
5. Output final code + report

Step 1: Initialize

Command: /design-to-html <image-path> [--threshold 95] [--iterations 5]

Actions: 1. Load design image 2. Extract dimensions (width, height) 3. Analyze visual structure (layout, colors, fonts, spacing) 4. Generate initial HTML/CSS

Example prompt:

Analyze this design mockup and generate HTML/CSS code that recreates it.

Design dimensions: {width}x{height}px
Key elements detected:
- Layout type: [grid/flex/block]
- Primary colors: [list]
- Font styles: [list]
- Spacing patterns: [list]

Generate complete HTML with inline CSS.

Step 2: Render & Compare (Iteration Loop)

Run comparison script for each iteration:

node scripts/compare.js <original-image> <html-file> <output-dir> <iteration>

Script outputs: - rendered_<n>.png - HTML screenshot - diff_<n>.png - Visual difference map - report_<n>.json - Comparison metrics

Comparison metrics: - matchScore - Pixel similarity percentage - diffPixels - Number of mismatched pixels - issues - List of detected problems

Step 3: Generate Diff Report

Report structure (passed to model):

{
  "iteration": 2,
  "matchScore": 78.5,
  "diffPixels": 21500,
  "issues": [
    {
      "type": "color",
      "location": {"x": 100, "y": 200, "w": 50, "h": 30},
      "description": "Button background color mismatch: expected #FF5733, got #FF5722",
      "severity": "medium"
    },
    {
      "type": "spacing",
      "location": {"x": 150, "y": 100, "w": 200, "h": 50},
      "description": "Padding mismatch: expected 20px, got 15px",
      "severity": "high"
    }
  ]
}

Step 4: Optimize HTML

Model prompt template:

## Iteration {iteration}/{maxIterations}

**Current match score**: {matchScore}%
**Target**: {threshold}%

**Issues detected**:
{issuesFormatted}

**Visual difference**: See diff_{iteration}.png

**Previous HTML**:
```html
{previousHtml}

Optimization instructions: 1. Fix color mismatches (use exact hex values) 2. Correct spacing/padding issues 3. Adjust layout positioning 4. Match font sizes and weights

Output optimized HTML code only.

## Step 5: Final Output

**Completion criteria**:
- Match score ≥ threshold (default 95%)
- OR completed max iterations (default 5)

**Output package**:
- `final.html` - Final HTML/CSS code
- `comparison_report.md` - Iteration history
- `rendered_final.png` - Final screenshot
- `diff_final.png` - Final comparison
- `timeline/` - All iteration screenshots

## Scripts

### render.js
Render HTML to PNG screenshot using Puppeteer.

```bash
node scripts/render.js <html-file> <output-image> [--width 1920] [--height 1080]

compare.js

Pixel-level comparison using pixelmatch.

node scripts/compare.js <original> <rendered> <diff-output> [--threshold 0.1]

analyze.js

Analyze design image structure.

node scripts/analyze.js <image-file> <output-json>

pipeline.js

Run full iteration pipeline.

node scripts/pipeline.js <original-image> [--threshold 95] [--iterations 5] [--output-dir ./output]

Setup

Install dependencies:

cd ~/.openclaw/skills/design-to-html
npm install

Dependencies: - puppeteer - HTML rendering - pixelmatch - Pixel comparison - pngjs - PNG processing - sharp - Image analysis

Examples

Simple button design

Input: button.png (200x50px)
Iterations: 3
Final score: 96.2%
Time: ~25s
7w4.net小蔥技能站收錄全網優質技能，值得收藏。

Card component

Input: card.png (400x300px)
Iterations: 5
Final score: 91.8%
Time: ~45s

Full page layout

Input: landing-page.png (1920x1080px)
Iterations: 5
Final score: 87.5%
Time: ~90s

Tips

1. Higher threshold → More iterations, better accuracy
2. Larger images → More diff pixels, harder to reach threshold
3. Complex layouts → May need manual tweaks after automation
4. Color precision → Use exact hex values from design
5. Font matching → Specify exact font-family, size, weight

Limitations

• Requires Node.js + Puppeteer (headless Chrome)
• May struggle with:
• Complex gradients
• SVG icons
• Custom fonts (not web-safe)
• Animations/transitions
• Best for static, flat designs

這個 Skill 的文件和流程設計比較清晰，但實際效果可能不太穩定。設計圖分析能力比較基礎，生成的 HTML 程式碼質量主要依賴 AI 模型的理解能力，可能需要多次手動調整才能達到理想的畫素匹配效果。安裝過程可能遇到問題，另外文件中提到的部分示例檔案缺失。總體來說，適合有技術基礎的使用者嘗試使用。