From 4457c54f1b251f5b52a63152dabed5807a0636a2 Mon Sep 17 00:00:00 2001
From: liyongde <1419499670@qq.com>
Date: Tue, 18 Aug 2026 13:23:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8E=9F=E5=9E=8B=E8=AE=BE=E8=AE=A1=20?=
 =?UTF-8?q?skill?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 prototype-design/SKILL.md           | 98 +++++++++++++++++++++++++++++
 prototype-design/agents/openai.yaml |  4 ++
 2 files changed, 102 insertions(+)
 create mode 100644 prototype-design/SKILL.md
 create mode 100644 prototype-design/agents/openai.yaml

diff --git a/prototype-design/SKILL.md b/prototype-design/SKILL.md
new file mode 100644
index 0000000..8d5310f
--- /dev/null
+++ b/prototype-design/SKILL.md
@@ -0,0 +1,98 @@
+---
+name: prototype-design
+description: 为 PDA、手持终端或 PC 桌面端创建可交互的单文件 HTML 产品原型。当用户要求设计、复刻、修改或演示产品界面、业务页面、仪表盘、管理后台、表单、操作流程或可点击原型时使用；尤其适用于需要严格还原参考图，或由用户授权自由设计，并将结果保存到 docs/prototype_design/design/ 目录的任务。
+---
+
+# 原型设计
+
+先明确终端、业务、视觉方向和交付方式，再制作可用的 HTML 原型。
+
+## 执行流程
+
+### 1. 明确需求
+
+从用户消息和用户提供的文件中确认以下信息：
+
+- 目标终端：`PDA`、手持终端或 `PC` 桌面端。
+- 业务目的：目标用户、核心任务、所需页面或流程、重要数据和可执行操作。
+- 视觉方向：严格还原参考图，或允许自由设计。
+- 交付方式：发布为外部可访问链接，或直接嵌入聊天回复。
+- 用于生成文件名的主题名称。
+
+不得重复询问用户已经说明的信息。
+
+如果用户未说明 PDA 或 PC，且无法从业务场景中可靠判断，先询问需要制作哪一种终端。只有在上下文明确支持时，才把手机和工业手持设备归为 PDA。用户未提供准确视口尺寸时，优先采用参考图的宽高比；没有参考图时，PDA 默认使用 `360 × 640`，PC 默认使用 `1440 × 900`。
+
+### 2. 制作前解决业务歧义
+
+当缺失的信息会实质影响信息架构、字段、操作、状态或业务流程时，必须在编写 HTML 前提问。将问题合并为简短的一组，只询问继续制作所必需的信息。
+
+当能够确定原型的使用者、目标、主要内容和核心交互时，即可认为业务足够明确。示例文案、演示数据或非关键状态等可逆细节可以做合理假设，但要向用户说明，不要因此阻塞制作。
+
+### 3. 选择视觉模式
+
+当用户提供参考图片、截图、设计稿或已有界面，且没有明确授权重新设计时，使用**严格还原模式**。
+
+在严格还原模式下：
+
+1. 编码前查看用户提供的所有参考资料。
+2. 在 HTML 和 CSS 能力范围内，尽可能准确地还原样式、布局、比例、间距、对齐、颜色、边框、圆角、阴影、字体、字号、字重、行高、图标处理、信息密度和视觉层级。
+3. 保留参考图中的内容结构；只有用户的业务要求明确需要变更时才调整内容。
+4. 不得根据个人偏好引入新的视觉体系、重新排列区域或添加参考图中不存在的装饰。
+5. 有可用图片素材时优先复用。无法准确复现某项素材时，使用最接近的 CSS 或文字替代，并在交付时说明限制。
+6. 多张参考图互相冲突，或业务改动会明显偏离参考图时，先询问用户以哪项要求为准。
+
+只有用户明确表示“可以自行思考”“自由设计”“样式自行决定”或其他同等授权时，才使用**自由设计模式**。根据目标业务和终端形成一致、合理的设计，不要默认模仿无关产品。
+
+如果用户既提供参考图，又只对部分内容授权自由发挥，则严格保留授权范围之外的参考图特征。
+
+### 4. 制作前确认交付方式
+
+在开始编写原型前，询问用户选择以下哪种方式：
+
+- 发布为可从外部访问的链接；
+- 直接嵌入聊天回复内。
+
+如果用户已经说明交付方式，则不得再次询问。修改同一个原型时也不要重复询问，除非用户要求改变交付方式。
+
+选择外链交付时，先创建并验证本地 HTML，再使用当前环境可用的发布或托管能力生成公网链接。不得把本地文件路径描述成公网链接。如果无法发布或发布需要额外授权，应明确说明，并提供聊天内嵌或本地 HTML 文件作为替代方案。
+
+选择聊天内嵌时，也要先创建相同的本地 HTML 文件，再使用当前环境支持的 HTML 预览或交互式制品能力展示。如果环境不支持真正的内嵌 HTML，应提供可点击的本地文件链接，并明确说明限制。
+
+## 制作原型
+
+创建自包含的单文件 HTML，在文件内嵌入 CSS 和 JavaScript。默认不使用构建步骤和远程依赖。只有在用户允许联网依赖，或严格还原参考图确实需要时，才使用远程字体、库或资源。
+
+实现演示业务流程所需的交互，例如页面导航、标签切换、弹窗、抽屉、筛选、表单校验、选中状态、状态变更或模拟提交。除非用户明确要求接入真实后端，否则所有数据都保存在本地，并明确属于模拟数据。
+
+遵循不同终端的设计要求：
+
+- PDA：优先考虑触摸操作、单手使用、快速扫描、紧凑信息、拇指易触达的主要操作和受控的页面溢出。
+- PC：优先考虑信息密度、键盘和鼠标操作、稳定的多栏布局、适当的表格或面板，以及清晰的悬停和聚焦状态。
+
+保证页面在目标视口内可用。采用语义化 HTML、可见的键盘聚焦状态、明确的表单标签、足够的颜色对比度和减少动态效果的兼容处理；严格还原参考图时，在不破坏主要视觉效果的前提下满足这些要求。
+
+## 按固定规则保存
+
+始终将完成的文件保存到：
+
+`docs/prototype_design/design/YYYY-MM-DD-<topic>-design.html`
+
+使用当前环境的本地日期生成 `YYYY-MM-DD`。根据业务主题将 `<topic>` 转换为简短的小写 ASCII kebab-case 文件名。例如：
+
+- `docs/prototype_design/design/2026-08-17-warehouse-picking-design.html`
+- `docs/prototype_design/design/2026-08-17-customer-dashboard-design.html`
+
+目录不存在时创建目录。不得覆盖无关的既有原型。如果目标文件已经存在，先检查它是否属于当前原型；只有属于同一原型时才能更新，否则使用更具体的主题名称。
+
+## 交付前验证
+
+1. 使用目标视口打开 HTML 并检查实际渲染结果。
+2. 操作所有可见控件并走通核心流程。
+3. 检查内容裁切、意外滚动条、资源加载失败、控制台错误、文字难以阅读和控件无法访问等问题。
+4. 严格还原参考图时，对比渲染结果和参考图，优先修正最明显的视觉差异。
+5. 确认文件已保存到规定路径，并且无需构建即可打开。
+
+## 汇报结果
+
+说明目标终端、视觉模式、已经实现的交互和交付方式，如果可以嵌入到聊天回复中展示，那就直接在聊天窗口中显示，如果不好在连天对话中显示就用文件链接让用户自行查看，最后都需要提供保存后的 HTML 文件链接。严格还原参考图时，只说明实质性的限制或有意保留的差异；没有达到逐像素一致时，不得声称已经做到像素级还原。
diff --git a/prototype-design/agents/openai.yaml b/prototype-design/agents/openai.yaml
new file mode 100644
index 0000000..33d6cde
--- /dev/null
+++ b/prototype-design/agents/openai.yaml
@@ -0,0 +1,4 @@
+interface:
+  display_name: "原型设计"
+  short_description: "根据业务、终端类型和参考图制作可交互 HTML 原型"
+  default_prompt: "使用 $prototype-design 根据我的需求制作一个可交互的 HTML 产品原型。"