AI 编码 Agent 生成的 UI 千篇一律？StyleSeed 用 74 条设计规则让界面告别”AI 味”

你有没有这样的经历：让 Claude Code 或 Cursor 帮你写一个设置页面，结果出来的 UI 总是在用同一套 indigo 蓝色渐变、icon-chip 卡片布局、彩虹色列表和居中排版？换一个项目，换个需求，生成的界面看起来还是”同一个 AI 写的”。

这不是你的 prompt 写得不够好——这是 AI 编码 Agent 在 UI 设计上的固有缺陷。LLM 的训练数据中包含了大量通用模板和”安全”的设计模式，它倾向于输出统计学上最”正确”的布局，而不是有品位的设计。当它们告诉你”代码已经写好了，你看看效果”，你看到的却是一个毫无个性的界面。

为什么这是个真问题

AI 编码 Agent 的价值在于加速开发，但如果生成的界面需要你花大量时间手动调整样式，这个加速就打了折扣。具体来说：

• 产品感知受损：用户看到”AI 味”的界面，会觉得产品粗糙、像玩具
• 反复修改成本高：每次生成后都要手动调样式，prompt 调了又调效果有限
• 品牌一致性难维持：每个页面可能用不同的色彩、圆角、阴影，缺乏统一的视觉语言
• 团队协作障碍：设计师和开发者需要持续沟通”这里样式不对”，浪费双方时间

核心问题是：工具能生成功能正确的代码，但缺乏设计判断力——知道什么好看、什么不好看、什么符合品牌调性。

传统方案：靠人反复校样

常见的做法是在 prompt 里加设计要求，比如”用这个品牌色”、”圆角小一点”、”间距保持一致”。但这些规则很难系统化——你说了色彩，它忘记字体；强调了圆角，它又把阴影搞错了。而且每次新项目都要重新调一轮。

另一个方案是写详细的 .cursorrules 或自定义 CLAUDE.md，但这类配置文件要么太简略（只有几个 token 值），要么太冗长（包含几十个组件的完整 CSS），在 Agent 的上下文中占用大量 token 空间。

StyleSeed 的方案：设计引擎 + 质量门控

StyleSeed 是一个开源的设计引擎（MIT 许可证），专门为 Claude Code、Codex 和 Cursor 等 AI 编码 Agent 设计。它的核心思路很清晰：不是给 Agent 一组色板，而是教它设计判断力。

项目的核心组件包括：

• 74 条设计规则：覆盖布局、构图、排版、用户体验、无障碍访问等方面
• 19 个 AI 技能：可安装到 Agent 中的命令（/ss-score、/ss-build、/ss-restyle）
• 7 套品牌皮肤：受 Toss、Stripe、Linear、Notion、Raycast、Arc、Vercel 启发的 token 集
• 质量门控系统：自动评分 UI 质量，要求达到 80/100 分以上才展示结果
• 命名动效系统：预设 motion tokens，确保动画风格统一

三十分钟快速上手

安装 StyleSeed 很简单——在 Claude Code、Codex 或 Cursor 中粘贴这一句话：

npx skills add bitjaru/styleseed

安装完成后，Agent 会自动获得 StyleSeed 的全部 19 个技能。核心工作流是三步循环：

第一步：初始化设计设置

在项目开始时，先运行 /ss-setup 交互式向导，它会引导你选择品牌皮肤、主色和字体方案，然后写入 STYLESEED.md 防止设计漂移：

/ss-setup
→ 交互向导引导你选择：品牌皮肤、主色、字体
→ 保存到 STYLESEED.md 中
→ 后续所有 UI 生成都基于这些 token

你也可以在最开始的那句话中直接完成锁定——安装 prompt 里包含了”lock my key color, font, and motion with me and save them to STYLESEED.md”的指令，Agent 会在 plan 模式下自动完成颜色、字体和动效的设定。

第二步：按规则构建

构建 UI 时使用 /ss-build 命令，Agent 会按照 StyleSeed 的 74 条设计规则来生成代码。这些规则包含了常见的”AI 味”反模式检测，比如：

• 不使用默认 indigo 作为主色
• 避免 icon-chip 堆砌
• 保持只有一个视觉焦点和一个强调色
• 确保排版层次清晰
• 间距使用统一的 4px 网格

第三步：质量门控评分

Agent 生成 UI 后，在你看到之前先运行质量门控：

/ss-score

$ss-score

如果评分低于 80/100，Agent 会自动修复不合格项后重新提交。这个机制把设计校样从”人看→提意见→修改”变成了”Agent 自我审查→自动修复→给你看及格的结果”。

品牌皮肤与预设

StyleSeed 的另一个实用功能是品牌皮肤系统。它提供了 7 个”灵感来源”的 token 集，每个定义了完整的色彩、圆角、阴影和动效参数。

使用预设一键切换风格：

/ss-restyle toss     # 鲜艳、圆润、活泼
/ss-restyle stripe   # 干净、专业、高对比
/ss-restyle linear   # 严谨、紧凑、强信息密度
/ss-restyle notion   # 柔和、留白多、文档感

如果你有自己的品牌规范，也可以运行 /ss-setup 重新选择或通过 /ss-tokens 查看和修改 token 值。StyleSeed 的 token 系统包含 10+ 个设计维度（主色、强调色、背景色、圆角大小、阴影层级、动画时长等），覆盖了绝大多数 UI 场景。

命名动效系统

大多数 AI Agent 生成的动效只有简单的 transition: all 0.3s ease——既缺乏节奏感，也无法保持一致性。StyleSeed 提供了 /ss-motion 技能，让 Agent 使用命名动效关键词（如 toggle-flip、tilt-3d）来统一动画风格。Agent 不需要理解动效设计原理，只需要指定一个关键词就能应用完整的动效方案。

最适合谁用

• 使用 Claude Code / Codex / Cursor 做前端开发的团队
• 对 UI 质量有要求的独立开发者 / 独立创业团队
• 需要保持多页面一致的 SaaS 产品开发
• 设计资源有限但想提升产品视觉质量的场景

注意事项

• StyleSeed 目前专注于 AI Agent 工作流，不支持 Figma 或 Sketch 导出
• 皮肤是”灵感来源”的 token 集，不是对目标品牌设计语言的完全复刻
• 如果 Agent 无法安装 skills（权限限制），可以使用 llms-full.txt 作为规则源，但质量门控无法自动执行

总结

StyleSeed 解决的核心问题不是”如何更好看”，而是如何让 AI Agent 具备基础的设计判断力。74 条规则、19 个技能、自动质量门控——这些组合在一起，让「AI 味」成为一个可检测、可修复的问题，而不是一个只能被动接受的结果。

如果说 AI 编码 Agent 解决了”代码能不能跑”的问题，StyleSeed 则试图解决”代码看起来好不好”的问题——两者加在一起，才是真正可交付的产品。

相关链接

• StyleSeed GitHub 仓库
• StyleSeed 在线演示
• StyleSeed 动效画廊
• [安装命令：npx skills add bitjaru/styleseed]