Back to Details

design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design

设计

Manage your app's design system through 
instructions/design-system.md
- the single source of truth for all UX/UI work.
通过
instructions/design-system.md
管理你的应用设计系统——这是所有UX/UI工作的唯一可信来源。

Choose Your Mode

选择你的模式

CREATE → No design system yet, or extracting from existing code MODIFY → Have a design system, need to update it WORK WITHIN → Have a design system, building features that follow it
CREATE → 尚无设计系统，或从现有代码中提取设计模式 MODIFY → 已有设计系统，需要对其进行更新 WORK WITHIN → 已有设计系统，开发遵循该系统的功能

CREATE Mode

CREATE模式

Generate a new 
instructions/design-system.md
from one of these entry points:
从以下任一入口生成新的
instructions/design-system.md
：

From URL (Reference App)

从URL（参考应用）

Analyze a live app and extract its design patterns.
Tell AI:
Analyze the design system at [URL].
Identify: colors, typography, spacing, component patterns.
Match to recognized framework (shadcn, Material UI, Radix, etc.).
Generate instructions/design-system.md based on this analysis.
Good reference apps:
  • linear.app (minimal, fast, keyboard-focused)
  • stripe.com/dashboard (data-heavy, clear hierarchy)
  • notion.so (flexible, calm)
  • vercel.com (modern, technical)
分析在线应用并提取其设计模式。
告知AI：
Analyze the design system at [URL].
Identify: colors, typography, spacing, component patterns.
Match to recognized framework (shadcn, Material UI, Radix, etc.).
Generate instructions/design-system.md based on this analysis.
优质参考应用：
  • linear.app（极简风格、响应快速、聚焦键盘操作）
  • stripe.com/dashboard（数据密集型、层级清晰）
  • notion.so（灵活、风格沉稳）
  • vercel.com（现代、技术向）

From Code (Extract & Audit)

从代码（提取与审计）

Paste existing source code to extract and document current patterns.
Tell AI:
Analyze this code and extract the design system:
[paste relevant components, styles, or config files]

Document: colors, typography, spacing, component specs.
Identify inconsistencies (e.g., multiple button heights, conflicting colors).
Generate instructions/design-system.md with recommendations to standardize.
What to paste:
  • Tailwind config or CSS variables
  • Button/Input/Card components
  • Theme or design token files
  • 2-3 representative page components
粘贴现有源代码以提取并记录当前设计模式。
告知AI：
Analyze this code and extract the design system:
[paste relevant components, styles, or config files]

Document: colors, typography, spacing, component specs.
Identify inconsistencies (e.g., multiple button heights, conflicting colors).
Generate instructions/design-system.md with recommendations to standardize.
建议粘贴的内容：
  • Tailwind配置文件或CSS变量
  • Button/Input/Card组件代码
  • 主题或设计令牌文件
  • 2-3个具有代表性的页面组件

From Screenshot

从截图

Upload an image as a visual reference.
Tell AI:
Analyze this screenshot and extract the design system.
Identify: colors, typography, spacing, component patterns.
Match to closest recognized framework.
Generate instructions/design-system.md based on this analysis.
What to screenshot:
  • Dashboard or main app view
  • A form or data entry screen
  • Navigation (sidebar or topnav)
上传图片作为视觉参考。
告知AI：
Analyze this screenshot and extract the design system.
Identify: colors, typography, spacing, component patterns.
Match to closest recognized framework.
Generate instructions/design-system.md based on this analysis.
建议截图的内容：
  • 仪表盘或应用主视图
  • 表单或数据录入界面
  • 导航栏（侧边栏或顶部导航）

From Scratch

从零开始

Start fresh with guided decisions.
Tell AI:
Help me create a design system for [app type].
I want it to feel like [reference: minimal/playful/professional/technical].
Primary brand color: [color or "help me choose"].
Generate instructions/design-system.md with sensible defaults.
See LAWSOFUX.md for why certain patterns work better.
通过引导式决策从头创建设计系统。
告知AI：
Help me create a design system for [app type].
I want it to feel like [reference: minimal/playful/professional/technical].
Primary brand color: [color or "help me choose"].
Generate instructions/design-system.md with sensible defaults.
可参考LAWSOFUX.md了解各类设计模式更适用的原因。

MODIFY Mode

MODIFY模式

Update an existing 
instructions/design-system.md
:
更新现有的
instructions/design-system.md
：

Update Values

更新参数值

Change colors, fonts, or spacing.
Tell AI:
Update instructions/design-system.md:
- Change primary color from [old] to [new]
- Update font from [old] to [new]
Ensure all related values are updated (hover states, etc.).
修改颜色、字体或间距。
告知AI：
Update instructions/design-system.md:
- Change primary color from [old] to [new]
- Update font from [old] to [new]
Ensure all related values are updated (hover states, etc.).

Add Patterns

添加模式

