// macOS 产品设计专家。根据需求描述，输出符合 macOS 原生风格的 HTML/CSS 设计稿。当用户说"帮我设计一个界面"、"做个页面"、"产品设计"、"UI 设计"、"画个原型"时触发。
| name | macos-product-design |
| description | macOS 产品设计专家。根据需求描述，输出符合 macOS 原生风格的 HTML/CSS 设计稿。当用户说"帮我设计一个界面"、"做个页面"、"产品设计"、"UI 设计"、"画个原型"时触发。 |
根据用户的需求描述，输出可直接在浏览器中预览的 HTML/CSS 设计稿，风格对齐 macOS 原生应用。
用户说"帮我设计"、"做个界面"、"画个页面"、"产品设计"、"UI设计"等。
和用户确认：
启动 sub-agent，读取设计系统 reference 文件，输出完整的 HTML 文件。
Sub-agent prompt 模板：
你是一个 macOS 产品设计专家。请根据用户需求，输出一个完整的 HTML 文件（内联 CSS），可直接在浏览器中打开预览。
## 第一步：读取设计系统（必须执行）
用 Read 工具读取以下文件，这是你的设计系统规范：
[绝对路径]/.claude/skills/macos-product-design/reference/macos-design-system.md
严格按照该文件中的设计变量、组件模板、做与不做来输出代码。不可使用文件中未定义的颜色、字号、间距值。
## 用户需求
[用户的需求描述]
## 输出要求
1. 输出一个完整的 HTML 文件，包含内联 <style> 标签
2. 必须包含设计系统中的 CSS 变量定义和全局基础样式
3. 使用设计系统中的组件模板，不要自创样式
4. 默认暗色主题
5. 所有交互元素必须有 hover 状态
6. 用语义化的 class 名
7. 写好注释标注各区域
8. 用 Write 工具写入指定文件路径
Sub-agent 写完文件后：
| 文件 | 内容 |
|---|---|
reference/macos-design-system.md | macOS 设计变量 + 组件代码模板 + 做与不做 |
后续可扩展：
reference/page-patterns.md — 常见页面布局模式（仪表盘、设置页、列表页等）reference/animation-patterns.md — 动画/过渡模式reference/icon-system.md — 图标使用规范设计稿写入项目根目录下 design/ 文件夹：
design/
[功能名]-v1.html
[功能名]-v2.html
...
陪伴型 AI 人设生成与优化流程。当用户想给 Hermes Agent（或任意 AI 陪伴角色）做一个"有感情、聊久不掉、像真人"的人设时使用。通过"定调子 → 名字 → 外形 → 性格 → 背景 → 关系 → 说话节奏 → 生成 SOUL.md → 迭代"的结构化对话，从一句模糊想法（如"我想要个JK女友""年上男友""高冷御姐"）产出可直接贴进 Hermes SOUL.md 的第一人称人设文本。支持女友/男友/各种气质的陪伴角色，并让用户选择"一句一句发"还是"整段说"的输出风格。当用户说"做个人设/捏个AI女友男友/给Hermes弄个角色/优化人设/换个人设"时触发。
PRD + 可执行测试用例双文档一体化协作。与用户共同写并迭代。理解需求后自主读代码再写；故事驱动 + 分阶段单点确认；每个 PRD 产出 PRD-MD 与 测试用例-MD（给 AI 的事实源）+ 两份套模板的 review HTML（给人查阅，与 MD 严格 1:1）。触发：梳理/撰写/完善 PRD、需求文档、用户故事、验收标准、测试用例、测试基准、测试方案。
系统化学习材料生成器。给一个新领域/技术/概念，AI 自主调研、搭体系、产出 HTML 学习材料（含骨架/案例/工程化/争议+盲区）。当用户说"我要学 X / 帮我系统拆解 X / 我想吃透 X 这个领域 / 给我整理 X 的全貌 / 深度调研 X 给我系统讲讲 / 把 X 搞透"时触发。不适用于"X 行不行/为什么 Y"（用 long-research）、"X 有哪些好玩案例"（用 case-radar 给散点）、"把这堆素材整理成 HTML"（用 readable-output 处理已有素材）、文章写作（用 writing-assistant）、设计稿（用 design-exploration）。
把当前对话的上下文 / 一堆历史内容 / 散落的信息**整理成可读性高的 HTML 总结**。强制 4 问挖掘（给谁看 / 读完拿什么 / 详略 / 风格）+ 6 阶段框架（定终点 → 抓核心点 → 选主结构 → 写 → 自检），让 AI "想清楚再输出"，避免散文式罗列。当用户说"做个复盘"、"汇总一下"、"总结这堆"、"整理成 HTML"、"把上下文整理一份"、"做个教程 / 学习指南 / 报告"、"把 X 讲清楚"等需要把上下文/历史输出成给人读的中长 HTML 时触发。
案例雷达。给一个新东西（新工具/新概念/新生态），扫一遍生态找好玩的真实案例，重点是抓"真物"（截图/源码/演示）而不是 GitHub 主页，输出可浏览的 HTML 案例集。当用户说"看看大家用 X 做了什么"、"扫一下 X 生态"、"市面上 X 有什么新玩法"、"给我看 X 的真物案例"、"/case-radar"时触发。不适合：① 已有明确目标的深度调研（用 long-research）② 写文章/出 PRD（用 writing-assistant / prd-doc-writer）③ 单纯求知不需要 HTML（直接问就好）。
复杂长程任务的自主执行流程。当用户有一个复杂或模糊的任务（"帮我搞清楚 X / 帮我评估 Y / 帮我把这堆东西整理出来 / 帮我对比 N 个方案 / 帮我跑一次调研"），希望 AI 自己拆解、自己执行、自己校验、只在关键时刻找用户的场景。通过"任务确认 → 任务队列 → 分批执行 → 周期校验队列 → 触发式汇报"实现 1-2 小时无人值守的自主执行。当用户说"帮我搞清楚 / 评估一下 / 整理一下 / 对比一下 / 跑一次调研 / 你自己跑别打扰我 / 长程任务 / 自主跑"时触发。**不适用于**：UI 设计（用 design-exploration）、待办优先级（用 priority-judge）、文章写作（用 writing-assistant）、需求池管理（用 backlog-manager）、终局发散（用 vision-exploration）、起名（用 product-naming）、有明确 spec 的实现编码任务（直接编码）。