Styleseed 设计判断引擎

它解决什么问题

直接让 Claude Code 从零生成落地页面时，输出往往一眼就能看出是 AI 产物：颜色是纯黑配默认蓝，阴影随手给一个 8px 模糊，信息密度毫无节奏，几个 KPI 卡片整齐排列得像模板截图。原因在于模型缺少一套持续、可执行的设计判断——它知道组件怎么写，却不知道“看起来是设计过的”需要哪些约束。

Styleseed 想填的就是这段空白：不是再塞一份设计规范文档，而是把设计判断拆成69 条与品牌无关的视觉规则，在 Claude Code 生成或修改界面时持续参与判断。目标是让最终产物不再有“模板感”。

它如何工作

视觉规则层。 色彩纪律规定 refined black 用 #2A2A2A，灰色采用五阶灰度，强调色最多一个；空间节奏要求交替的 section 高度、数字与单位的 2:1 比例；信息层级强调卡片与背景的分离和渐进式密度；阴影与海拔把透明度上限压到 4%，暗色模式用边框替代阴影；组件变化要求避免四张完全相同的 KPI 卡片，内容类型交错排布；动效与反馈给出 200ms 的 normal 时长、入场用 spring、退场用 ease-out。

组件与命令层。 附带 48 个 React 组件，风格贴近 shadcn，基于 Tailwind CSS v4 和 Radix UI，可直接落进项目；提供 /ss-page、/ss-review、/ss-audit、/ss-lint 等 11 个斜杠命令，覆盖页面生成、走查、审计和规范检查。

换肤层。 内置 Toss、Stripe、Linear、Vercel、Notion、Raycast、Arc 等可切换的品牌皮肤，同一套结构可以快速切换成不同产品的观感。

适用边界

• 它约束的是通用视觉判断，不代替你确定业务信息架构。规则不会帮你想清楚这个页面到底该有哪些模块，也不会替你写文案。
• 组件依赖 Tailwind CSS v4 和 Radix UI，换到其它组件库或设计系统时，规则仍然有效，组件不能直接复用。
• 品牌皮肤是预设的几种风格，不覆盖字体定制和品牌色精确映射，需要自己扩展。
• 规则偏克制、偏产品感，如果目标是营销页的强视觉冲击，这套纪律可能显得保守。