メニュー
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コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
带用户精读一篇文章/文档并真正学透（不是出摘要）。五步：抽干货 → 切讲次 → 每讲跑「学-考-讲」循环 → 对号入座 → 实操+测验+讲错题+蒸馏。每讲产出 HTML 课件 + 笔记落盘；讲完必考一次，用户复述后必须挑不精确处拧紧；抽象概念上可交互演示（能点能跑）；全程用用户自己的业务场景当案例；学完出多题型自动判分测验卷，最后把收获蒸馏回用户的工具。核心触发条件是用户要的是"学会"而不是"要一份结果"，例如"我们一起学这篇文章/这个链接"、"带我学"、"精读"、"我想学会 X"、"这篇我看不懂你给我讲讲"。有具体材料（链接、本地文件、PDF，或用户自己的 skill/文档/代码）时直接开跑；只有学习意图而没材料时仍走本 skill，但开工第一件事是和用户一起把材料定下来，禁止凭记忆开讲。不适用于：只要一份总结/摘要/教程长文，用户读完就完、不需要答题（用 readable-output）、只是搜集资料做调研（使用可用的网页/平台取材工具）、帮我写 PRD/测试用例（用 prd-test-writer）、以及用户其实是想让你直接把活干了（那就直接做）。
让 Codex 与 Claude Code 通过本机 CLI 组成“主执行者 + 独立审查者”的对称协作闭环。用于用户要求两个模型一起完成、交叉校核、独立审查、修到 ACK，或任务涉及产品需求收敛、复杂方案、跨模块开发、迁移、安全、重要重构和高质量交付时；无论从 Codex 还是 Claude Code 启动，都由当前模型主持，并完整调用另一方完成需求挑战、方案门禁、实现冷审和最终验收。
界面设计探索（开发范式 v1 · 仅限有 UI 的模块）。触发前两个硬条件必须同时成立：①这个东西有用户能看见的界面 ②界面尚不存在。通过"需求收敛 → 技术调研 → ASCII 批量出 5-8 个方案 → HTML 设计稿 → 全状态覆盖 → 需求总结"，产出 3 个交付文件：需求总结.md + {模块}-设计稿.html + {模块}-全状态设计参考.html，作为 PRD 阶段的输入。不适用于：无界面的流程/架构/数据结构/接口/方案设计——"设计"二字不等于本 skill（用 issue-pool 讨论拆解）、界面已经在代码里跑着要改样式（用 ui-design）、照着现成设计图或截图复刻（用 design-replica）、写 PRD 时给单个故事配线框图（用 prd-test-writer，它自带 ASCII 线框能力）、还没决定要不要做的模糊想法（先用 issue-pool 入池）、纯发散不收敛的终局愿景（用 vision-exploration）。
SOC 職業分類に基づく
SKILL.md を表示中
| 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
...