Design To Html

Convert design images to pixel-perfect HTML/CSS by analyzing layout, colors, fonts, then iteratively refining code through automated visual comparison.

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

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