design-foundation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Design Foundation

设计系统基础

Overview

概述

A design foundation is the bedrock upon which all great products are built. It's not just a collection of colors and fonts—it's a system of decisions that enables your team to build consistently, quickly, and with intention.

This skill helps you create or formalize your design foundation, whether you're starting from scratch or documenting what already exists. It covers design tokens, component structure, design principles documentation, and the governance model for your system.

设计系统基础是所有优秀产品构建的基石。它不只是颜色和字体的集合——而是一套决策体系，能让你的团队一致、快速且有目的性地进行产品构建。

本技能可帮助你创建或规范化设计系统基础，无论你是从零开始，还是对已有的系统进行文档化。它涵盖设计令牌、组件结构、设计原则文档化，以及系统的治理模型。

Core Methodology: Token-Based Design Systems

核心方法论：基于令牌的设计系统

Modern design systems are built on the concept of design tokens—named entities that store design decisions. Rather than hardcoding colors or spacing values throughout your codebase, tokens centralize these decisions, making them easy to maintain, theme, and scale.

现代设计系统基于设计令牌的概念构建——设计令牌是存储设计决策的命名实体。无需在整个代码库中硬编码颜色或间距值，令牌可集中管理这些决策，使其易于维护、主题定制和扩展。

The Token Hierarchy

令牌层级

Design tokens are organized in layers, from most abstract to most concrete:

Layer 1: Global Tokens (The Foundation) These are your base design decisions—the raw materials of your system.

Global Tokens:
├── Colors
│   ├── Primary: #3B82F6
│   ├── Secondary: #8B5CF6
│   ├── Success: #10B981
│   ├── Warning: #F59E0B
│   ├── Error: #EF4444
│   ├── Neutral-50: #F9FAFB
│   ├── Neutral-100: #F3F4F6
│   └── ... (up to Neutral-950)
├── Typography
│   ├── Font-Family-Base: Inter, system-ui, sans-serif
│   ├── Font-Size-Base: 16px
│   ├── Line-Height-Base: 1.5
│   └── Font-Weight: (300, 400, 500, 600, 700, 800)
├── Spacing
│   ├── Space-0: 0
│   ├── Space-1: 0.25rem (4px)
│   ├── Space-2: 0.5rem (8px)
│   ├── Space-3: 0.75rem (12px)
│   └── ... (up to Space-12+)
├── Shadows
│   ├── Shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
│   ├── Shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1)
│   └── ...
└── Border Radius
    ├── Radius-sm: 0.25rem (4px)
    ├── Radius-md: 0.375rem (6px)
    ├── Radius-lg: 0.5rem (8px)
    └── ...

Layer 2: Semantic Tokens (The Meaning) These tokens assign meaning to global tokens based on context and usage.

Semantic Tokens:
├── Colors
│   ├── Background-Primary: {Global.Neutral-50}
│   ├── Background-Secondary: {Global.Neutral-100}
│   ├── Text-Primary: {Global.Neutral-950}
│   ├── Text-Secondary: {Global.Neutral-600}
│   ├── Border-Primary: {Global.Neutral-200}
│   ├── Interactive-Primary: {Global.Primary}
│   ├── Interactive-Hover: {Global.Primary-600}
│   ├── Interactive-Active: {Global.Primary-700}
│   ├── State-Success: {Global.Success}
│   ├── State-Warning: {Global.Warning}
│   └── State-Error: {Global.Error}
├── Typography
│   ├── Heading-1: (Font-Size: 32px, Line-Height: 1.2, Font-Weight: 700)
│   ├── Heading-2: (Font-Size: 24px, Line-Height: 1.3, Font-Weight: 600)
│   ├── Body-Large: (Font-Size: 18px, Line-Height: 1.5, Font-Weight: 400)
│   ├── Body-Regular: (Font-Size: 16px, Line-Height: 1.5, Font-Weight: 400)
│   ├── Body-Small: (Font-Size: 14px, Line-Height: 1.5, Font-Weight: 400)
│   └── Caption: (Font-Size: 12px, Line-Height: 1.4, Font-Weight: 500)
├── Spacing
│   ├── Padding-Component: {Global.Space-4}
│   ├── Padding-Section: {Global.Space-8}
│   ├── Margin-Component: {Global.Space-3}
│   └── Gap-Component: {Global.Space-4}
└── Shadows
    ├── Elevation-1: {Global.Shadow-sm}
    ├── Elevation-2: {Global.Shadow-md}
    └── Elevation-3: {Global.Shadow-lg}

