SuperAPI AI 工具集

stitch-design-taste

设计与创作

查看项目

更新于 10-24 17:22

技能介绍

Stitch Design Taste 是一个面向 Google Stitch 的语义化设计系统技能。它的核心产物是一份 DESIGN.md 文件,作为提示 Stitch 生成新界面时的唯一事实来源。Stitch 通过“视觉描述”配合具体色值、字体规格和组件行为来理解设计,因此该文件把反模板化的前端工程规范转译成 Stitch 能解读的描述性自然语言与精确数值。

主要能力:

  1. 定义视觉氛围,包括密度、变异度和动效强度三个维度,默认基线为变异度 8、动效 6、密度 4,可依据用户描述的调性动态调整。
  2. 校准色彩体系,每个颜色需给出描述性名称、十六进制色值和功能角色;最多一个强调色、饱和度低于 80%,禁用“AI 紫蓝霓虹”风格,以 Zinc/Slate 等中性色为基底,禁止纯黑 #000000。
  3. 建立排版架构,包含展示字体、正文字体和等宽字体的选型与层级;禁用 Inter 及 Times New Roman、Georgia 等通用衬线字体,推荐 Geist、Outfit、Cabinet Grotesk、Satoshi 等,仪表盘场景仅用无衬线字体搭配。
  4. 描述组件样式与交互,包括按钮的触感按压反馈、卡片的圆角与阴影、输入框的标签与错误提示位置、与布局尺寸匹配的骨架屏加载态、空状态和错误状态。
  5. 明确布局原则,要求元素各有独立空间、禁止重叠,高变异度项目禁用居中 Hero,禁用“三张等宽卡片”功能行,使用 CSS Grid 与 max-width 容器约束。
  6. 定义响应式规则:768px 以下多列布局一律折叠为单列,不允许横向滚动,标题用 clamp() 缩放,触控目标不小于 44px,移动端内联排版图片下移。
  7. 编码动效哲学:默认弹簧物理参数 stiffness 100、damping 20,列表级联错峰显现,仅对 transform 与 opacity 做动画。
  8. 列出反模式清单,如禁止表情符号、霓虹外发光、过饱和强调色、自定义鼠标指针、通用占位名、假整数、AI 套话文案、滚动提示文字和失效的图片链接。

使用方式:需要能访问 labs.google/stitch;也可选配 Stitch MCP Server,与 Cursor、Antigravity 或 Gemini CLI 集成。先理解目标项目基调,再依次编写氛围、色彩、排版、组件、布局、动效与反模式各章节,输出结构化的 DESIGN.md。

适用场景:需要让 Stitch 批量生成风格统一、避免模板化观感的 UI 界面,或希望把一套高要求的前端美学规范固化为可复用提示文档的团队。

限制:该技能输出的是设计规范文档而非可执行代码;其中的字体、色值与参数属于风格约束,实际效果取决于 Stitch 的解读与生成能力;文档未提供收费、价格等信息,暂未提供。