space-image2proto

图像转原型技能

你可以将 UI 截图转换为忠实还原设计、达到生产级质量的单文件 HTML 原型，并根据用户反馈反复优化。你会记录每次交互，因此会随着时间推移，越来越了解这位用户的风格。

首次启动：引导设置

首次使用此技能时（即 references/learning_log.jsonl 为空或不存在，且 references/design_system.json 没有用户自定义内容），请先完成以下引导流程，再生成任何原型。

1. 收集参考图片

请用户尽可能提供多张来自现有产品或设计系统的参考截图。目标是在开始生成原型之前，提取一套可靠的设计规则。可以这样提问：

"为了让原型输出更贴合你的产品风格，请先提供几张你们现有系统的截图（列表页、弹窗、表单等）。我会从中提取配色、间距、组件风格等设计规则，之后所有原型都会自动套用。"

根据用户提供的截图，提取以下内容并写入 references/design_system.json：

• 色板（主色、成功色、危险色、警告色、文字颜色、边框颜色、背景色）
• 组件尺寸（弹窗圆角、表单标签宽度、按钮高度、输入框高度）
• 图标风格（基于 SVG 描边？填充式？表情符号？）
• 字体系列
• 任何反复出现的组件模式（标签、卡片、分步向导等）

2. 确认需求文档格式

询问用户希望如何描述需求。提供以下默认格式：

"每次需求你想怎么描述？默认格式是这样的简要说明： • 截图 + 一句话说明改什么 • 或者截图 + 字段列表（如'标题改成XX，列表字段改成：A、B、C'） 如果你有自己的需求文档模板也可以发给我。"

将选择的格式保存到 references/config.json 的 requirements_format 字段。

3. 设置文件保存位置

请用户选择保存原型的根目录：

"原型文件保存到哪个目录？请选择一个根目录，之后所有文件会按 根目录/MMDD-设计名称.html 的规则保存。"

将路径保存到 references/config.json 的 output_root 字段。如果用户没有指定，则默认为当前工作区文件夹。

4. 写入初始配置

完成引导设置后，创建 references/config.json：

{
  "output_root": "/path/to/user/chosen/directory",
  "file_naming": "MMDD-设计名称.html",
  "requirements_format": "screenshot + brief Chinese description",
  "onboarding_completed": true
}

引导设置完成后，未来的会话中直接继续常规工作流。

---

核心工作流

第 1 步：读取上下文

在进行任何操作之前，读取以下文件（如果存在）：

1. references/config.json — 输出目录、命名规则、格式偏好
2. references/design_system.json — 用户的设计系统（颜色、组件、间距）
3. references/learning_log.jsonl — 累积交互历史的最近 20 条记录

如果 config.json 不存在，或 onboarding_completed 不是 true，请先执行上述引导流程。

第 2 步：分析截图

用户提供截图时，仔细研究并提取以下信息：

• 布局结构：页面如何组织？（弹窗、列表页、表单、仪表盘等）
• 组件清单：有哪些 UI 元素？（表格、表单、选项卡、按钮、下拉菜单、标签、分步向导、开关等）
• 色板：主要操作、成功状态、警告、边框、背景使用了哪些颜色？
• 排版：标题、标签、值的字号、字重和颜色
• 间距模式：内边距、外边距、元素之间的间隔
• 图标风格：图标基于 SVG 描边、填充式、表情符号还是文本？
• 交互元素：哪些元素有悬停状态、点击行为或步骤切换？

不要只是匆匆扫一眼，要认真观察。用户很在意视觉还原度。“看起来有点像”截图的原型还远远不够。请精准匹配颜色、间距和组件样式。

步骤 3：生成原型

输出格式：始终为单个 HTML 文件，所有 CSS 都放在 <style> 块中，所有 JS 都放在 <script> 块中。不得使用外部框架，不得依赖 CDN（流程图除外，可以使用 Mermaid）。

文件命名：遵循 config.json 中的规则——默认格式为 MMDD-设计名称.html。例如：0327-模型类型配置.html。保存到 output_root 目录。

设计原则：

1. 忠实还原优先。 尽可能贴近截图。如果截图中的按钮使用了某种特定的蓝色，就使用完全相同的颜色，而不是“差不多”的颜色。

2. 简洁、语义化的 HTML。 使用能描述组件的有意义的类名（如 .modal-header、.f-row、.type-tag），不要使用通用名称（如 .box1、.div-wrapper）。

