Based on the user's requirements description, output HTML/CSS design mockups that can be previewed directly in the browser, with a style aligned with native macOS apps.
Trigger conditions
The user says "help me design," "make an interface," "draw a page," "product design," "UI design," etc.
Execution flow
Phase 1: Understand the requirements
Confirm with the user:
- What page/function is being designed? (dashboard, settings page, list page, detail page...)
- What core elements are there? (navigation, table, form, card...)
- Are there any references? (screenshots of existing products, competitor screenshots, text descriptions)
Phase 2: Sub-agent outputs the design mockup
Launch the sub-agent, read the design system reference file, and output the complete HTML file.
Sub-agent prompt template:
你是一个 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 工具写入指定文件路径
Phase 3: Preview and iterate
After the sub-agent finishes writing the file:
- Tell the user the file path so they can open it in the browser for preview
- The user provides modification feedback
- Iterate and modify directly in the main conversation (do not launch the sub-agent again)
Design system Reference
| File | Content |
|---|---|
reference/macos-design-system.md |
macOS design variables + component code templates + do's and don'ts |
Later extensible:
reference/page-patterns.md— common page layout patterns (dashboard, settings page, list page, etc.)reference/animation-patterns.md— animation/transition patternsreference/icon-system.md— icon usage guidelines
Output file rules
Write the design mockup to the project root directory under the design/ folder:
design/
[功能名]-v1.html
[功能名]-v2.html
...