SuperAPI AI 工具集

design-intelligence

设计与创作

查看项目

更新于 10-15 17:31

技能介绍

用途:从零搭建设计系统。向该技能提供项目背景(做什么、给谁用、行业、风格个性),它会生成完整设计令牌,并输出三种格式:令牌参考文档、Tailwind 配置片段、CSS 变量文件,还会按项目类型生成组件清单。

主要能力:生成配色方案(区分深色/浅色主题,按风格个性选择主色与强调色);生成字体搭配与字号阶梯(基准 16px,含 h1 至 caption 的字号、字重、行高);生成间距(8px 基准)与圆角、阴影规范;按项目类型(仪表盘/SaaS、电商、移动应用、落地页)列出所需组件。

使用方式:先收集上下文,包括构建什么、用户是谁、风格个性(选 2-3 个)、明暗主题、已有品牌色、参考应用;随后依次生成配色、字体、间距圆角、三种格式输出与组件清单。令牌文档保存至 .planning/design/system/tokens.md,组件清单保存至 .planning/design/system/components.md。生成 UI 代码前应先读取令牌文件,代码必须使用这些令牌,不得使用 Tailwind 默认值或随意间距。

适用场景:新项目设计系统初始化、按行业/品牌选配色、生成字体阶梯与间距系统、引导组件清单。

限制:资料未提供安装命令、收费与平台信息;具体令牌值需依据项目上下文生成,示例中的色值、字体与尺寸仅为参考,实际以生成结果为准。