Add new component types not yet documented.
Tell AI:
Add a [pricing table / data table / modal] pattern to instructions/design-system.md.
Follow existing design system values (colors, spacing, typography).
Reference: [URL or description of what you want]
See COMPONENTS.md for common SaaS component patterns.
添加尚未记录的新组件类型。
告知AI：
Add a [pricing table / data table / modal] pattern to instructions/design-system.md.
Follow existing design system values (colors, spacing, typography).
Reference: [URL or description of what you want]
可参考COMPONENTS.md获取常见SaaS组件模式。

Audit & Reconcile

审计与协调

Compare current code to design system, resolve drift.
Tell AI:
Audit this code against instructions/design-system.md:
[paste code]

Option A: List deviations so I can fix the code
Option B: Update design-system.md to reflect what code actually does
Always identifies:
  • Inconsistent values (3 different grays, 2 button heights)
  • Undocumented patterns (components not in design system)
  • Unused specs (documented but not implemented)
对比当前代码与设计系统，解决偏差问题。
告知AI：
Audit this code against instructions/design-system.md:
[paste code]

Option A: List deviations so I can fix the code
Option B: Update design-system.md to reflect what code actually does
系统将自动识别：
  • 不一致的参数值（如3种不同的灰色、2种按钮高度）
  • 未记录的模式（设计系统中未提及的组件）
  • 未使用的规范（已记录但未实现的内容）

Migrate Framework

迁移框架

Transition from one component library to another.
Tell AI:
Migrate instructions/design-system.md from [Material UI] to [shadcn].
Keep existing colors, typography, and spacing.
Update component specs to match new framework patterns.
从一个组件库迁移至另一个。
告知AI：
Migrate instructions/design-system.md from [Material UI] to [shadcn].
Keep existing colors, typography, and spacing.
Update component specs to match new framework patterns.

WORK WITHIN Mode

WORK WITHIN模式

Reference existing 
instructions/design-system.md
when building:
开发时参考现有的
instructions/design-system.md
：

Build Feature

开发功能

Follow the system when implementing new UI.
Tell AI:
Build [feature description].
Follow instructions/design-system.md for all design decisions.
Use the documented colors, typography, spacing, and component patterns.
实现新UI时遵循设计系统规范。
告知AI：
Build [feature description].
Follow instructions/design-system.md for all design decisions.
Use the documented colors, typography, spacing, and component patterns.

Review Compliance

合规性审查

Check AI-built code against the system.
Tell AI:
Review this code for design system compliance:
[paste code]

Check against instructions/design-system.md.
Flag any deviations from documented patterns.
检查AI生成的代码是否符合设计系统规范。
告知AI：
Review this code for design system compliance:
[paste code]

Check against instructions/design-system.md.
Flag any deviations from documented patterns.

Answer Questions

解答疑问

Quick design decisions.
Tell AI:
Based on instructions/design-system.md:
- What color should [element] be?
- What spacing between [A] and [B]?
- Which button variant for [action]?
快速做出设计决策。
告知AI：
Based on instructions/design-system.md:
- What color should [element] be?
- What spacing between [A] and [B]?
- Which button variant for [action]?

Design-System.md Structure

Design-System.md文件结构

When CREATE mode generates the file, it follows this structure:
markdown
undefined
当使用CREATE模式生成文件时，将遵循以下结构：
markdown
undefined

Design System

Design System

Reference

Reference

  • Primary reference: [app name/URL]
  • Component library: [shadcn/Material UI/Radix/custom]
  • Design philosophy: [minimal/playful/professional/technical]
  • Primary reference: [app name/URL]
  • Component library: [shadcn/Material UI/Radix/custom]
  • Design philosophy: [minimal/playful/professional/technical]

Colors

Colors

Brand

Brand

  • Primary: #XXXXXX
  • Primary hover: #XXXXXX
  • Primary: #XXXXXX
  • Primary hover: #XXXXXX

Gray Scale

Gray Scale

  • 50: #XXXXXX (backgrounds)
  • 100-400: [values]
  • 500: #XXXXXX (borders, secondary text)
  • 600-800: [values]
  • 900: #XXXXXX (primary text)
  • 50: #XXXXXX (backgrounds)
  • 100-400: [values]
  • 500: #XXXXXX (borders, secondary text)
  • 600-800: [values]
  • 900: #XXXXXX (primary text)

Semantic

Semantic

  • Success: #XXXXXX
  • Error: #XXXXXX
  • Warning: #XXXXXX
  • Success: #XXXXXX
  • Error: #XXXXXX
  • Warning: #XXXXXX

Typography

Typography

Font

Font

  • Family: [Inter/SF Pro/etc.]
  • Fallback: system-ui, sans-serif
  • Family: [Inter/SF Pro/etc.]
  • Fallback: system-ui, sans-serif

Scale

