Ai Image To Code — AI 图像转代码

AI 图像转代码 使用时机： （1）用户提供 UI 截图或图像，并要求将其转换为 HTML、CSS 或组件代码。 （2）用户说“将此转换为代码”、“重建此 UI”、“编码此设计”或“从截图生成 HTML”。 （3）用户粘贴图像并说“为此编写 React 组件”。

核心职责 此技能解决特定问题：视觉 UI 模拟需要成为实际可运行的前端代码 —— 不仅仅是一个描述，而是一个可工作的实现。

此技能不是： 图像生成工具 —— 它将现有图像转换为代码，而不是创建图像 设计工具 —— 它解释和编码设计，而不是创建设计 后端集成工具 —— 它输出 HTML/CSS/JS，而不是服务器代码

此技能仅在以下情况下激活： 图像（截图/模拟）+ 代码生成意图同时存在。

模式 /ai-image-to-code 默认模式。将 UI 图像转换为完整的 HTML/CSS 实现。 使用时机：用户提供截图并希望获得一个类似的工作 HTML 页面。 /ai-image-to-code/react 输出使用 Tailwind CSS 的 React 函数组件。 使用时机：用户明确要求 React 或组件，而不是普通 HTML 页面。 /ai-image-to-code/describe 提供有关布局的详细文本描述，而不编写代码。 使用时机：用户只想在提交代码生成之前了解布局。

执行步骤 步骤 1 — 分析图像 接收图像（粘贴、文件附件或 URL） 使用视觉模型检查图像并提取： 布局结构（标题、侧边栏、主内容、页脚） 颜色调色板（主色、次色、背景、文本、强调色） 排版（标题、正文、标签 —— 大小和权重等级） 间距系统（填充、边距、间隙） 组件类型（按钮、输入、卡片、列表、导航） 视觉层次（什么突出、什么退隐） 如果图像复杂（>10 个不同的 UI 部分），则关注主内容区域

步骤 2 — 计划代码结构 图像内容 推荐输出 登陆页面 单个 HTML 文件，内嵌 CSS 仪表板 HTML + CSS 网格布局 移动应用屏幕 移动优先的响应式 HTML 表单/登录页面 语义 HTML 表单，带有适当的输入 卡片/列表 UI 基于组件的 HTML，带有类 图表/数据可视化 SVG 或基于画布的渲染

步骤 3 — 生成代码 HTML/CSS 输出（默认）： React + Tailwind（react 模式）： export function UICard() { return (

步骤 4 — 验证 关键布局部分（标题、主内容、侧边栏）存在 颜色在原始图像的 ±10% 范围内（主观匹配） 没有发明内容 —— 占位文本是通用的（“卡片标题”，而不是特定的品牌名称） HTML 有效（正确的标签嵌套，无未闭合的标签）

强制规则 不允许： 发明品牌名称、特定产品名称或在图像中不可见的专有文本 声称输出是像素完美的 —— 它是解释 不生成后端代码、JavaScript 逻辑或 API 调用 不复制受版权保护的 UI 元素（徽标、图标） —— 使用通用等效项 允许： 使用适合上下文的占位文本（例如，对于搜索栏使用“搜索...”） 保留视觉层次（主 > 次 > 三） 使用现实的占位数据来代替图像（例如，通过 placeholder.com 或 picsum） 明确说明：“这是近似值；根据需要调整颜色和间距”

质量标准 良好的输出： 所有主要布局区域都存在且正确定位 颜色调色板可识别地源自图像 排版等级匹配（标题大小 > 正文大小） 代码是有效的、可运行的 HTML/CSS，无需超出 CDN 的外部依赖 糟糕的输出： 布局混乱或缺少主要部分 输出包含破损或未闭合的 HTML 标签 生成的文本内容不适合 UI 上下文 输出需要非免费依赖或本地资产文件

好与坏的例子 场景 糟糕的输出 良好的输出 电子商务产品卡片 通用 lorem ipsum 文本 “价格：49.99 美元 —— 添加到购物车”上下文适当 暗黑模式 UI 忽略暗黑主题 使用暗色背景、浅色文本、正确的对比度 移动截图 仅限桌面输出 max-width: 375px 容器，移动优先 复杂仪表板 一个未区分的 div 网格布局，带有侧边栏、标题、主面板

参考 参考/ —— 颜色提取启发式、布局结构模式、Tailwind 类映射指南