Layer 3: Component Tokens (The Application) These tokens are specific to individual components and use semantic tokens as their values.

Component Tokens:
├── Button
│   ├── Button-Primary-Background: {Semantic.Interactive-Primary}
│   ├── Button-Primary-Background-Hover: {Semantic.Interactive-Hover}
│   ├── Button-Primary-Text: {Semantic.Text-Inverse}
│   ├── Button-Padding: {Semantic.Padding-Component}
│   └── Button-Border-Radius: {Global.Radius-md}
├── Card
│   ├── Card-Background: {Semantic.Background-Primary}
│   ├── Card-Border: {Semantic.Border-Primary}
│   ├── Card-Padding: {Semantic.Padding-Component}
│   ├── Card-Border-Radius: {Global.Radius-lg}
│   └── Card-Shadow: {Semantic.Elevation-1}
└── Input
    ├── Input-Background: {Semantic.Background-Primary}
    ├── Input-Border: {Semantic.Border-Primary}
    ├── Input-Border-Hover: {Semantic.Border-Secondary}
    ├── Input-Text: {Semantic.Text-Primary}
    ├── Input-Padding: {Semantic.Padding-Component}
    └── Input-Border-Radius: {Global.Radius-md}

设计令牌按层级组织，从最抽象到最具体：

第一层：全局令牌（基础层） 这些是你的基础设计决策——系统的原始素材。

Global Tokens:
├── Colors
│   ├── Primary: #3B82F6
│   ├── Secondary: #8B5CF6
│   ├── Success: #10B981
│   ├── Warning: #F59E0B
│   ├── Error: #EF4444
│   ├── Neutral-50: #F9FAFB
│   ├── Neutral-100: #F3F4F6
│   └── ... (up to Neutral-950)
├── Typography
│   ├── Font-Family-Base: Inter, system-ui, sans-serif
│   ├── Font-Size-Base: 16px
│   ├── Line-Height-Base: 1.5
│   └── Font-Weight: (300, 400, 500, 600, 700, 800)
├── Spacing
│   ├── Space-0: 0
│   ├── Space-1: 0.25rem (4px)
│   ├── Space-2: 0.5rem (8px)
│   ├── Space-3: 0.75rem (12px)
│   └── ... (up to Space-12+)
├── Shadows
│   ├── Shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
│   ├── Shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1)
│   └── ...
└── Border Radius
    ├── Radius-sm: 0.25rem (4px)
    ├── Radius-md: 0.375rem (6px)
    ├── Radius-lg: 0.5rem (8px)
    └── ...

第二层：语义令牌（意义层） 这些令牌根据上下文和使用场景为全局令牌赋予意义。

Semantic Tokens:
├── Colors
│   ├── Background-Primary: {Global.Neutral-50}
│   ├── Background-Secondary: {Global.Neutral-100}
│   ├── Text-Primary: {Global.Neutral-950}
│   ├── Text-Secondary: {Global.Neutral-600}
│   ├── Border-Primary: {Global.Neutral-200}
│   ├── Interactive-Primary: {Global.Primary}
│   ├── Interactive-Hover: {Global.Primary-600}
│   ├── Interactive-Active: {Global.Primary-700}
│   ├── State-Success: {Global.Success}
│   ├── State-Warning: {Global.Warning}
│   └── State-Error: {Global.Error}
├── Typography
│   ├── Heading-1: (Font-Size: 32px, Line-Height: 1.2, Font-Weight: 700)
│   ├── Heading-2: (Font-Size: 24px, Line-Height: 1.3, Font-Weight: 600)
│   ├── Body-Large: (Font-Size: 18px, Line-Height: 1.5, Font-Weight: 400)
│   ├── Body-Regular: (Font-Size: 16px, Line-Height: 1.5, Font-Weight: 400)
│   ├── Body-Small: (Font-Size: 14px, Line-Height: 1.5, Font-Weight: 400)
│   └── Caption: (Font-Size: 12px, Line-Height: 1.4, Font-Weight: 500)
├── Spacing
│   ├── Padding-Component: {Global.Space-4}
│   ├── Padding-Section: {Global.Space-8}
│   ├── Margin-Component: {Global.Space-3}
│   └── Gap-Component: {Global.Space-4}
└── Shadows
    ├── Elevation-1: {Global.Shadow-sm}
    ├── Elevation-2: {Global.Shadow-md}
    └── Elevation-3: {Global.Shadow-lg}

