SuperAPI AI 工具集

design-brief

设计与创作

查看项目

更新于 10-15 23:43

技能介绍

用途:通过结构化对话生成设计简报,帮助在动手开发前明确方向。可跳过不必要的步骤。

主要能力:先让用户描述要构建的内容、目标用户与约束;再扫描代码库现状,包括 CSS 变量/令牌、Tailwind 配置、UI 框架主题(Material UI、Chakra、shadcn)、组件目录、Storybook、设计令牌文件、package.json 中的 UI 依赖、字体加载与现有页面/布局。若已有组件,简报应扩展而非替换。随后围绕设计树逐项访谈,覆盖用户与 JTBD、成功标准、情感基调、参考与反参考、硬约束(设备、无障碍、性能预算、品牌规范)、内容与占位符等,并为每个问题给出推荐答案。

使用方式:示例提示如“Write a brief for the onboarding flow”“Brief this: a dashboard that shows project health metrics”。完成后按模板写入 .design/<feature-slug>/DESIGN_BRIEF.md,slug 为小写连字符短名(如 onboarding-flow、settings-page)。该子目录结构避免不同功能互相覆盖,后续技能(information-architecture、design-tokens、brief-to-tasks、design-review)读写同一子文件夹。

简报模板包含:Problem、Solution、Experience Principles(最多三条)、Aesthetic Direction(哲学、基调、参考点、反参考)、Existing Patterns(排版、颜色、间距、组件)、Component Inventory 表格(Exists/Modify/New)、Key Interactions、Responsive Behavior、Accessibility Requirements、Out of Scope。

适用场景:规划新页面或流程前定义方向,如 onboarding、settings、营销落地页、仪表盘。

限制:资料未提供具体安装命令、收费方式、平台支持或效果保证;需在具备代码库的项目环境中使用。