菜单
用于规范项目文档目录与指导具体文档的编写（包含需求文档、设计文档和原型等）。适用于创建或更新 docs/project.md、docs/modules/<module>/requirements.md、design.md、design-server.md、prototype/*.html、docs/execplans/<module>-task.md。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/blesstosam/trpc-fastify-starter --skill product-design命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| name | product-design |
| description | 用于规范项目文档目录与指导具体文档的编写（包含需求文档、设计文档和原型等）。适用于创建或更新 docs/project.md、docs/modules/<module>/requirements.md、design.md、design-server.md、prototype/*.html、docs/execplans/<module>-task.md。 |
| metadata | {"author":"weilei","version":"2026.02.12"} |
当用户提出以下需求时使用本技能：
docs/ 文档结构在 docs/ 下建立稳定、可追踪、对 AI 友好的文档资产，确保开发输入完整一致。
docs/
├─ project.md
├─ index-template.html
├─ reference-images/ (optional)
│ └─ *.{png,jpg,jpeg,webp,svg}
├─ execplans/
│ └─ <module-name>-task.md
└─ modules/
└─ <module-name>/
├─ requirements.md
├─ design.md
├─ design-server.md
├─ prototype/
│ ├─ index.html
│ └─ *.html
规则：
tag-manage<module-name>-task.md 统一放在 docs/execplans/，且 <module-name> 必须与模块目录名一致docs/index-template.html 复制后改造docs/reference-images/ 为可选目录，由用户手动放置参考图片；可先浏览这些图片提取可借鉴点（如信息层级、布局节奏、视觉风格），仅作为参考，最终方案仍以需求和设计判断为准docs/project.mdrequirements.mddesign.md需求文档，必须按“用户故事 + EARS”编写，用户故事参考user-story-writing skill，EARS规范参考doc-ears skill
作为<角色>，我希望<能力>，以便<价值>系统应...当<事件>发生时，系统应...当系统处于<状态>时，系统应...若<条件>，系统应...若发生<异常>，系统应...design-server.mdindex-template.htmlhttps://icon-sets.iconify.design/?query=${xx}来找到合适的图标prototype/*.htmlprototype/ 目录中docs/index-template.html 复制当模块满足以下任一条件时，禁止只做单页面原型，必须拆分为多个 prototype/*.html 页面：
在生成 HTML 前，必须先在 design.md 增加“页面结构规划”小节，包含：
prototype/index.html 到达所有页面？复杂模块的原型必须一次性交付到“可执行交互”粒度，不允许只做页面骨架。对于需求中出现的核心操作，必须在原型中完整体现对应交互细节（含触发入口、操作过程、结果反馈）。
project.md 写的总体目标，注意不要偏离主体目标docs/reference-images/ 且包含图片，可先浏览这些图片提取可借鉴点（如信息层级、布局节奏、视觉风格），仅作为参考，最终方案仍以需求和设计判断为准docs/modules/<module-name>/ 及标准文件design.md 中完成“页面结构规划”（页面清单、页面关系、页面职责），复杂功能按规则拆分页面design.md 与 design-server.mddesign.md 增加“关键交互清单”（新增、编辑、删除、状态变更、筛选、分页等）并标注每项对应页面/弹窗index-template.html 创建/更新 prototype/*.html，并确保可从 prototype/index.html 访问所有子页面design.md、design-server.md或HTML原型图的修改都要互相同步，保证3者的一致prototype/）?design.md 是否包含用户故事和 EARS？design-server.md 是否避免代码实现细节？prototype/ 且可直接预览？design.md 是否包含“关键交互清单”，且每项都有对应页面或弹窗落地？使用 frontend-design skill 来遵循设计原则并避免反模式。
| Topic | Description | Reference |
|---|---|---|
| EARS需求语法 | 在 design.md 中编写 EARS 需求语句时参考 | doc-ears |
| 用户故事写作 | 在 design.md 中编写用户故事与验收标准时参考 | user-story-writing |
| TailwindCSS最佳实践 | 在原型或前端开发中编写 TailwindCSS 类名时的约束与建议 | tailwindcss-best-practices |