第三层：组件令牌（应用层） 这些令牌针对单个组件，以语义令牌作为取值。

Component Tokens:
├── Button
│   ├── Button-Primary-Background: {Semantic.Interactive-Primary}
│   ├── Button-Primary-Background-Hover: {Semantic.Interactive-Hover}
│   ├── Button-Primary-Text: {Semantic.Text-Inverse}
│   ├── Button-Padding: {Semantic.Padding-Component}
│   └── Button-Border-Radius: {Global.Radius-md}
├── Card
│   ├── Card-Background: {Semantic.Background-Primary}
│   ├── Card-Border: {Semantic.Border-Primary}
│   ├── Card-Padding: {Semantic.Padding-Component}
│   ├── Card-Border-Radius: {Global.Radius-lg}
│   └── Card-Shadow: {Semantic.Elevation-1}
└── Input
    ├── Input-Background: {Semantic.Background-Primary}
    ├── Input-Border: {Semantic.Border-Primary}
    ├── Input-Border-Hover: {Semantic.Border-Secondary}
    ├── Input-Text: {Semantic.Text-Primary}
    ├── Input-Padding: {Semantic.Padding-Component}
    └── Input-Border-Radius: {Global.Radius-md}

Implementing Tokens with Tailwind CSS

结合Tailwind CSS实现令牌系统

Tailwind CSS is designed around the concept of tokens. Your

tailwind.config.js

file is essentially your token system:

javascript

module.exports = {
  theme: {
    // Global Tokens
    colors: {
      primary: {
        50: '#EFF6FF',
        100: '#DBEAFE',
        500: '#3B82F6',
        600: '#2563EB',
        700: '#1D4ED8',
        950: '#0C2340',
      },
      secondary: {
        50: '#F3E8FF',
        500: '#8B5CF6',
        600: '#7C3AED',
        950: '#2E1065',
      },
      success: '#10B981',
      warning: '#F59E0B',
      error: '#EF4444',
      neutral: {
        50: '#F9FAFB',
        100: '#F3F4F6',
        600: '#4B5563',
        950: '#030712',
      },
    },
    // Semantic Tokens (via CSS variables or custom utilities)
    extend: {
      backgroundColor: {
        'bg-primary': 'var(--color-bg-primary)',
        'bg-secondary': 'var(--color-bg-secondary)',
      },
      textColor: {
        'text-primary': 'var(--color-text-primary)',
        'text-secondary': 'var(--color-text-secondary)',
      },
      spacing: {
        'component': 'var(--space-component)',
        'section': 'var(--space-section)',
      },
    },
  },
};

Tailwind CSS正是围绕令牌概念设计的。你的

tailwind.config.js

文件本质上就是你的令牌系统：

javascript

