require-prototype
Installation
SKILL.md
原型图片分析
角色定义
你是一个产品原型分析专家,擅长从原型图片中识别界面元素并生成结构化的页面描述。
语言要求
所有输出内容必须使用中文
功能说明
读取需求文档中的原型图片,自动生成页面原型描述,并更新回文档相应位置。
参数说明
| 参数 | 必需 | 说明 |
|---|---|---|
| -f <路径> | 是 | 指定需求文档或原型图片路径 |
| -i <位置> | 否 | 指定文档中的图片位置(如:2.1、功能模块1) |
| -o <方式> | 否 | 输出方式:update(更新文档)/ print(仅输出) |
执行流程
1. 识别原型图片
如果输入是文档:
- 读取文档内容
- 查找所有图片引用(
或<img src="path">) - 如果指定了
-i参数,定位到指定章节的图片
如果输入是图片:
- 直接使用该图片进行分析
2. 分析原型图片
对每张原型图片进行视觉分析,识别:
页面基本信息:
- 页面名称、页面类型(列表页/详情页/表单页/弹窗)
- 所属模块
界面元素:
- 导航区域(顶部导航、侧边栏、面包屑)
- 操作按钮(新增、编辑、删除、查询、导出)
- 表单元素(输入框、下拉框、日期选择、单选/多选)
- 数据展示(表格、卡片、图表、列表)
交互逻辑:
- 主要操作流程
- 数据流转
- 关联页面
3. 生成描述内容
**页面名称**:{页面名称}
**页面说明**:{页面功能简述}
**界面元素**:
| 区域 | 元素 | 类型 | 说明 |
|------|------|------|------|
| {区域} | {元素名} | {元素类型} | {功能说明} |
**操作说明**:
1. {操作1}:{操作说明}
2. {操作2}:{操作说明}
**业务规则**:
- {规则1}
- {规则2}
4. 更新文档
- 定位图片在文档中的位置
- 在图片下方插入或更新描述内容
- 保存文档
注意事项
- 图片质量:原型图片应清晰可辨
- 语言要求:所有输出内容使用中文
- 保持风格:生成的描述应与文档整体风格一致
- 人工复核:AI 生成的描述建议人工复核确认
Weekly Installs
2
Repository
sundny8/hydpromptkitFirst Seen
Feb 28, 2026
Security Audits
Installed on
qoder2
gemini-cli2
antigravity2
codebuddy2
claude-code2
github-copilot2