用途
Design Lab 是一个设计探索与方案对比技能，用于在真实项目上下文中快速产出多套 UI 方案并收集结构化反馈。它适用于需要为一个组件或完整页面做设计决策的场景，尤其是当需求尚不明确、需要先探索方向再落地实施时。整个流程为：访谈 → 生成变体 → 收集反馈 → 细化 → 预览 → 定稿。
主要能力
预检探测
在开始访谈前，自动检测：
- 包管理器：根据项目根目录的锁文件判断，pnpm-lock.yaml → pnpm，yarn.lock → yarn，package-lock.json → npm，bun.lockb → bun。
- 框架：根据配置文件判断，如 next.config.js / next.config.mjs / next.config.ts → Next.js（含 app/ 目录时识别为 App Router，含 pages/ 目录时识别为 Pages Router）、vite.config.js / vite.config.ts → Vite、remix.config.js → Remix、nuxt.config.js / nuxt.config.ts → Nuxt、astro.config.mjs → Astro。
- 样式系统：根据 package.json 依赖与配置文件判断，如 tailwind.config.js / tailwind.config.ts → Tailwind CSS、@mui/material → Material UI、@chakra-ui/react → Chakra UI、antd → Ant Design、styled-components → styled-components、@emotion/react → Emotion、.css 或 .module.css 文件 → CSS Modules。
- 设计记忆：查找 docs/design-memory.md、DESIGN_MEMORY.md、.claude-design/design-memory.md，若存在则读取并用于预填默认值、跳过冗余问题。
视觉风格推断
技能明确要求不使用通用或预定义样式，而是从项目中提取视觉语言：从 Tailwind 配置读取 theme.colors、theme.spacing、theme.borderRadius、theme.fontFamily、theme.boxShadow；从 globals.css、variables.css 或 :root 定义读取颜色、间距、字体、圆角等 CSS 变量；从 MUI 的 theme.ts 或 createTheme()、Chakra 的 theme/index.ts 或 extendTheme()、Ant 的 ConfigProvider theme 属性读取主题配置；并扫描现有组件（按钮、卡片、表单、排版）以理解既有模式。推断出的样式会存入 Design Brief，供所有变体一致使用。
访谈
使用 AskUserQuestion 工具进行，若有 Design Memory 会据此调整问题。访谈维度包括：范围与目标（组件还是页面、新建还是重设计、既有路径）、痛点与灵感（痛点、视觉参考如 Stripe/Linear/Notion/Apple、功能交互参考）、品牌与风格方向（品牌形容词、信息密度、暗色模式）、用户与任务（主要用户、使用场景、关键任务）、约束（必须保留的元素、技术约束）。
Design Brief
访谈后生成结构化 JSON 并保存到 .claude-design/design-brief.json，字段包括 scope、isRedesign、targetPath、targetName、painPoints、inspiration、brand、persona、constraints、framework、packageManager、stylingSystem，并在继续前向用户展示摘要。
生成设计实验室
在 .claude-design/ 下创建目录结构，包含 lab/page.tsx、lab/variants/（VariantA–VariantE）、lab/components/LabShell.tsx、lab/feedback/（types.ts、selector-utils.ts、format-utils.ts、FeedbackOverlay.tsx、index.ts）、lab/data/fixtures.ts、design-brief.json、run-log.md。
反馈系统是设计实验室的核心特性，不可跳过。为保证可靠性，FeedbackOverlay.tsx 需直接创建在路由目录中（如 app/design-lab/FeedbackOverlay.tsx），使用相对导入 ./FeedbackOverlay。路由集成方式因框架而异：Next.js App Router 创建 app/__design_lab/page.tsx，Pages Router 创建 pages/__design_lab.tsx，Vite React 若有 React Router 则添加 /__design_lab 路由，无路由器则基于 ?design_lab=true 查询参数条件渲染，其他框架创建适配的临时路由。
变体生成
每个变体必须探索不同的设计轴，而非细微差异：
- Variant A：信息层级——重构内容层级，应用格式塔邻近原则，每个视图一个主操作，使用既有排版层级。
- Variant B：布局模型——尝试卡片、列表、表格或分栏等不同布局，考虑各断点的响应式行为。
- Variant C：密度变化——若 brief 要求舒适则尝试紧凑版，若要求紧凑则尝试宽松版，展示数据量与可扫描性的权衡。
- Variant D：交互模型——模态、内联、面板或抽屉等不同交互模式，实现加载、错误、空、禁用等全部状态。
- Variant E：表现方向——推进访谈中描述的品牌方向，探索设计令牌的不同用法，在有意义处应用动效。
所有变体使用 data/fixtures.ts 中的同一份数据以保证公平比较。每个变体容器必须带有 data-variant="X" 属性，供反馈系统识别评论归属。
设计实验室页面要求
页面需包含：带有 Design Brief 摘要和审阅说明的头部；含清晰标签（A–E）、每个变体的简要理由、实际渲染的变体及关键差异说明的变体网格。桌面端采用并排网格（2–3 列），移动端采用横向滚动或标签页。
反馈系统
FeedbackOverlay 必须创建在 page.tsx 同一目录，以相对路径导入，并在页面末尾、所有变体之后渲染，传入 targetName 属性。缺少它用户将无法提供反馈。
代码质量
遵循项目既有代码约定（文件命名、导入方式），使用检测到的样式系统，适当复用现有组件。无障碍方面要求语义化 HTML、键盘可导航、可见的 :focus-visible 焦点状态、文本对比度 4.5:1、UI 元素对比度 3:1、触控目标最小 44x44px，仅在 HTML 语义不足时使用 ARIA。每个组件需具备默认、悬停、焦点、激活、禁用、加载、错误、空等状态。动效方面，微交互使用 150–200ms，过渡使用 200–300ms，进入用 ease-out，退出用 ease-in，并尊重 prefers-reduced-motion。
使用方式
该技能通过技能调用流程使用，执行时会依次进行预检探测、访谈、生成 Design Brief、生成设计实验室、向用户展示实验室，并收集反馈以细化方案，最终产出实施计划。
清理行为
所有临时文件必须在流程结束时删除：用户确认最终设计时，先清理再生成计划；用户中止或取消时，立即清理且不生成计划。绝不遗留 .claude-design/ 或 __design_lab 路由。若用户在任一环节表示 cancel、abort、stop 或 nevermind，需确认后删除所有临时产物。
限制
资料未提供该技能的具体安装步骤、收费信息、兼容的模型或平台细节、性能指标，以及支持语言的完整列表。部分实现细节（如 DESIGN_PRINCIPLES.md 的完整内容、templates/feedback/FeedbackOverlay.tsx 模板的具体代码）在资料中仅被引用而未完整列出。