What makes Ai Image To Code notable?

2K downloads. Trust evidence available

How should Ai Image To Code be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

Ai Image To Code

Use when (1) user provides a UI screenshot or image and asks to convert it into HTML, CSS, or component code. (2) user says "turn this into code", "rebuild t... Skill: Ai Image To Code Owner: wangjipeng977 Summary: Use when (1) user provides a UI screenshot or image and asks to convert it into HTML, CSS, or component code. (2) user says "turn this into code", "rebuild t... Tags: latest:999.0.1 Version history: v3.1.0 | 2026-06-03T07:23:56.747Z | user End-to-end 17-layout coverage + validator improvements + README demo GIF (script-driven update via factory.py update) v999.0.1

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

2.0k

Updated

Oct 9, 2026

Version

3.1.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 2K downloads reported by the source. Last updated 10/9/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 9, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 9, 2026
Adoption signal: 2K downloadsadoption · observed Oct 9, 2026
Latest release: 3.1.0release · observed Jun 3, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s179qwqch3yp9926afz4rxbz0h85z9mm:ai-image-to-code

Setup complexity is classified as HIGH. You must provision dedicated cloud infrastructure or an isolated VM. Do not run this directly on your local workstation.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-wangjipeng977-ai-image-to-code/snapshot"

Documentation

CLAWHUB

146,711 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: ai-image-to-code
description: >
  Use when (1) user provides a UI screenshot or image and asks to convert it into HTML, CSS, or component code. 
  (2) user says "turn this into code", "rebuild this UI", "code this design", or "generate HTML from screenshot". 
  (3) user pastes an image and says "write the React component for this". 
license: MIT
metadata:
  version: "3.1.0"
  category: design
  author: wangjipeng
  sources:
    - https://github.com/MiniMax-AI/skills
---

# AI Image to Code

Use when (1) user provides a UI screenshot or image and asks to convert it into HTML, CSS, or component code. (2) user says "turn this into code", "rebuild this UI", "code this design", or "generate HTML from screenshot". (3) user pastes an image and says "write the React component for this".

## Core Position

This skill solves the specific problem of: *a visual UI mockup needs to become actual runnable frontend code — not just a description, but a working implementation.*

This skill IS NOT:
- An image generation tool — it converts existing images to code, not creates images
- A design tool — it interprets and codes a design, not create the design
- A backend integration tool — it outputs HTML/CSS/JS, not server code

This skill IS activated ONLY when: image (screenshot/mockup) + code generation intent are both present.

## Modes

### `/ai-image-to-code`

**Default mode.** Converts a UI image into a complete HTML/CSS implementation.

When to use: User provides a screenshot and wants a working HTML page that resembles it.

### `/ai-image-to-code/react`

Outputs a React functional component using Tailwind CSS.

When to use: User explicitly asks for React or a component, not a plain HTML page.

### `/ai-image-to-code/describe`

Provides a detailed text description of the layout without writing code.

When to use: User only wants to understand the layout before committing to code generation.

## Execution Steps

### Step 1 — Analyze the Image

1. Receive image (pasted, file attachment, or URL)
2. Use vision model to inspect the image and extract:
   - Layout structure (header, sidebar, main content, footer)
   - Color palette (primary, secondary, background, text, border/muted)
   - Typography (headings, body, labels — size and weight hierarchy)
   - Spacing system (padding, margins, gaps)
   - Component types (buttons, inputs, cards, lists, navigation)
   - Visual hierarchy (what stands out, what recedes)
3. If the image is complex (>10 distinct UI sections), focus on the main content area

### Step 2 — Plan the Code Structure

| Image Content | Recommended Output |
|---|---|
| Landing / marketing page | Single HTML with embedded CSS, stacked `<section>` blocks |
| Dashboard (with sidebar) | HTML + CSS Grid `grid-template-columns: 240px 1fr` |
| Mobile app screen | Mobile-first HTML, `max-width: 375px`, fixed bottom tab bar |
| Form / login / auth | Centered card (`max-width: 400px`), semantic `<form>` with full-width inputs |
| Card / product grid |

README.md

# AI Image to Code

