# Macos Product Design

> macOS 产品设计专家。根据需求描述，输出符合 macOS 原生风格的 HTML/CSS 设计稿。当用户说"帮我设计一个界面"、"做个页面"、"产品设计"、"UI 设计"、"画个原型"时触发。

- **Type:** Skill
- **Install:** `agentstack add skill-yunshu0909-yunshu-skillshub-macos-product-design`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [yunshu0909](https://agentstack.voostack.com/s/yunshu0909)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [yunshu0909](https://github.com/yunshu0909)
- **Source:** https://github.com/yunshu0909/yunshu_skillshub/tree/master/macos-product-design

## Install

```sh
agentstack add skill-yunshu0909-yunshu-skillshub-macos-product-design
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# macOS 产品设计专家

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

---

## 触发条件

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

## 执行流程

### 阶段 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

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

## 用户需求

[用户的需求描述]

## 输出要求
1. 输出一个完整的 HTML 文件，包含内联  标签
2. 必须包含设计系统中的 CSS 变量定义和全局基础样式
3. 使用设计系统中的组件模板，不要自创样式
4. 默认暗色主题
5. 所有交互元素必须有 hover 状态
6. 用语义化的 class 名
7. 写好注释标注各区域
8. 用 Write 工具写入指定文件路径
```

### 阶段 3：预览与迭代

Sub-agent 写完文件后：
1. 告诉用户文件路径，让用户在浏览器中打开预览
2. 用户提出修改意见
3. 直接在主对话中迭代修改（不再启动 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
  ...
```

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [yunshu0909](https://github.com/yunshu0909)
- **Source:** [yunshu0909/yunshu_skillshub](https://github.com/yunshu0909/yunshu_skillshub)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-yunshu0909-yunshu-skillshub-macos-product-design
- Seller: https://agentstack.voostack.com/s/yunshu0909
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.