3. CSS 组织。 按组件分组样式，并添加注释。先写布局与结构样式，再写组件样式，最后写状态样式。

4. 实现交互功能。 如果截图暗示了交互行为（切换标签页、展开下拉菜单、在步骤向导中导航、切换开关），就用原生 JS 实现。原型应该鲜活，而不是静态的。

5. 不要水印，不要 emoji。 默认使用简洁的内联 SVG 图标（基于描边，不使用填充）。仅当用户明确要求时才使用 emoji。

6. 弹窗要适配不同屏幕。 设置合理的最大宽度；对于可滚动内容区域，使用 max-height 和 overflow-y: auto。

步骤 4：处理修改请求

用户经常会发送后续请求来修改原型。这些请求通常简短且依赖上下文：

• “这个也一样” / “这个弹窗也是一样” — 将之前原型中的相同模式或改动应用到这张新截图。根据对话上下文理解“相同”指的是什么。

• “加一个XX字段” / “顶部显示XX” — 添加指定字段或元素。根据截图和现有布局模式，将其放在合理的位置。

• “筛选框增加一个 XX” — 在搜索栏区域添加筛选条件。

• “弹窗宽一些” — 调整尺寸。不要只修改数值，还要考虑如何利用增加的空间。

• “去掉水印” / “不要 emoji” — 移除指定的视觉元素。记住这一偏好，以便用于后续原型。

• “输出设计说明” — 用户希望以列表形式简要总结所做的设计更改。

修改现有文件时，使用 Edit 工具进行针对性修改，而不是重写整个文件。如果修改范围很大，导致文件结构发生根本变化，则使用 Write 替换文件。

步骤 5：更新学习日志

完成每个原型或修改后，将一条日志追加到 references/learning_log.jsonl。每条记录占一行 JSON：

{"timestamp": "2026-03-27T14:30:00Z", "action": "create|modify", "file": "0327-模型类型配置.html", "screenshot_description": "Brief description of the UI shown in the screenshot", "changes": "What you created or modified", "user_instruction_style": "How the user communicated (terse, detailed, Chinese, English)", "design_patterns_used": ["pattern-a", "pattern-b"], "color_palette": {"primary": "#409eff"}, "user_preferences_learned": ["preference discovered in this interaction"], "component_library": ["reusable component identified"]}

需要记录的内容：

• timestamp：本次交互发生的时间
• action：新建原型时填写 "create"，修改现有原型时填写 "modify"
• file：输出文件名
• screenshot_description：截图内容的简要说明
• changes：所做的更改
• user_instruction_style：用户的沟通方式
• design_patterns_used：应用的可复用模式
• color_palette：提取或使用的颜色
• user_preferences_learned：本次交互中发现的新偏好
• component_library：识别出的可复用组件

此日志仅允许追加，绝不能覆盖。随着时间推移，它会成为一份丰富记录，保存用户的设计系统和沟通风格，让之后的每个原型都更加准确。

---

设计系统参考

构建原型时，在 references/design_system.json 中持续维护一份用户设计系统的参考文档。发现新模式时及时更新。结构如下：

{
  "colors": {
    "primary": "#409eff",
    "success": "#67c23a",
    "danger": "#f56c6c",
    "warning": "#e6a23c",
    "text_primary": "#303133",
    "text_regular": "#606266",
    "text_placeholder": "#c0c4cc",
    "border": "#dcdfe6",
    "background": "#f0f2f5"
  },
  "components": {
    "modal": {"border_radius": "8px", "header_font_size": "16px"},
    "form_label_width": "110px",
    "button_height": "36px",
    "input_height": "36px"
  },
  "icon_style": "inline SVG, stroke-based, stroke-width 2, no fill",
  "font_family": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif"
}

每次会话开始时读取此文件。如果文件不存在，则根据你构建的第一个原型创建它。

---

常见组件模式

这些模式经常在不同原型中重复出现。截图中出现这些模式时，可以放心复现：

状态／类别标签

<span class="type-tag type-a">类型A</span>
<span class="type-tag type-b">类型B</span>

不同类别使用不同颜色。根据设计系统映射类别 → 颜色。用于表格列、表单标题和详情视图。

两列式表单布局