[中文版](./README_zh.md)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
[![Version](https://img.shields.io/badge/version-3.1.0-blue)](SKILL.md)

> Convert a UI screenshot into runnable HTML/CSS or a React component — using vision analysis, structured code generation, and post-generation validation.

## What Problem This Solves

You have a UI mockup (screenshot, image, or design file) and you need **actual runnable frontend code** that resembles it — not a description, not a redesign, but a working HTML page or React component.

Trigger phrases: "convert this screenshot to code", "rebuild this UI", "turn this image into HTML", "code this design", "write the React component for this".

## Features

- **Three output modes**: plain HTML+CSS, React + Tailwind, or layout description only.
- **Vision-driven extraction**: sends the image to a vision model with a structured 7-section prompt template (see [Step 3 in SKILL.md](./SKILL.md#step-3--generate-code)).
- **Layout pattern recognition**: maps 17 common UI patterns (landing, dashboard, mobile, login, card grid, table, modal, etc.) to the right HTML structure — see [references/layout-patterns.md](./references/layout-patterns.md).
- **5-slot color extraction**: pulls a useful palette without overfitting — see [references/color-extraction.md](./references/color-extraction.md).
- **Tailwind-friendly output**: every visual property maps to a Tailwind class — see [references/tailwind-mapping.md](./references/tailwind-mapping.md).
- **Built-in validator**: run `scripts/validate_output.py` to catch unclosed tags, mismatched pairs, empty `href`/`src`, and excessive `<div>` nesting (with `--strict`).

## Quick Start

### Installation

```bash
# Via ClawHub
clawhub install ai-image-to-code

# Or manually
cp -r ai-image-to-code ~/.openclaw/skills/
```

### Usage

Paste or attach the image, then ask. The skill supports three modes:

```bash
# Default: HTML + CSS
/ai-image-to-code

# React + Tailwind component
/ai-image-to-code/react

# Layout description only (no code)
/ai-image-to-code/describe
```

Or just ask in natural language — the skill will match the intent.

## Directory Structure

```
ai-image-to-code/
├── SKILL.md                   # Entry point (modes, execution steps, mandatory rules)
├── LICENSE                    # MIT
├── README.md                  # This file
├── README_zh.md               # Chinese version
├── CONTRIBUTING.md            # Contribution guide
├── CHANGELOG.md               # Version history
├── _meta.json                 # ClawHub metadata
├── .gitignore
├── references/                # Reference documents
│   ├── color-extraction.md    # 5-slot palette algorithm
│   ├── layout-patterns.md     # 12 layout patterns + decision tree
│   └── tailwind-mapping.md    # Visual property → Tailwind class lookup
├── scripts/                   # Helper scripts
│   ├── validate_output.py     # HTML output validator
│   └── requirements.txt

_meta.json

{
  "ownerId": "kn70zthc74p61mvctddrancx0s832g4r",
  "slug": "ai-image-to-code",
  "version": "3.1.0",
  "publishedAt": 1780471436747
}

references/color-extraction.md

# Color Extraction Heuristics

How to pull a useful color palette from a screenshot without overfitting or losing brand identity.

**Related references**:
- [`layout-patterns.md`](./layout-patterns.md) — visual signatures of common UI patterns (so you know which regions to sample from).
- [`tailwind-mapping.md`](./tailwind-mapping.md) — how to map the 5-slot palette to Tailwind tokens (`bg-primary`, `text-text`, etc.).

## The 5-Slot Palette

Most UIs can be reduced to **5 colors**. Aim for these slots; ignore anything that doesn't fit cleanly:

| Slot | Purpose | How to identify |
|------|---------|-----------------|
| **Primary** | Brand color, primary CTAs, active states | The most saturated, distinctive color in the image (often a button background) |
| **Secondary** | Accent, secondary actions, links | Second-most distinctive color (often used for hover/focus) |
| **Background** | Page / surface base | The most common color (usually 60-80% of pixels) |
| **Text** | Body copy, headings | High contrast against background; usually near-black or near-white |
| **Border / muted** | Dividers, disabled states, secondary text | Low-saturation, mid-luminance (often a light gray) |

If the screenshot uses only 2-3 colors (e.g., a minimalist landing page), you don't need to invent more — just leave Secondary or Border empty.

## Algorithm

```
1. Sample ~50-200 points from the image (corners, midpoints, plus 10-20 random)
2. Cluster the colors (k=5, k-medoids works better than k-means for palette)
3. Rank by:
   - Saturation (HSV): higher = primary, lower = background
   - Coverage: highest = background
   - Distinctiveness (distance from other 4): edge cases
4. Map each cluster to a slot
5. Round each color to the nearest Tailwind / CSS named color
```

## Common Pitfalls

### Over-sampling backgrounds

If 80% of the image is white, your clustering will report "all white" and lose the brand color. **Pre-weight**: artificially down-weight the background cluster when ranking, or use k=6 and drop the largest.

### Picking anti-aliased edges

When you sample near text or button edges, you get **mixed colors** (half text, half background). These aren't in the palette — they are rendering artifacts. Either:

- Sample only the center of solid regions
- Or, after clustering, drop any cluster whose members are all within 10% luminance of each other AND all near a known color

### Dark mode vs light mode

The **slots stay the same**, but the values invert:

| Slot | Light mode | Dark mode |
|------|------------|-----------|
| Background | `#FFFFFF` (or off-white) | `#0F172A` (or near-black) |
| Text | `#0F172A` (near-black) | `#F1F5F9` (off-white) |
| Primary | Saturated, mid-luminance | Slightly desaturated, high-luminance accent |

To detect: check the background cluster. If luminance < 30%, it's dark mode. If > 80%, light mode. In between → ask or pick the larger of the two.

### Gradients

If the image has a gradient (e.g., hero background), **don't try to

references/index.md

# ai-image-to-code — References

Detailed documents for the `ai-image-to-code` skill. See:

- [`color-extraction.md`](./color-extraction.md) — Heuristics for pulling a color palette from a screenshot
- [`layout-patterns.md`](./layout-patterns.md) — Common UI layout structures and their HTML equivalents
- [`tailwind-mapping.md`](./tailwind-mapping.md) — Visual property → Tailwind class translation guide

Github ReposUpdated 7h agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.