Scale

  • H1: 32px / 1.2 line-height / semibold
  • H2: 24px / 1.25 / semibold
  • H3: 20px / 1.3 / medium
  • Body: 16px / 1.5 / regular
  • Small: 14px / 1.5 / regular
  • Tiny: 12px / 1.4 / regular
  • H1: 32px / 1.2 line-height / semibold
  • H2: 24px / 1.25 / semibold
  • H3: 20px / 1.3 / medium
  • Body: 16px / 1.5 / regular
  • Small: 14px / 1.5 / regular
  • Tiny: 12px / 1.4 / regular

Spacing

Spacing

  • Base unit: 4px
  • Scale: 4, 8, 12, 16, 24, 32, 48, 64
  • Component padding: 16px
  • Section spacing: 32px
  • Card gap: 16px
  • Base unit: 4px
  • Scale: 4, 8, 12, 16, 24, 32, 48, 64
  • Component padding: 16px
  • Section spacing: 32px
  • Card gap: 16px

Components

Components

Buttons

Buttons

VariantBackgroundTextHeightPaddingBorder Radius
Primaryprimarywhite40px16px 24px6px
Secondarygray-100gray-90040px16px 24px6px
Ghosttransparentgray-60040px16px 24px6px
Destructiveerrorwhite40px16px 24px6px
States: hover (darken 10%), active (darken 15%), disabled (opacity 50%)
VariantBackgroundTextHeightPaddingBorder Radius
Primaryprimarywhite40px16px 24px6px
Secondarygray-100gray-90040px16px 24px6px
Ghosttransparentgray-60040px16px 24px6px
Destructiveerrorwhite40px16px 24px6px
States: hover (darken 10%), active (darken 15%), disabled (opacity 50%)

Inputs

Inputs

  • Height: 40px
  • Border: 1px gray-300
  • Border radius: 6px
  • Padding: 12px
  • Focus: primary border + ring
  • Error: error border
  • Disabled: gray-100 background
  • Height: 40px
  • Border: 1px gray-300
  • Border radius: 6px
  • Padding: 12px
  • Focus: primary border + ring
  • Error: error border
  • Disabled: gray-100 background

Cards

Cards

  • Background: white
  • Border: 1px gray-200 OR shadow-sm
  • Border radius: 8px
  • Padding: 16px or 24px
  • Background: white
  • Border: 1px gray-200 OR shadow-sm
  • Border radius: 8px
  • Padding: 16px or 24px

Patterns

Patterns

Navigation

Navigation

  • Style: [sidebar/topnav/both]
  • Width: [if sidebar, e.g., 240px]
  • Behavior: [collapsible/fixed/responsive]
  • Style: [sidebar/topnav/both]
  • Width: [if sidebar, e.g., 240px]
  • Behavior: [collapsible/fixed/responsive]

Forms

Forms

  • Layout: single column, labels above
  • Field spacing: 16px
  • Button placement: right-aligned
  • Validation: inline, on blur
  • Layout: single column, labels above
  • Field spacing: 16px
  • Button placement: right-aligned
  • Validation: inline, on blur

Tables

Tables

  • Row height: 48px
  • Actions: right side
  • Hover: gray-50 background
  • Pagination: bottom
  • Row height: 48px
  • Actions: right side
  • Hover: gray-50 background
  • Pagination: bottom

Inconsistencies Found

Inconsistencies Found

[If extracted from existing code, list what was found and standardized]
  • Example: Found 3 button heights (36px, 40px, 44px) → standardized to 40px

---
[If extracted from existing code, list what was found and standardized]
  • Example: Found 3 button heights (36px, 40px, 44px) → standardized to 40px

---

User Override

用户覆盖规则

If you already have a 
instructions/design-system.md
file, it takes precedence over any generated recommendations. The skill will work within your documented system.
如果你已经拥有
instructions/design-system.md
文件，该文件的优先级将高于所有生成的建议。本工具将遵循你已记录的设计系统开展工作。

Common Mistakes

常见错误

MistakeFix
Building UI without design systemCREATE mode first, then build
Inconsistent componentsUse MODIFY → Audit & Reconcile
"It looks off but I can't say why"Check compliance against design-system.md
Reinventing patternsReference COMPONENTS.md for proven SaaS patterns
Ignoring UX principlesReference LAWSOFUX.md for why patterns work
错误修复方案
未使用设计系统就开发UI先使用CREATE模式创建设计系统，再进行开发
组件不一致使用MODIFY模式→审计与协调功能
“看起来不对劲但说不出原因”对照design-system.md检查合规性
重复设计模式参考COMPONENTS.md获取经过验证的SaaS模式
忽略UX原则参考LAWSOFUX.md了解设计模式的适用逻辑

Success Looks Like

成功的标志

✅ Every project has 
instructions/design-system.md
✅ AI builds consistent UI without repeated instructions ✅ Design decisions are documented, not guessed ✅ Code audits catch drift before it compounds ✅ New team members/contractors have clear reference
✅ 每个项目都拥有
instructions/design-system.md
✅ AI无需重复指令即可生成一致的UI ✅ 设计决策均已文档化，无需主观猜测 ✅ 代码审计可在偏差扩大前发现问题 ✅ 新团队成员/承包商拥有清晰的参考标准