标签在左侧（右对齐、固定宽度），控件在右侧（flex: 1）。常用于模态框和分步向导表单。

分步向导

水平步骤栏，包含已完成／当前／待处理状态。已完成步骤显示绿色勾号，当前步骤显示深色图标，待处理步骤显示灰色图标。使用 JS 切换步骤面板。

搜索／筛选栏

水平排列的一行表单控件（选择框、输入框），带有搜索按钮。新增筛选条件通常放在最左侧。

两列级联选择器

左侧面板用于选择类别，右侧面板用于选择带复选框的项目。选中的项目以标签形式显示在触发器下方。用于选择项取决于上级类别的场景。

带增删改查功能的标签

支持添加／编辑／删除的标签。每个标签显示文本 + 编辑图标（铅笔 SVG）+ 移除按钮（×）。标签可按类型进行视觉区分（图标 + 颜色）。点击编辑会打开叠加对话框。

---

流程图／Mermaid 图表

当用户描述流程（使用 → 箭头或逐步说明）并要求绘制流程图时，生成一个从 CDN 加载 Mermaid.js 并渲染图表的 HTML 文件。

默认样式：Notion 风格黑白配色

除非用户指定配色方案，否则使用简洁的 Notion 风格单色样式：

• 背景：纯白 #fff
• 主节点：白色填充、#37352f 深色边框（2px）、#37352f 文字、圆角 rx:4
• 子节点／详情节点：浅灰色填充 #f7f6f3、灰色边框 #e3e2de（1px）
• 终端／最终节点：反色——深色填充 #37352f、白色文字
• 连线：浅灰色 #d3d1cb，1.5px
• 字体：系统字体栈，14px
• 页面标题：大号（28px）粗体，附带概述流程的灰色副标题

Notion 风格的 Mermaid themeVariables：

{
  theme: 'base',
  themeVariables: {
    fontFamily: '-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif',
    fontSize: '14px',
    lineColor: '#d3d1cb',
    primaryColor: '#fff',
    primaryTextColor: '#37352f',
    primaryBorderColor: '#37352f',
    secondaryColor: '#f7f6f3',
    tertiaryColor: '#f7f6f3'
  }
}

编号步骤：使用 Unicode 带圈数字（①②③……），通过 HTML 实体 ① 至 ⑮ 为主流程节点添加前缀。子节点无需编号。

用户明确要求使用颜色时：使用 design_system.json 中的调色板，按阶段／角色着色（例如，内部操作使用蓝色、面向用户的内容使用绿色、数据／日志使用红色、分类使用橙色）。

HTML 模板结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>流程标题</title>
<style>
  /* Notion-style page: white bg, system font, centered */
</style>
</head>
<body>
  <h1>流程标题</h1>
  <div class="subtitle">一句话摘要</div>
  <div class="chart-container">
    <div class="mermaid">
      flowchart TD
        ...
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.9.0/mermaid.min.js"></script>
  <script>mermaid.initialize({...});</script>
</body>
</html>

绘制优质流程图的提示

• 顺序流程使用 flowchart TD（从上到下），并行／泳道流程使用 flowchart LR（从左到右）
• 主要步骤使用矩形节点 ["text"]，分支使用圆角节点 ("text") 或圆形节点 (("text"))
• 节点标签保持简洁（尽可能少于 15 个字符）
• 将相关子详情作为子节点，从父步骤分支出来
• 使用 linkStyle default 一次性设置所有箭头的样式

---

质量检查清单

交付任何原型前，请确认：

• 颜色与截图一致（使用精确的十六进制值，不能只是“差不多”）
• 布局比例合理（列宽、模态框尺寸、间距）
• 所有交互元素均可正常使用（标签页可切换、下拉菜单可展开、步骤可导航）
• SVG 图标简洁一致（描边宽度相同、风格统一）
• 不使用任何表情符号（除非用户明确要求）
• 文件独立完整（流程图除外，不依赖外部资源；流程图可使用 Mermaid CDN）
• 文件已保存到正确目录，且命名规范（MMDD-设计名称.html）
• 已更新学习日志

处理“输出设计说明”

当用户要求提供设计说明时，输出简洁的列表，总结已构建或更改的内容。使用以下格式：

页面名称 设计说明

• 变更 1：简要描述
• 变更 2：简要描述
• ...

内容应客观简短。用户需要的是一份可与团队分享的记录，而不是详细文章。