Ai Image To Code

Use when (1) user provides a UI screenshot or image and asks to convert it into HTML, CSS, or component code. (2) user says "turn this into code", "rebuild t...

用于：①用户提供 UI 截图或图片并要求转换为 HTML、CSS 或组件代码；②用户说“把这段转为代码”“重新构建 …”等情形。

wangjipeng977

未分类 clawhub v999.0.1 5 版本 99849.8 Key: 需要

★ 1

Stars

📥 1,310

下载

💾 0

安装

版本

#latest

概述

AI Image To Code

Emoji: 🖼️→💻

Trigger: User pastes a UI screenshot/image and wants code (HTML/CSS or React).

What It Does

Converts 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.

Features

Vision-powered layout extraction (header, sidebar, main content, etc.)
Multi-format output: plain HTML/CSS (default) or React + Tailwind CSS
Mobile-first responsive (detects mobile screenshots → max-width: 375px)
Contextual placeholder content (e.g., "Price: $49.99" not lorem ipsum)

Modes

Mode	Description
------	-------------
`/ai-image-to-code`	Convert UI image to HTML/CSS
`/ai-image-to-code/react`	Output React functional component + Tailwind
`/ai-image-to-code/describe`	Text description of layout, no code

How To Use

/ai-image-to-code

Paste a screenshot, ask to generate HTML/CSS.

/ai-image-to-code/react

Asks for React + Tailwind output instead.

/ai-image-to-code/describe

Just describe the layout, no code generation.

Technical Notes

Uses MiniMax vision model to analyze screenshot
Detects dark mode and applies appropriate color schemes
Generates semantic HTML structure
Tailwind classes mapped from visual analysis

Last updated: 2026-05-28

版本历史

共 5 个版本

v999.0.1 当前

2026-06-01 20:20 安全安全

v999.0.0

2026-05-28 12:48 安全安全

v6.0.1

2026-05-26 22:49 安全安全

v5.0.0

2026-05-21 12:40 安全安全

v2.0.1

2026-05-20 05:00 安全安全

安全检测

腾讯云安全 (Keen)

安全，无风险

查看报告

腾讯云安全 (Sanbu)

安全，无风险

查看报告

🔗 相关推荐

Sql To Dashboard

wangjipeng977

用于以下情况：(1) 用户提供SQL查询并要求根据结果生成图表、仪表板或数据可视化；(2) 用户说“把这个显示为图表”等类似请求。

★ 1 📥 388

Json To Api

wangjipeng977

用于以下场景：(1) 用户提供 JSON 数据并要求为其设计 REST API 端点；(2) 用户说“为此创建 API”“设计端点”“编写 API 代码”等。

★ 1 📥 381

Csv To Chart

wangjipeng977

用于以下情况：(1) 用户粘贴或上传 CSV 数据并要求生成图表或可视化；(2) 用户想要“绘制”或“可视化”表格数据；(3)…

★ 1 📥 414