macos-product-design

Original：🇨🇳 Chinese

Translated

macOS Product Design Expert. Generate HTML/CSS design drafts that match the native macOS style based on requirement descriptions. Triggered when users say "Help me design an interface", "Create a page", "Product design", "UI design", "Draw a prototype".

19installs

Sourceyunshu0909/yunshu_skillshub

Added on2026-08-18

NPX Install

npx skill4agent add yunshu0909/yunshu_skillshub macos-product-design

SKILL.md Content (Chinese)

View Translation Comparison →

macOS Product Design Expert

Generate HTML/CSS design drafts that can be directly previewed in browsers, aligned with the style of native macOS applications based on users' requirement descriptions.

Trigger Conditions

Triggered when users say "Help me design", "Create an interface", "Draw a page", "Product design", "UI design", etc.

Execution Process

Phase 1: Understand Requirements

Confirm with users:

What page/function to design? (Dashboard, settings page, list page, detail page……)
What core elements are there? (Navigation, tables, forms, cards……)
Are there any references? (Screenshots of existing products, competitor screenshots, text descriptions)

Phase 2: Sub-agent Outputs Design Draft

Launch the sub-agent, read the design system reference files, and output a complete HTML file.

Sub-agent prompt template:

You are a macOS Product Design Expert. Please generate a complete HTML file (with inline CSS) based on user requirements, which can be directly opened and previewed in a browser.

## Step 1: Read Design System (Mandatory)

Use the Read tool to read the following file, which is your design system specification:
[Absolute Path]/.claude/skills/macos-product-design/reference/macos-design-system.md

Strictly follow the design variables, component templates, and do's and don'ts in this file when outputting code. Do not use colors, font sizes, or spacing values not defined in the file.

## User Requirements

[User's requirement description]

## Output Requirements
1. Output a complete HTML file with inline <style> tags
2. Must include CSS variable definitions and global base styles from the design system
3. Use component templates from the design system; do not create custom styles
4. Default to dark theme
5. All interactive elements must have hover states
6. Use semantic class names
7. Add comments to mark each area
8. Use the Write tool to save to the specified file path

Phase 3: Preview and Iteration

After the sub-agent finishes writing the file:

Inform the user of the file path and ask them to open it in a browser for preview
User provides modification suggestions
Iterate and modify directly in the main conversation (no need to 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

Future expansions:

```
reference/page-patterns.md
```
— Common page layout patterns (dashboard, settings page, list page, etc.)
```
reference/animation-patterns.md
```
— Animation/transition patterns
```
reference/icon-system.md
```
— Icon usage specifications

Output File Rules

Design drafts are saved in the

design/

folder under the project root directory:

design/
  [function-name]-v1.html
  [function-name]-v2.html
  ...