{"id":"dc33d45c-df4a-49e5-8f65-91a547d56425","entityType":"agent","slug":"clawhub-wangjipeng977-ai-image-to-code","name":"Ai Image To Code","canonicalUrl":"https://www.xpersona.co/agent/clawhub-wangjipeng977-ai-image-to-code","canonicalPath":"/agent/clawhub-wangjipeng977-ai-image-to-code","generatedAt":"2026-10-10T03:52:54.473Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-09T21:12:05.778Z","emptyReason":null},"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 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","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 2K downloads reported by the source. Last updated 10/9/2026.","installCommand":"clawhub skill install s179qwqch3yp9926afz4rxbz0h85z9mm:ai-image-to-code","sourceUrl":"https://clawhub.ai/wangjipeng977/ai-image-to-code","homepage":"https://clawhub.ai/wangjipeng977/skills/ai-image-to-code","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/wangjipeng977/ai-image-to-code","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/wangjipeng977/skills/ai-image-to-code","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":66,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"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..."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-09T21:12:05.778Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-09T21:12:05.778Z","emptyReason":null},"stars":null,"forks":null,"downloads":1991,"packageName":null,"latestVersion":"3.1.0","tractionLabel":"2K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-09T21:12:05.745Z","emptyReason":null},"lastUpdatedAt":"2026-10-09T21:12:05.778Z","lastCrawledAt":"2026-10-09T21:12:05.745Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-10T21:12:05.745Z","lastVerifiedAt":null,"highlights":[{"version":"3.1.0","createdAt":"2026-06-03T07:23:56.747Z","changelog":"End-to-end 17-layout coverage + validator improvements + README demo GIF (script-driven update via factory.py update)","fileCount":17,"zipByteSize":40091},{"version":"999.0.1","createdAt":"2026-05-31T15:24:48.400Z","changelog":"Retry publish","fileCount":9,"zipByteSize":9914},{"version":"2.0.3","createdAt":"2026-05-29T09:36:49.466Z","changelog":"Initial release","fileCount":9,"zipByteSize":9871},{"version":"1.0.8","createdAt":"2026-05-28T18:19:42.799Z","changelog":"Retry publish","fileCount":9,"zipByteSize":9922},{"version":"99.0.0","createdAt":"2026-05-28T02:58:30.261Z","changelog":"Initial release","fileCount":9,"zipByteSize":11912},{"version":"1.2.0","createdAt":"2026-05-27T22:53:41.381Z","changelog":"Initial release","fileCount":9,"zipByteSize":11088},{"version":"2.1.0","createdAt":"2026-05-27T19:50:58.913Z","changelog":"Retry publish with new version","fileCount":9,"zipByteSize":12083},{"version":"999.0.0","createdAt":"2026-05-27T06:34:57.089Z","changelog":"Initial release","fileCount":9,"zipByteSize":11915}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s179qwqch3yp9926afz4rxbz0h85z9mm:ai-image-to-code","setupComplexity":"low","setupSteps":["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":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-wangjipeng977-ai-image-to-code/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-wangjipeng977-ai-image-to-code/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-wangjipeng977-ai-image-to-code/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-wangjipeng977-ai-image-to-code/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-wangjipeng977-ai-image-to-code/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-wangjipeng977-ai-image-to-code/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-10T03:52:54.470Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-wangjipeng977-ai-image-to-code/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-wangjipeng977-ai-image-to-code/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-wangjipeng977-ai-image-to-code/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-wangjipeng977-ai-image-to-code/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-09T21:12:05.778Z","emptyReason":null},"readme":"Skill: Ai Image To Code\n\nOwner: wangjipeng977\n\nSummary: 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...\n\nTags: latest:999.0.1\n\nVersion history:\n\nv3.1.0 | 2026-06-03T07:23:56.747Z | user\n\nEnd-to-end 17-layout coverage + validator improvements + README demo GIF (script-driven update via factory.py update)\n\nv999.0.1 | 2026-05-31T15:24:48.400Z | user\n\nRetry publish\n\nv2.0.3 | 2026-05-29T09:36:49.466Z | user\n\nInitial release\n\nv1.0.8 | 2026-05-28T18:19:42.799Z | user\n\nRetry publish\n\nv99.0.0 | 2026-05-28T02:58:30.261Z | user\n\nInitial release\n\nv1.2.0 | 2026-05-27T22:53:41.381Z | user\n\nInitial release\n\nv2.1.0 | 2026-05-27T19:50:58.913Z | user\n\nRetry publish with new version\n\nv999.0.0 | 2026-05-27T06:34:57.089Z | user\n\nInitial release\n\nv9.9.9 | 2026-05-26T22:22:04.357Z | user\n\nInitial release\n\nv6.0.1 | 2026-05-25T21:53:53.992Z | user\n\nInitial release\n\nv6.0.0 | 2026-05-25T16:47:32.654Z | user\n\nUpdate skill\n\nv1.5.0 | 2026-05-25T03:11:58.783Z | user\n\nRetry release v1.5\n\nv1.0.5 | 2026-05-20T20:15:21.815Z | user\n\nRetry with new version\n\nv5.0.0 | 2026-05-20T19:14:10.013Z | user\n\nRetry publish\n\nv4.0.0 | 2026-05-20T06:54:06.406Z | user\n\nInitial release\n\nv3.0.0 | 2026-05-19T20:42:23.053Z | user\n\nInitial release\n\nv2.0.1 | 2026-05-19T18:38:21.483Z | user\n\nRetry with bumped version\n\nv1.1.0 | 2026-05-19T17:37:06.385Z | user\n\nRetry publication\n\nv2.0.0 | 2026-05-19T11:27:58.845Z | user\n\nRetry with new version\n\nv1.0.3 | 2026-05-19T09:04:28.947Z | user\n\nFix display name: Image To Code → AI Image To Code\n\nv1.0.2 | 2026-05-19T08:40:22.909Z | user\n\nUpdate files after rename\n\nv1.0.1 | 2026-05-19T05:56:31.074Z | user\n\nUpdate README with real Features and 功能特性 content\n\nv1.0.0 | 2026-05-19T05:25:17.397Z | user\n\nInitial release\n\nArchive index:\n\nArchive v3.1.0: 17 files, 40091 bytes\n\nFiles: _meta.json (135b), CHANGELOG.md (3336b), CONTRIBUTING.md (3412b), README_zh.md (4316b), README.md (9594b), references/color-extraction.md (3791b), references/index.md (416b), references/layout-patterns.md (6788b), references/tailwind-mapping.md (6114b), scripts/requirements.txt (90b), scripts/validate_output.py (11383b), skill-card.md (2698b), SKILL.md (9704b), tests/test_landing_fixture.py (3984b), tests/test_layout_fixtures.py (8987b), tests/test_skill.py (12072b), tests/test_validate_output.py (11445b)\n\nFile v3.1.0:SKILL.md\n\n---\nname: ai-image-to-code\ndescription: >\n  Use when (1) user provides a UI screenshot or image and asks to convert it into HTML, CSS, or component code. \n  (2) user says \"turn this into code\", \"rebuild this UI\", \"code this design\", or \"generate HTML from screenshot\". \n  (3) user pastes an image and says \"write the React component for this\". \nlicense: MIT\nmetadata:\n  version: \"3.1.0\"\n  category: design\n  author: wangjipeng\n  sources:\n    - https://github.com/MiniMax-AI/skills\n---\n\n# AI Image to Code\n\nUse 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\".\n\n## Core Position\n\nThis 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.*\n\nThis skill IS NOT:\n- An image generation tool — it converts existing images to code, not creates images\n- A design tool — it interprets and codes a design, not create the design\n- A backend integration tool — it outputs HTML/CSS/JS, not server code\n\nThis skill IS activated ONLY when: image (screenshot/mockup) + code generation intent are both present.\n\n## Modes\n\n### `/ai-image-to-code`\n\n**Default mode.** Converts a UI image into a complete HTML/CSS implementation.\n\nWhen to use: User provides a screenshot and wants a working HTML page that resembles it.\n\n### `/ai-image-to-code/react`\n\nOutputs a React functional component using Tailwind CSS.\n\nWhen to use: User explicitly asks for React or a component, not a plain HTML page.\n\n### `/ai-image-to-code/describe`\n\nProvides a detailed text description of the layout without writing code.\n\nWhen to use: User only wants to understand the layout before committing to code generation.\n\n## Execution Steps\n\n### Step 1 — Analyze the Image\n\n1. Receive image (pasted, file attachment, or URL)\n2. Use vision model to inspect the image and extract:\n   - Layout structure (header, sidebar, main content, footer)\n   - Color palette (primary, secondary, background, text, border/muted)\n   - Typography (headings, body, labels — size and weight hierarchy)\n   - Spacing system (padding, margins, gaps)\n   - Component types (buttons, inputs, cards, lists, navigation)\n   - Visual hierarchy (what stands out, what recedes)\n3. If the image is complex (>10 distinct UI sections), focus on the main content area\n\n### Step 2 — Plan the Code Structure\n\n| Image Content | Recommended Output |\n|---|---|\n| Landing / marketing page | Single HTML with embedded CSS, stacked `<section>` blocks |\n| Dashboard (with sidebar) | HTML + CSS Grid `grid-template-columns: 240px 1fr` |\n| Mobile app screen | Mobile-first HTML, `max-width: 375px`, fixed bottom tab bar |\n| Form / login / auth | Centered card (`max-width: 400px`), semantic `<form>` with full-width inputs |\n| Card / product grid | CSS Grid `grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))` |\n| Data table | Native `<table>` with `<thead>` / `<tbody>` (don't fake with divs) |\n| Search results | `<form role=\"search\">` + `<ol>` of `<article>` results |\n| Settings page | Two-column: `<nav>` left, `<form>` right, `<fieldset>` groupings |\n| 404 / empty state | Single centered column, `role=\"alert\"` for 404 |\n| Loading / skeleton | Same layout as content, `bg-gray-200 animate-pulse` placeholders |\n| Detail / article | `<article>` with header, `max-width: 65ch` body, optional `<aside>` |\n| Modal / dialog | Native `<dialog>` or fixed div with `role=\"dialog\" aria-modal=\"true\"` |\n| Navigation menu | `<nav>` with `<ul>`, mobile hamburger → drawer at `sm:` |\n| Pricing table | 3-card grid, recommended tier highlighted with `border-primary` |\n| Form / survey (multi-step) | Stepper at top, one form per step, prev/next buttons |\n| Profile / account | Left: avatar + meta; right: tabbed settings panels |\n| Notification / toast | Tailwind: `fixed top-4 right-4`; auto-dismiss after 4s with a JS timeout |\n\nFor the decision tree and visual signatures of each pattern, see [`references/layout-patterns.md`](./references/layout-patterns.md).\n\n### Step 3 — Generate Code\n\n**HTML/CSS output** (default):\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>UI</title>\n  <style>\n    :root {\n      --color-primary: #3B82F6;\n      --color-bg: #FFFFFF;\n      --color-text: #0F172A;\n      --color-border: #E2E8F0;\n    }\n    body { font-family: -apple-system, sans-serif; margin: 0; color: var(--color-text); background: var(--color-bg); }\n  </style>\n</head>\n<body>\n  <!-- Structure matching the image layout -->\n</body>\n</html>\n```\n\n**React + Tailwind** (react mode):\n```jsx\nexport function UICard() {\n  return (\n    <div className=\"p-6 bg-white rounded-xl shadow-sm\">\n      <h3 className=\"text-xl font-semibold text-slate-900\">Title</h3>\n      <p className=\"mt-2 text-slate-500\">Description goes here.</p>\n      <button className=\"mt-4 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600\">\n        Action\n      </button>\n    </div>\n  );\n}\n```\n\n#### Vision model prompt template\n\nWhen sending the image to a vision model for analysis, use this structure (adapt the slot counts to the image's complexity):\n\n```\nYou are analyzing a UI screenshot to extract information for code generation.\n\nPlease report in this exact structure:\n\n## Layout\n- Overall pattern: [landing | dashboard | mobile | form | card-grid | table | modal | search | settings | 404 | skeleton | article | other]\n- Main regions (top to bottom, left to right): [list]\n- Sidebar present: [yes/no, position, width]\n- Top nav: [sticky/static/none]\n\n## Color palette (5 slots, hex codes)\n- Primary: #...\n- Secondary: #...\n- Background: #...\n- Text: #...\n- Border/muted: #...\n- Mode: [light | dark | both]\n- Gradient present: [yes/no, from→to]\n\n## Typography\n- Heading font: [family hint, weight, size estimate in px]\n- Body font: [family hint, weight, size estimate in px]\n- Distinct sizes observed: [h1, h2, body, caption...]\n\n## Spacing\n- Base unit estimate: [4px | 8px]\n- Section vertical rhythm: [tight | normal | spacious]\n\n## Component inventory\n- Buttons: [count, primary/secondary style]\n- Inputs: [count, type]\n- Cards: [count, layout direction]\n- Icons: [count, style: outlined/filled/duotone]\n- Images: [count, aspect ratio hints]\n\n## Specific text content visible\n- [verbatim transcription of any visible text — labels, headings, button text, error messages]\n\n## What is NOT visible / ambiguous\n- [things you can't determine from the image, that the user should clarify]\n```\n\nKeep the report under 400 words. The goal is structured extraction, not a description.\n\n### Step 4 — Validate\n\n- Key layout sections (header, main, sidebar) are present\n- Colors are within ±10% of the original image (subjective match)\n- No invented content — placeholder text is generic (\"Card title\", not specific brand names)\n- HTML is valid (proper tag nesting, no unclosed tags)\n\n## Mandatory Rules\n\n### Do not\n\n- Do not invent brand names, specific product names, or proprietary text not visible in the image\n- Do not claim the output is pixel-perfect — it is an interpretation\n- Do not generate backend code, JavaScript logic, or API calls\n- Do not reproduce copyrighted UI elements (logos, icons) — use generic equivalents\n\n### Do\n\n- Use placeholder text that fits the context (e.g., \"Search...\" for a search bar)\n- Preserve the visual hierarchy (primary > secondary > tertiary)\n- Use realistic placeholder data for images (e.g., via placeholder.com or picsum)\n- State explicitly: \"This is an approximation; fine-tune colors and spacing as needed\"\n\n## Quality Bar\n\n**A good output:**\n- All major layout regions are present and positioned correctly\n- Color palette is recognizably derived from the image\n- Typography hierarchy matches (heading size > body size)\n- Code is valid, runnable HTML/CSS without external dependencies beyond a CDN\n\n**A bad output:**\n- Layout is scrambled or missing major sections\n- Output includes broken or unclosed HTML tags\n- Fabricated text content not appropriate to the UI context\n- Output requires non-free dependencies or local asset files\n\n## Good vs. Bad Examples\n\n| Scenario | Bad Output | Good Output |\n|---|---|---|\n| E-commerce product card | Generic lorem ipsum text | \"Price: $49.99 — Add to Cart\" contextually appropriate |\n| Dark mode UI | Ignores dark theme | Uses dark background, light text, correct contrast |\n| Mobile screenshot | Desktop-only output | `max-width: 375px` container, mobile-first |\n| Complex dashboard | One undifferentiated div | Grid layout with sidebar, header, main panels |\n\n## References\n\n- [`references/color-extraction.md`](./references/color-extraction.md) — 5-slot palette algorithm, dark/light mode detection, gradient handling, anti-patterns.\n- [`references/layout-patterns.md`](./references/layout-patterns.md) — 12 layout patterns with visual signatures, HTML skeletons, and a decision tree.\n- [`references/tailwind-mapping.md`](./references/tailwind-mapping.md) — Visual property to Tailwind class lookup tables (spacing, typography, radius, shadow, color tokens, responsive breakpoints) plus common component recipes.\n\n## Validation\n\nAfter generating code, run:\n\n```bash\npython scripts/validate_output.py path/to/output.html\n# Add --strict to also flag excessive <div> nesting\n```\n\nThe validator checks basic structure, tag balance, mismatched pairs, empty `href`/`src`, and a hex-color count sanity check. See the script source for full details.\n\nFile v3.1.0:README.md\n\n# AI Image to Code\n\n[中文版](./README_zh.md)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n[![Version](https://img.shields.io/badge/version-3.1.0-blue)](SKILL.md)\n\n> Convert a UI screenshot into runnable HTML/CSS or a React component — using vision analysis, structured code generation, and post-generation validation.\n\n## What Problem This Solves\n\nYou 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.\n\nTrigger phrases: \"convert this screenshot to code\", \"rebuild this UI\", \"turn this image into HTML\", \"code this design\", \"write the React component for this\".\n\n## Features\n\n- **Three output modes**: plain HTML+CSS, React + Tailwind, or layout description only.\n- **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)).\n- **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).\n- **5-slot color extraction**: pulls a useful palette without overfitting — see [references/color-extraction.md](./references/color-extraction.md).\n- **Tailwind-friendly output**: every visual property maps to a Tailwind class — see [references/tailwind-mapping.md](./references/tailwind-mapping.md).\n- **Built-in validator**: run `scripts/validate_output.py` to catch unclosed tags, mismatched pairs, empty `href`/`src`, and excessive `<div>` nesting (with `--strict`).\n\n## Quick Start\n\n### Installation\n\n```bash\n# Via ClawHub\nclawhub install ai-image-to-code\n\n# Or manually\ncp -r ai-image-to-code ~/.openclaw/skills/\n```\n\n### Usage\n\nPaste or attach the image, then ask. The skill supports three modes:\n\n```bash\n# Default: HTML + CSS\n/ai-image-to-code\n\n# React + Tailwind component\n/ai-image-to-code/react\n\n# Layout description only (no code)\n/ai-image-to-code/describe\n```\n\nOr just ask in natural language — the skill will match the intent.\n\n## Directory Structure\n\n```\nai-image-to-code/\n├── SKILL.md                   # Entry point (modes, execution steps, mandatory rules)\n├── LICENSE                    # MIT\n├── README.md                  # This file\n├── README_zh.md               # Chinese version\n├── CONTRIBUTING.md            # Contribution guide\n├── CHANGELOG.md               # Version history\n├── _meta.json                 # ClawHub metadata\n├── .gitignore\n├── references/                # Reference documents\n│   ├── color-extraction.md    # 5-slot palette algorithm\n│   ├── layout-patterns.md     # 12 layout patterns + decision tree\n│   └── tailwind-mapping.md    # Visual property → Tailwind class lookup\n├── scripts/                   # Helper scripts\n│   ├── validate_output.py     # HTML output validator\n│   └── requirements.txt       # (zero deps)\n├── tests/                     # Self-tests + e2e regression\n│   ├── test_skill.py              # 24 audit checks (SKILL.md frontmatter, structure)\n│   ├── test_validate_output.py    # 11 corner-case tests for the validator\n│   ├── test_landing_fixture.py    # 7 e2e checks for the landing example\n│   ├── test_layout_fixtures.py    # 8 e2e checks for the 7 documented layouts\n│   └── fixtures/                  # 7 input screenshots (landing, dashboard, mobile, table, form, search, pricing)\n```\n\n## References\n\nThis skill ships with three reference documents that contain the heuristics:\n\n- [Color extraction heuristics](./references/color-extraction.md) — k-medoids clustering, dark/light mode detection, gradient handling\n- [Layout pattern recognition](./references/layout-patterns.md) — visual signatures + HTML skeletons + decision tree\n- [Tailwind class mapping](./references/tailwind-mapping.md) — spacing, typography, radius, shadow, color tokens\n\n## Validation\n\nAfter generating HTML, validate it:\n\n```bash\npython scripts/validate_output.py path/to/output.html\npython scripts/validate_output.py path/to/output.html --strict   # also check div nesting\n```\n\n## Verified Layouts (End-to-End Examples)\n\nThe skill ships with **17 fixture screenshots** under `tests/fixtures/` — one for every layout pattern documented in SKILL.md's Recommended Output table. For every fixture, a corresponding generated HTML output is produced following the documented vision-prompt → extraction → code-generation flow, and verified by both `validate_output.py` (default + `--strict`) and structural assertions that lock in the layout-specific HTML contract.\n\n![17 layout demo](docs/demo.gif)\n\n*17 layouts, end-to-end: vision extraction → code generation → validation. Generated HTML files live in `/tmp/ai-image-to-code-demo/` and are rendered to frames via headless Chrome.*\n\n| # | Layout | Fixture | Output | Key structural markers |\n|---|---|---|---|---|\n| 1 | Landing page | `tests/fixtures/landing-page.png` | `/tmp/ai-image-to-code-demo/index.html` | `<header>` + `<main>` + `<section>`, `max-width` container |\n| 2 | Dashboard | `tests/fixtures/dashboard.png` | `/tmp/ai-image-to-code-demo/dashboard.html` | `grid-template-columns: 240px 1fr` + `<aside>` sidebar |\n| 3 | Mobile app | `tests/fixtures/mobile.png` | `/tmp/ai-image-to-code-demo/mobile.html` | `max-width: 375px` + fixed bottom tab bar |\n| 4 | Data table | `tests/fixtures/table.png` | `/tmp/ai-image-to-code-demo/table.html` | native `<table>` + `<thead>` + `<tbody>` (no div-faking) |\n| 5 | Form / login | `tests/fixtures/form.png` | `/tmp/ai-image-to-code-demo/form.html` | centered card `max-width: 400px` + semantic `<form>` |\n| 6 | Search results | `tests/fixtures/search.png` | `/tmp/ai-image-to-code-demo/search.html` | `<form role=\"search\">` + ordered list of result items |\n| 7 | Pricing | `tests/fixtures/pricing.png` | `/tmp/ai-image-to-code-demo/pricing.html` | 3-card grid, recommended tier highlighted with `border-primary` |\n| 8 | Card / product grid | `tests/fixtures/cardgrid.png` | `/tmp/ai-image-to-code-demo/cardgrid.html` | `repeat(auto-fill, minmax(280px, 1fr))` + `<article>` cards |\n| 9 | Modal / dialog | `tests/fixtures/modal.png` | `/tmp/ai-image-to-code-demo/modal.html` | `role=\"dialog\"` + `aria-modal=\"true\"` + dimmed overlay |\n| 10 | 404 / empty state | `tests/fixtures/notfound.png` | `/tmp/ai-image-to-code-demo/notfound.html` | single centered column + `role=\"alert\"` |\n| 11 | Skeleton loader | `tests/fixtures/skeleton.png` | `/tmp/ai-image-to-code-demo/skeleton.html` | same layout as content + `animate-pulse` placeholders |\n| 12 | Detail / article | `tests/fixtures/article.png` | `/tmp/ai-image-to-code-demo/article.html` | `<article>` + `max-width: 65ch` body + `<blockquote>` |\n| 13 | Settings page | `tests/fixtures/settings.png` | `/tmp/ai-image-to-code-demo/settings.html` | `<nav>` left + `<form>` right + `<fieldset>` groupings |\n| 14 | Profile / account | `tests/fixtures/profile.png` | `/tmp/ai-image-to-code-demo/profile.html` | avatar + meta left, tabbed settings panels right |\n| 15 | Notification / toast | `tests/fixtures/toast.png` | `/tmp/ai-image-to-code-demo/toast.html` | `position: fixed` + 4s JS auto-dismiss |\n| 16 | Navigation menu | `tests/fixtures/nav.png` | `/tmp/ai-image-to-code-demo/nav.html` | `<nav>` with `<ul>` + hamburger→drawer at `sm:` |\n| 17 | Form / survey (multi-step) | `tests/fixtures/multistep.png` | `/tmp/ai-image-to-code-demo/multistep.html` | stepper at top + prev/next buttons |\n\n### Reproducing an example\n\nThe end-to-end flow is the same for every fixture:\n\n1. Drop a UI screenshot into `tests/fixtures/your-layout.png`.\n2. Send the image to a vision model with the [Step 3 prompt template in SKILL.md](./SKILL.md#step-3--generate-code).\n3. From the model's 7-section report, pick a layout pattern from the Recommended Output table in [SKILL.md](./SKILL.md#step-2--plan-the-code-structure).\n4. Generate the HTML, writing it to `/tmp/ai-image-to-code-demo/your-layout.html` (or anywhere — the path is just convention).\n5. Validate:\n   ```bash\n   python scripts/validate_output.py your-layout.html --strict\n   ```\n\n### Regression tests\n\nThe fixtures and outputs are wired into a regression test so any change to SKILL.md, the references, or the validator is checked against the documented structural contract:\n\n```bash\npython tests/test_layout_fixtures.py\n```\n\nEach case asserts: fixture exists → output exists → passes default validator → passes `--strict` → output contains the layout-specific structural markers (e.g., `<table>` for the data-table case, `role=\"search\"` for the search-results case, `is-featured` and `border-color: var(--color-primary)` for the pricing case).\n\nOutputs are not checked into the repo on purpose — they're meant to be regenerated whenever the skill is updated.\n\n## Mandatory Rules (Summary)\n\n- **Do not** invent brand names or specific product text not visible in the image.\n- **Do not** reproduce copyrighted UI elements (logos, icons) — use generic equivalents.\n- **Do** use contextually appropriate placeholder text (\"Search...\" for a search bar).\n- **Do** preserve visual hierarchy (primary > secondary > tertiary).\n\nFull list in [SKILL.md → Mandatory Rules](./SKILL.md#mandatory-rules).\n\n## License\n\nMIT — see [LICENSE](LICENSE) for details.\n\n---\n\nPowered by [MiniMax](https://minimax.io).\n\nFile v3.1.0:_meta.json\n\n{\n  \"ownerId\": \"kn70zthc74p61mvctddrancx0s832g4r\",\n  \"slug\": \"ai-image-to-code\",\n  \"version\": \"3.1.0\",\n  \"publishedAt\": 1780471436747\n}\n\nFile v3.1.0:references/color-extraction.md\n\n# Color Extraction Heuristics\n\nHow to pull a useful color palette from a screenshot without overfitting or losing brand identity.\n\n**Related references**:\n- [`layout-patterns.md`](./layout-patterns.md) — visual signatures of common UI patterns (so you know which regions to sample from).\n- [`tailwind-mapping.md`](./tailwind-mapping.md) — how to map the 5-slot palette to Tailwind tokens (`bg-primary`, `text-text`, etc.).\n\n## The 5-Slot Palette\n\nMost UIs can be reduced to **5 colors**. Aim for these slots; ignore anything that doesn't fit cleanly:\n\n| Slot | Purpose | How to identify |\n|------|---------|-----------------|\n| **Primary** | Brand color, primary CTAs, active states | The most saturated, distinctive color in the image (often a button background) |\n| **Secondary** | Accent, secondary actions, links | Second-most distinctive color (often used for hover/focus) |\n| **Background** | Page / surface base | The most common color (usually 60-80% of pixels) |\n| **Text** | Body copy, headings | High contrast against background; usually near-black or near-white |\n| **Border / muted** | Dividers, disabled states, secondary text | Low-saturation, mid-luminance (often a light gray) |\n\nIf 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.\n\n## Algorithm\n\n```\n1. Sample ~50-200 points from the image (corners, midpoints, plus 10-20 random)\n2. Cluster the colors (k=5, k-medoids works better than k-means for palette)\n3. Rank by:\n   - Saturation (HSV): higher = primary, lower = background\n   - Coverage: highest = background\n   - Distinctiveness (distance from other 4): edge cases\n4. Map each cluster to a slot\n5. Round each color to the nearest Tailwind / CSS named color\n```\n\n## Common Pitfalls\n\n### Over-sampling backgrounds\n\nIf 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.\n\n### Picking anti-aliased edges\n\nWhen 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:\n\n- Sample only the center of solid regions\n- Or, after clustering, drop any cluster whose members are all within 10% luminance of each other AND all near a known color\n\n### Dark mode vs light mode\n\nThe **slots stay the same**, but the values invert:\n\n| Slot | Light mode | Dark mode |\n|------|------------|-----------|\n| Background | `#FFFFFF` (or off-white) | `#0F172A` (or near-black) |\n| Text | `#0F172A` (near-black) | `#F1F5F9` (off-white) |\n| Primary | Saturated, mid-luminance | Slightly desaturated, high-luminance accent |\n\nTo 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.\n\n### Gradients\n\nIf the image has a gradient (e.g., hero background), **don't try to capture both endpoints**. Either:\n\n- Pick the dominant color (usually the start, where most of the gradient is)\n- Or, if the gradient is brand-significant, capture both endpoints as separate tokens: `gradient-from` and `gradient-to`\n\n## Output Format\n\nAlways emit a CSS custom-property block at the top of the generated stylesheet:\n\n```css\n:root {\n  --color-primary: #3B82F6;\n  --color-secondary: #8B5CF6;\n  --color-bg: #FFFFFF;\n  --color-text: #0F172A;\n  --color-border: #E2E8F0;\n}\n```\n\nThis makes later tweaks (dark mode, brand refresh) a one-line change.\n\n## When to Skip Extraction\n\nIf the user already provided a CSS file or design tokens, **trust those over the screenshot**. The skill is \"interpret the image\" — but if the user hands you both, prefer the explicit source.\n\nFile v3.1.0:references/index.md\n\n# ai-image-to-code — References\n\nDetailed documents for the `ai-image-to-code` skill. See:\n\n- [`color-extraction.md`](./color-extraction.md) — Heuristics for pulling a color palette from a screenshot\n- [`layout-patterns.md`](./layout-patterns.md) — Common UI layout structures and their HTML equivalents\n- [`tailwind-mapping.md`](./tailwind-mapping.md) — Visual property → Tailwind class translation guide\n\nFile v3.1.0:references/layout-patterns.md\n\n# Layout Pattern Recognition\n\nA field guide to the ~12 layout shapes that cover ~90% of UI screenshots, and the HTML structure that fits each.\n\n**Related references**:\n- [`color-extraction.md`](./color-extraction.md) — after picking a pattern, pull the 5-slot palette from the image.\n- [`tailwind-mapping.md`](./tailwind-mapping.md) — translate the HTML skeleton into Tailwind classes.\n\n## The 12 Patterns\n\n### 1. Landing / Marketing Page\n\n**Visual signature**: Hero (full-width top section with headline + CTA), then stacked content sections, then footer.\n\n```\n┌──────────────────────────┐\n│      Nav (sticky?)       │\n├──────────────────────────┤\n│                          │\n│    Hero (headline+CTA)   │\n│                          │\n├──────────────────────────┤\n│   Features (3-column)    │\n├──────────────────────────┤\n│   Testimonial / Logo bar │\n├──────────────────────────┤\n│      Pricing (3-card)    │\n├──────────────────────────┤\n│    Final CTA section     │\n├──────────────────────────┤\n│       Footer (links)     │\n└──────────────────────────┘\n```\n\n**HTML skeleton**:\n```html\n<header class=\"nav\">...</header>\n<main>\n  <section class=\"hero\">...</section>\n  <section class=\"features\">...</section>\n  <section class=\"pricing\">...</section>\n  <section class=\"cta\">...</section>\n</main>\n<footer>...</footer>\n```\n\n### 2. Dashboard (with sidebar)\n\n**Visual signature**: Left vertical nav (icons + labels), top bar (search + user menu), main area split into cards/panels.\n\n```\n┌────┬─────────────────────┐\n│ N  │  Search    User     │\n│ a  ├─────────────────────┤\n│ v  │ KPI  KPI  KPI  KPI  │\n│    ├─────────────────────┤\n│    │       │             │\n│    │ Chart │  Table      │\n│    │       │             │\n└────┴─────────────────────┘\n```\n\n**HTML**: CSS Grid with `grid-template-columns: 240px 1fr`. Sidebar is `position: sticky`.\n\n### 3. Mobile App Screen\n\n**Visual signature**: Top bar (back button + title), scrollable content, bottom tab bar (3-5 icons).\n\n**HTML**: `max-width: 375px` outer container. Bottom tabs as `position: fixed; bottom: 0`. Safe-area-inset for notched devices.\n\n### 4. Login / Auth Form\n\n**Visual signature**: Centered card, 2-3 inputs (email, password, submit), \"forgot password?\" link, optional \"sign up\" footer.\n\n**HTML**: Flexbox centered. Card is `max-width: 400px`. Inputs are full-width with consistent padding.\n\n### 5. Card Grid\n\n**Visual signature**: Grid of identical cards (product, blog post, profile), each with image + title + meta + CTA.\n\n**HTML**: CSS Grid `grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))`. Cards are `<article>` with consistent internal structure.\n\n### 6. Data Table\n\n**Visual signature**: Header row, alternating row colors, sortable columns, action buttons per row, pagination footer.\n\n**HTML**: `<table>` with `<thead>` / `<tbody>`. Don't fake a table with divs (accessibility + semantics matter).\n\n### 7. Modal / Dialog\n\n**Visual signature**: Centered card with backdrop dim, close icon top-right, action buttons bottom-right.\n\n**HTML**: Native `<dialog>` element when possible. Otherwise, fixed-positioned div with `role=\"dialog\" aria-modal=\"true\"`.\n\n### 8. Search Results\n\n**Visual signature**: Search bar at top, then list of result rows (each with title + snippet + meta), then pagination.\n\n**HTML**: `<form role=\"search\">` at top, `<ol>` of results, each result is an `<article>` with h2 (title) + p (snippet) + small (meta).\n\n### 9. Settings Page\n\n**Visual signature**: Left nav of settings categories, right panel with form fields, save button bottom-right.\n\n**HTML**: Two-column layout, left is `<nav>`, right is `<form>`. Group related fields in `<fieldset>` with `<legend>`.\n\n### 10. 404 / Empty State\n\n**Visual signature**: Centered illustration (or large emoji), short message, \"go back\" CTA.\n\n**HTML**: Single centered column, ~400px wide. Semantic: `<main>` with `role=\"alert\"` for 404.\n\n### 11. Loading / Skeleton\n\n**Visual signature**: Layout matches the eventual content, but filled with gray rectangles in place of text/images.\n\n**HTML**: Same as the content layout, but use `bg-gray-200 animate-pulse` rectangles for placeholders. Keep the actual structure (don't strip out divs) — the layout shouldn't shift when content loads.\n\n### 12. Detail / Article Page\n\n**Visual signature**: Title, byline, hero image, body text, optional sidebar (TOC / share / related), comments section.\n\n**HTML**: `<article>` with `<header>` (h1 + meta), main content area (`max-width: 65ch` for readability), optional `<aside>`.\n\n## Decision Tree\n\nWhen analyzing a new screenshot, ask these in order:\n\n```\n1. Is it wide (desktop) or narrow (mobile)?\n   → narrow: use pattern 3, 4, 10\n2. Is there a vertical strip on the left?\n   → yes: pattern 2 (dashboard) or 9 (settings)\n3. Is there a top bar with search and a long list below?\n   → yes: pattern 8 (search results)\n4. Are there repeated identical cards in a grid?\n   → yes: pattern 5 (card grid)\n5. Are there columns of structured text data?\n   → yes: pattern 6 (data table)\n6. Is it a single centered card on a plain background?\n   → yes: pattern 4 (login) or 10 (empty/404)\n7. Are there stacked horizontal sections with different purposes?\n   → yes: pattern 1 (landing) or 12 (article)\n8. Is it floating with a backdrop dim behind it?\n   → yes: pattern 7 (modal)\n9. Are the real elements replaced with gray rectangles?\n   → yes: pattern 11 (skeleton)\n10. Still unsure? → describe mode, ask the user\n```\n\n## Anti-Patterns to Avoid\n\n- **Don't use `<div>` for everything** — semantic tags (`<article>`, `<nav>`, `<main>`, `<section>`, `<aside>`, `<header>`, `<footer>`) carry meaning that helps screen readers and SEO.\n- **Don't over-nest** — if you find yourself going deeper than 4 levels of `<div>`, you're probably hiding something that should be a component.\n- **Don't fake a grid with flexbox** — flexbox wraps badly; use CSS Grid for 2D layouts.\n- **Don't use absolute positioning for layout** — it breaks responsiveness. Reserve it for true overlays (modals, tooltips, drag handles).\n\nFile v3.1.0:references/tailwind-mapping.md\n\n# Visual Property → Tailwind Class Mapping\n\nA quick reference for translating what you see in a screenshot into Tailwind utility classes.\n\n**Related references**:\n- [`color-extraction.md`](./color-extraction.md) — source of the 5-slot palette this doc maps to Tailwind tokens.\n- [`layout-patterns.md`](./layout-patterns.md) — the HTML skeletons you are converting to Tailwind.\n\n## Spacing (padding / margin / gap)\n\nMeasure the visual spacing relative to the **base unit** (usually 4px or 8px). Round to the nearest standard.\n\n| Visual | Tailwind | CSS value |\n|--------|----------|-----------|\n| Tight (1-3px) | `0.5` | 2px |\n| Snug (4-6px) | `1` / `1.5` | 4px / 6px |\n| Normal (8-10px) | `2` / `2.5` | 8px / 10px |\n| Comfortable (12-16px) | `3` / `4` | 12px / 16px |\n| Roomy (20-24px) | `5` / `6` | 20px / 24px |\n| Spacious (32-40px) | `8` / `10` | 32px / 40px |\n| Generous (48-64px) | `12` / `16` | 48px / 64px |\n| Section break (80-128px) | `20` / `24` / `32` | 80px / 96px / 128px |\n\n**Direction shorthands**:\n- `p-{n}` = all sides\n- `px-{n}` = left + right\n- `py-{n}` = top + bottom\n- `pt-{n} pr-{n} pb-{n} pl-{n}` = individual sides\n- `m-{n}`, `mx-{n}`, `my-{n}`, `mt-{n}` etc. = margin equivalents\n\n## Typography\n\n### Font size (px → Tailwind)\n\n| Visual | Tailwind | Px |\n|--------|----------|----|\n| Caption / micro | `text-xs` | 12px |\n| Small / label | `text-sm` | 14px |\n| Body (default) | `text-base` | 16px |\n| Slightly large body | `text-lg` | 18px |\n| Subheading | `text-xl` | 20px |\n| Section heading | `text-2xl` | 24px |\n| Page heading | `text-3xl` | 30px |\n| Hero | `text-4xl` / `text-5xl` | 36px / 48px |\n| Marketing hero | `text-6xl` / `text-7xl` | 60px / 72px |\n\n### Font weight\n\n| Visual | Tailwind | CSS |\n|--------|----------|-----|\n| Thin | `font-thin` | 100 |\n| Light | `font-light` | 300 |\n| Regular / body | `font-normal` | 400 |\n| Medium / button | `font-medium` | 500 |\n| Semibold / heading | `font-semibold` | 600 |\n| Bold / display | `font-bold` | 700 |\n| Extra bold | `font-extrabold` | 800 |\n\n### Line height\n\n| Visual | Tailwind |\n|--------|----------|\n| Tight (headings) | `leading-tight` (1.25) |\n| Snug | `leading-snug` (1.375) |\n| Normal (body) | `leading-normal` (1.5) |\n| Relaxed (long-form) | `leading-relaxed` (1.625) |\n| Loose (rare) | `leading-loose` (2) |\n\n## Border Radius\n\n| Visual | Tailwind | Px |\n|--------|----------|----|\n| Square | `rounded-none` | 0 |\n| Slight | `rounded-sm` | 2px |\n| Small | `rounded` | 4px |\n| Medium | `rounded-md` | 6px |\n| Large | `rounded-lg` | 8px |\n| XL (cards) | `rounded-xl` | 12px |\n| 2XL (modals) | `rounded-2xl` | 16px |\n| 3XL (hero images) | `rounded-3xl` | 24px |\n| Pill / full | `rounded-full` | 9999px |\n\n## Shadow\n\n| Visual | Tailwind | CSS |\n|--------|----------|-----|\n| No shadow (flat) | `shadow-none` | none |\n| Subtle (cards on white) | `shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` |\n| Default (raised card) | `shadow` | `0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06)` |\n| Medium (dropdowns) | `shadow-md` | `0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06)` |\n| Large (modals) | `shadow-lg` | `0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05)` |\n| XL (overlays) | `shadow-xl` | `0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04)` |\n| 2XL (hero) | `shadow-2xl` | `0 25px 50px rgba(0,0,0,0.25)` |\n\n## Color Tokens\n\nMap your 5-slot palette (from `color-extraction.md`) to these Tailwind semantic names. Then reference the colors as `bg-primary`, `text-text`, etc., via your `@theme` or CSS custom properties.\n\n**Light mode**:\n```css\n:root {\n  --color-primary: #3B82F6;     /* blue-500 */\n  --color-secondary: #8B5CF6;   /* violet-500 */\n  --color-bg: #FFFFFF;\n  --color-surface: #F8FAFC;      /* slate-50 */\n  --color-text: #0F172A;         /* slate-900 */\n  --color-muted: #64748B;        /* slate-500 */\n  --color-border: #E2E8F0;      /* slate-200 */\n}\n```\n\n**Dark mode** (mirror):\n```css\n.dark {\n  --color-bg: #0F172A;\n  --color-surface: #1E293B;\n  --color-text: #F1F5F9;\n  --color-muted: #94A3B8;\n  --color-border: #334155;\n}\n```\n\nIn Tailwind v4, you can register these via `@theme` and use them as `bg-primary` directly.\n\n## Responsive Breakpoints\n\n| Breakpoint | Tailwind prefix | Min width |\n|------------|-----------------|-----------|\n| Phone (portrait) | (default) | 0px |\n| Phone (landscape) / large phone | `sm:` | 640px |\n| Tablet | `md:` | 768px |\n| Laptop | `lg:` | 1024px |\n| Desktop | `xl:` | 1280px |\n| Wide | `2xl:` | 1536px |\n\n**Convention**: design mobile-first. Write base styles for narrow screens, then add `sm:`, `md:`, etc. to upgrade at larger sizes.\n\n## Common Component Recipes\n\n### Button (primary, medium)\n\n```html\n<button class=\"px-4 py-2 bg-primary text-white font-medium rounded-md hover:bg-primary/90 transition\">\n  Click me\n</button>\n```\n\n### Card\n\n```html\n<article class=\"p-6 bg-surface rounded-lg shadow\">\n  <h3 class=\"text-xl font-semibold text-text\">Title</h3>\n  <p class=\"mt-2 text-muted\">Description goes here.</p>\n</article>\n```\n\n### Input\n\n```html\n<input\n  type=\"text\"\n  class=\"w-full px-3 py-2 bg-white border border-border rounded-md text-text placeholder-muted focus:outline-none focus:ring-2 focus:ring-primary/50\"\n  placeholder=\"Search...\"\n/>\n```\n\n### Modal backdrop\n\n```html\n<div class=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50\">\n  <div class=\"bg-surface rounded-2xl shadow-2xl p-6 max-w-md w-full mx-4\">\n    <!-- modal content -->\n  </div>\n</div>\n```\n\n## Decision Heuristics\n\nWhen you're not sure which class to pick:\n\n1. **Spacing**: when in doubt, use `4` (16px). It's the Tailwind default and rarely wrong.\n2. **Radius**: cards → `rounded-lg`, buttons → `rounded-md`, modals → `rounded-2xl`, pills → `rounded-full`.\n3. **Shadow**: only add shadow to elements that \"float\" above the surface. Inline content should have `shadow-none`.\n4. **Font size**: if the text wraps to more than 2 lines, you probably want it larger OR you want to break it into shorter copy.\n5. **Color**: stick to your 5-slot palette. Resist the urge to introduce a 6th color from the screenshot — it's almost always noise.\n\nFile v3.1.0:scripts/requirements.txt\n\n# No external dependencies required.\n# This script uses only the Python standard library.\n\nFile v3.1.0:CHANGELOG.md\n\n# Changelog\n## [3.1.0] - 2026-06-03\n\n### End-to-end coverage + validator improvements\n\n- **Previous:** 3.0.0\n- **Added:**\n  - **17 layout fixtures** under `tests/fixtures/`, one per row in SKILL.md's Recommended Output table. Was 7 → now 17. Layouts added: card-grid, modal, 404, skeleton, article, settings, profile, toast, nav, multi-step.\n  - **17 generated HTML outputs** under `/tmp/ai-image-to-code-demo/` (regenerable, not committed).\n  - **`tests/test_layout_fixtures.py`** end-to-end test: 18/18 (17 layout + 1 fixtures_exist guard). For each layout, runs the actual extraction → generation → validation flow and asserts layout-specific structural markers (e.g. `role=\"dialog\"`, `<fieldset>`, `repeat(auto-fill`, `aria-current=\"step\"`).\n  - **Validator improvements** (`scripts/validate_output.py`):\n    - Token recognition: hex values defined in `:root` and consumed via `var(--name)` are excluded from the hardcoded-color count.\n    - Per-instance inline override: a small number (≤5) of distinct hexes used once each in inline `style=\"...\"` attributes are recognized as per-element overrides (e.g. avatar colors), not flagged as missing tokens. When >5 distinct inline hexes exist, the rule falls back to flagging them — the typical \"missing token system\" signal.\n  - **`docs/demo.gif`**: README demo GIF rendered from 17 HTML outputs via headless Chrome → ffmpeg. 800×533, 0.5 fps, 17 frames, 34 s, 394 KB. Linked at the top of README's \"Verified Layouts\" section.\n- **Tests:** test_validate_output.py 11 → 17 cases. test_layout_fixtures.py 8 → 18 cases. All 66 tests pass across 4 suites.\n- **Insight:** 3 fixtures (skeleton / toast / nav) generated near-blank images; vision extraction reported \"no UI elements\". SKILL.md's text-based layout contract was sufficient to drive correct code generation, proving the skill works even when vision input is degraded. Documented in README.\n\n## [3.0.0] - 2026-06-02\n\n### Major update\n\n- **Previous:** 1.0.1 (legacy name `user-provides-screenshot` / `image-to-code`)\n- **Changed:**\n  - **BREAKING:** Renamed `name` field and trigger commands from `image-to-code` → `ai-image-to-code` to match the directory name and ClawHub slug. Fixes the H5 audit failure and MiniMax official validator error. Agents calling `/image-to-code` will need to use `/ai-image-to-code` instead.\n  - Added LICENSE (MIT) and .gitignore — fixes S12 and O4 warnings.\n  - Wrote 3 real reference docs in `references/` (color extraction, layout patterns, Tailwind class mapping) — was a single-line TODO placeholder before.\n  - Expanded the \"Recommended Output\" table from 6 layout types to 17.\n  - Added a vision model prompt template in Step 3 (structured 7-section extraction).\n  - Added `scripts/validate_output.py` for post-generation HTML sanity checks (tag balance, structure, empty attrs, color count, div nesting depth with --strict).\n  - Replaced inline reference links with cross-references to the new docs.\n  - **Version bumped from local `1.0.1` to `3.0.0`** (major bump) due to the breaking name change above, plus substantive content additions (3 reference docs, validation script, audit-pass overhaul).\n\n## [1.0.1] - 2026-05-18\n\n### Minor update\n\n- **Previous:** 1.0\n- **Changed:** Updated skill content and quality\n\n\n\n## [1.0] - 2026-05-18\n\n### Added\n\n- Initial release\n\nFile v3.1.0:CONTRIBUTING.md\n\n# Contributing to `ai-image-to-code`\n\nThank you for your interest in contributing! Please follow these steps to set up your development environment and submit changes.\n\n## Development Setup\n\n```bash\n# 1. Fork the repository on GitHub\n# 2. Clone your fork\ngit clone https://github.com/<your-username>/ai-image-to-code.git\ncd ai-image-to-code\n\n# 3. (Optional) Create a virtual env for running the validator\npython3 -m venv .venv\nsource .venv/bin/activate\n\n# 4. Install dependencies (the validator has zero runtime deps; pytest is for testing)\npip install -r scripts/requirements.txt\n\n# 5. Run the self-tests to verify the skill structure\npython3 tests/test_skill.py\n```\n\n## Workflow\n\nWe use a standard feature-branch workflow:\n\n```bash\n# 1. Create a new branch from main\ngit checkout -b feat/<your-feature-name>\n\n# 2. Make your changes\n#    - Follow the SKILL.md structure standards (frontmatter + modes + steps + rules)\n#    - Keep SKILL.md body in English\n#    - Update CHANGELOG.md and bump version in SKILL.md / README.md / README_zh.md\n#    - Do not hardcode API keys or secrets\n\n# 3. Run the audit + tests\npython3 tests/test_skill.py                    # structural tests\npython3 ../skill-factory/scripts/audit_skill.py .   # full quality audit (if skill-factory is available)\n\n# 4. Commit your changes\ngit add .\ngit commit -m \"feat(ai-image-to-code): add <brief description>\"\n\n# 5. Push to your fork\ngit push origin feat/<your-feature-name>\n\n# 6. Open a Pull Request on GitHub\n#    - Title: feat(ai-image-to-code): add <brief description>\n#    - Description: What + Why + Testing\n```\n\n## Code Standards\n\n- **SKILL.md**: Follow the YAML frontmatter standard (`name`, `description`, `license`, `metadata`). The `name` field must equal the directory name.\n- **Modes**: Use a `/<skill-name>/<mode>` naming convention.\n- **Execution steps**: Numbered, not bulleted.\n- **Mandatory Rules**: Must contain at least 2 bullets in the \"Do not\" subsection.\n- **References**: Use relative paths (e.g. `[link](./references/foo.md)`) so the docs render on GitHub and in the local viewer.\n- **Scripts**: Must include a shebang, a `requirements.txt` (even if empty / zero-dep), and graceful error handling. Print `[PASS]`/`[FAIL]`/`[WARN]` (ASCII, not emoji) for log-safety.\n- **Language**: SKILL.md body must be in English. Chinese translation lives in `README_zh.md`, not inside `SKILL.md`.\n- **No secrets**: Never commit API keys, tokens, or credentials. The CI audit (`audit_skill.py`) scans `.git/config` and source files for leaked tokens.\n\n## Quality Checklist\n\nBefore opening a PR, verify:\n\n- [ ] `tests/test_skill.py` exits with code 0\n- [ ] `audit_skill.py` reports \"AUDIT PASSED\" (exit 0)\n- [ ] `scripts/validate_output.py path/to/test.html` runs without crashing on a sample\n- [ ] Version is bumped in `SKILL.md` (`metadata.version`), `README.md` (badge), `README_zh.md` (badge), and `CHANGELOG.md`\n- [ ] `README.md` and `README_zh.md` are both present and consistent\n- [ ] `LICENSE` and `.gitignore` are present\n- [ ] No hardcoded secrets anywhere in the codebase\n\n## Reporting Issues\n\nPlease report issues via GitHub Issues with:\n\n1. **What you expected to happen**\n2. **What actually happened**\n3. **Steps to reproduce**\n4. **Environment** (OS, Python version, etc.)\n5. **Sample image** (if image-related)\n\n## License\n\nBy contributing, you agree that your contributions will be licensed under the MIT License.\n\nFile v3.1.0:README_zh.md\n\n# AI Image to Code\n\n[English](./README.md)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n![版本](https://img.shields.io/badge/version-3.1.0-blue)\n\n> 把 UI 截图变成可运行的 HTML/CSS 或 React 组件 —— 基于视觉分析、结构化代码生成和生成后验证。\n\n## 解决什么问题\n\n你有一张 UI 设计稿（截图、图片或设计稿文件），需要**真正可运行的前端代码**来还原它 —— 不是描述，不是重新设计，而是能直接用的 HTML 页面或 React 组件。\n\n触发短语：「把这张截图转成代码」、「复刻这个 UI」、「把图片变成 HTML」、「写一下这个 React 组件」。\n\n## 功能特性\n\n- **三种输出模式**：纯 HTML+CSS、React + Tailwind、或仅输出布局描述。\n- **视觉驱动提取**：用结构化的 7 段式 prompt 模板将图片发给 vision 模型（见 [SKILL.md Step 3](./SKILL.md#step-3--generate-code)）。\n- **布局模式识别**：把 17 种常见 UI 模式（landing、dashboard、mobile、login、card grid、table、modal 等）映射到合适的 HTML 结构 —— 见 [references/layout-patterns.md](./references/layout-patterns.md)。\n- **5 槽色彩提取**：在不破坏品牌一致性的前提下提取有用配色 —— 见 [references/color-extraction.md](./references/color-extraction.md)。\n- **Tailwind 友好输出**：每个视觉属性都能映射到 Tailwind 类 —— 见 [references/tailwind-mapping.md](./references/tailwind-mapping.md)。\n- **内置验证器**：运行 `scripts/validate_output.py` 检查未闭合标签、错配对、空 `href`/`src`，以及（用 `--strict`）过深的 `<div>` 嵌套。\n\n## 快速开始\n\n### 安装\n\n```bash\n# 通过 ClawHub 安装\nclawhub install ai-image-to-code\n\n# 或手动复制\ncp -r ai-image-to-code ~/.openclaw/skills/\n```\n\n### 使用方法\n\n粘贴或附带图片，然后提问。技能支持三种模式：\n\n```bash\n# 默认：HTML + CSS\n/ai-image-to-code\n\n# React + Tailwind 组件\n/ai-image-to-code/react\n\n# 仅输出布局描述（不写代码）\n/ai-image-to-code/describe\n```\n\n或者用自然语言提问 —— 技能会自动匹配意图。\n\n## 目录结构\n\n```\nai-image-to-code/\n├── SKILL.md                   # 入口（模式、执行步骤、强制规则）\n├── LICENSE                    # MIT\n├── README.md                  # 英文说明\n├── README_zh.md               # 本文件\n├── CONTRIBUTING.md            # 贡献指南\n├── CHANGELOG.md               # 版本历史\n├── _meta.json                 # ClawHub 元数据\n├── .gitignore\n├── references/                # 参考文档\n│   ├── color-extraction.md    # 5 槽配色算法\n│   ├── layout-patterns.md     # 12 种布局模式 + 决策树\n│   └── tailwind-mapping.md    # 视觉属性 → Tailwind 类查询表\n├── scripts/                   # 辅助脚本\n│   ├── validate_output.py     # HTML 输出验证器\n│   └── requirements.txt       # （零依赖）\n└── tests/                     # 自检\n    └── test_skill.py          # 24 个 audit 检查\n```\n\n## 参考文档\n\n本技能附三份包含具体启发式方法的参考文档：\n\n- [色彩提取启发式](./references/color-extraction.md) —— k-medoids 聚类、深/浅色模式检测、渐变处理\n- [布局模式识别](./references/layout-patterns.md) —— 视觉签名 + HTML 骨架 + 决策树\n- [Tailwind 类映射](./references/tailwind-mapping.md) —— 间距、排版、圆角、阴影、色彩 token\n\n## 验证\n\n生成 HTML 后跑一下验证：\n\n```bash\npython scripts/validate_output.py path/to/output.html\npython scripts/validate_output.py path/to/output.html --strict   # 同时检查 div 嵌套\n```\n\n## 强制规则（摘要）\n\n- **不要**捏造图中没有的品牌名或具体产品文字。\n- **不要**复刻受版权保护的 UI 元素（logo、图标）—— 用通用替代品。\n- **要**用符合上下文的占位文本（搜索框用「Search...」）。\n- **要**保留视觉层级（主 > 次 > 辅）。\n\n完整列表见 [SKILL.md → Mandatory Rules](./SKILL.md#mandatory-rules)。\n\n## 许可证\n\nMIT —— 详见 [LICENSE](LICENSE)。\n\n---\n\n由 [MiniMax](https://minimax.io) 提供支持。\n\nFile v3.1.0:skill-card.md\n\n## Description: <br>\nConverts UI screenshots or images into runnable HTML/CSS, React components, or structured layout descriptions using vision analysis and validation guidance. <br>\n\nThis skill is ready for commercial/non-commercial use. <br>\n\n## Publisher: <br>\n[wangjipeng977](https://clawhub.ai/user/wangjipeng977) <br>\n\n### License/Terms of Use: <br>\nMIT <br>\n\n\n## Use Case: <br>\nDevelopers and designers use this skill to turn UI screenshots, mockups, or design images into working frontend code or a concise layout description. <br>\n\n### Deployment Geography for Use: <br>\nGlobal <br>\n\n## Known Risks and Mitigations: <br>\nRisk: Attached UI screenshots may contain sensitive dashboards, credentials, private customer data, or proprietary designs that would be analyzed by the configured vision model. <br>\nMitigation: Redact sensitive content or obtain approval for the model provider before using the skill with such images. <br>\nRisk: Generated frontend code is an approximation and may include incorrect layout, colors, spacing, or placeholder content. <br>\nMitigation: Review the output, validate generated HTML with the bundled validator, and fine-tune implementation details before deployment. <br>\nRisk: The skill can suggest visual equivalents for UI elements, but reproducing proprietary logos or copyrighted interface assets may create reuse risk. <br>\nMitigation: Use generic equivalents for logos and icons unless the user has rights to reproduce the original assets. <br>\n\n\n## Reference(s): <br>\n- [ClawHub skill page](https://clawhub.ai/wangjipeng977/ai-image-to-code) <br>\n- [Publisher profile](https://clawhub.ai/user/wangjipeng977) <br>\n- [Metadata source repository](https://github.com/MiniMax-AI/skills) <br>\n- [Color extraction heuristics](references/color-extraction.md) <br>\n- [Layout pattern recognition](references/layout-patterns.md) <br>\n- [Tailwind class mapping](references/tailwind-mapping.md) <br>\n\n\n## Skill Output: <br>\n**Output Type(s):** [Text, Markdown, Code, Shell commands, Guidance] <br>\n**Output Format:** [Markdown with HTML, CSS, JSX, Tailwind examples, and validation commands] <br>\n**Output Parameters:** [1D] <br>\n**Other Properties Related to Output:** [Outputs are approximate UI implementations based on supplied images; users are instructed to fine-tune colors and spacing.] <br>\n\n## Skill Version(s): <br>\n3.1.0 (source: SKILL.md metadata and release evidence) <br>\n\n## Ethical Considerations: <br>\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment. <br>\n\nArchive v999.0.1: 9 files, 9914 bytes\n\nFiles: CHANGELOG.md (179b), CONTRIBUTING.md (2144b), README_zh.md (2341b), README.md (2453b), references/index.md (135b), skill-card.md (1841b), SKILL.md (1404b), tests/test_skill.py (12124b), _meta.json (137b)\n\nFile v999.0.1:SKILL.md\n\n# AI Image To Code\n\n**Emoji:** 🖼️→💻\n\n**Trigger:** User pastes a UI screenshot/image and wants code (HTML/CSS or React).\n\n## What It Does\n\nConverts UI screenshots into working HTML/CSS or React + Tailwind components. Analyzes the layout structure, color palette, typography hierarchy, and spacing to produce faithful code reconstruction.\n\n## Features\n\n- Vision-powered layout extraction (header, sidebar, main content, etc.)\n- Multi-format output: plain HTML/CSS (default) or React + Tailwind CSS\n- Mobile-first responsive (detects mobile screenshots → max-width: 375px)\n- Contextual placeholder content (e.g., \"Price: $49.99\" not lorem ipsum)\n\n## Modes\n\n| Mode | Description |\n|------|-------------|\n| `/ai-image-to-code` | Convert UI image to HTML/CSS |\n| `/ai-image-to-code/react` | Output React functional component + Tailwind |\n| `/ai-image-to-code/describe` | Text description of layout, no code |\n\n## How To Use\n\n```\n/ai-image-to-code\n```\nPaste a screenshot, ask to generate HTML/CSS.\n\n```\n/ai-image-to-code/react\n```\nAsks for React + Tailwind output instead.\n\n```\n/ai-image-to-code/describe\n```\nJust describe the layout, no code generation.\n\n## Technical Notes\n\n- Uses MiniMax vision model to analyze screenshot\n- Detects dark mode and applies appropriate color schemes\n- Generates semantic HTML structure\n- Tailwind classes mapped from visual analysis\n\n---\n\n*Last updated: 2026-05-28*\n\nFile v999.0.1:README.md\n\n# AI Image To Code\n\n[中文版](./README_zh.md)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n[![Version](https://img.shields.io/badge/version-1.0-blue)](SKILL.md)\n\n> Converts UI screenshots into HTML/CSS or React components — rebuilds designs as working code\n\n## What Problem This Solves\n\nUser has a design mockup or screenshot and needs it as actual code they can run — not a description, not a Figma export, but working HTML/CSS or a React component that looks like the original.\n\n**When triggered:** UI screenshot/image + code/generate/rebuild intent.\n\n## Features\n\n- **Vision-powered layout extraction** — analyzes screenshot for structure (header, sidebar, main content), color palette, typography hierarchy, and spacing\n- **Multi-format output** — plain HTML/CSS (default) or React + Tailwind CSS (for component requests)\n- **Mobile-first responsive** — detects mobile screenshots and outputs `max-width: 375px` containers\n- **Placeholder content** — uses contextually appropriate text (\"Price: $49.99\" not generic lorem ipsum)\n\n## Quick Start\n\n```bash\n# Via ClawHub\nclawhub install ai-image-to-code\n\n# Or manually\ncp -r ai-image-to-code ~/.openclaw/skills/\n```\n\n### Usage\n\n```\n/ai-image-to-code\n```\n\nPaste screenshot, ask to generate HTML/CSS.\n\n```\n/ai-image-to-code/react\n```\n\nAsks for React + Tailwind output instead of plain HTML.\n\n```\n/ai-image-to-code/describe\n```\n\nJust want a text description of the layout first — no code generation.\n\n## Modes\n\n| Mode | Description |\n|------|-------------|\n| `/ai-image-to-code` | Converts UI image to HTML/CSS |\n| `/ai-image-to-code/react` | Outputs React functional component with Tailwind |\n| `/ai-image-to-code/describe` | Text description of layout, no code |\n\n## Examples\n\n| Input | Output |\n|-------|--------|\n| E-commerce product card | \"Price: $49.99 — Add to Cart\" contextually appropriate |\n| Dark mode UI screenshot | Dark background, light text, correct contrast applied |\n| Mobile app screen | `max-width: 375px` container, mobile-first |\n| Complex dashboard | Grid layout with sidebar, header, main panels |\n\n## Directory Structure\n\n```\nai-image-to-code/\n├── SKILL.md\n├── LICENSE\n├── README.md\n├── README_zh.md\n├── CONTRIBUTING.md\n├── .gitignore\n├── references/       # Color extraction, layout patterns, Tailwind mapping\n└── tests/\n```\n\n## License\n\nMIT License — see [LICENSE](LICENSE).\n\nFile v999.0.1:_meta.json\n\n{\n  \"ownerId\": \"kn70zthc74p61mvctddrancx0s832g4r\",\n  \"slug\": \"ai-image-to-code\",\n  \"version\": \"999.0.1\",\n  \"publishedAt\": 1780241088400\n}\n\nFile v999.0.1:references/index.md\n\n# ai-image-to-code — References\n\nDetailed documents for `user-provides-screenshot` skill.\n\nTODO: Add reference files here as needed.\n\nFile v999.0.1:CHANGELOG.md\n\n# Changelog\n## [1.0.1] - 2026-05-18\n\n### Minor update\n\n- **Previous:** 1.0\n- **Changed:** Updated skill content and quality\n\n\n\n## [1.0] - 2026-05-18\n\n### Added\n\n- Initial release\n\nFile v999.0.1:CONTRIBUTING.md\n\n# Contributing to `User Provides Screenshot`\n\nThank you for your interest in contributing! Please follow these steps to set up your development environment and submit changes.\n\n## Development Setup\n\n```bash\n# 1. Fork the repository on GitHub\n\n# 2. Clone your fork\ngit clone https://github.com/<your-username>/User Provides Screenshot.git\ncd User Provides Screenshot\n\n# 3. Install dependencies (if any)\npip install -r scripts/requirements.txt\n\n# 4. Run the self-audit to verify quality\npython scripts/audit_skill.py .\n```\n\n## Workflow\n\nWe use a standard feature branch workflow:\n\n```bash\n# 1. Create a new branch from main\ngit checkout -b feat/<your-feature-name>\n\n# 2. Make your changes\n#    - Follow the SKILL.md structure standards\n#    - Keep SKILL.md body in English\n#    - Do not hardcode API keys or secrets\n\n# 3. Run the audit to check for issues\npython scripts/audit_skill.py .\n\n# 4. Commit your changes\ngit add .\ngit commit -m \"feat(ai-image-to-code): add <brief description>\"\n\n# 5. Push to your fork\ngit push origin feat/<your-feature-name>\n\n# 6. Open a Pull Request on GitHub\n#    - Title: feat(ai-image-to-code): add <brief description>\n#    - Description: What + Why + Testing\n```\n\n## Code Standards\n\n- **SKILL.md**: Follow the YAML frontmatter standard (name, description, license, metadata)\n- **Scripts**: Must include shebang, requirements.txt, and graceful error handling\n- **Language**: SKILL.md body must be in English; reference docs in English\n- **No secrets**: Never commit API keys, tokens, or credentials\n\n## Quality Checklist\n\nBefore opening a PR, verify:\n\n- [ ] `audit_skill.py` exits with code 0 or 2\n- [ ] `validate_skills.py` exits with code 0\n- [ ] README.md and README_zh.md are both present\n- [ ] CONTRIBUTING.md is present\n- [ ] .gitignore is present\n- [ ] No hardcoded secrets anywhere in the codebase\n\n## Reporting Issues\n\nPlease report issues via GitHub Issues with:\n\n1. **What you expected to happen**\n2. **What actually happened**\n3. **Steps to reproduce**\n4. **Environment** (OS, Python version, etc.)\n\n## License\n\nBy contributing, you agree that your contributions will be licensed under the MIT License.\n\nFile v999.0.1:README_zh.md\n\n# AI Image To Code\n\n[English](./README.md)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n![版本](https://img.shields.io/badge/version-1.0-blue)\n\n> 将 UI 截图转换为 HTML/CSS 或 React 组件 — 以工作代码重建设计\n\n## 解决什么问题\n\n用户有设计模型或截图，需要将其转换为可以实际运行的代码——不是描述，不是 Figma 导出，而是看起来像原始设计的工作 HTML/CSS 或 React 组件。\n\n**触发条件：** UI 截图/图片 + 代码/生成/重建意图。\n\n## 功能特性\n\n- **视觉驱动布局提取** — 分析截图的结构（头部、侧边栏、主内容）、配色、字体层次和间距\n- **多格式输出** — 纯 HTML/CSS（默认）或 React + Tailwind CSS（用于组件请求）\n- **移动端优先响应式** — 检测移动端截图并输出 `max-width: 375px` 容器\n- **适配的占位符内容** — 使用上下文适当文本（\"价格：￥49.99\"而非通用占位符）\n\n## 快速开始\n\n```bash\n# 通过 ClawHub 安装\nclawhub install ai-image-to-code\n\n# 或手动复制\ncp -r ai-image-to-code ~/.openclaw/skills/\n```\n\n### 使用方法\n\n```\n/ai-image-to-code\n```\n\n粘贴截图，要求生成 HTML/CSS。\n\n```\n/ai-image-to-code/react\n```\n\n要求 React + Tailwind 输出，而不是纯 HTML。\n\n```\n/ai-image-to-code/describe\n```\n\n只想先获取布局的文本描述——不生成代码。\n\n## 工作模式\n\n| 模式 | 说明 |\n|------|------|\n| `/ai-image-to-code` | 将 UI 图片转换为 HTML/CSS |\n| `/ai-image-to-code/react` | 输出 React 函数组件 + Tailwind |\n| `/ai-image-to-code/describe` | 布局的文本描述，无代码 |\n\n## 示例\n\n| 输入 | 输出 |\n|------|------|\n| 电商产品卡片 | \"价格：￥49.99 — 加入购物车\" 上下文适当 |\n| 深色模式 UI 截图 | 应用深色背景、浅色文字、正确对比度 |\n| 移动端 App 截图 | `max-width: 375px` 容器，移动端优先 |\n| 复杂仪表盘 | 网格布局：侧边栏、头部、主面板 |\n\n## 目录结构\n\n```\nai-image-to-code/\n├── SKILL.md\n├── LICENSE\n├── README.md\n├── README_zh.md\n├── CONTRIBUTING.md\n├── .gitignore\n├── references/       # 颜色提取、布局模式、Tailwind 映射\n└── tests/\n```\n\n## 许可证\n\nMIT 许可证 — 详见 [LICENSE](LICENSE)。\n\nFile v999.0.1:skill-card.md\n\n## Description:\n\nConverts UI screenshots or images into working HTML/CSS or React and Tailwind components.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[wangjipeng977](https://clawhub.ai/user/wangjipeng977)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and designers use this skill to turn UI screenshots, mockups, or app images into runnable frontend code or a concise layout description.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Screenshots can contain API keys, customer data, private dashboards, unreleased product designs, or other confidential information.\n\nMitigation: Redact sensitive or confidential screenshot content before using the skill.\n\nRisk: Generated UI code can reproduce visual structure but may still require validation for correctness, accessibility, and project conventions.\n\nMitigation: Review and test generated code before adding it to an application.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/wangjipeng977/skills/ai-image-to-code)\n- [Skill README](artifact/README.md)\n- [Skill instructions](artifact/SKILL.md)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, configuration, guidance]\n\n**Output Format:** [Markdown responses with HTML/CSS, React and Tailwind code blocks, or layout descriptions]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Output may depend on visual details in the supplied screenshot and should be reviewed before use.]\n\n## Skill Version(s):\n\n999.0.1 (source: ClawHub release evidence)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nArchive v2.0.3: 9 files, 9871 bytes\n\nFiles: CHANGELOG.md (179b), CONTRIBUTING.md (2144b), README_zh.md (2341b), README.md (2453b), references/index.md (135b), skill-card.md (1852b), SKILL.md (1404b), tests/test_skill.py (12124b), _meta.json (135b)\n\nFile v2.0.3:SKILL.md\n\n# AI Image To Code\n\n**Emoji:** 🖼️→💻\n\n**Trigger:** User pastes a UI screenshot/image and wants code (HTML/CSS or React).\n\n## What It Does\n\nConverts UI screenshots into working HTML/CSS or React + Tailwind components. Analyzes the layout structure, color palette, typography hierarchy, and spacing to produce faithful code reconstruction.\n\n## Features\n\n- Vision-powered layout extraction (header, sidebar, main content, etc.)\n- Multi-format output: plain HTML/CSS (default) or React + Tailwind CSS\n- Mobile-first responsive (detects mobile screenshots → max-width: 375px)\n- Contextual placeholder content (e.g., \"Price: $49.99\" not lorem ipsum)\n\n## Modes\n\n| Mode | Description |\n|------|-------------|\n| `/ai-image-to-code` | Convert UI image to HTML/CSS |\n| `/ai-image-to-code/react` | Output React functional component + Tailwind |\n| `/ai-image-to-code/describe` | Text description of layout, no code |\n\n## How To Use\n\n```\n/ai-image-to-code\n```\nPaste a screenshot, ask to generate HTML/CSS.\n\n```\n/ai-image-to-code/react\n```\nAsks for React + Tailwind output instead.\n\n```\n/ai-image-to-code/describe\n```\nJust describe the layout, no code generation.\n\n## Technical Notes\n\n- Uses MiniMax vision model to analyze screenshot\n- Detects dark mode and applies appropriate color schemes\n- Generates semantic HTML structure\n- Tailwind classes mapped from visual analysis\n\n---\n\n*Last updated: 2026-05-28*\n\nFile v2.0.3:README.md\n\n# AI Image To Code\n\n[中文版](./README_zh.md)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n[![Version](https://img.shields.io/badge/version-1.0-blue)](SKILL.md)\n\n> Converts UI screenshots into HTML/CSS or React components — rebuilds designs as working code\n\n## What Problem This Solves\n\nUser has a design mockup or screenshot and needs it as actual code they can run — not a description, not a Figma export, but working HTML/CSS or a React component that looks like the original.\n\n**When triggered:** UI screenshot/image + code/generate/rebuild intent.\n\n## Features\n\n- **Vision-powered layout extraction** — analyzes screenshot for structure (header, sidebar, main content), color palette, typography hierarchy, and spacing\n- **Multi-format output** — plain HTML/CSS (default) or React + Tailwind CSS (for component requests)\n- **Mobile-first responsive** — detects mobile screenshots and outputs `max-width: 375px` containers\n- **Placeholder content** — uses contextually appropriate text (\"Price: $49.99\" not generic lorem ipsum)\n\n## Quick Start\n\n```bash\n# Via ClawHub\nclawhub install ai-image-to-code\n\n# Or manually\ncp -r ai-image-to-code ~/.openclaw/skills/\n```\n\n### Usage\n\n```\n/ai-image-to-code\n```\n\nPaste screenshot, ask to generate HTML/CSS.\n\n```\n/ai-image-to-code/react\n```\n\nAsks for React + Tailwind output instead of plain HTML.\n\n```\n/ai-image-to-code/describe\n```\n\nJust want a text description of the layout first — no code generation.\n\n## Modes\n\n| Mode | Description |\n|------|-------------|\n| `/ai-image-to-code` | Converts UI image to HTML/CSS |\n| `/ai-image-to-code/react` | Outputs React functional component with Tailwind |\n| `/ai-image-to-code/describe` | Text description of layout, no code |\n\n## Examples\n\n| Input | Output |\n|-------|--------|\n| E-commerce product card | \"Price: $49.99 — Add to Cart\" contextually appropriate |\n| Dark mode UI screenshot | Dark background, light text, correct contrast applied |\n| Mobile app screen | `max-width: 375px` container, mobile-first |\n| Complex dashboard | Grid layout with sidebar, header, main panels |\n\n## Directory Structure\n\n```\nai-image-to-code/\n├── SKILL.md\n├── LICENSE\n├── README.md\n├── README_zh.md\n├── CONTRIBUTING.md\n├── .gitignore\n├── references/       # Color extraction, layout patterns, Tailwind mapping\n└── tests/\n```\n\n## License\n\nMIT License — see [LICENSE](LICENSE).\n\nFile v2.0.3:_meta.json\n\n{\n  \"ownerId\": \"kn70zthc74p61mvctddrancx0s832g4r\",\n  \"slug\": \"ai-image-to-code\",\n  \"version\": \"2.0.3\",\n  \"publishedAt\": 1780047409466\n}\n\nFile v2.0.3:references/index.md\n\n# ai-image-to-code — References\n\nDetailed documents for `user-provides-screenshot` skill.\n\nTODO: Add reference files here as needed.\n\nFile v2.0.3:CHANGELOG.md\n\n# Changelog\n## [1.0.1] - 2026-05-18\n\n### Minor update\n\n- **Previous:** 1.0\n- **Changed:** Updated skill content and quality\n\n\n\n## [1.0] - 2026-05-18\n\n### Added\n\n- Initial release\n\nFile v2.0.3:CONTRIBUTING.md\n\n# Contributing to `User Provides Screenshot`\n\nThank you for your interest in contributing! Please follow these steps to set up your development environment and submit changes.\n\n## Development Setup\n\n```bash\n# 1. Fork the repository on GitHub\n\n# 2. Clone your fork\ngit clone https://github.com/<your-username>/User Provides Screenshot.git\ncd User Provides Screenshot\n\n# 3. Install dependencies (if any)\npip install -r scripts/requirements.txt\n\n# 4. Run the self-audit to verify quality\npython scripts/audit_skill.py .\n```\n\n## Workflow\n\nWe use a standard feature branch workflow:\n\n```bash\n# 1. Create a new branch from main\ngit checkout -b feat/<your-feature-name>\n\n# 2. Make your changes\n#    - Follow the SKILL.md structure standards\n#    - Keep SKILL.md body in English\n#    - Do not hardcode API keys or secrets\n\n# 3. Run the audit to check for issues\npython scripts/audit_skill.py .\n\n# 4. Commit your changes\ngit add .\ngit commit -m \"feat(ai-image-to-code): add <brief description>\"\n\n# 5. Push to your fork\ngit push origin feat/<your-feature-name>\n\n# 6. Open a Pull Request on GitHub\n#    - Title: feat(ai-image-to-code): add <brief description>\n#    - Description: What + Why + Testing\n```\n\n## Code Standards\n\n- **SKILL.md**: Follow the YAML frontmatter standard (name, description, license, metadata)\n- **Scripts**: Must include shebang, requirements.txt, and graceful error handling\n- **Language**: SKILL.md body must be in English; reference docs in English\n- **No secrets**: Never commit API keys, tokens, or credentials\n\n## Quality Checklist\n\nBefore opening a PR, verify:\n\n- [ ] `audit_skill.py` exits with code 0 or 2\n- [ ] `validate_skills.py` exits with code 0\n- [ ] README.md and README_zh.md are both present\n- [ ] CONTRIBUTING.md is present\n- [ ] .gitignore is present\n- [ ] No hardcoded secrets anywhere in the codebase\n\n## Reporting Issues\n\nPlease report issues via GitHub Issues with:\n\n1. **What you expected to happen**\n2. **What actually happened**\n3. **Steps to reproduce**\n4. **Environment** (OS, Python version, etc.)\n\n## License\n\nBy contributing, you agree that your contributions will be licensed under the MIT License.\n\nFile v2.0.3:README_zh.md\n\n# AI Image To Code\n\n[English](./README.md)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n![版本](https://img.shields.io/badge/version-1.0-blue)\n\n> 将 UI 截图转换为 HTML/CSS 或 React 组件 — 以工作代码重建设计\n\n## 解决什么问题\n\n用户有设计模型或截图，需要将其转换为可以实际运行的代码——不是描述，不是 Figma 导出，而是看起来像原始设计的工作 HTML/CSS 或 React 组件。\n\n**触发条件：** UI 截图/图片 + 代码/生成/重建意图。\n\n## 功能特性\n\n- **视觉驱动布局提取** — 分析截图的结构（头部、侧边栏、主内容）、配色、字体层次和间距\n- **多格式输出** — 纯 HTML/CSS（默认）或 React + Tailwind CSS（用于组件请求）\n- **移动端优先响应式** — 检测移动端截图并输出 `max-width: 375px` 容器\n- **适配的占位符内容** — 使用上下文适当文本（\"价格：￥49.99\"而非通用占位符）\n\n## 快速开始\n\n```bash\n# 通过 ClawHub 安装\nclawhub install ai-image-to-code\n\n# 或手动复制\ncp -r ai-image-to-code ~/.openclaw/skills/\n```\n\n### 使用方法\n\n```\n/ai-image-to-code\n```\n\n粘贴截图，要求生成 HTML/CSS。\n\n```\n/ai-image-to-code/react\n```\n\n要求 React + Tailwind 输出，而不是纯 HTML。\n\n```\n/ai-image-to-code/describe\n```\n\n只想先获取布局的文本描述——不生成代码。\n\n## 工作模式\n\n| 模式 | 说明 |\n|------|------|\n| `/ai-image-to-code` | 将 UI 图片转换为 HTML/CSS |\n| `/ai-image-to-code/react` | 输出 React 函数组件 + Tailwind |\n| `/ai-image-to-code/describe` | 布局的文本描述，无代码 |\n\n## 示例\n\n| 输入 | 输出 |\n|------|------|\n| 电商产品卡片 | \"价格：￥49.99 — 加入购物车\" 上下文适当 |\n| 深色模式 UI 截图 | 应用深色背景、浅色文字、正确对比度 |\n| 移动端 App 截图 | `max-width: 375px` 容器，移动端优先 |\n| 复杂仪表盘 | 网格布局：侧边栏、头部、主面板 |\n\n## 目录结构\n\n```\nai-image-to-code/\n├── SKILL.md\n├── LICENSE\n├── README.md\n├── README_zh.md\n├── CONTRIBUTING.md\n├── .gitignore\n├── references/       # 颜色提取、布局模式、Tailwind 映射\n└── tests/\n```\n\n## 许可证\n\nMIT 许可证 — 详见 [LICENSE](LICENSE)。\n\nFile v2.0.3:skill-card.md\n\n## Description: <br>\nConverts UI screenshots or images into HTML/CSS, React with Tailwind, or concise layout descriptions. <br>\n\nThis skill is ready for commercial/non-commercial use. <br>\n\n## Publisher: <br>\n[wangjipeng977](https://clawhub.ai/user/wangjipeng977) <br>\n\n### License/Terms of Use: <br>\nMIT-0 <br>\n\n\n## Use Case: <br>\nDevelopers and designers use this skill to turn UI screenshots, mockups, or app screens into runnable interface code or a structured layout description. <br>\n\n### Deployment Geography for Use: <br>\nGlobal <br>\n\n## Known Risks and Mitigations: <br>\nRisk: Screenshots may contain credentials, customer data, private dashboards, or personal information. <br>\nMitigation: Redact sensitive areas before using the skill. <br>\nRisk: Screenshot analysis may be processed by an external MiniMax vision model. <br>\nMitigation: Use only images appropriate for external model processing under the user's data handling requirements. <br>\n\n\n## Reference(s): <br>\n- [ClawHub skill page](https://clawhub.ai/wangjipeng977/ai-image-to-code) <br>\n- [Artifact references index](artifact/references/index.md) <br>\n\n\n## Skill Output: <br>\n**Output Type(s):** [text, markdown, code, guidance] <br>\n**Output Format:** [Markdown with HTML/CSS, React and Tailwind code blocks, or prose layout descriptions] <br>\n**Output Parameters:** [1D] <br>\n**Other Properties Related to Output:** [Output mode depends on the invoked command: default HTML/CSS, React with Tailwind, or describe-only text.] <br>\n\n## Skill Version(s): <br>\n2.0.3 (source: server release evidence) <br>\n\n## Ethical Considerations: <br>\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment. <br>\n\nArchive v1.0.8: 9 files, 9922 bytes\n\nFiles: CHANGELOG.md (179b), CONTRIBUTING.md (2144b), README_zh.md (2341b), README.md (2453b), references/index.md (135b), skill-card.md (1916b), SKILL.md (1404b), tests/test_skill.py (12124b), _meta.json (135b)\n\nFile v1.0.8:SKILL.md\n\n# AI Image To Code\n\n**Emoji:** 🖼️→💻\n\n**Trigger:** User pastes a UI screenshot/image and wants code (HTML/CSS or React).\n\n## What It Does\n\nConverts UI screenshots into working HTML/CSS or React + Tailwind components. Analyzes the layout structure, color palette, typography hierarchy, and spacing to produce faithful code reconstruction.\n\n## Features\n\n- Vision-powered layout extraction (header, sidebar, main content, etc.)\n- Multi-format output: plain HTML/CSS (default) or React + Tailwind CSS\n- Mobile-first responsive (detects mobile screenshots → max-width: 375px)\n- Contextual placeholder content (e.g., \"Price: $49.99\" not lorem ipsum)\n\n## Modes\n\n| Mode | Description |\n|------|-------------|\n| `/ai-image-to-code` | Convert UI image to HTML/CSS |\n| `/ai-image-to-code/react` | Output React functional component + Tailwind |\n| `/ai-image-to-code/describe` | Text description of layout, no code |\n\n## How To Use\n\n```\n/ai-image-to-code\n```\nPaste a screenshot, ask to generate HTML/CSS.\n\n```\n/ai-image-to-code/react\n```\nAsks for React + Tailwind output instead.\n\n```\n/ai-image-to-code/describe\n```\nJust describe the layout, no code generation.\n\n## Technical Notes\n\n- Uses MiniMax vision model to analyze screenshot\n- Detects dark mode and applies appropriate color schemes\n- Generates semantic HTML structure\n- Tailwind classes mapped from visual analysis\n\n---\n\n*Last updated: 2026-05-28*\n\nFile v1.0.8:README.md\n\n# AI Image To Code\n\n[中文版](./README_zh.md)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n[![Version](https://img.shields.io/badge/version-1.0-blue)](SKILL.md)\n\n> Converts UI screenshots into HTML/CSS or React components — rebuilds designs as working code\n\n## What Problem This Solves\n\nUser has a design mockup or screenshot and needs it as actual code they can run — not a description, not a Figma export, but working HTML/CSS or a React component that looks like the original.\n\n**When triggered:** UI screenshot/image + code/generate/rebuild intent.\n\n## Features\n\n- **Vision-powered layout extraction** — analyzes screenshot for structure (header, sidebar, main content), color palette, typography hierarchy, and spacing\n- **Multi-format output** — plain HTML/CSS (default) or React + Tailwind CSS (for component requests)\n- **Mobile-first responsive** — detects mobile screenshots and outputs `max-width: 375px` containers\n- **Placeholder content** — uses contextually appropriate text (\"Price: $49.99\" not generic lorem ipsum)\n\n## Quick Start\n\n```bash\n# Via ClawHub\nclawhub install ai-image-to-code\n\n# Or manually\ncp -r ai-image-to-code ~/.openclaw/skills/\n```\n\n### Usage\n\n```\n/ai-image-to-code\n```\n\nPaste screenshot, ask to generate HTML/CSS.\n\n```\n/ai-image-to-code/react\n```\n\nAsks for React + Tailwind output instead of plain HTML.\n\n```\n/ai-image-to-code/describe\n```\n\nJust want a text description of the layout first — no code generation.\n\n## Modes\n\n| Mode | Description |\n|------|-------------|\n| `/ai-image-to-code` | Converts UI image to HTML/CSS |\n| `/ai-image-to-code/react` | Outputs React functional component with Tailwind |\n| `/ai-image-to-code/describe` | Text description of layout, no code |\n\n## Examples\n\n| Input | Output |\n|-------|--------|\n| E-commerce product card | \"Price: $49.99 — Add to Cart\" contextually appropriate |\n| Dark mode UI screenshot | Dark background, light text, correct contrast applied |\n| Mobile app screen | `max-width: 375px` container, mobile-first |\n| Complex dashboard | Grid layout with sidebar, header, main panels |\n\n## Directory Structure\n\n```\nai-image-to-code/\n├── SKILL.md\n├── LICENSE\n├── README.md\n├── README_zh.md\n├── CONTRIBUTING.md\n├── .gitignore\n├── references/       # Color extraction, layout patterns, Tailwind mapping\n└── tests/\n```\n\n## License\n\nMIT License — see [LICENSE](LICENSE).\n\nFile v1.0.8:_meta.json\n\n{\n  \"ownerId\": \"kn70zthc74p61mvctddrancx0s832g4r\",\n  \"slug\": \"ai-image-to-code\",\n  \"version\": \"1.0.8\",\n  \"publishedAt\": 1779992382799\n}\n\nFile v1.0.8:references/index.md\n\n# ai-image-to-code — References\n\nDetailed documents for `user-provides-screenshot` skill.\n\nTODO: Add reference files here as needed.\n\nFile v1.0.8:CHANGELOG.md\n\n# Changelog\n## [1.0.1] - 2026-05-18\n\n### Minor update\n\n- **Previous:** 1.0\n- **Changed:** Updated skill content and quality\n\n\n\n## [1.0] - 2026-05-18\n\n### Added\n\n- Initial release\n\nFile v1.0.8:CONTRIBUTING.md\n\n# Contributing to `User Provides Screenshot`\n\nThank you for your interest in contributing! Please follow these steps to set up your development environment and submit changes.\n\n## Development Setup\n\n```bash\n# 1. Fork the repository on GitHub\n\n# 2. Clone your fork\ngit clone https://github.com/<your-username>/User Provides Screenshot.git\ncd User Provides Screenshot\n\n# 3. Install dependencies (if any)\npip install -r scripts/requirements.txt\n\n# 4. Run the self-audit to verify quality\npython scripts/audit_skill.py .\n```\n\n## Workflow\n\nWe use a standard feature branch workflow:\n\n```bash\n# 1. Create a new branch from main\ngit checkout -b feat/<your-feature-name>\n\n# 2. Make your changes\n#    - Follow the SKILL.md structure standards\n#    - Keep SKILL.md body in English\n#    - Do not hardcode API keys or secrets\n\n# 3. Run the audit to check for issues\npython scripts/audit_skill.py .\n\n# 4. Commit your changes\ngit add .\ngit commit -m \"feat(ai-image-to-code): add <brief description>\"\n\n# 5. Push to your fork\ngit push origin feat/<your-feature-name>\n\n# 6. Open a Pull Request on GitHub\n#    - Title: feat(ai-image-to-code): add <brief description>\n#    - Description: What + Why + Testing\n```\n\n## Code Standards\n\n- **SKILL.md**: Follow the YAML frontmatter standard (name, description, license, metadata)\n- **Scripts**: Must include shebang, requirements.txt, and graceful error handling\n- **Language**: SKILL.md body must be in English; reference docs in English\n- **No secrets**: Never commit API keys, tokens, or credentials\n\n## Quality Checklist\n\nBefore opening a PR, verify:\n\n- [ ] `audit_skill.py` exits with code 0 or 2\n- [ ] `validate_skills.py` exits with code 0\n- [ ] README.md and README_zh.md are both present\n- [ ] CONTRIBUTING.md is present\n- [ ] .gitignore is present\n- [ ] No hardcoded secrets anywhere in the codebase\n\n## Reporting Issues\n\nPlease report issues via GitHub Issues with:\n\n1. **What you expected to happen**\n2. **What actually happened**\n3. **Steps to reproduce**\n4. **Environment** (OS, Python version, etc.)\n\n## License\n\nBy contributing, you agree that your contributions will be licensed under the MIT License.\n\nFile v1.0.8:README_zh.md\n\n# AI Image To Code\n\n[English](./README.md)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n![版本](https://img.shields.io/badge/version-1.0-blue)\n\n> 将 UI 截图转换为 HTML/CSS 或 React 组件 — 以工作代码重建设计\n\n## 解决什么问题\n\n用户有设计模型或截图，需要将其转换为可以实际运行的代码——不是描述，不是 Figma 导出，而是看起来像原始设计的工作 HTML/CSS 或 React 组件。\n\n**触发条件：** UI 截图/图片 + 代码/生成/重建意图。\n\n## 功能特性\n\n- **视觉驱动布局提取** — 分析截图的结构（头部、侧边栏、主内容）、配色、字体层次和间距\n- **多格式输出** — 纯 HTML/CSS（默认）或 React + Tailwind CSS（用于组件请求）\n- **移动端优先响应式** — 检测移动端截图并输出 `max-width: 375px` 容器\n- **适配的占位符内容** — 使用上下文适当文本（\"价格：￥49.99\"而非通用占位符）\n\n## 快速开始\n\n```bash\n# 通过 ClawHub 安装\nclawhub install ai-image-to-code\n\n# 或手动复制\ncp -r ai-image-to-code ~/.openclaw/skills/\n```\n\n### 使用方法\n\n```\n/ai-image-to-code\n```\n\n粘贴截图，要求生成 HTML/CSS。\n\n```\n/ai-image-to-code/react\n```\n\n要求 React + Tailwind 输出，而不是纯 HTML。\n\n```\n/ai-image-to-code/describe\n```\n\n只想先获取布局的文本描述——不生成代码。\n\n## 工作模式\n\n| 模式 | 说明 |\n|------|------|\n| `/ai-image-to-code` | 将 UI 图片转换为 HTML/CSS |\n| `/ai-image-to-code/react` | 输出 React 函数组件 + Tailwind |\n| `/ai-image-to-code/describe` | 布局的文本描述，无代码 |\n\n## 示例\n\n| 输入 | 输出 |\n|------|------|\n| 电商产品卡片 | \"价格：￥49.99 — 加入购物车\" 上下文适当 |\n| 深色模式 UI 截图 | 应用深色背景、浅色文字、正确对比度 |\n| 移动端 App 截图 | `max-width: 375px` 容器，移动端优先 |\n| 复杂仪表盘 | 网格布局：侧边栏、头部、主面板 |\n\n## 目录结构\n\n```\nai-image-to-code/\n├── SKILL.md\n├── LICENSE\n├── README.md\n├── README_zh.md\n├── CONTRIBUTING.md\n├── .gitignore\n├── references/       # 颜色提取、布局模式、Tailwind 映射\n└── tests/\n```\n\n## 许可证\n\nMIT 许可证 — 详见 [LICENSE](LICENSE)。\n\nFile v1.0.8:skill-card.md\n\n## Description: <br>\nConverts user-provided UI screenshots or images into working HTML/CSS, React with Tailwind, or a text layout description. <br>\n\nThis skill is ready for commercial/non-commercial use. <br>\n\n## Publisher: <br>\n[wangjipeng977](https://clawhub.ai/user/wangjipeng977) <br>\n\n### License/Terms of Use: <br>\nMIT-0 <br>\n\n\n## Use Case: <br>\nDevelopers and designers use this skill to rebuild UI screenshots, mockups, or app screens as runnable front-end code. It supports plain HTML/CSS, React with Tailwind, and description-only analysis modes. <br>\n\n### Deployment Geography for Use: <br>\nGlobal <br>\n\n## Known Risks and Mitigations: <br>\nRisk: Uploaded UI screenshots may contain secrets, customer data, credentials, financial records, dashboards, inboxes, or other private information. <br>\nMitigation: Crop or redact sensitive regions before using the skill, and treat screenshots as data shared with the model environment. <br>\n\n\n## Reference(s): <br>\n- [ClawHub skill page](https://clawhub.ai/wangjipeng977/ai-image-to-code) <br>\n- [README.md](artifact/README.md) <br>\n- [references/index.md](artifact/references/index.md) <br>\n\n\n## Skill Output: <br>\n**Output Type(s):** [Code, Markdown, Guidance] <br>\n**Output Format:** [Markdown with code blocks for HTML/CSS or React and Tailwind, or a prose layout description] <br>\n**Output Parameters:** [1D] <br>\n**Other Properties Related to Output:** [May include responsive layout choices, semantic HTML structure, Tailwind classes, color and typography mapping, and contextual placeholder content.] <br>\n\n## Skill Version(s): <br>\n1.0.8 (source: server release metadata) <br>\n\n## Ethical Considerations: <br>\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment. <br>\n\nArchive v99.0.0: 9 files, 11912 bytes\n\nFiles: CHANGELOG.md (179b), CONTRIBUTING.md (2144b), README_zh.md (2341b), README.md (2453b), references/index.md (135b), skill-card.md (2245b), SKILL.md (5630b), tests/test_skill.py (12124b), _meta.json (136b)\n\nFile v99.0.0:SKILL.md\n\n---\nname: ai-image-to-code\ndescription: >\n  Use when (1) user provides a UI screenshot or image and asks to convert it into HTML, CSS, or component code. \n  (2) user says \"turn this into code\", \"rebuild this UI\", \"code this design\", or \"generate HTML from screenshot\". \n  (3) user pastes an image and says \"write the React component for this\". \nlicense: MIT\nmetadata:\n  version: \"1.0.1\"\n  category: design\n  author: wangjipeng\n  sources:\n    - https://github.com/MiniMax-AI/skills\n---\n\n# AI Image to Code\n\nUse 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\".\n\n## Core Position\n\nThis 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.*\n\nThis skill IS NOT:\n- An image generation tool — it converts existing images to code, not creates images\n- A design tool — it interprets and codes a design, not create the design\n- A backend integration tool — it outputs HTML/CSS/JS, not server code\n\nThis skill IS activated ONLY when: image (screenshot/mockup) + code generation intent are both present.\n\n## Modes\n\n### `/ai-image-to-code`\n\n**Default mode.** Converts a UI image into a complete HTML/CSS implementation.\n\nWhen to use: User provides a screenshot and wants a working HTML page that resembles it.\n\n### `/ai-image-to-code/react`\n\nOutputs a React functional component using Tailwind CSS.\n\nWhen to use: User explicitly asks for React or a component, not a plain HTML page.\n\n### `/ai-image-to-code/describe`\n\nProvides a detailed text description of the layout without writing code.\n\nWhen to use: User only wants to understand the layout before committing to code generation.\n\n## Execution Steps\n\n### Step 1 — Analyze the Image\n\n1. Receive image (pasted, file attachment, or URL)\n2. Use vision model to inspect the image and extract:\n   - Layout structure (header, sidebar, main content, footer)\n   - Color palette (primary, secondary, background, text, accent)\n   - Typography (headings, body, labels — size and weight hierarchy)\n   - Spacing system (padding, margins, gaps)\n   - Component types (buttons, inputs, cards, lists, navigation)\n   - Visual hierarchy (what stands out, what recedes)\n3. If the image is complex (>10 distinct UI sections), focus on the main content area\n\n### Step 2 — Plan the Code Structure\n\n| Image Content | Recommended Output |\n|---|---|\n| Landing page | Single HTML with embedded CSS |\n| Dashboard | HTML + CSS grid layout |\n| Mobile app screen | Mobile-first responsive HTML |\n| Form / login page | Semantic HTML form with proper inputs |\n| Card / list UI | Component-based HTML with classes |\n| Chart / data visualization | SVG or canvas-based rendering |\n\n### Step 3 — Generate Code\n\n**HTML/CSS output** (default):\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>UI</title>\n  <style>\n    /* Extracted colors, typography, spacing from image */\n  </style>\n</head>\n<body>\n  <!-- Structure matching the image layout -->\n</body>\n</html>\n```\n\n**React + Tailwind** (react mode):\n```jsx\nexport function UICard() {\n  return (\n    <div className=\"p-6 bg-white rounded-xl shadow-sm\">\n      {/* Component matching image */}\n    </div>\n  );\n}\n```\n\n### Step 4 — Validate\n\n- Key layout sections (header, main, sidebar) are present\n- Colors are within ±10% of the original image (subjective match)\n- No invented content — placeholder text is generic (\"Card title\", not specific brand names)\n- HTML is valid (proper tag nesting, no unclosed tags)\n\n## Mandatory Rules\n\n### Do not\n\n- Do not invent brand names, specific product names, or proprietary text not visible in the image\n- Do not claim the output is pixel-perfect — it is an interpretation\n- Do not generate backend code, JavaScript logic, or API calls\n- Do not reproduce copyrighted UI elements (logos, icons) — use generic equivalents\n\n### Do\n\n- Use placeholder text that fits the context (e.g., \"Search...\" for a search bar)\n- Preserve the visual hierarchy (primary > secondary > tertiary)\n- Use realistic placeholder data for images (e.g., via placeholder.com or picsum)\n- State explicitly: \"This is an approximation; fine-tune colors and spacing as needed\"\n\n## Quality Bar\n\n**A good output:**\n- All major layout regions are present and positioned correctly\n- Color palette is recognizably derived from the image\n- Typography hierarchy matches (heading size > body size)\n- Code is valid, runnable HTML/CSS without external dependencies beyond a CDN\n\n**A bad output:**\n- Layout is scrambled or missing major sections\n- Output includes broken or unclosed HTML tags\n- Fabricated text content not appropriate to the UI context\n- Output requires non-free dependencies or local asset files\n\n## Good vs. Bad Examples\n\n| Scenario | Bad Output | Good Output |\n|---|---|---|\n| E-commerce product card | Generic lorem ipsum text | \"Price: $49.99 — Add to Cart\" contextually appropriate |\n| Dark mode UI | Ignores dark theme | Uses dark background, light text, correct contrast |\n| Mobile screenshot | Desktop-only output | `max-width: 375px` container, mobile-first |\n| Complex dashboard | One undifferentiated div | Grid layout with sidebar, header, main panels |\n\n## References\n\n- `references/` — Color extraction heuristics, layout structure patterns, Tailwind class mapping guide\n\nFile v99.0.0:README.md\n\n# AI Image To Code\n\n[中文版](./README_zh.md)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n[![Version](https://img.shields.io/badge/version-1.0-blue)](SKILL.md)\n\n> Converts UI screenshots into HTML/CSS or React components — rebuilds designs as working code\n\n## What Problem This Solves\n\nUser has a design mockup or screenshot and needs it as actual code they can run — not a description, not a Figma export, but working HTML/CSS or a React component that looks like the original.\n\n**When triggered:** UI screenshot/image + code/generate/rebuild intent.\n\n## Features\n\n- **Vision-powered layout extraction** — analyzes screenshot for structure (header, sidebar, main content), color palette, typography hierarchy, and spacing\n- **Multi-format output** — plain HTML/CSS (default) or React + Tailwind CSS (for component requests)\n- **Mobile-first responsive** — detects mobile screenshots and outputs `max-width: 375px` containers\n- **Placeholder content** — uses contextually appropriate text (\"Price: $49.99\" not generic lorem ipsum)\n\n## Quick Start\n\n```bash\n# Via ClawHub\nclawhub install ai-image-to-code\n\n# Or manually\ncp -r ai-image-to-code ~/.openclaw/skills/\n```\n\n### Usage\n\n```\n/ai-image-to-code\n```\n\nPaste screenshot, ask to generate HTML/CSS.\n\n```\n/ai-image-to-code/react\n```\n\nAsks for React + Tailwind output instead of plain HTML.\n\n```\n/ai-image-to-code/describe\n```\n\nJust want a text description of the layout first — no code generation.\n\n## Modes\n\n| Mode | Description |\n|------|-------------|\n| `/ai-image-to-code` | Converts UI image to HTML/CSS |\n| `/ai-image-to-code/react` | Outputs React functional component with Tailwind |\n| `/ai-image-to-code/describe` | Text description of layout, no code |\n\n## Examples\n\n| Input | Output |\n|-------|--------|\n| E-commerce product card | \"Price: $49.99 — Add to Cart\" contextually appropriate |\n| Dark mode UI screenshot | Dark background, light text, correct contrast applied |\n| Mobile app screen | `max-width: 375px` container, mobile-first |\n| Complex dashboard | Grid layout with sidebar, header, main panels |\n\n## Directory Structure\n\n```\nai-image-to-code/\n├── SKILL.md\n├── LICENSE\n├── README.md\n├── README_zh.md\n├── CONTRIBUTING.md\n├── .gitignore\n├── references/       # Color extraction, layout patterns, Tailwind mapping\n└── tests/\n```\n\n## License\n\nMIT License — see [LICENSE](LICENSE).\n\nFile v99.0.0:_meta.json\n\n{\n  \"ownerId\": \"kn70zthc74p61mvctddrancx0s832g4r\",\n  \"slug\": \"ai-image-to-code\",\n  \"version\": \"99.0.0\",\n  \"publishedAt\": 1779937110261\n}\n\nFile v99.0.0:references/index.md\n\n# ai-image-to-code — References\n\nDetailed documents for `user-provides-screenshot` skill.\n\nTODO: Add reference files here as needed.\n\nFile v99.0.0:CHANGELOG.md\n\n# Changelog\n## [1.0.1] - 2026-05-18\n\n### Minor update\n\n- **Previous:** 1.0\n- **Changed:** Updated skill content and quality\n\n\n\n## [1.0] - 2026-05-18\n\n### Added\n\n- Initial release\n\nFile v99.0.0:CONTRIBUTING.md\n\n# Contributing to `User Provides Screenshot`\n\nThank you for your interest in contributing! Please follow these steps to set up your development environment and submit changes.\n\n## Development Setup\n\n```bash\n# 1. Fork the repository on GitHub\n\n# 2. Clone your fork\ngit clone https://github.com/<your-username>/User Provides Screenshot.git\ncd User Provides Screenshot\n\n# 3. Install dependencies (if any)\npip install -r scripts/requirements.txt\n\n# 4. Run the self-audit to verify quality\npython scripts/audit_skill.py .\n```\n\n## Workflow\n\nWe use a standard feature branch workflow:\n\n```bash\n# 1. Create a new branch from main\ngit checkout -b feat/<your-feature-name>\n\n# 2. Make your changes\n#    - Follow the SKILL.md structure standards\n#    - Keep SKILL.md body in English\n#    - Do not hardcode API keys or secrets\n\n# 3. Run the audit to check for issues\npython scripts/audit_skill.py .\n\n# 4. Commit your changes\ngit add .\ngit commit -m \"feat(ai-image-to-code): add <brief description>\"\n\n# 5. Push to your fork\ngit push origin feat/<your-feature-name>\n\n# 6. Open a Pull Request on GitHub\n#    - Title: feat(ai-image-to-code): add <brief description>\n#    - Description: What + Why + Testing\n```\n\n## Code Standards\n\n- **SKILL.md**: Follow the YAML frontmatter standard (name, description, license, metadata)\n- **Scripts**: Must include shebang, requirements.txt, and graceful error handling\n- **Language**: SKILL.md body must be in English; reference docs in English\n- **No secrets**: Never commit API keys, tokens, or credentials\n\n## Quality Checklist\n\nBefore opening a PR, verify:\n\n- [ ] `audit_skill.py` exits with code 0 or 2\n- [ ] `validate_skills.py` exits with code 0\n- [ ] README.md and README_zh.md are both present\n- [ ] CONTRIBUTING.md is present\n- [ ] .gitignore is present\n- [ ] No hardcoded secrets anywhere in the codebase\n\n## Reporting Issues\n\nPlease report issues via GitHub Issues with:\n\n1. **What you expected to happen**\n2. **What actually happened**\n3. **Steps to reproduce**\n4. **Environment** (OS, Python version, etc.)\n\n## License\n\nBy contributing, you agree that your contributions will be licensed under the MIT License.\n\nFile v99.0.0:README_zh.md\n\n# AI Image To Code\n\n[English](./README.md)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n![版本](https://img.shields.io/badge/version-1.0-blue)\n\n> 将 UI 截图转换为 HTML/CSS 或 React 组件 — 以工作代码重建设计\n\n## 解决什么问题\n\n用户有设计模型或截图，需要将其转换为可以实际运行的代码——不是描述，不是 Figma 导出，而是看起来像原始设计的工作 HTML/CSS 或 React 组件。\n\n**触发条件：** UI 截图/图片 + 代码/生成/重建意图。\n\n## 功能特性\n\n- **视觉驱动布局提取** — 分析截图的结构（头部、侧边栏、主内容）、配色、字体层次和间距\n- **多格式输出** — 纯 HTML/CSS（默认）或 React + Tailwind CSS（用于组件请求）\n- **移动端优先响应式** — 检测移动端截图并输出 `max-width: 375px` 容器\n- **适配的占位符内容** — 使用上下文适当文本（\"价格：￥49.99\"而非通用占位符）\n\n## 快速开始\n\n```bash\n# 通过 ClawHub 安装\nclawhub install ai-image-to-code\n\n# 或手动复制\ncp -r ai-image-to-code ~/.openclaw/skills/\n```\n\n### 使用方法\n\n```\n/ai-image-to-code\n```\n\n粘贴截图，要求生成 HTML/CSS。\n\n```\n/ai-image-to-code/react\n```\n\n要求 React + Tailwind 输出，而不是纯 HTML。\n\n```\n/ai-image-to-code/describe\n```\n\n只想先获取布局的文本描述——不生成代码。\n\n## 工作模式\n\n| 模式 | 说明 |\n|------|------|\n| `/ai-image-to-code` | 将 UI 图片转换为 HTML/CSS |\n| `/ai-image-to-code/react` | 输出 React 函数组件 + Tailwind |\n| `/ai-image-to-code/describe` | 布局的文本描述，无代码 |\n\n## 示例\n\n| 输入 | 输出 |\n|------|------|\n| 电商产品卡片 | \"价格：￥49.99 — 加入购物车\" 上下文适当 |\n| 深色模式 UI 截图 | 应用深色背景、浅色文字、正确对比度 |\n| 移动端 App 截图 | `max-width: 375px` 容器，移动端优先 |\n| 复杂仪表盘 | 网格布局：侧边栏、头部、主面板 |\n\n## 目录结构\n\n```\nai-image-to-code/\n├── SKILL.md\n├── LICENSE\n├── README.md\n├── README_zh.md\n├── CONTRIBUTING.md\n├── .gitignore\n├── references/       # 颜色提取、布局模式、Tailwind 映射\n└── tests/\n```\n\n## 许可证\n\nMIT 许可证 — 详见 [LICENSE](LICENSE)。\n\nFile v99.0.0:skill-card.md\n\n## Description: <br>\nConverts UI screenshots or images into runnable HTML/CSS, React with Tailwind, or a layout description when the user asks to rebuild a visual UI as code. <br>\n\nThis skill is ready for commercial/non-commercial use. <br>\n\n## Publisher: <br>\n[wangjipeng977](https://clawhub.ai/user/wangjipeng977) <br>\n\n### License/Terms of Use: <br>\nMIT-0 <br>\n\n\n## Use Case: <br>\nDevelopers and designers use this skill to turn UI screenshots, mockups, or pasted images into working frontend code or a structured layout description for implementation review. <br>\n\n### Deployment Geography for Use: <br>\nGlobal <br>\n\n## Known Risks and Mitigations: <br>\nRisk: Input screenshots may contain secrets, customer data, internal URLs, financial details, emails, or proprietary designs. <br>\nMitigation: Crop or redact sensitive content before using the skill. <br>\nRisk: Generated UI code is an approximation and may not match the source image exactly. <br>\nMitigation: Review the generated structure, colors, spacing, and responsive behavior before deployment. <br>\nRisk: Screenshots may include copyrighted logos, icons, or proprietary interface elements. <br>\nMitigation: Replace protected assets with generic equivalents or approved assets before reuse. <br>\n\n\n## Reference(s): <br>\n- [ClawHub Skill Page](https://clawhub.ai/wangjipeng977/ai-image-to-code) <br>\n- [Publisher Profile](https://clawhub.ai/user/wangjipeng977) <br>\n- [References Index](references/index.md) <br>\n\n\n## Skill Output: <br>\n**Output Type(s):** [Text, Markdown, Code, Guidance] <br>\n**Output Format:** [Markdown with HTML, CSS, JSX, Tailwind, or descriptive text depending on the selected mode] <br>\n**Output Parameters:** [1D] <br>\n**Other Properties Related to Output:** [Outputs are approximate visual reconstructions and should be reviewed, tested, and adjusted before use.] <br>\n\n## Skill Version(s): <br>\n99.0.0 (source: server release metadata; artifact metadata version is 1.0.1) <br>\n\n## Ethical Considerations: <br>\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment. <br>\n\nArchive v1.2.0: 9 files, 11088 bytes\n\nFiles: _meta.json (135b), CHANGELOG.md (179b), CONTRIBUTING.md (2138b), README_zh.md (1483b), README.md (1549b), references/index.md (132b), skill-card.md (2208b), SKILL.md (5615b), tests/test_skill.py (12124b)\n\nFile v1.2.0:SKILL.md\n\n---\nname: image-to-code\ndescription: >\n  Use when (1) user provides a UI screenshot or image and asks to convert it into HTML, CSS, or component code. \n  (2) user says \"turn this into code\", \"rebuild this UI\", \"code this design\", or \"generate HTML from screenshot\". \n  (3) user pastes an image and says \"write the React component for this\". \nlicense: MIT\nmetadata:\n  version: \"6.0.1\"\n  category: design\n  author: wangjipeng\n  sources:\n    - https://github.com/MiniMax-AI/skills\n---\n\n# Image to Code\n\nUse 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\".\n\n## Core Position\n\nThis 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.*\n\nThis skill IS NOT:\n- An image generation tool — it converts existing images to code, not creates images\n- A design tool — it interprets and codes a design, not create the design\n- A backend integration tool — it outputs HTML/CSS/JS, not server code\n\nThis skill IS activated ONLY when: image (screenshot/mockup) + code generation intent are both present.\n\n## Modes\n\n### `/image-to-code`\n\n**Default mode.** Converts a UI image into a complete HTML/CSS implementation.\n\nWhen to use: User provides a screenshot and wants a working HTML page that resembles it.\n\n### `/image-to-code/react`\n\nOutputs a React functional component using Tailwind CSS.\n\nWhen to use: User explicitly asks for React or a component, not a plain HTML page.\n\n### `/image-to-code/describe`\n\nProvides a detailed text description of the layout without writing code.\n\nWhen to use: User only wants to understand the layout before committing to code generation.\n\n## Execution Steps\n\n### Step 1 — Analyze the Image\n\n1. Receive image (pasted, file attachment, or URL)\n2. Use vision model to inspect the image and extract:\n   - Layout structure (header, sidebar, main content, footer)\n   - Color palette (primary, secondary, background, text, accent)\n   - Typography (headings, body, labels — size and weight hierarchy)\n   - Spacing system (padding, margins, gaps)\n   - Component types (buttons, inputs, cards, lists, navigation)\n   - Visual hierarchy (what stands out, what recedes)\n3. If the image is complex (>10 distinct UI sections), focus on the main content area\n\n### Step 2 — Plan the Code Structure\n\n| Image Content | Recommended Output |\n|---|---|\n| Landing page | Single HTML with embedded CSS |\n| Dashboard | HTML + CSS grid layout |\n| Mobile app screen | Mobile-first responsive HTML |\n| Form / login page | Semantic HTML form with proper inputs |\n| Card / list UI | Component-based HTML with classes |\n| Chart / data visualization | SVG or canvas-based rendering |\n\n### Step 3 — Generate Code\n\n**HTML/CSS output** (default):\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>UI</title>\n  <style>\n    /* Extracted colors, typography, spacing from image */\n  </style>\n</head>\n<body>\n  <!-- Structure matching the image layout -->\n</body>\n</html>\n```\n\n**React + Tailwind** (react mode):\n```jsx\nexport function UICard() {\n  return (\n    <div className=\"p-6 bg-white rounded-xl shadow-sm\">\n      {/* Component matching image */}\n    </div>\n  );\n}\n```\n\n### Step 4 — Validate\n\n- Key layout sections (header, main, sidebar) are present\n- Colors are within ±10% of the original image (subjective match)\n- No invented content — placeholder text is generic (\"Card title\", not specific brand names)\n- HTML is valid (proper tag nesting, no unclosed tags)\n\n## Mandatory Rules\n\n### Do not\n\n- Do not invent brand names, specific product names, or proprietary text not visible in the image\n- Do not claim the output is pixel-perfect — it is an interpretation\n- Do not generate backend code, JavaScript logic, or API calls\n- Do not reproduce copyrighted UI elements (logos, icons) — use generic equivalents\n\n### Do\n\n- Use placeholder text that fits the context (e.g., \"Search...\" for a search bar)\n- Preserve the visual hierarchy (primary > secondary > tertiary)\n- Use realistic placeholder data for images (e.g., via placeholder.com or picsum)\n- State explicitly: \"This is an approximation; fine-tune colors and spacing as needed\"\n\n## Quality Bar\n\n**A good output:**\n- All major layout regions are present and positioned correctly\n- Color palette is recognizably derived from the image\n- Typography hierarchy matches (heading size > body size)\n- Code is valid, runnable HTML/CSS without external dependencies beyond a CDN\n\n**A bad output:**\n- Layout is scrambled or missing major sections\n- Output includes broken or unclosed HTML tags\n- Fabricated text content not appropriate to the UI context\n- Output requires non-free dependencies or local asset files\n\n## Good vs. Bad Examples\n\n| Scenario | Bad Output | Good Output |\n|---|---|---|\n| E-commerce product card | Generic lorem ipsum text | \"Price: $49.99 — Add to Cart\" contextually appropriate |\n| Dark mode UI | Ignores dark theme | Uses dark background, light text, correct contrast |\n| Mobile screenshot | Desktop-only output | `max-width: 375px` container, mobile-first |\n| Complex dashboard | One undifferentiated div | Grid layout with sidebar, header, main panels |\n\n## References\n\n- `references/` — Color extraction heuristics, layout structure patterns, Tailwind class mapping guide\n\nFile v1.2.0:README.md\n\n# User Provides Screenshot\n\n[中文版](./README_zh.md)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n[![Version](https://img.shields.io/badge/version-1.0.1-blue)](SKILL.md)\n\n> user provides a UI screenshot image and needs to extract the layout into HTML CSS code\n\n## What Problem This Solves\n\nBrief paragraph explaining the specific engineering problem this skill solves.\nWhen triggered: [trigger condition].\n\n## Features\n\n- Feature 1\n- Feature 2\n- Feature 3\n\n## Quick Start\n\n### Installation\n\n```bash\n# Via ClawHub\nclawhub install User Provides Screenshot\n\n# Or manually\ncp -r User Provides Screenshot ~/.openclaw/skills/\n```\n\n### Usage\n\n```bash\n# Mode 1\nclawhub run User Provides Screenshot --mode read\n\n# Mode 2\nclawhub run User Provides Screenshot --mode write --input ./data.json\n```\n\n## Directory Structure\n\n```\nUser Provides Screenshot/\n├── SKILL.md          # Entry point\n├── LICENSE           # MIT\n├── README.md         # This file\n├── README_zh.md      # Chinese version\n├── CONTRIBUTING.md    # Contribution guide\n├── .gitignore\n├── references/       # Templates and schemas\n│   └── ...\n└── scripts/          # Helper scripts (if any)\n    └── ...\n```\n\n## Configuration\n\n| Variable | Required | Description |\n|----------|----------|-------------|\n| `API_KEY` | Yes | API key for the service |\n\n## License\n\nThis project is licensed under the MIT License — see [LICENSE](LICENSE) for details.\n\n---\n\nPowered by [MiniMax](https://minimax.io).\n\nFile v1.2.0:_meta.json\n\n{\n  \"ownerId\": \"kn70zthc74p61mvctddrancx0s832g4r\",\n  \"slug\": \"ai-image-to-code\",\n  \"version\": \"1.2.0\",\n  \"publishedAt\": 1779922421381\n}\n\nFile v1.2.0:references/index.md\n\n# image-to-code — References\n\nDetailed documents for `user-provides-screenshot` skill.\n\nTODO: Add reference files here as needed.\n\nFile v1.2.0:CHANGELOG.md\n\n# Changelog\n## [1.0.1] - 2026-05-18\n\n### Minor update\n\n- **Previous:** 1.0\n- **Changed:** Updated skill content and quality\n\n\n\n## [1.0] - 2026-05-18\n\n### Added\n\n- Initial release\n\nFile v1.2.0:CONTRIBUTING.md\n\n# Contributing to `User Provides Screenshot`\n\nThank you for your interest in contributing! Please follow these steps to set up your development environment and submit changes.\n\n## Development Setup\n\n```bash\n# 1. Fork the repository on GitHub\n\n# 2. Clone your fork\ngit clone https://github.com/<your-username>/User Provides Screenshot.git\ncd User Provides Screenshot\n\n# 3. Install dependencies (if any)\npip install -r scripts/requirements.txt\n\n# 4. Run the self-audit to verify quality\npython scripts/audit_skill.py .\n```\n\n## Workflow\n\nWe use a standard feature branch workflow:\n\n```bash\n# 1. Create a new branch from main\ngit checkout -b feat/<your-feature-name>\n\n# 2. Make your changes\n#    - Follow the SKILL.md structure standards\n#    - Keep SKILL.md body in English\n#    - Do not hardcode API keys or secrets\n\n# 3. Run the audit to check for issues\npython scripts/audit_skill.py .\n\n# 4. Commit your changes\ngit add .\ngit commit -m \"feat(image-to-code): add <brief description>\"\n\n# 5. Push to your fork\ngit push origin feat/<your-feature-name>\n\n# 6. Open a Pull Request on GitHub\n#    - Title: feat(image-to-code): add <brief description>\n#    - Description: What + Why + Testing\n```\n\n## Code Standards\n\n- **SKILL.md**: Follow the YAML frontmatter standard (name, description, license, metadata)\n- **Scripts**: Must include shebang, requirements.txt, and graceful error handling\n- **Language**: SKILL.md body must be in English; reference docs in English\n- **No secrets**: Never commit API keys, tokens, or credentials\n\n## Quality Checklist\n\nBefore opening a PR, verify:\n\n- [ ] `audit_skill.py` exits with code 0 or 2\n- [ ] `validate_skills.py` exits with code 0\n- [ ] README.md and README_zh.md are both present\n- [ ] CONTRIBUTING.md is present\n- [ ] .gitignore is present\n- [ ] No hardcoded secrets anywhere in the codebase\n\n## Reporting Issues\n\nPlease report issues via GitHub Issues with:\n\n1. **What you expected to happen**\n2. **What actually happened**\n3. **Steps to reproduce**\n4. **Environment** (OS, Python version, etc.)\n\n## License\n\nBy contributing, you agree that your contributions will be licensed under the MIT License.\n\nFile v1.2.0:README_zh.md\n\n# User Provides Screenshot\n\n[English](./README.md)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n![版本](https://img.shields.io/badge/version-1.0.1-blue)\n\n> user provides a UI screenshot image and needs to extract the layout into HTML CSS code\n\n## 解决什么问题\n\n简要说明这个技能解决的具体工程问题。\n触发条件：[trigger condition]。\n\n## 功能特性\n\n- 特性 1\n- 特性 2\n- 特性 3\n\n## 快速开始\n\n### 安装\n\n```bash\n# 通过 ClawHub 安装\nclawhub install User Provides Screenshot\n\n# 或手动复制\ncp -r User Provides Screenshot ~/.openclaw/skills/\n```\n\n### 使用方法\n\n```bash\n# 模式 1：读取\nclawhub run User Provides Screenshot --mode read\n\n# 模式 2：写入\nclawhub run User Provides Screenshot --mode write --input ./data.json\n```\n\n## 目录结构\n\n```\nUser Provides Screenshot/\n├── SKILL.md          # 技能入口\n├── LICENSE           # MIT 许可证\n├── README.md         # 英文说明\n├── README_zh.md      # 本文件\n├── CONTRIBUTING.md    # 贡献指南\n├── .gitignore\n├── references/       # 模板和 schema\n│   └── ...\n└── scripts/          # 辅助脚本（如有）\n    └── ...\n```\n\n## 配置\n\n| 变量名 | 必填 | 说明 |\n|--------|------|------|\n| `API_KEY` | 是 | 服务 API Key |\n\n## 许可证\n\n本项目采用 MIT 许可证 — 详见 [LICENSE](LICENSE)。\n\n---\n\n由 [MiniMax](https://minimax.io) 提供支持。\n\nFile v1.2.0:skill-card.md\n\n## Description: <br>\nConverts UI screenshots or design images into runnable HTML/CSS or React/Tailwind component code, with an optional describe-only mode. <br>\n\nThis skill is ready for commercial/non-commercial use. <br>\n\n## Publisher: <br>\n[wangjipeng977](https://clawhub.ai/user/wangjipeng977) <br>\n\n### License/Terms of Use: <br>\nMIT-0 <br>\n\n\n## Use Case: <br>\nDevelopers and designers use this skill to turn UI screenshots, mockups, or pasted images into working frontend code or a structured layout description. <br>\n\n### Deployment Geography for Use: <br>\nGlobal <br>\n\n## Known Risks and Mitigations: <br>\nRisk: Screenshots and API keys submitted for analysis may contain secrets, customer data, internal dashboards, or account details. <br>\nMitigation: Redact sensitive information before use and provide API keys only after confirming which service receives the image and how the image is handled. <br>\nRisk: Generated UI code can approximate the source image incorrectly or reproduce copyrighted logos, icons, or proprietary text visible in the image. <br>\nMitigation: Review generated code before deployment, replace protected assets with generic equivalents, and fine-tune layout, colors, spacing, and content. <br>\n\n\n## Reference(s): <br>\n- [ClawHub Skill Page](https://clawhub.ai/wangjipeng977/ai-image-to-code) <br>\n- [Metadata Source: MiniMax-AI Skills](https://github.com/MiniMax-AI/skills) <br>\n- [Artifact References Index](artifact/references/index.md) <br>\n\n\n## Skill Output: <br>\n**Output Type(s):** [Code, Markdown, Guidance] <br>\n**Output Format:** [Markdown with HTML, CSS, JSX, or Tailwind code blocks and concise implementation notes] <br>\n**Output Parameters:** [1D] <br>\n**Other Properties Related to Output:** [Generated UI code is an approximation and may require manual color, spacing, accessibility, and content review.] <br>\n\n## Skill Version(s): <br>\n1.2.0 (source: ClawHub release evidence) <br>\n\n## Ethical Considerations: <br>\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment. <br>\n\nArchive v2.1.0: 9 files, 12083 bytes\n\nFiles: CHANGELOG.md (179b), CONTRIBUTING.md (2144b), README_zh.md (2341b), README.md (2453b), references/index.md (135b), skill-card.md (2642b), SKILL.md (5630b), tests/test_skill.py (12124b), _meta.json (135b)\n\nFile v2.1.0:SKILL.md\n\n---\nname: ai-image-to-code\ndescription: >\n  Use when (1) user provides a UI screenshot or image and asks to convert it into HTML, CSS, or component code. \n  (2) user says \"turn this into code\", \"rebuild this UI\", \"code this design\", or \"generate HTML from screenshot\". \n  (3) user pastes an image and says \"write the React component for this\". \nlicense: MIT\nmetadata:\n  version: \"1.0.1\"\n  category: design\n  author: wangjipeng\n  sources:\n    - https://github.com/MiniMax-AI/skills\n---\n\n# AI Image to Code\n\nUse 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\".\n\n## Core Position\n\nThis 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.*\n\nThis skill IS NOT:\n- An image generation tool — it converts existing images to code, not creates images\n- A design tool — it interprets and codes a design, not create the design\n- A backend integration tool — it outputs HTML/CSS/JS, not server code\n\nThis skill IS activated ONLY when: image (screenshot/mockup) + code generation intent are both present.\n\n## Modes\n\n### `/ai-image-to-code`\n\n**Default mode.** Converts a UI image into a complete HTML/CSS implementation.\n\nWhen to use: User provides a screenshot and wants a working HTML page that resembles it.\n\n### `/ai-image-to-code/react`\n\nOutputs a React functional component using Tailwind CSS.\n\nWhen to use: User explicitly asks for React or a component, not a plain HTML page.\n\n### `/ai-image-to-code/describe`\n\nProvides a detailed text description of the layout without writing code.\n\nWhen to use: User only wants to understand the layout before committing to code generation.\n\n## Execution Steps\n\n### Step 1 — Analyze the Image\n\n1. Receive image (pasted, file attachment, or URL)\n2. Use vision model to inspect the image and extract:\n   - Layout structure (header, sidebar, main content, footer)\n   - Color palette (primary, secondary, background, text, accent)\n   - Typography (headings, body, labels — size and weight hierarchy)\n   - Spacing system (padding, margins, gaps)\n   - Component types (buttons, inputs, cards, lists, navigation)\n   - Visual hierarchy (what stands out, what recedes)\n3. If the image is complex (>10 distinct UI sections), focus on the main content area\n\n### Step 2 — Plan the Code Structure\n\n| Image Content | Recommended Output |\n|---|---|\n| Landing page | Single HTML with embedded CSS |\n| Dashboard | HTML + CSS grid layout |\n| Mobile app screen | Mobile-first responsive HTML |\n| Form / login page | Semantic HTML form with proper inputs |\n| Card / list UI | Component-based HTML with classes |\n| Chart / data visualization | SVG or canvas-based rendering |\n\n### Step 3 — Generate Code\n\n**HTML/CSS output** (default):\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>UI</title>\n  <style>\n    /* Extracted colors, typography, spacing from image */\n  </style>\n</head>\n<body>\n  <!-- Structure matching the image layout -->\n</body>\n</html>\n```\n\n**React + Tailwind** (react mode):\n```jsx\nexport function UICard() {\n  return (\n    <div className=\"p-6 bg-white rounded-xl shadow-sm\">\n      {/* Component matching image */}\n    </div>\n  );\n}\n```\n\n### Step 4 — Validate\n\n- Key layout sections (header, main, sidebar) are present\n- Colors are within ±10% of the original image (subjective match)\n- No invented content — placeholder text is generic (\"Card title\", not specific brand names)\n- HTML is valid (proper tag nesting, no unclosed tags)\n\n## Mandatory Rules\n\n### Do not\n\n- Do not invent brand names, specific product names, or proprietary text not visible in the image\n- Do not claim the output is pixel-perfect — it is an interpretation\n- Do not generate backend code, JavaScript logic, or API calls\n- Do not reproduce copyrighted UI elements (logos, icons) — use generic equivalents\n\n### Do\n\n- Use placeholder text that fits the context (e.g., \"Search...\" for a search bar)\n- Preserve the visual hierarchy (primary > secondary > tertiary)\n- Use realistic placeholder data for images (e.g., via placeholder.com or picsum)\n- State explicitly: \"This is an approximation; fine-tune colors and spacing as needed\"\n\n## Quality Bar\n\n**A good output:**\n- All major layout regions are present and positioned correctly\n- Color palette is recognizably derived from the image\n- Typography hierarchy matches (heading size > body size)\n- Code is valid, runnable HTML/CSS without external dependencies beyond a CDN\n\n**A bad output:**\n- Layout is scrambled or missing major sections\n- Output includes broken or unclosed HTML tags\n- Fabricated text content not appropriate to the UI context\n- Output requires non-free dependencies or local asset files\n\n## Good vs. Bad Examples\n\n| Scenario | Bad Output | Good Output |\n|---|---|---|\n| E-commerce product card | Generic lorem ipsum text | \"Price: $49.99 — Add to Cart\" contextually appropriate |\n| Dark mode UI | Ignores dark theme | Uses dark background, light text, correct contrast |\n| Mobile screenshot | Desktop-only output | `max-width: 375px` container, mobile-first |\n| Complex dashboard | One undifferentiated div | Grid layout with sidebar, header, main panels |\n\n## References\n\n- `references/` — Color extraction heuristics, layout structure patterns, Tailwind class mapping guide\n\nFile v2.1.0:README.md\n\n# AI Image To Code\n\n[中文版](./README_zh.md)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n[![Version](https://img.shields.io/badge/version-1.0-blue)](SKILL.md)\n\n> Converts UI screenshots into HTML/CSS or React components — rebuilds designs as working code\n\n## What Problem This Solves\n\nUser has a design mockup or screenshot and needs it as actual code they can run — not a description, not a Figma export, but working HTML/CSS or a React component that looks like the original.\n\n**When triggered:** UI screenshot/image + code/generate/rebuild intent.\n\n## Features\n\n- **Vision-powered layout extraction** — analyzes screenshot for structure (header, sidebar, main content), color palette, typography hierarchy, and spacing\n- **Multi-format output** — plain HTML/CSS (default) or React + Tailwind CSS (for component requests)\n- **Mobile-first responsive** — detects mobile screenshots and outputs `max-width: 375px` containers\n- **Placeholder content** — uses contextually appropriate text (\"Price: $49.99\" not generic lorem ipsum)\n\n## Quick Start\n\n```bash\n# Via ClawHub\nclawhub install ai-image-to-code\n\n# Or manually\ncp -r ai-image-to-code ~/.openclaw/skills/\n```\n\n### Usage\n\n```\n/ai-image-to-code\n```\n\nPaste screenshot, ask to generate HTML/CSS.\n\n```\n/ai-image-to-code/react\n```\n\nAsks for React + Tailwind output instead of plain HTML.\n\n```\n/ai-image-to-code/describe\n```\n\nJust want a text description of the layout first — no code generation.\n\n## Modes\n\n| Mode | Description |\n|------|-------------|\n| `/ai-image-to-code` | Converts UI image to HTML/CSS |\n| `/ai-image-to-code/react` | Outputs React functional component with Tailwind |\n| `/ai-image-to-code/describe` | Text description of layout, no code |\n\n## Examples\n\n| Input | Output |\n|-------|--------|\n| E-commerce product card | \"Price: $49.99 — Add to Cart\" contextually appropriate |\n| Dark mode UI screenshot | Dark background, light text, correct contrast applied |\n| Mobile app screen | `max-width: 375px` container, mobile-first |\n| Complex dashboard | Grid layout with sidebar, header, main panels |\n\n## Directory Structure\n\n```\nai-image-to-code/\n├── SKILL.md\n├── LICENSE\n├── README.md\n├── README_zh.md\n├── CONTRIBUTING.md\n├── .gitignore\n├── references/       # Color extraction, layout patterns, Tailwind mapping\n└── tests/\n```\n\n## License\n\nMIT License — see [LICENSE](LICENSE).\n\nFile v2.1.0:_meta.json\n\n{\n  \"ownerId\": \"kn70zthc74p61mvctddrancx0s832g4r\",\n  \"slug\": \"ai-image-to-code\",\n  \"version\": \"2.1.0\",\n  \"publishedAt\": 1779911458913\n}\n\nFile v2.1.0:references/index.md\n\n# ai-image-to-code — References\n\nDetailed documents for `user-provides-screenshot` skill.\n\nTODO: Add reference files here as needed.\n\nFile v2.1.0:CHANGELOG.md\n\n# Changelog\n## [1.0.1] - 2026-05-18\n\n### Minor update\n\n- **Previous:** 1.0\n- **Changed:** Updated skill content and quality\n\n\n\n## [1.0] - 2026-05-18\n\n### Added\n\n- Initial release\n\nFile v2.1.0:CONTRIBUTING.md\n\n# Contributing to `User Provides Screenshot`\n\nThank you for your interest in contributing! Please follow these steps to set up your development environment and submit changes.\n\n## Development Setup\n\n```bash\n# 1. Fork the repository on GitHub\n\n# 2. Clone your fork\ngit clone https://github.com/<your-username>/User Provides Screenshot.git\ncd User Provides Screenshot\n\n# 3. Install dependencies (if any)\npip install -r scripts/requirements.txt\n\n# 4. Run the self-audit to verify quality\npython scripts/audit_skill.py .\n```\n\n## Workflow\n\nWe use a standard feature branch workflow:\n\n```bash\n# 1. Create a new branch from main\ngit checkout -b feat/<your-feature-name>\n\n# 2. Make your changes\n#    - Follow the SKILL.md structure standards\n#    - Keep SKILL.md body in English\n#    - Do not hardcode API keys or secrets\n\n# 3. Run the audit to check for issues\npython scripts/audit_skill.py .\n\n# 4. Commit your changes\ngit add .\ngit commit -m \"feat(ai-image-to-code): add <brief description>\"\n\n# 5. Push to your fork\ngit push origin feat/<your-feature-name>\n\n# 6. Open a Pull Request on GitHub\n#    - Title: feat(ai-image-to-code): add <brief description>\n#    - Description: What + Why + Testing\n```\n\n## Code Standards\n\n- **SKILL.md**: Follow the YAML frontmatter standard (name, description, license, metadata)\n- **Scripts**: Must include shebang, requirements.txt, and graceful error handling\n- **Language**: SKILL.md body must be in English; reference docs in English\n- **No secrets**: Never commit API keys, tokens, or credentials\n\n## Quality Checklist\n\nBefore opening a PR, verify:\n\n- [ ] `audit_skill.py` exits with code 0 or 2\n- [ ] `validate_skills.py` exits with code 0\n- [ ] README.md and README_zh.md are both present\n- [ ] CONTRIBUTING.md is present\n- [ ] .gitignore is present\n- [ ] No hardcoded secrets anywhere in the codebase\n\n## Reporting Issues\n\nPlease report issues via GitHub Issues with:\n\n1. **What you expected to happen**\n2. **What actually happened**\n3. **Steps to reproduce**\n4. **Environment** (OS, Python version, etc.)\n\n## License\n\nBy contributing, you agree that your contributions will be licensed under the MIT License.\n\nFile v2.1.0:README_zh.md\n\n# AI Image To Code\n\n[English](./README.md)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n![版本](https://img.shields.io/badge/version-1.0-blue)\n\n> 将 UI 截图转换为 HTML/CSS 或 React 组件 — 以工作代码重建设计\n\n## 解决什么问题\n\n用户有设计模型或截图，需要将其转换为可以实际运行的代码——不是描述，不是 Figma 导出，而是看起来像原始设计的工作 HTML/CSS 或 React 组件。\n\n**触发条件：** UI 截图/图片 + 代码/生成/重建意图。\n\n## 功能特性\n\n- **视觉驱动布局提取** — 分析截图的结构（头部、侧边栏、主内容）、配色、字体层次和间距\n- **多格式输出** — 纯 HTML/CSS（默认）或 React + Tailwind CSS（用于组件请求）\n- **移动端优先响应式** — 检测移动端截图并输出 `max-width: 375px` 容器\n- **适配的占位符内容** — 使用上下文适当文本（\"价格：￥49.99\"而非通用占位符）\n\n## 快速开始\n\n```bash\n# 通过 ClawHub 安装\nclawhub install ai-image-to-code\n\n# 或手动复制\ncp -r ai-image-to-code ~/.openclaw/skills/\n```\n\n### 使用方法\n\n```\n/ai-image-to-code\n```\n\n粘贴截图，要求生成 HTML/CSS。\n\n```\n/ai-image-to-code/react\n```\n\n要求 React + Tailwind 输出，而不是纯 HTML。\n\n```\n/ai-image-to-code/describe\n```\n\n只想先获取布局的文本描述——不生成代码。\n\n## 工作模式\n\n| 模式 | 说明 |\n|------|------|\n| `/ai-image-to-code` | 将 UI 图片转换为 HTML/CSS |\n| `/ai-image-to-code/react` | 输出 React 函数组件 + Tailwind |\n| `/ai-image-to-code/describe` | 布局的文本描述，无代码 |\n\n## 示例\n\n| 输入 | 输出 |\n|------|------|\n| 电商产品卡片 | \"价格：￥49.99 — 加入购物车\" 上下文适当 |\n| 深色模式 UI 截图 | 应用深色背景、浅色文字、正确对比度 |\n| 移动端 App 截图 | `max-width: 375px` 容器，移动端优先 |\n| 复杂仪表盘 | 网格布局：侧边栏、头部、主面板 |\n\n## 目录结构\n\n```\nai-image-to-code/\n├── SKILL.md\n├── LICENSE\n├── README.md\n├── README_zh.md\n├── CONTRIBUTING.md\n├── .gitignore\n├── references/       # 颜色提取、布局模式、Tailwind 映射\n└── tests/\n```\n\n## 许可证\n\nMIT 许可证 — 详见 [LICENSE](LICENSE)。\n\nFile v2.1.0:skill-card.md\n\n## Description: <br>\nConverts UI screenshots or mockups into approximate runnable HTML/CSS, React + Tailwind components, or a layout description. <br>\n\nThis skill is ready for commercial/non-commercial use. <br>\n\n## Publisher: <br>\n[wangjipeng977](https://clawhub.ai/user/wangjipeng977) <br>\n\n### License/Terms of Use: <br>\nMIT-0 <br>\n\n\n## Use Case: <br>\nDevelopers and designers use this skill when they have a UI screenshot or mockup and want an agent to recreate the visible layout as working frontend code or describe the layout before implementation. <br>\n\n### Deployment Geography for Use: <br>\nGlobal <br>\n\n## Known Risks and Mitigations: <br>\nRisk: Screenshots may contain private product, customer, or internal interface data. <br>\nMitigation: Use only images that the user is comfortable having the agent inspect, and remove sensitive information before invoking the skill. <br>\nRisk: Generated frontend code is an approximation and may miss layout details, color precision, accessibility requirements, or responsive behavior. <br>\nMitigation: Review and test the generated code before use, then fine-tune spacing, colors, semantics, and responsiveness against the original design. <br>\nRisk: Visible brand assets, logos, or copyrighted interface elements in the screenshot may be reproduced too closely. <br>\nMitigation: Replace proprietary logos and icons with generic equivalents unless the user has rights to use those assets. <br>\nRisk: Stale package or install references in the artifact documentation may confuse setup. <br>\nMitigation: Prefer the current ClawHub release page and release metadata when installing or reviewing the published skill. <br>\n\n\n## Reference(s): <br>\n- [ClawHub skill page](https://clawhub.ai/wangjipeng977/ai-image-to-code) <br>\n- [Source listed in skill metadata](https://github.com/MiniMax-AI/skills) <br>\n\n\n## Skill Output: <br>\n**Output Type(s):** [Text, Markdown, Code, Guidance] <br>\n**Output Format:** [Markdown containing descriptive prose and frontend code blocks such as HTML/CSS or React with Tailwind CSS.] <br>\n**Output Parameters:** [1D] <br>\n**Other Properties Related to Output:** [Outputs are approximations of the supplied image and may include generic placeholder content instead of exact proprietary text, logos, or icons.] <br>\n\n## Skill Version(s): <br>\n2.1.0 (source: ClawHub release evidence) <br>\n\n## Ethical Considerations: <br>\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment. <br>\n\nArchive v999.0.0: 9 files, 11915 bytes\n\nFiles: CHANGELOG.md (179b), CONTRIBUTING.md (2144b), README_zh.md (2341b), README.md (2453b), references/index.md (135b), skill-card.md (2218b), SKILL.md (5630b), tests/test_skill.py (12124b), _meta.json (137b)\n\nFile v999.0.0:SKILL.md\n\n---\nname: ai-image-to-code\ndescription: >\n  Use when (1) user provides a UI screenshot or image and asks to convert it into HTML, CSS, or component code. \n  (2) user says \"turn this into code\", \"rebuild this UI\", \"code this design\", or \"generate HTML from screenshot\". \n  (3) user pastes an image and says \"write the React component for this\". \nlicense: MIT\nmetadata:\n  version: \"1.0.1\"\n  category: design\n  author: wangjipeng\n  sources:\n    - https://github.com/MiniMax-AI/skills\n---\n\n# AI Image to Code\n\nUse 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\".\n\n## Core Position\n\nThis 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.*\n\nThis skill IS NOT:\n- An image generation tool — it converts existing images to code, not creates images\n- A design tool — it interprets and codes a design, not create the design\n- A backend integration tool — it outputs HTML/CSS/JS, not server code\n\nThis skill IS activated ONLY when: image (screenshot/mockup) + code generation intent are both present.\n\n## Modes\n\n### `/ai-image-to-code`\n\n**Default mode.** Converts a UI image into a complete HTML/CSS implementation.\n\nWhen to use: User provides a screenshot and wants a working HTML page that resembles it.\n\n### `/ai-image-to-code/react`\n\nOutputs a React functional component using Tailwind CSS.\n\nWhen to use: User explicitly asks for React or a component, not a plain HTML page.\n\n### `/ai-image-to-code/describe`\n\nProvides a detailed text description of the layout without writing code.\n\nWhen to use: User only wants to understand the layout before committing to code generation.\n\n## Execution Steps\n\n### Step 1 — Analyze the Image\n\n1. Receive image (pasted, file attachment, or URL)\n2. Use vision model to inspect the image and extract:\n   - Layout structure (header, sidebar, main content, footer)\n   - Color palette (primary, secondary, background, text, accent)\n   - Typography (headings, body, labels — size and weight hierarchy)\n   - Spacing system (padding, margins, gaps)\n   - Component types (buttons, inputs, cards, lists, navigation)\n   - Visual hierarchy (what stands out, what recedes)\n3. If the image is complex (>10 distinct UI sections), focus on the main content area\n\n### Step 2 — Plan the Code Structure\n\n| Image Content | Recommended Output |\n|---|---|\n| Landing page | Single HTML with embedded CSS |\n| Dashboard | HTML + CSS grid layout |\n| Mobile app screen | Mobile-first responsive HTML |\n| Form / login page | Semantic HTML form with proper inputs |\n| Card / list UI | Component-based HTML with classes |\n| Chart / data visualization | SVG or canvas-based rendering |\n\n### Step 3 — Generate Code\n\n**HTML/CSS output** (default):\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>UI</title>\n  <style>\n    /* Extracted colors, typography, spacing from image */\n  </style>\n</head>\n<body>\n  <!-- Structure matching the image layout -->\n</body>\n</html>\n```\n\n**React + Tailwind** (react mode):\n```jsx\nexport function UICard() {\n  return (\n    <div className=\"p-6 bg-white rounded-xl shadow-sm\">\n      {/* Component matching image */}\n    </div>\n  );\n}\n```\n\n### Step 4 — Validate\n\n- Key layout sections (header, main, sidebar) are present\n- Colors are within ±10% of the original image (subjective match)\n- No invented content — placeholder text is generic (\"Card title\", not specific brand names)\n- HTML is valid (proper tag nesting, no unclosed tags)\n\n## Mandatory Rules\n\n### Do not\n\n- Do not invent brand names, specific product names, or proprietary text not visible in the image\n- Do not claim the output is pixel-perfect — it is an interpretation\n- Do not generate backend code, JavaScript logic, or API calls\n- Do not reproduce copyrighted UI elements (logos, icons) — use generic equivalents\n\n### Do\n\n- Use placeholder text that fits the context (e.g., \"Search...\" for a search bar)\n- Preserve the visual hierarchy (primary > secondary > tertiary)\n- Use realistic placeholder data for images (e.g., via placeholder.com or picsum)\n- State explicitly: \"This is an approximation; fine-tune colors and spacing as needed\"\n\n## Quality Bar\n\n**A good output:**\n- All major layout regions are present and positioned correctly\n- Color palette is recognizably derived from the image\n- Typography hierarchy matches (heading size > body size)\n- Code is valid, runnable HTML/CSS without external dependencies beyond a CDN\n\n**A bad output:**\n- Layout is scrambled or missing major sections\n- Output includes broken or unclosed HTML tags\n- Fabricated text content not appropriate to the UI context\n- Output requires non-free dependencies or local asset files\n\n## Good vs. Bad Examples\n\n| Scenario | Bad Output | Good Output |\n|---|---|---|\n| E-commerce product card | Generic lorem ipsum text | \"Price: $49.99 — Add to Cart\" contextually appropriate |\n| Dark mode UI | Ignores dark theme | Uses dark background, light text, correct contrast |\n| Mobile screenshot | Desktop-only output | `max-width: 375px` container, mobile-first |\n| Complex dashboard | One undifferentiated div | Grid layout with sidebar, header, main panels |\n\n## References\n\n- `references/` — Color extraction heuristics, layout structure patterns, Tailwind class mapping guide\n\nFile v999.0.0:README.md\n\n# AI Image To Code\n\n[中文版](./README_zh.md)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n[![Version](https://img.shields.io/badge/version-1.0-blue)](SKILL.md)\n\n> Converts UI screenshots into HTML/CSS or React components — rebuilds designs as working code\n\n## What Problem This Solves\n\nUser has a design mockup or screenshot and needs it as actual code they can run — not a description, not a Figma export, but working HTML/CSS or a React component that looks like the original.\n\n**When triggered:** UI screenshot/image + code/generate/rebuild intent.\n\n## Features\n\n- **Vision-powered layout extraction** — analyzes screenshot for structure (header, sidebar, main content), color palette, typography hierarchy, and spacing\n- **Multi-format output** — plain HTML/CSS (default) or React + Tailwind CSS (for component requests)\n- **Mobile-first responsive** — detects mobile screenshots and outputs `max-width: 375px` containers\n- **Placeholder content** — uses contextually appropriate text (\"Price: $49.99\" not generic lorem ipsum)\n\n## Quick Start\n\n```bash\n# Via ClawHub\nclawhub install ai-image-to-code\n\n# Or manually\ncp -r ai-image-to-code ~/.openclaw/skills/\n```\n\n### Usage\n\n```\n/ai-image-to-code\n```\n\nPaste screenshot, ask to generate HTML/CSS.\n\n```\n/ai-image-to-code/react\n```\n\nAsks for React + Tailwind output instead of plain HTML.\n\n```\n/ai-image-to-code/describe\n```\n\nJust want a text description of the layout first — no code generation.\n\n## Modes\n\n| Mode | Description |\n|------|-------------|\n| `/ai-image-to-code` | Converts UI image to HTML/CSS |\n| `/ai-image-to-code/react` | Outputs React functional component with Tailwind |\n| `/ai-image-to-code/describe` | Text description of layout, no code |\n\n## Examples\n\n| Input | Output |\n|-------|--------|\n| E-commerce product card | \"Price: $49.99 — Add to Cart\" contextually appropriate |\n| Dark mode UI screenshot | Dark background, light text, correct contrast applied |\n| Mobile app screen | `max-width: 375px` container, mobile-first |\n| Complex dashboard | Grid layout with sidebar, header, main panels |\n\n## Directory Structure\n\n```\nai-image-to-code/\n├── SKILL.md\n├── LICENSE\n├── README.md\n├── README_zh.md\n├── CONTRIBUTING.md\n├── .gitignore\n├── references/       # Color extraction, layout patterns, Tailwind mapping\n└── tests/\n```\n\n## License\n\nMIT License — see [LICENSE](LICENSE).\n\nFile v999.0.0:_meta.json\n\n{\n  \"ownerId\": \"kn70zthc74p61mvctddrancx0s832g4r\",\n  \"slug\": \"ai-image-to-code\",\n  \"version\": \"999.0.0\",\n  \"publishedAt\": 1779863697089\n}\n\nFile v999.0.0:references/index.md\n\n# ai-image-to-code — References\n\nDetailed documents for `user-provides-screenshot` skill.\n\nTODO: Add reference files here as needed.\n\nFile v999.0.0:CHANGELOG.md\n\n# Changelog\n## [1.0.1] - 2026-05-18\n\n### Minor update\n\n- **Previous:** 1.0\n- **Changed:** Updated skill content and quality\n\n\n\n## [1.0] - 2026-05-18\n\n### Added\n\n- Initial release\n\nFile v999.0.0:CONTRIBUTING.md\n\n# Contributing to `User Provides Screenshot`\n\nThank you for your interest in contributing! Please follow these steps to set up your development environment and submit changes.\n\n## Development Setup\n\n```bash\n# 1. Fork the repository on GitHub\n\n# 2. Clone your fork\ngit clone https://github.com/<your-username>/User Provides Screenshot.git\ncd User Provides Screenshot\n\n# 3. Install dependencies (if any)\npip install -r scripts/requirements.txt\n\n# 4. Run the self-audit to verify quality\npython scripts/audit_skill.py .\n```\n\n## Workflow\n\nWe use a standard feature branch workflow:\n\n```bash\n# 1. Create a new branch from main\ngit checkout -b feat/<your-feature-name>\n\n# 2. Make your changes\n#    - Follow the SKILL.md structure standards\n#    - Keep SKILL.md body in English\n#    - Do not hardcode API keys or secrets\n\n# 3. Run the audit to check for issues\npython scripts/audit_skill.py .\n\n# 4. Commit your changes\ngit add .\ngit commit -m \"feat(ai-image-to-code): add <brief description>\"\n\n# 5. Push to your fork\ngit push origin feat/<your-feature-name>\n\n# 6. Open a Pull Request on GitHub\n#    - Title: feat(ai-image-to-code): add <brief description>\n#    - Description: What + Why + Testing\n```\n\n## Code Standards\n\n- **SKILL.md**: Follow the YAML frontmatter standard (name, description, license, metadata)\n- **Scripts**: Must include shebang, requirements.txt, and graceful error handling\n- **Language**: SKILL.md body must be in English; reference docs in English\n- **No secrets**: Never commit API keys, tokens, or credentials\n\n## Quality Checklist\n\nBefore opening a PR, verify:\n\n- [ ] `audit_skill.py` exits with code 0 or 2\n- [ ] `validate_skills.py` exits with code 0\n- [ ] README.md and README_zh.md are both present\n- [ ] CONTRIBUTING.md is present\n- [ ] .gitignore is present\n- [ ] No hardcoded secrets anywhere in the codebase\n\n## Reporting Issues\n\nPlease report issues via GitHub Issues with:\n\n1. **What you expected to happen**\n2. **What actually happened**\n3. **Steps to reproduce**\n4. **Environment** (OS, Python version, etc.)\n\n## License\n\nBy contributing, you agree that your contributions will be licensed under the MIT License.\n\nFile v999.0.0:README_zh.md\n\n# AI Image To Code\n\n[English](./README.md)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n![版本](https://img.shields.io/badge/version-1.0-blue)\n\n> 将 UI 截图转换为 HTML/CSS 或 React 组件 — 以工作代码重建设计\n\n## 解决什么问题\n\n用户有设计模型或截图，需要将其转换为可以实际运行的代码——不是描述，不是 Figma 导出，而是看起来像原始设计的工作 HTML/CSS 或 React 组件。\n\n**触发条件：** UI 截图/图片 + 代码/生成/重建意图。\n\n## 功能特性\n\n- **视觉驱动布局提取** — 分析截图的结构（头部、侧边栏、主内容）、配色、字体层次和间距\n- **多格式输出** — 纯 HTML/CSS（默认）或 React + Tailwind CSS（用于组件请求）\n- **移动端优先响应式** — 检测移动端截图并输出 `max-width: 375px` 容器\n- **适配的占位符内容** — 使用上下文适当文本（\"价格：￥49.99\"而非通用占位符）\n\n## 快速开始\n\n```bash\n# 通过 ClawHub 安装\nclawhub install ai-image-to-code\n\n# 或手动复制\ncp -r ai-image-to-code ~/.openclaw/skills/\n```\n\n### 使用方法\n\n```\n/ai-image-to-code\n```\n\n粘贴截图，要求生成 HTML/CSS。\n\n```\n/ai-image-to-code/react\n```\n\n要求 React + Tailwind 输出，而不是纯 HTML。\n\n```\n/ai-image-to-code/describe\n```\n\n只想先获取布局的文本描述——不生成代码。\n\n## 工作模式\n\n| 模式 | 说明 |\n|------|------|\n| `/ai-image-to-code` | 将 UI 图片转换为 HTML/CSS |\n| `/ai-image-to-code/react` | 输出 React 函数组件 + Tailwind |\n| `/ai-image-to-code/describe` | 布局的文本描述，无代码 |\n\n## 示例\n\n| 输入 | 输出 |\n|------|------|\n| 电商产品卡片 | \"价格：￥49.99 — 加入购物车\" 上下文适当 |\n| 深色模式 UI 截图 | 应用深色背景、浅色文字、正确对比度 |\n| 移动端 App 截图 | `max-width: 375px` 容器，移动端优先 |\n| 复杂仪表盘 | 网格布局：侧边栏、头部、主面板 |\n\n## 目录结构\n\n```\nai-image-to-code/\n├── SKILL.md\n├── LICENSE\n├── README.md\n├── README_zh.md\n├── CONTRIBUTING.md\n├── .gitignore\n├── references/       # 颜色提取、布局模式、Tailwind 映射\n└── tests/\n```\n\n## 许可证\n\nMIT 许可证 — 详见 [LICENSE](LICENSE)。\n\nFile v999.0.0:skill-card.md\n\n## Description: <br>\nConverts UI screenshots and images into runnable HTML/CSS, React with Tailwind, or a detailed layout description. <br>\n\nThis skill is ready for commercial/non-commercial use. <br>\n\n## Publisher: <br>\n[wangjipeng977](https://clawhub.ai/user/wangjipeng977) <br>\n\n### License/Terms of Use: <br>\nMIT-0 <br>\n\n\n## Use Case: <br>\nDevelopers and designers use this skill to turn UI screenshots, mockups, or pasted images into working frontend code or a structured layout description. <br>\n\n### Deployment Geography for Use: <br>\nGlobal <br>\n\n## Known Risks and Mitigations: <br>\nRisk: Screenshots can contain secrets, customer data, internal dashboards, or confidential designs. <br>\nMitigation: Redact sensitive or confidential content before using the skill, consistent with the security guidance. <br>\nRisk: Generated code is an approximation and may not exactly match the original layout, colors, spacing, or typography. <br>\nMitigation: Review and fine-tune the output before using it in production. <br>\nRisk: Recreating visible logos, icons, or proprietary UI elements can raise rights or brand-use concerns. <br>\nMitigation: Use generic equivalents for protected visual elements unless the user has rights to reproduce them. <br>\n\n\n## Reference(s): <br>\n- [ClawHub release page](https://clawhub.ai/wangjipeng977/ai-image-to-code) <br>\n- [Metadata source: MiniMax-AI skills](https://github.com/MiniMax-AI/skills) <br>\n- [ai-image-to-code references](references/index.md) <br>\n\n\n## Skill Output: <br>\n**Output Type(s):** [Text, Markdown, Code, Guidance] <br>\n**Output Format:** [Markdown with HTML/CSS or React/Tailwind code blocks] <br>\n**Output Parameters:** [1D] <br>\n**Other Properties Related to Output:** [Can produce a plain HTML/CSS page, a React functional component, or a non-code layout description depending on the selected mode.] <br>\n\n## Skill Version(s): <br>\n999.0.0 (source: ClawHub release evidence) <br>\n\n## Ethical Considerations: <br>\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment. <br>\n\nArchive v9.9.9: 9 files, 12005 bytes\n\nFiles: CHANGELOG.md (179b), CONTRIBUTING.md (2144b), README_zh.md (2341b), README.md (2453b), references/index.md (135b), skill-card.md (2399b), SKILL.md (5630b), tests/test_skill.py (12124b), _meta.json (135b)\n\nFile v9.9.9:SKILL.md\n\n---\nname: ai-image-to-code\ndescription: >\n  Use when (1) user provides a UI screenshot or image and asks to convert it into HTML, CSS, or component code. \n  (2) user says \"turn this into code\", \"rebuild this UI\", \"code this design\", or \"generate HTML from screenshot\". \n  (3) user pastes an image and says \"write the React component for this\". \nlicense: MIT\nmetadata:\n  version: \"1.0.1\"\n  category: design\n  author: wangjipeng\n  sources:\n    - https://github.com/MiniMax-AI/skills\n---\n\n# AI Image to Code\n\nUse 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\".\n\n## Core Position\n\nThis 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.*\n\nThis skill IS NOT:\n- An image generation tool — it converts existing images to code, not creates images\n- A design tool — it interprets and codes a design, not create the design\n- A backend integration tool — it outputs HTML/CSS/JS, not server code\n\nThis skill IS activated ONLY when: image (screenshot/mockup) + code generation intent are both present.\n\n## Modes\n\n### `/ai-image-to-code`\n\n**Default mode.** Converts a UI image into a complete HTML/CSS implementation.\n\nWhen to use: User provides a screenshot and wants a working HTML page that resembles it.\n\n### `/ai-image-to-code/react`\n\nOutputs a React functional component using Tailwind CSS.\n\nWhen to use: User explicitly asks for React or a component, not a plain HTML page.\n\n### `/ai-image-to-code/describe`\n\nProvides a detailed text description of the layout without writing code.\n\nWhen to use: User only wants to understand the layout before committing to code generation.\n\n## Execution Steps\n\n### Step 1 — Analyze the Image\n\n1. Receive image (pasted, file attachment, or URL)\n2. Use vision model to inspect the image and extract:\n   - Layout structure (header, sidebar, main content, footer)\n   - Color palette (primary, secondary, background, text, accent)\n   - Typography (headings, body, labels — size and weight hierarchy)\n   - Spacing system (padding, margins, gaps)\n   - Component types (buttons, inputs, cards, lists, navigation)\n   - Visual hierarchy (what stands out, what recedes)\n3. If the image is complex (>10 distinct UI sections), focus on the main content area\n\n### Step 2 — Plan the Code Structure\n\n| Image Content | Recommended Output |\n|---|---|\n| Landing page | Single HTML with embedded CSS |\n| Dashboard | HTML + CSS grid layout |\n| Mobile app screen | Mobile-first responsive HTML |\n| Form / login page | Semantic HTML form with proper inputs |\n| Card / list UI | Component-based HTML with classes |\n| Chart / data visualization | SVG or canvas-based rendering |\n\n### Step 3 — Generate Code\n\n**HTML/CSS output** (default):\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>UI</title>\n  <style>\n    /* Extracted colors, typography, spacing from image */\n  </style>\n</head>\n<body>\n  <!-- Structure matching the image layout -->\n</body>\n</html>\n```\n\n**React + Tailwind** (react mode):\n```jsx\nexport function UICard() {\n  return (\n    <div className=\"p-6 bg-white rounded-xl shadow-sm\">\n      {/* Component matching image */}\n    </div>\n  );\n}\n```\n\n### Step 4 — Validate\n\n- Key layout sections (header, main, sidebar) are present\n- Colors are within ±10% of the original image (subjective match)\n- No invented content — placeholder text is generic (\"Card title\", not specific brand names)\n- HTML is valid (proper tag nesting, no unclosed tags)\n\n## Mandatory Rules\n\n### Do not\n\n- Do not invent brand names, specific product names, or proprietary text not visible in the image\n- Do not claim the output is pixel-perfect — it is an interpretation\n- Do not generate backend code, JavaScript logic, or API calls\n- Do not reproduce copyrighted UI elements (logos, icons) — use generic equivalents\n\n### Do\n\n- Use placeholder text that fits the context (e.g., \"Search...\" for a search bar)\n- Preserve the visual hierarchy (primary > secondary > tertiary)\n- Use realistic placeholder data for images (e.g., via placeholder.com or picsum)\n- State explicitly: \"This is an approximation; fine-tune colors and spacing as needed\"\n\n## Quality Bar\n\n**A good output:**\n- All major layout regions are present and positioned correctly\n- Color palette is recognizably derived from the image\n- Typography hierarchy matches (heading size > body size)\n- Code is valid, runnable HTML/CSS without external dependencies beyond a CDN\n\n**A bad output:**\n- Layout is scrambled or missing major sections\n- Output includes broken or unclosed HTML tags\n- Fabricated text content not appropriate to the UI context\n- Output requires non-free dependencies or local asset files\n\n## Good vs. Bad Examples\n\n| Scenario | Bad Output | Good Output |\n|---|---|---|\n| E-commerce product card | Generic lorem ipsum text | \"Price: $49.99 — Add to Cart\" contextually appropriate |\n| Dark mode UI | Ignores dark theme | Uses dark background, light text, correct contrast |\n| Mobile screenshot | Desktop-only output | `max-width: 375px` container, mobile-first |\n| Complex dashboard | One undifferentiated div | Grid layout with sidebar, header, main panels |\n\n## References\n\n- `references/` — Color extraction heuristics, layout structure patterns, Tailwind class mapping guide\n\nFile v9.9.9:README.md\n\n# AI Image To Code\n\n[中文版](./README_zh.md)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n[![Version](https://img.shields.io/badge/version-1.0-blue)](SKILL.md)\n\n> Converts UI screenshots into HTML/CSS or React components — rebuilds designs as working code\n\n## What Problem This Solves\n\nUser has a design mockup or screenshot and needs it as actual code they can run — not a description, not a Figma export, but working HTML/CSS or a React component that looks like the original.\n\n**When triggered:** UI screenshot/image + code/generate/rebuild intent.\n\n## Features\n\n- **Vision-powered layout extraction** — analyzes screenshot for structure (header, sidebar, main content), color palette, typography hierarchy, and spacing\n- **Multi-format output** — plain HTML/CSS (default) or React + Tailwind CSS (for component requests)\n- **Mobile-first responsive** — detects mobile screenshots and outputs `max-width: 375px` containers\n- **Placeholder content** — uses contextually appropriate text (\"Price: $49.99\" not generic lorem ipsum)\n\n## Quick Start\n\n```bash\n# Via ClawHub\nclawhub install ai-image-to-code\n\n# Or manually\ncp -r ai-image-to-code ~/.openclaw/skills/\n```\n\n### Usage\n\n```\n/ai-image-to-code\n```\n\nPaste screenshot,\n\nArchive v6.0.1: 8 files, 10714 bytes\n\nFiles: CHANGELOG.md (179b), CONTRIBUTING.md (2144b), README_zh.md (2341b), README.md (2453b), references/index.md (135b), SKILL.md (5628b), tests/test_skill.py (12124b), _meta.json (135b)","readmeExcerpt":"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","codeSnippets":[],"executableExamples":[{"language":"html","snippet":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>UI</title>\n  <style>\n    :root {\n      --color-primary: #3B82F6;\n      --color-bg: #FFFFFF;\n      --color-text: #0F172A;\n      --color-border: #E2E8F0;\n    }\n    body { font-family: -apple-system, sans-serif; margin: 0; color: var(--color-text); background: var(--color-bg); }\n  </style>\n</head>\n<body>\n  <!-- Structure matching the image layout -->\n</body>\n</html>"},{"language":"jsx","snippet":"export function UICard() {\n  return (\n    <div className=\"p-6 bg-white rounded-xl shadow-sm\">\n      <h3 className=\"text-xl font-semibold text-slate-900\">Title</h3>\n      <p className=\"mt-2 text-slate-500\">Description goes here.</p>\n      <button className=\"mt-4 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600\">\n        Action\n      </button>\n    </div>\n  );\n}"},{"language":"text","snippet":"You are analyzing a UI screenshot to extract information for code generation.\n\nPlease report in this exact structure:\n\n## Layout\n- Overall pattern: [landing | dashboard | mobile | form | card-grid | table | modal | search | settings | 404 | skeleton | article | other]\n- Main regions (top to bottom, left to right): [list]\n- Sidebar present: [yes/no, position, width]\n- Top nav: [sticky/static/none]\n\n## Color palette (5 slots, hex codes)\n- Primary: #...\n- Secondary: #...\n- Background: #...\n- Text: #...\n- Border/muted: #...\n- Mode: [light | dark | both]\n- Gradient present: [yes/no, from→to]\n\n## Typography\n- Heading font: [family hint, weight, size estimate in px]\n- Body font: [family hint, weight, size estimate in px]\n- Distinct sizes observed: [h1, h2, body, caption...]\n\n## Spacing\n- Base unit estimate: [4px | 8px]\n- Section vertical rhythm: [tight | normal | spacious]\n\n## Component inventory\n- Buttons: [count, primary/secondary style]\n- Inputs: [count, type]\n- Cards: [count, layout direction]\n- Icons: [count, style: outlined/filled/duotone]\n- Images: [count, aspect ratio hints]\n\n## Specific text content visible\n- [verbatim transcription of any visible text — labels, headings, button text, error messages]\n\n## What is NOT visible / ambiguous\n- [things you can't determine from the image, that the user should clarify]"},{"language":"bash","snippet":"python scripts/validate_output.py path/to/output.html\n# Add --strict to also flag excessive <div> nesting"},{"language":"bash","snippet":"# Via ClawHub\nclawhub install ai-image-to-code\n\n# Or manually\ncp -r ai-image-to-code ~/.openclaw/skills/"},{"language":"bash","snippet":"# Default: HTML + CSS\n/ai-image-to-code\n\n# React + Tailwind component\n/ai-image-to-code/react\n\n# Layout description only (no code)\n/ai-image-to-code/describe"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: ai-image-to-code\ndescription: >\n  Use when (1) user provides a UI screenshot or image and asks to convert it into HTML, CSS, or component code. \n  (2) user says \"turn this into code\", \"rebuild this UI\", \"code this design\", or \"generate HTML from screenshot\". \n  (3) user pastes an image and says \"write the React component for this\". \nlicense: MIT\nmetadata:\n  version: \"3.1.0\"\n  category: design\n  author: wangjipeng\n  sources:\n    - https://github.com/MiniMax-AI/skills\n---\n\n# AI Image to Code\n\nUse 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\".\n\n## Core Position\n\nThis 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.*\n\nThis skill IS NOT:\n- An image generation tool — it converts existing images to code, not creates images\n- A design tool — it interprets and codes a design, not create the design\n- A backend integration tool — it outputs HTML/CSS/JS, not server code\n\nThis skill IS activated ONLY when: image (screenshot/mockup) + code generation intent are both present.\n\n## Modes\n\n### `/ai-image-to-code`\n\n**Default mode.** Converts a UI image into a complete HTML/CSS implementation.\n\nWhen to use: User provides a screenshot and wants a working HTML page that resembles it.\n\n### `/ai-image-to-code/react`\n\nOutputs a React functional component using Tailwind CSS.\n\nWhen to use: User explicitly asks for React or a component, not a plain HTML page.\n\n### `/ai-image-to-code/describe`\n\nProvides a detailed text description of the layout without writing code.\n\nWhen to use: User only wants to understand the layout before committing to code generation.\n\n## Execution Steps\n\n### Step 1 — Analyze the Image\n\n1. Receive image (pasted, file attachment, or URL)\n2. Use vision model to inspect the image and extract:\n   - Layout structure (header, sidebar, main content, footer)\n   - Color palette (primary, secondary, background, text, border/muted)\n   - Typography (headings, body, labels — size and weight hierarchy)\n   - Spacing system (padding, margins, gaps)\n   - Component types (buttons, inputs, cards, lists, navigation)\n   - Visual hierarchy (what stands out, what recedes)\n3. If the image is complex (>10 distinct UI sections), focus on the main content area\n\n### Step 2 — Plan the Code Structure\n\n| Image Content | Recommended Output |\n|---|---|\n| Landing / marketing page | Single HTML with embedded CSS, stacked `<section>` blocks |\n| Dashboard (with sidebar) | HTML + CSS Grid `grid-template-columns: 240px 1fr` |\n| Mobile app screen | Mobile-first HTML, `max-width: 375px`, fixed bottom tab bar |\n| Form / login / auth | Centered card (`max-width: 400px`), semantic `<form>` with full-width inputs |\n| Card / product grid | "},{"path":"README.md","content":"# AI Image to Code\n\n[中文版](./README_zh.md)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n[![Version](https://img.shields.io/badge/version-3.1.0-blue)](SKILL.md)\n\n> Convert a UI screenshot into runnable HTML/CSS or a React component — using vision analysis, structured code generation, and post-generation validation.\n\n## What Problem This Solves\n\nYou 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.\n\nTrigger phrases: \"convert this screenshot to code\", \"rebuild this UI\", \"turn this image into HTML\", \"code this design\", \"write the React component for this\".\n\n## Features\n\n- **Three output modes**: plain HTML+CSS, React + Tailwind, or layout description only.\n- **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)).\n- **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).\n- **5-slot color extraction**: pulls a useful palette without overfitting — see [references/color-extraction.md](./references/color-extraction.md).\n- **Tailwind-friendly output**: every visual property maps to a Tailwind class — see [references/tailwind-mapping.md](./references/tailwind-mapping.md).\n- **Built-in validator**: run `scripts/validate_output.py` to catch unclosed tags, mismatched pairs, empty `href`/`src`, and excessive `<div>` nesting (with `--strict`).\n\n## Quick Start\n\n### Installation\n\n```bash\n# Via ClawHub\nclawhub install ai-image-to-code\n\n# Or manually\ncp -r ai-image-to-code ~/.openclaw/skills/\n```\n\n### Usage\n\nPaste or attach the image, then ask. The skill supports three modes:\n\n```bash\n# Default: HTML + CSS\n/ai-image-to-code\n\n# React + Tailwind component\n/ai-image-to-code/react\n\n# Layout description only (no code)\n/ai-image-to-code/describe\n```\n\nOr just ask in natural language — the skill will match the intent.\n\n## Directory Structure\n\n```\nai-image-to-code/\n├── SKILL.md                   # Entry point (modes, execution steps, mandatory rules)\n├── LICENSE                    # MIT\n├── README.md                  # This file\n├── README_zh.md               # Chinese version\n├── CONTRIBUTING.md            # Contribution guide\n├── CHANGELOG.md               # Version history\n├── _meta.json                 # ClawHub metadata\n├── .gitignore\n├── references/                # Reference documents\n│   ├── color-extraction.md    # 5-slot palette algorithm\n│   ├── layout-patterns.md     # 12 layout patterns + decision tree\n│   └── tailwind-mapping.md    # Visual property → Tailwind class lookup\n├── scripts/                   # Helper scripts\n│   ├── validate_output.py     # HTML output validator\n│   └── requirements.txt    "},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn70zthc74p61mvctddrancx0s832g4r\",\n  \"slug\": \"ai-image-to-code\",\n  \"version\": \"3.1.0\",\n  \"publishedAt\": 1780471436747\n}"},{"path":"references/color-extraction.md","content":"# Color Extraction Heuristics\n\nHow to pull a useful color palette from a screenshot without overfitting or losing brand identity.\n\n**Related references**:\n- [`layout-patterns.md`](./layout-patterns.md) — visual signatures of common UI patterns (so you know which regions to sample from).\n- [`tailwind-mapping.md`](./tailwind-mapping.md) — how to map the 5-slot palette to Tailwind tokens (`bg-primary`, `text-text`, etc.).\n\n## The 5-Slot Palette\n\nMost UIs can be reduced to **5 colors**. Aim for these slots; ignore anything that doesn't fit cleanly:\n\n| Slot | Purpose | How to identify |\n|------|---------|-----------------|\n| **Primary** | Brand color, primary CTAs, active states | The most saturated, distinctive color in the image (often a button background) |\n| **Secondary** | Accent, secondary actions, links | Second-most distinctive color (often used for hover/focus) |\n| **Background** | Page / surface base | The most common color (usually 60-80% of pixels) |\n| **Text** | Body copy, headings | High contrast against background; usually near-black or near-white |\n| **Border / muted** | Dividers, disabled states, secondary text | Low-saturation, mid-luminance (often a light gray) |\n\nIf 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.\n\n## Algorithm\n\n```\n1. Sample ~50-200 points from the image (corners, midpoints, plus 10-20 random)\n2. Cluster the colors (k=5, k-medoids works better than k-means for palette)\n3. Rank by:\n   - Saturation (HSV): higher = primary, lower = background\n   - Coverage: highest = background\n   - Distinctiveness (distance from other 4): edge cases\n4. Map each cluster to a slot\n5. Round each color to the nearest Tailwind / CSS named color\n```\n\n## Common Pitfalls\n\n### Over-sampling backgrounds\n\nIf 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.\n\n### Picking anti-aliased edges\n\nWhen 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:\n\n- Sample only the center of solid regions\n- Or, after clustering, drop any cluster whose members are all within 10% luminance of each other AND all near a known color\n\n### Dark mode vs light mode\n\nThe **slots stay the same**, but the values invert:\n\n| Slot | Light mode | Dark mode |\n|------|------------|-----------|\n| Background | `#FFFFFF` (or off-white) | `#0F172A` (or near-black) |\n| Text | `#0F172A` (near-black) | `#F1F5F9` (off-white) |\n| Primary | Saturated, mid-luminance | Slightly desaturated, high-luminance accent |\n\nTo 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.\n\n### Gradients\n\nIf the image has a gradient (e.g., hero background), **don't try to "},{"path":"references/index.md","content":"# ai-image-to-code — References\n\nDetailed documents for the `ai-image-to-code` skill. See:\n\n- [`color-extraction.md`](./color-extraction.md) — Heuristics for pulling a color palette from a screenshot\n- [`layout-patterns.md`](./layout-patterns.md) — Common UI layout structures and their HTML equivalents\n- [`tailwind-mapping.md`](./tailwind-mapping.md) — Visual property → Tailwind class translation guide"}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"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","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":1389,"uniquenessScore":49,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-09T21:12:05.778Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-09T21:12:05.778Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-10T03:52:54.473Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"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!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"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","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}