macos-product-design

用途

macOS 产品设计专家技能，用于根据用户的需求描述，输出可直接在浏览器中预览的 HTML/CSS 设计稿，风格对齐 macOS 原生应用。

触发条件：用户说"帮我设计"、"做个界面"、"画个页面"、"产品设计"、"UI设计"等。

主要能力

根据需求描述生成符合 macOS 原生风格的 HTML/CSS 设计稿。
输出完整 HTML 文件（内联 CSS），可直接在浏览器中打开预览。
默认暗色主题，所有交互元素带 hover 状态。
使用设计系统中定义的 CSS 变量、组件模板，不自创样式。
支持预览后的迭代修改。

使用方式

阶段 1：理解需求

和用户确认：

设计什么页面/功能？（仪表盘、设置页、列表页、详情页……）
有哪些核心元素？（导航、表格、表单、卡片……）
有没有参考？（现有产品截图、竞品截图、文字描述）

阶段 2：Sub-agent 输出设计稿

启动 sub-agent，读取设计系统 reference 文件，输出完整的 HTML 文件。

Sub-agent prompt 模板：

你是一个 macOS 产品设计专家。请根据用户需求，输出一个完整的 HTML 文件（内联 CSS），可直接在浏览器中打开预览。

第一步：读取设计系统（必须执行）

用 Read 工具读取以下文件，这是你的设计系统规范： [绝对路径]/.claude/skills/macos-product-design/reference/macos-design-system.md

严格按照该文件中的设计变量、组件模板、做与不做来输出代码。不可使用文件中未定义的颜色、字号、间距值。

用户需求

[用户的需求描述]

输出要求

输出一个完整的 HTML 文件，包含内联 <style> 标签

必须包含设计系统中的 CSS 变量定义和全局基础样式

使用设计系统中的组件模板，不要自创样式

默认暗色主题

所有交互元素必须有 hover 状态

用语义化的 class 名

写好注释标注各区域

用 Write 工具写入指定文件路径

阶段 3：预览与迭代

Sub-agent 写完文件后：

告诉用户文件路径，让用户在浏览器中打开预览
用户提出修改意见
直接在主对话中迭代修改（不再启动 sub-agent）

设计系统 Reference

文件	内容
reference/macos-design-system.md	macOS 设计变量 + 组件代码模板 + 做与不做

后续可扩展：

reference/page-patterns.md — 常见页面布局模式（仪表盘、设置页、列表页等）
reference/animation-patterns.md — 动画/过渡模式
reference/icon-system.md — 图标使用规范

输出文件规则

设计稿写入项目根目录下 design/ 文件夹：

design/
  [功能名]-v1.html
  [功能名]-v2.html
  ...

适用场景

需要快速产出 macOS 原生风格界面设计稿的产品设计任务。
仪表盘、设置页、列表页、详情页等页面原型设计。
需要浏览器直接预览、便于迭代的 UI 设计工作。

限制

依赖 reference/macos-design-system.md 设计系统文件，需按其中定义的变量与组件输出，不可使用未定义的颜色、字号、间距值。
关于收费、价格、平台支持范围等信息，资料暂未提供。

技能介绍

用途