菜单
macOS 产品设计专家。根据需求描述，输出符合 macOS 原生风格的 HTML/CSS 设计稿。当用户说"帮我设计一个界面"、"做个页面"、"产品设计"、"UI 设计"、"画个原型"时触发。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/yunshu0909/yunshu_skillshub --skill macos-product-design命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| 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
...