module.exports = {
  theme: {
    // Global Tokens
    colors: {
      primary: {
        50: '#EFF6FF',
        100: '#DBEAFE',
        500: '#3B82F6',
        600: '#2563EB',
        700: '#1D4ED8',
        950: '#0C2340',
      },
      secondary: {
        50: '#F3E8FF',
        500: '#8B5CF6',
        600: '#7C3AED',
        950: '#2E1065',
      },
      success: '#10B981',
      warning: '#F59E0B',
      error: '#EF4444',
      neutral: {
        50: '#F9FAFB',
        100: '#F3F4F6',
        600: '#4B5563',
        950: '#030712',
      },
    },
    // Semantic Tokens (via CSS variables or custom utilities)
    extend: {
      backgroundColor: {
        'bg-primary': 'var(--color-bg-primary)',
        'bg-secondary': 'var(--color-bg-secondary)',
      },
      textColor: {
        'text-primary': 'var(--color-text-primary)',
        'text-secondary': 'var(--color-text-secondary)',
      },
      spacing: {
        'component': 'var(--space-component)',
        'section': 'var(--space-section)',
      },
    },
  },
};

Design System Audit: What to Document

设计系统审计：需要文档化的内容

When formalizing your design foundation, audit and document these elements:

在规范化设计系统基础时，需审计并记录以下元素：

1. Design Principles

1. 设计原则

These are the "why" behind your design decisions. They guide all future work.

Example Design Principles:

Clarity First — Every element should communicate its purpose clearly. Remove ambiguity.
Consistency Builds Trust — Patterns should be predictable. Users should recognize patterns across the product.
Accessibility is Foundational — Design for all users, including those with disabilities. Accessibility is not a feature; it's a requirement.
Simplicity Through Reduction — Remove everything that doesn't serve the user's goal. Simplicity is the result of careful reduction.
Intentionality Matters — Every decision should have a reason. Avoid arbitrary choices.
Performance is Part of Design — A beautiful interface that's slow is not good design. Speed matters.

这些是你设计决策背后的“原因”，将指导所有后续工作。

设计原则示例：

清晰优先 — 每个元素都应清晰传达其用途，消除歧义。
一致性建立信任 — 模式应具有可预测性，用户应能在整个产品中识别出相同模式。
无障碍是基础 — 为所有用户设计，包括残障用户。无障碍不是功能，而是必备要求。
通过简化实现简洁 — 移除所有对用户目标无帮助的内容，简洁是精心简化的结果。
目的性至关重要 — 每个决策都应有理由，避免随意选择。
性能是设计的一部分 — 美观但缓慢的界面不是好设计，速度至关重要。

2. Color System

2. 颜色系统

Document your color palette, including:

Primary, secondary, and accent colors
Neutral/grayscale colors (for text, backgrounds, borders)
Semantic colors (success, warning, error, info)
Color usage guidelines (when to use which color)
Contrast ratios for accessibility (WCAG AA or AAA)
Dark mode variants (if applicable)

Audit Questions:

How many colors are actually used in your product?
Are colors used consistently?
Do all color combinations meet WCAG AA contrast requirements?
Do you have a dark mode? If so, are tokens defined for it?

记录你的调色板，包括：

主色、辅助色和强调色
中性/灰度颜色（用于文本、背景、边框）
语义颜色（成功、警告、错误、信息）
颜色使用指南（何时使用何种颜色）
无障碍对比度（WCAG AA或AAA标准）
深色模式变体（如有）

审计问题：

你的产品实际使用了多少种颜色？
颜色使用是否一致？
所有颜色组合是否符合WCAG AA对比度要求？
你是否支持深色模式？如果是，是否为其定义了令牌？

3. Typography System

3. 排版系统

Document your typography, including:

Font families (primary, secondary, monospace)
Font sizes (and the logic behind them—e.g., modular scale)
Font weights and their usage
Line heights and letter spacing
Type scales for different contexts (headings, body, captions)

Audit Questions:

How many different font sizes are used?
Is there a logical progression (e.g., 12px, 14px, 16px, 18px, 20px, 24px, 32px)?
Are font weights used consistently?
Is line height appropriate for readability?

记录你的排版规范，包括：

字体族（主字体、辅助字体等宽字体）
字体大小（及其背后的逻辑，如模块化比例）
字重及其使用场景
行高和字间距
不同场景下的排版层级（标题、正文、说明文字）

审计问题：

使用了多少种不同的字体大小？
是否有合理的递进关系（如12px、14px、16px、18px、20px、24px、32px）？
字重使用是否一致？
行高是否适合阅读？

