用途:通过结构化对话生成设计简报,帮助在动手构建前明确方向。可跳过不必要的步骤。
主要能力:先让用户描述要构建的内容、目标用户与已有约束;再探索现有代码库,扫描 CSS 变量/令牌(tokens.css、variables.css、theme.css、:root 自定义属性)、Tailwind 配置(tailwind.config.js/ts 的 theme.extend)、UI 框架主题(Material UI createTheme、Chakra extendTheme、shadcn globals.css 与 components.json)、组件目录(components/、ui/、shared/)、Storybook(.storybook/ 或 .stories.)、设计令牌文件(Style Dictionary、Figma 导出)、package.json 中的 UI 依赖(tailwindcss、@mui/material、@chakra-ui/react、@radix-ui、lucide-react、framer-motion 等)、字体加载(Google Fonts、@font-face、CSS/配置中的字体导入)以及现有页面/布局。若已有组件,则视为起点词汇,简报应扩展而非替换。随后围绕设计各分支持续访谈,覆盖主要用户及其 JTBD、成功标准、情感基调、参考与反参考、硬约束(设备、无障碍、性能预算、品牌规范)、内容与占位内容,并为每个问题给出推荐答案。
使用方式:示例提示包括“Write a brief for the onboarding flow”“I need to plan a settings page before I start building”“Help me define the direction for a marketing landing page”“Brief this: a dashboard that shows project health metrics”。完成后按模板写入 .design/<feature-slug>/DESIGN_BRIEF.md,slug 为小写连字符短名(如 onboarding-flow、settings-page、project-dashboard),避免不同功能互相覆盖;后续 information-architecture、design-tokens、brief-to-tasks、design-review 等技能读写同一子文件夹。模板含问题、解决方案、体验原则(最多三条)、美学方向、现有模式、组件清单、关键交互、响应式行为、无障碍要求与范围外内容。
限制:资料未提供收费、价格、平台支持或效果保证等信息。