Design Context 技能用于确保线框图和 UI 决策能够复用设计系统、Storybook 和代码库中已有的模式。
使用时机
在展示线框图之前（Ask 模式 DIVERGE）；在实现 UI 变更之前（Agent 模式）；在每一轮 DIVERGE 循环中，以保持与现有模式一致。
指令
阶段 1：设计系统检查
读取设计系统文档：
- 读取 /docs/design-system/components.md
- 读取 /docs/design-system/spacing.md
- 读取 /docs/design-system/colors.md（如果需要颜色决策）
- 读取 /docs/design-system/interactions.md（如果需要交互模式）
记录适用的内容：
- 设计令牌（例如 h-13、px-4、gap-3）
- 组件模式（例如 Button 变体、DataTable、Dialog）
- 间距约定（例如卡片使用 p-4、区块使用 gap-6）
阶段 2：Storybook 模式
查找现有的组件故事：
- Glob **/*.stories.tsx
识别：
- 与当前线框图需求匹配的组件
- 现有的变体和 props
- 有文档说明的状态（加载、错误、空状态）
关键故事位置：
- /src/stories/ - 通用组件故事
- /features//components/.stories.tsx - 功能专属故事
阶段 3：代码库搜索
搜索相似的 UI 模式：
- SemanticSearch “How is [pattern] implemented in the codebase?”
查找：
- 已经构建的相似功能
- 可复用的 hooks 和工具
- 现有的布局模式
阶段 4：库文档（Context7 MCP）
针对不熟悉的模式查询库文档：
- 使用 libraryName（例如 “radix-ui”）调用 resolve-library-id
- 使用 libraryId 和具体问题调用 query-docs
常见库：
- /radix-ui/primitives - Dialog、Dropdown、Select 模式
- /tanstack/query - 数据获取模式
- /tanstack/table - 表格模式
输出格式
运行此技能后，输出：
Design Context
| 来源 | 相关模式 |
|---|---|
| Design System | [令牌、组件] |
| Storybook | [适用的故事] |
| Codebase | [现有实现] |
| Libraries | [来自文档的模式] |
适用组件
- [组件]：[如何应用于当前线框图]
应使用的设计令牌
- 间距：[令牌]
- 颜色：[令牌]
- 字体排版：[令牌]
调用方式
手动调用，输入 “use design-context skill”，或跟随 Ask 模式 DIVERGE 循环，该循环会引用此技能的各个阶段。
相关技能
problem-framing - 在 design-context 之前运行
competitor-scan - 与外部模式进行比较