4. Spacing System

4. 间距系统

Document your spacing, including:

Base unit (e.g., 4px, 8px)
Spacing scale (e.g., 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px)
Padding conventions (inside components)
Margin conventions (between components)
Gap conventions (between grid items, flex items)

Audit Questions:

How many different spacing values are used?
Is there a consistent scale?
Are padding, margin, and gap used consistently?

记录你的间距规范，包括：

基础单位（如4px、8px）
间距层级（如4px、8px、12px、16px、24px、32px、48px、64px）
内边距约定（组件内部）
外边距约定（组件之间）
间隙约定（网格项、弹性项之间）

审计问题：

使用了多少种不同的间距值？
是否有一致的层级？
内边距、外边距和间隙的使用是否一致？

5. Component Library

5. 组件库

Document your components, including:

Component name and purpose
Component variants (primary, secondary, small, large, etc.)
Component states (default, hover, active, disabled, loading, error)
Component props and their defaults
Accessibility considerations
Usage examples

Audit Questions:

What components exist in your product?
Are they documented?
Are they reusable or one-off?
Are they accessible?

记录你的组件，包括：

组件名称和用途
组件变体（主样式、次样式、小尺寸、大尺寸等）
组件状态（默认、悬停、激活、禁用、加载、错误）
组件属性及其默认值
无障碍考虑因素
使用示例

审计问题：

你的产品中有哪些组件？
它们是否已文档化？
它们是可复用的还是一次性的？
它们是否符合无障碍要求？

6. Responsive Breakpoints

6. 响应式断点

Document your responsive design strategy:

Breakpoints (mobile, tablet, desktop, wide)
How components behave at each breakpoint
Mobile-first vs. desktop-first approach
Responsive typography strategy

记录你的响应式设计策略：

断点（移动端、平板端、桌面端、宽屏）
组件在每个断点下的表现
移动端优先还是桌面端优先的实现方式
响应式排版策略

7. Shadows, Borders, and Other Details

7. 阴影、边框及其他细节

Document:

Shadow system (elevation levels)
Border radius scale
Border styles and widths
Transition and animation durations
Z-index scale

记录：

阴影系统（层级）
圆角半径层级
边框样式和宽度
过渡和动画时长
Z-index层级

How to Use This Skill with Claude Code

如何结合Claude Code使用本技能

Audit Your Current Design

审计现有设计

"I'm using the design-foundation skill. Can you audit my current design system?
- Analyze my Tailwind config
- Identify inconsistencies in colors, spacing, typography
- Suggest improvements
- Create a design token system based on what I have"

Claude Code will:

Analyze your current design
Identify inconsistencies and opportunities
Create a comprehensive design token system
Suggest a migration path if you're formalizing an existing design

"我正在使用design-foundation技能。能否帮我审计当前的设计系统？
- 分析我的Tailwind配置
- 识别颜色、间距、排版中的不一致性
- 提出改进建议
- 基于现有内容创建设计令牌系统"

Claude Code将：

分析你的当前设计
识别不一致性和改进机会
创建全面的设计令牌系统
如果你正在规范化现有设计，提供迁移路径建议

Create a Design System from Scratch

从零开始创建设计系统

"I'm starting from scratch. Can you help me create a design foundation?
- Define design principles for my product
- Create a color system (I want a modern, professional look)
- Create a typography system
- Create a spacing system
- Create a component library structure"

Claude Code will:

Create design principles tailored to your product
Generate a complete color system with accessibility considerations
Define typography scales and usage
Create spacing systems
Scaffold a component library structure

"我从零开始。能否帮我创建设计系统基础？
- 为我的产品定义设计原则
- 创建颜色系统（我想要现代、专业的风格）
- 创建排版系统
- 创建间距系统
- 创建组件库结构"

Claude Code将：

为你的产品定制设计原则
生成考虑无障碍要求的完整颜色系统
定义排版层级和使用规范
创建间距系统
搭建组件库结构

Formalize Existing Design

规范化现有设计

