StyleSeed设计规则引擎：让AI代理告别千篇一律的UI

背景

随着 AI 编程助手（如 Claude Code、Codex、Cursor）和“vibe coding”方式的流行，开发者可以快速生成 UI 界面，但这些界面往往带有明显的“AI 生成感”——默认的靛蓝色、模板化布局、彩虹列表、缺乏设计判断力。为了解决这个问题，StyleSeed 应运而生：它不是一个简单的调色板或组件库，而是一套设计判断引擎，通过规则和评分机制强制 AI 输出专业、连贯、有品牌感的界面。

核心内容

StyleSeed 的核心是一组设计规则（74 条视觉规则、48 个组件、一个命名运动系统）和 19 个代理技能，它们被封装为纯 Markdown 文件（CLAUDE.md、AGENTS.md、DESIGN-LANGUAGE.md 等），并可通过 npx skills add bitjaru/styleseed 安装到 Claude Code、Codex、Cursor、Gemini CLI 等工具中。安装后，AI 代理会遵循一套“设计判断”流程，而非仅仅依赖设计数据。

工作流程

1. 规划阶段：AI 代理会与用户确认关键颜色、字体、运动风格，并将其写入 STYLESEED.md 文件，锁定设计决策，防止后续漂移。
2. 构建阶段：代理按照规则构建 UI，在展示给用户之前，自动运行质量门控（Quality Gate）评分，要求分数≥80/100，否则自动修复问题。
3. 质量门控：评分会检查常见 AI 生成问题，如使用了两个强调色、正常行被着色、缺少空状态等。修复后再次评分，直到达标。
4. 技能命令：通过 /ss-score（Claude Code）或 $ss-score（Codex）运行评分，/ss-build 或 $ss-build 强制执行完整循环。

设计规则示例

StyleSeed 将资深设计师的直觉写成了显式规则，例如：

• 精炼的黑色是 #2A2A2A，不是 #000——使用 5 级灰度梯度，从不纯黑。
• 整个应用只有一个强调色，其他全部灰度——单强调色法则；第二个色相是最快的“未设计”信号。
• 数字与单位比例为 2:1——48px 数值搭配 24px 单位，等大尺寸会抹平信息层级。
• 嵌套半径法则：内层半径 = 外层半径 - 内边距（padding），使卡片和内部按钮角度一致。
• 阴影使用低透明度（≤8%），单一方向光源，而非单个硬阴影。
• 表格数字用于任何更新数值——避免值变化时宽度抖动。
• 状态颜色仅表示严重程度——正常行是灰色，颜色标记异常，而非彩虹列表。
• 禁用 emoji 图标，禁用 Lucide 图标加浅色芯片——这两者是 AI 图标的两大典型特征。
• 8px 空间网格；组间距＞组内间距——通过邻近性表达结构。
• 光学对齐而非像素对齐——微调箭头、播放图标；按大写高度居中文字。
• 桌面端正文≥16px，每屏只有一个焦点——紧凑的移动端比例和全均匀网格都会显得“机器制造”。
• 一种半径个性、一种图标集、一种阴影语言——一致性法则（§C0），是修复“AI 生成感”的第一条。
• 运动按表面层级划分——仪表盘保持平静，落地页可使用电影级（滚动关联揭示、3D 英雄区、动画渐变——类似 Stripe/Linear 的玩法），但禁止滚动劫持。

安装与使用

最快方式：将一段提示词粘贴到 Claude Code、Codex、Cursor 或任何 AI 代理中，它会自动安装 StyleSeed 并运行完整循环。如果无法安装，单独引用规则 URL 也能生效，但效果较弱（质量门控降级为“诚信自检”，代理通常会跳过）。完整安装后，所有 19 个技能（如设置向导、审查、评分）均可使用。

典型场景

• 用 Claude Code 或 Cursor 构建仪表盘但结果显得业余
• 用 vibe coding 开发 SaaS 应用但不想雇佣设计师
• 使用 shadcn/ui 但输出仍感觉通用
• 希望获得 Toss 级别的精致度但不想逆向工程
• 构建 Claude Code 技能或 Cursor 规则设置用于设计
• 快速用 AI 交付产品，需要专业 UI 且不显 AI 生成

关键要点

• 设计判断 vs. 设计数据：StyleSeed 的核心洞察是，给 AI 更多设计数据（调色板、字体规格、阴影令牌）并不能解决“通用感”问题；真正缺失的是设计判断——资深设计师知道在哪里放什么，而纯数据无法传递这种经验。
• 质量门控是强制机制：安装技能后，质量门控会实际运行评分并修复问题，而非仅靠“建议”。这是防止 AI 跳过审查的关键步骤。
• 锁定机制防止漂移：STYLESEED.md 将设计决策写入文件，每次提示时代理都会重新读取并遵守，确保不同会话之间的设计一致性。
• 纯 Markdown 零依赖：规则文件是纯 Markdown，无需安装或权限，直接复制文件即可获得 90% 的功能。19 个技能为可选自动化增强。
• 覆盖多种 AI 工具：支持 Claude Code、Codex、Cursor、Gemini CLI、Amp 等，通过 CLAUDE.md、AGENTS.md、.cursorrules 等配置文件适配。
• 从“事后修复”到“事前预防”：StyleSeed 不仅能在新项目中应用，还能对已有的通用 AI 生成界面进行改造（retrofit）。
• 规则透明且可扩展：74 条规则全部公开，任何人都可以查看、修改或贡献，社区可以基于此构建品牌皮肤（DESIGN.md）。

意义与影响

StyleSeed 标志着 AI 辅助设计从“工具增强”向“判断增强”的转变。它解决了一个被广泛忽视的问题：AI 生成 UI 之所以显得“廉价”，不是因为数据不够，而是因为缺乏人类设计师的隐性判断力。通过将 74 条专家级规则显式编码，并强制 AI 在展示前自我审查，StyleSeed 使任何开发者——即使没有设计背景——也能产出连贯、专业、有品牌感的界面。

这一项目的影响可能超出开发者工具范畴：它提供了一种模式，即如何将“隐性知识”转化为 AI 可执行的结构化规则，并辅以质量门控来确保遵守。未来，类似的设计规则引擎可能成为 AI 编程的标配，就像代码 lint 工具一样。对于企业而言，StyleSeed 可以成为品牌设计系统的一部分，确保所有 AI 生成物符合品牌规范，同时降低对专业设计师的依赖。

此外，StyleSeed 的开源（MIT 许可）和社区驱动特性，使其能够快速吸收最佳实践，形成设计规则生态。用户可以为不同品牌创建“皮肤”（skin），通过 data-skin 属性切换，实现同一组件在不同品牌下的即时变形（如 Toss、Raycast、Arc 的不同风格）。

总之，StyleSeed 不仅是一个工具，更是一种方法论：让 AI 学会“设计判断”，而不仅仅是“收集数据”。这可能是未来 AI 生成内容质量提升的关键一步。