古法编程

如何让 AI 生成具有“高级感”的 Google Stitch 设计系统

解决 AI 生成 UI 界面时常见的“廉价感”和“模板化”问题：通过构建一套严格的语义化设计指令集（DESIGN.md），强制 AI 遵循高级审美规范，输出非通用、具备设计感的界面。

为什么需要这个技能

在使用 Google Stitch 等 AI 屏幕生成工具时，默认输出往往带有强烈的“AI 痕迹”：例如泛滥的紫色/蓝色霓虹渐变、死板的三列等分卡片布局、毫无特色的 Inter 字体以及陈词滥调的文案（如 “Elevate your workflow”）。

本技能通过将经验丰富的前端审美规则转化为 Stitch 可理解的语义化描述，为 AI 设定一个“审美底线”。它不仅定义了要做什么，更通过详尽的 Anti-Patterns（反面模式） 告诉 AI 绝对不能做什么，从而确保生成的界面具备专业设计师的手笔。

适用场景

  • 需要为 AI 生成的页面定制一个具有品牌辨识度、非通用的设计系统时。
  • 厌倦了 AI 生成的“通用 Material Design”风格，追求更前卫、更精致的视觉效果。
  • 需要在 Google Stitch 中快速构建一套包含颜色角色、字体层级和动效意图的 DESIGN.md 配置文件。

核心工作流

  1. 定义视觉氛围：通过“密度（Density）”、“差异度（Variance）”和“动效（Motion）”三个维度量化氛围（例如：画廊般的空灵感 vs 驾驶舱般的密集感）。
  2. 校准色彩与字体：禁用纯黑（#000000）和霓虹色，强制使用具有现代感的字体族（如 Geist, Satoshi），并为每种颜色定义功能角色。
  3. 设定布局禁令：禁止对称的 Hero 区域，禁止三列等分卡片，强制使用非对称结构或 Zig-Zag 布局。
  4. 编码动效哲学：定义弹簧物理特性（Spring Physics）而非简单的线性过渡，并要求组件具备持续的微交互状态。
  5. 输出 DESIGN.md：将上述规则汇总为结构化的 Markdown 文件，作为 Stitch 生成页面的唯一真理来源。
# Design System: [项目名称]
## 1. Visual Theme & Atmosphere (视觉主题)
## 2. Color Palette & Roles (色彩面板与角色)
## 3. Typography Rules (字体规则)
## 4. Component Stylings (组件样式)
## 5. Layout Principles (布局原则)
## 6. Motion & Interaction (动效与交互)
## 7. Anti-Patterns (禁止项/AI 痕迹)

下载和安装

下载 stitch-design-taste 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