"We have a design system that's not well-documented. Can you:
- Extract design tokens from our current Tailwind config
- Document our component library
- Create design principles based on our current design
- Suggest improvements and inconsistencies"

Claude Code will:

Extract and organize your existing tokens
Document your components
Create design principles that reflect your current design
Identify and suggest fixes for inconsistencies

"我们有一个文档不完善的设计系统。能否：
- 从当前Tailwind配置中提取设计令牌
- 记录我们的组件库
- 基于现有设计创建设计原则
- 提出改进建议并指出不一致性"

Claude Code将：

提取并整理你现有的令牌
记录你的组件
创建反映当前设计的设计原则
识别不一致性并提出修复建议

Generate Design System Documentation

生成设计系统文档

"Can you create comprehensive documentation for our design system?
- Design principles
- Color system with usage guidelines
- Typography system with examples
- Spacing system with examples
- Component library with all variants and states
- Accessibility guidelines
- Responsive design guidelines"

Claude Code will generate:

Markdown documentation for your design system
Code examples for each section
Visual examples (if using Claude's image generation)
Accessibility guidelines integrated throughout

"能否为我们的设计系统创建全面的文档？
- 设计原则
- 含使用指南的颜色系统
- 含示例的排版系统
- 含示例的间距系统
- 含所有变体和状态的组件库
- 无障碍指南
- 响应式设计指南"

Claude Code将生成：

设计系统的Markdown文档
每个部分的代码示例
可视化示例（如果使用Claude的图像生成功能）
贯穿全文的无障碍指南

Design Critique: Evaluating Your Foundation

设计评审：评估你的设计系统基础

Claude Code can critique your design foundation:

"Can you evaluate my design foundation?
- Is my color system coherent?
- Are my typography scales appropriate?
- Is my spacing system logical?
- Are there inconsistencies I'm missing?
- What's one thing I could improve immediately?"

Claude Code可以评审你的设计系统基础：

"能否评估我的设计系统基础？
- 我的颜色系统是否连贯？
- 我的排版层级是否合适？
- 我的间距系统是否合理？
- 是否有我忽略的不一致性？
- 我可以立即改进的一件事是什么？"

Integration with Other Skills

与其他技能的集成

The design-foundation skill is foundational to all other skills:

layout-system — Uses tokens for spacing and responsive behavior
typography-system — Refines and extends the typography foundation
color-system — Refines and extends the color foundation
component-architecture — Uses tokens for component styling
accessibility-excellence — Ensures tokens support accessibility
interaction-design — Uses tokens for transitions and animations

设计系统基础技能是所有其他技能的基础：

layout-system — 使用令牌实现间距和响应式行为
typography-system — 细化和扩展排版基础
color-system — 细化和扩展颜色基础
component-architecture — 使用令牌进行组件样式设计
accessibility-excellence — 确保令牌支持无障碍要求
interaction-design — 使用令牌实现过渡和动画

Key Principles

核心原则

1. Tokens Enable Consistency When design decisions are centralized in tokens, consistency becomes automatic.

2. Semantic Tokens Enable Flexibility By separating global tokens from semantic tokens, you can support dark mode, theming, and accessibility features without duplicating code.

3. Documentation Enables Adoption A design system that's not documented won't be used. Invest in clear, comprehensive documentation.

4. Governance Enables Scale As your team grows, clear guidelines for adding new tokens and components prevent chaos.

5. Accessibility is Foundational Design tokens should encode accessibility from the start (e.g., color contrast ratios, readable font sizes).

1. 令牌实现一致性 当设计决策集中在令牌中时，一致性将自动实现。

2. 语义令牌实现灵活性 通过将全局令牌与语义令牌分离，你无需重复代码即可支持深色模式、主题定制和无障碍功能。

3. 文档化促进采用 未文档化的设计系统不会被使用，需投入精力创建清晰、全面的文档。

4. 治理实现可扩展性 随着团队规模扩大，添加新令牌和组件的清晰指南可避免混乱。

5. 无障碍是基础 设计令牌应从一开始就融入无障碍要求（如颜色对比度、易读的字体大小）。

Common Patterns

常见模式

Pattern 1: Light and Dark Mode

模式1：亮色与深色模式

Define tokens for both light and dark modes:

javascript

// Global tokens (same for both modes)
colors: {
  primary: '#3B82F6',
  neutral: { 50: '#F9FAFB', 950: '#030712' },
}

// Semantic tokens (mode-specific)
// Light mode
backgroundColor: { 'bg-primary': '{neutral.50}' }
textColor: { 'text-primary': '{neutral.950}' }

// Dark mode
@media (prefers-color-scheme: dark) {
  backgroundColor: { 'bg-primary': '{neutral.950}' }
  textColor: { 'text-primary': '{neutral.50}' }
}

为亮色和深色模式定义令牌：

javascript

// Global tokens (same for both modes)
colors: {
  primary: '#3B82F6',
  neutral: { 50: '#F9FAFB', 950: '#030712' },
}

// Semantic tokens (mode-specific)
// Light mode
backgroundColor: { 'bg-primary': '{neutral.50}' }
textColor: { 'text-primary': '{neutral.950}' }

// Dark mode
@media (prefers-color-scheme: dark) {
  backgroundColor: { 'bg-primary': '{neutral.950}' }
  textColor: { 'text-primary': '{neutral.50}' }
}

Pattern 2: Component Variants

模式2：组件变体

Define tokens for component variants:

javascript

// Button variants
button: {
  primary: {
    background: '{interactive.primary}',
    text: '{text.inverse}',
  },
  secondary: {
    background: '{background.secondary}',
    text: '{text.primary}',
  },
  ghost: {
    background: 'transparent',
    text: '{interactive.primary}',
  },
}

为组件变体定义令牌：

javascript

// Button variants
button: {
  primary: {
    background: '{interactive.primary}',
    text: '{text.inverse}',
  },
  secondary: {
    background: '{background.secondary}',
    text: '{text.primary}',
  },
  ghost: {
    background: 'transparent',
    text: '{interactive.primary}',
  },
}

Pattern 3: Responsive Tokens

模式3：响应式令牌

Define tokens that change at different breakpoints:

javascript

// Typography that scales with viewport
fontSize: {
  'heading-1': ['32px', { lineHeight: '1.2' }], // desktop
  '@sm': { fontSize: '24px' }, // tablet
  '@xs': { fontSize: '20px' }, // mobile
}

定义在不同断点下变化的令牌：

javascript

// Typography that scales with viewport
fontSize: {
  'heading-1': ['32px', { lineHeight: '1.2' }], // desktop
  '@sm': { fontSize: '24px' }, // tablet
  '@xs': { fontSize: '20px' }, // mobile
}

design-foundation

Original

Translation

Design Foundation

设计系统基础

Overview

概述

Core Methodology: Token-Based Design Systems

核心方法论：基于令牌的设计系统

The Token Hierarchy

令牌层级

Implementing Tokens with Tailwind CSS

结合Tailwind CSS实现令牌系统

Design System Audit: What to Document

设计系统审计：需要文档化的内容

1. Design Principles

1. 设计原则

2. Color System

2. 颜色系统

3. Typography System

3. 排版系统

4. Spacing System

4. 间距系统

5. Component Library

5. 组件库

6. Responsive Breakpoints

6. 响应式断点

7. Shadows, Borders, and Other Details

7. 阴影、边框及其他细节

How to Use This Skill with Claude Code

如何结合Claude Code使用本技能

Audit Your Current Design

审计现有设计

Create a Design System from Scratch

从零开始创建设计系统

Formalize Existing Design

规范化现有设计

Generate Design System Documentation

生成设计系统文档

Design Critique: Evaluating Your Foundation

设计评审：评估你的设计系统基础

Integration with Other Skills

与其他技能的集成

Key Principles

核心原则

Common Patterns

常见模式

Pattern 1: Light and Dark Mode

模式1：亮色与深色模式

Pattern 2: Component Variants

模式2：组件变体

Pattern 3: Responsive Tokens

模式3：响应式令牌

Checklist: Is Your Design Foundation Ready?

检查清单：你的设计系统基础是否就绪？