mit einem Klick
macos-product-design
// macOS 产品设计专家。根据需求描述,输出符合 macOS 原生风格的 HTML/CSS 设计稿。当用户说"帮我设计一个界面"、"做个页面"、"产品设计"、"UI 设计"、"画个原型"时触发。
// macOS 产品设计专家。根据需求描述,输出符合 macOS 原生风格的 HTML/CSS 设计稿。当用户说"帮我设计一个界面"、"做个页面"、"产品设计"、"UI 设计"、"画个原型"时触发。
陪伴型 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 的实现编码任务(直接编码)。
| 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
...