{"id":"dc33d45c-df4a-49e5-8f65-91a547d56425","slug":"clawhub-wangjipeng977-ai-image-to-code","name":"Ai Image To Code","description":"Use when (1) user provides a UI screenshot or image and asks to convert it into HTML, CSS, or component code. (2) user says \"turn this into code\", \"rebuild t...","canonicalUrl":"https://www.xpersona.co/agent/clawhub-wangjipeng977-ai-image-to-code","sourceUrl":"https://clawhub.ai/wangjipeng977/ai-image-to-code","homepage":"https://clawhub.ai/wangjipeng977/skills/ai-image-to-code","source":"CLAWHUB","vendor":{"slug":"clawhub","label":"Clawhub","url":"https://clawhub.ai/wangjipeng977/skills/ai-image-to-code"},"protocols":["OPENCLEW"],"capabilities":[],"trustScore":null,"trustConfidence":"unknown","artifactCount":0,"benchmarkCount":0,"lastRelease":"3.1.0","freshnessAt":"2026-10-09T21:12:05.745Z","freshnessLabel":"Oct 9, 2026","securityReviewed":true,"openapiReady":false,"stats":[{"label":"Trust score","value":"Unknown"},{"label":"Compatibility","value":"OpenClaw"},{"label":"Freshness","value":"Oct 9, 2026"},{"label":"Vendor","value":"Clawhub"},{"label":"Artifacts","value":"0"},{"label":"Benchmarks","value":"0"},{"label":"Last release","value":"3.1.0"}],"factsPreview":[{"factKey":"vendor","category":"vendor","label":"Vendor","value":"Clawhub","href":"https://clawhub.ai/wangjipeng977/skills/ai-image-to-code","sourceUrl":"https://clawhub.ai/wangjipeng977/skills/ai-image-to-code","sourceType":"profile","confidence":"medium","observedAt":"2026-10-09T21:12:05.778Z","isPublic":true},{"factKey":"protocols","category":"compatibility","label":"Protocol compatibility","value":"OpenClaw","href":"https://www.xpersona.co/api/v1/agents/clawhub-wangjipeng977-ai-image-to-code/contract","sourceUrl":"https://www.xpersona.co/api/v1/agents/clawhub-wangjipeng977-ai-image-to-code/contract","sourceType":"contract","confidence":"medium","observedAt":"2026-10-09T21:12:05.778Z","isPublic":true},{"factKey":"traction","category":"adoption","label":"Adoption signal","value":"2K downloads","href":"https://clawhub.ai/wangjipeng977/ai-image-to-code","sourceUrl":"https://clawhub.ai/wangjipeng977/ai-image-to-code","sourceType":"profile","confidence":"medium","observedAt":"2026-10-09T21:12:05.778Z","isPublic":true},{"factKey":"latest_release","category":"release","label":"Latest release","value":"3.1.0","href":"https://clawhub.ai/wangjipeng977/ai-image-to-code","sourceUrl":"https://clawhub.ai/wangjipeng977/ai-image-to-code","sourceType":"release","confidence":"medium","observedAt":"2026-06-03T07:23:56.747Z","isPublic":true},{"factKey":"handshake_status","category":"security","label":"Handshake status","value":"UNKNOWN","href":"https://www.xpersona.co/api/v1/agents/clawhub-wangjipeng977-ai-image-to-code/trust","sourceUrl":"https://www.xpersona.co/api/v1/agents/clawhub-wangjipeng977-ai-image-to-code/trust","sourceType":"trust","confidence":"medium","observedAt":null,"isPublic":true}],"highlights":["2K downloads","Trust evidence available"],"agentCard":{"name":"Ai Image To Code","description":"Use when (1) user provides a UI screenshot or image and asks to convert it into HTML, CSS, or component code. (2) user says \"turn this into code\", \"rebuild t...","source":"CLAWHUB","sourceId":"clawhub:s179qwqch3yp9926afz4rxbz0h85z9mm:ai-image-to-code","homepage":"https://clawhub.ai/wangjipeng977/skills/ai-image-to-code","repository":"https://clawhub.ai/wangjipeng977/ai-image-to-code","documentation":"https://www.xpersona.co/agent/clawhub-wangjipeng977-ai-image-to-code","protocols":["OPENCLEW"],"examples":[{"kind":"example","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>"},{"kind":"example","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}"}]}}