Back to Details

design-context

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design Context Skill

设计上下文Skill

Ensures wireframes and UI decisions leverage existing patterns from the design system, Storybook, and codebase.
确保线框图和UI决策能够利用设计系统、Storybook和代码库中的现有模式。

When to Use

使用时机

  • Before presenting wireframes (Ask mode DIVERGE)
  • Before implementing UI changes (Agent mode)
  • At every DIVERGE Loop to stay grounded in existing patterns
  • 在展示线框图之前（询问模式DIVERGE）
  • 在实施UI变更之前（Agent模式）
  • 在每个DIVERGE循环中使用，以贴合现有模式

Instructions

操作步骤

Phase 1: Design System Check

阶段1：设计系统检查

Read the design system documentation:
Read /docs/design-system/components.md
Read /docs/design-system/spacing.md
Read /docs/design-system/colors.md (if color decisions needed)
Read /docs/design-system/interactions.md (if interaction patterns needed)
Note applicable:
  • Design tokens (
    h-13
    , 
    px-4
    , 
    gap-3
    )
  • Component patterns (Button variants, DataTable, Dialog)
  • Spacing conventions (p-4 for cards, gap-6 for sections)
阅读设计系统文档：
Read /docs/design-system/components.md
Read /docs/design-system/spacing.md
Read /docs/design-system/colors.md (if color decisions needed)
Read /docs/design-system/interactions.md (if interaction patterns needed)
需要注意的内容：
  • 设计令牌（
    h-13
    , 
    px-4
    , 
    gap-3
    ）
  • 组件模式（Button变体、DataTable、Dialog）
  • 间距规范（卡片使用p-4，区块使用gap-6）

Phase 2: Storybook Patterns

阶段2：Storybook模式

Find existing component stories:
Glob **/*.stories.tsx
Identify:
  • Components matching current wireframe needs
  • Existing variants and props
  • Documented states (loading, error, empty)
Key story locations:
  • /src/stories/
    - General component stories
  • /features/*/components/*.stories.tsx
    - Feature-specific stories
查找现有组件故事：
Glob **/*.stories.tsx
识别以下内容：
  • 符合当前线框图需求的组件
  • 现有变体和属性
  • 已记录的状态（加载中、错误、空状态）
关键故事文件位置：
  • /src/stories/
    - 通用组件故事
  • /features/*/components/*.stories.tsx
    - 特定功能的组件故事

Phase 3: Codebase Search

阶段3：代码库搜索

Search for similar UI patterns:
SemanticSearch "How is [pattern] implemented in the codebase?"
Look for:
  • Similar features already built
  • Reusable hooks and utilities
  • Existing layout patterns
搜索相似的UI模式：
SemanticSearch "How is [pattern] implemented in the codebase?"
查找内容：
  • 已构建的相似功能
  • 可复用的hooks和工具
  • 现有布局模式

Phase 4: Library Documentation (Context7 MCP)

阶段4：库文档（Context7 MCP）

Query library docs for unfamiliar patterns:
1. resolve-library-id with libraryName (e.g., "radix-ui")
2. query-docs with libraryId and specific question
Common libraries:
  • /radix-ui/primitives
    - Dialog, Dropdown, Select patterns
  • /tanstack/query
    - Data fetching patterns
  • /tanstack/table
    - Table patterns
针对不熟悉的模式查询库文档：
1. resolve-library-id with libraryName (e.g., "radix-ui")
2. query-docs with libraryId and specific question
常用库：
  • /radix-ui/primitives
    - Dialog、Dropdown、Select模式
  • /tanstack/query
    - 数据获取模式
  • /tanstack/table
    - 表格模式

Output Format

输出格式

After running this skill, output:
markdown
undefined
运行此Skill后，输出以下内容：
markdown
undefined

Design Context

Design Context

SourceRelevant Patterns
Design System[tokens, components]
Storybook[stories that apply]
Codebase[existing implementations]
Libraries[patterns from docs]
SourceRelevant Patterns
Design System[tokens, components]
Storybook[stories that apply]
Codebase[existing implementations]
Libraries[patterns from docs]

Applicable Components

Applicable Components

  • [Component]: [How it applies to current wireframe]
  • [Component]: [How it applies to current wireframe]

Design Tokens to Use

Design Tokens to Use

  • Spacing: [tokens]
  • Colors: [tokens]
  • Typography: [tokens]
undefined
  • Spacing: [tokens]
  • Colors: [tokens]
  • Typography: [tokens]
undefined

Invocation

调用方式

Invoke manually with "use design-context skill" or follow Ask mode DIVERGE loop which references this skill's phases.
手动调用时使用指令“use design-context skill”，或者遵循引用了此Skill阶段的询问模式DIVERGE循环。

Related Skills

相关技能

  • problem-framing
    - Run before design-context
  • competitor-scan
    - Compare with external patterns
  • problem-framing
    - 在design-context之前运行
  • competitor-scan
    - 与外部模式进行对比