用途:Design Lab 实现完整的设计探索流程——访谈、生成方案、收集反馈、细化、预览、定稿。适用于需要为组件或页面探索多种 UI 方向的场景。
主要能力:
- 预检:自动检测包管理器(pnpm/yarn/npm/bun)、框架(Next.js、Vite、Remix、Nuxt、Astro)、样式系统(Tailwind、MUI、Chakra、Ant Design、styled-components、Emotion、CSS Modules)以及已有设计记忆文件。
- 视觉风格推断:从项目现有配置和组件中提取颜色、间距、圆角、字体、阴影,不使用通用预设风格。
- 访谈:通过 AskUserQuestion 收集范围、新设计或改版、痛点、视觉与交互灵感、品牌调性、密度、暗色模式、用户画像、使用场景、关键任务与约束。
- 生成设计简报:保存为 .claude-design/design-brief.json。
- 生成设计实验室:在 .claude-design/ 下创建五个方案(A 信息层级、B 布局模型、C 密度变化、D 交互模型、E 表现力方向),并集成 FeedbackOverlay 反馈组件。
- 反馈与定稿:用户确认后清理临时文件并生成实施计划;用户取消则立即清理,不生成计划。
使用方式:作为技能调用后按阶段执行。关键要求包括:FeedbackOverlay 必须与 page.tsx 同目录并用相对路径导入;每个方案容器需带 data-variant 属性;所有方案共用同一份 fixture 数据。
限制:资料未提供具体安装命令、收费方式、支持平台或效果数据。临时文件必须删除,不得遗留 .claude-design/ 或 __design_lab 路由。