name: styleseed-design-reviewdescription: 审查 UI/前端代码并准确告诉你它为什么看起来像 AI 生成的——然后告诉你怎么修复。当 React/Tailwind/HTML 界面看起来不对劲、很普通或未完成时使用当你想在发布前获得设计评分时使用或者当被要求让 UI 看起来更专业、更精致、或……risk: safesource: https://github.com/bitjaru/styleseed/tree/main/skills/styleseed-design-reviewsource_repo: bitjaru/styleseedsource_type: communitydate_added: 2026-07-01license: MITlicense_source: https://github.com/bitjaru/styleseed/blob/main/LICENSEStyleSeed 设计审查概述UI 之所以被读作AI 生成的不是因为组件难看而是因为各部分之间互相不协调——圆角半径混杂、三种强调色、纯黑文字、没有层级、缺少状态、机械化的文案。本技能对照一份具体的评分标准审查 UI 文件或整个目录给出 0–100 的评分并返回一份按优先级排序的修复清单。它只做审查和建议未经你要求绝不修改或删除。完整规则集74 条规则和组件https://github.com/bitjaru/styleseed何时使用React / Tailwind / HTML UI “看起来不对劲”、很普通或未完成而你说不出原因。你想要一个设计评分 / 发布前检查。用户要求让 UI看起来专业 / 精致 / 经过设计而不是 AI 生成的。生成 UI 之后在发布前验证。如何审查读取文件。对以下七个类别评分总分 100每类从满分开始对你能引用行号的违规项扣分。要具体、基于证据。1. 一致性 — 20AI 生成感的头号特征每个轴只做一个选择并应用到所有地方。对每个混杂的轴扣分圆角半径混杂——例如锐利卡片配药丸按钮−6两个或更多强调色用于突出−5用 emoji 作为 UI 图标⭐ 作为列表/导航/状态/分类标记——会注入大量不可控的色调使用一套 currentColor 的线性图标集−6阴影语言 / 光照方向混杂−3图标家族、填充模式或描边粗细混杂−3控件高度不一致按钮/输入框尺寸不一−32. 色彩纪律 — 16纯黑#000/text-black文字——精致的黑色大约是#2A2A2A每处 −4上限 −8在已有语义令牌的地方硬编码十六进制色每处 −2上限 −6正常 / 普通 / 默认“보통”状态使用了状态色而不是中性灰−4大多数/每一行都用了状态色没有严重性层级——颜色应该标记需要关注的那一小部分−4装饰性色调——金色星星、彩虹分类圆点、每张卡片一种颜色——而不是强调色/灰色−3仅用颜色传达状态没有图标/文字−4对比度低于 WCAG AA正文 4.5:1大号/UI 3:1−63. 层级与排版 — 16数字与其单位不是约 2:148px 数字 / 24px 单位−4所有内容大小和字重相同没有清晰的视觉主次−5任意字号没有字号体系−4行高错误展示文本过松、正文过紧−34. 布局与间距 — 12内容直接放在裸露的页面背景上而不是卡片中−6偏离网格的间距用 7/13/19px 而不是 8px 刻度−3组外部的间距不大于组内部的间距−3同一类型的区块并排重复−45. 状态 — 12数据展示面缺少空状态 / 加载状态 / 错误状态每处 −5上限 −10空状态没有下一步操作错误文案是指责式而非帮助式−46. UX 文案 — 12按钮没有写明动作用提交/“确定而不是发送 $2,400”−4错误文案是指责式或系统腔“输入无效”、“发生错误”−4同一概念用两个词delete vs remove空洞的填充词“请”、“成功”−27. 动效与打磨 — 12临时拼凑的淡入淡出而不是统一、有名字的风格−3动效延迟内容展示或阻碍操作−4自定义动效没有处理prefers-reduced-motion−3单一的硬黑阴影而不是分层的、低透明度、带色调的阴影−2每个类别扣到 0 为止相加得出总分。等级90 A · 80–89 B · 70–79 C · 60–69 D · 60 F。输出格式## 设计评分72 / 100 (src/Dashboard.tsx) C 一致性 13/20 锐利卡片 (l.22) 药丸按钮 (l.48)3 种强调色调 色彩纪律 12/16 #000 标题 (l.12, 40) 层级与排版 15/16 主视觉区数字/单位 1:1 (l.18) 布局与间距 10/12 两行相同的 KPI (l.22-31) 状态 7/12 订单列表没有空/加载状态 UX 文案 8/12 提交按钮 (l.55)输入无效 (l.61) 动效与打磨 10/12 单个硬黑阴影 (l.22) ### 优先修复得分提升最大 1. 统一圆角选择柔和的 8–12px 收敛为一种强调色 → 11 一致性/色彩 2. 为订单列表添加空 加载状态 → 7 状态 3. 将提交改为发送 $2,400输入无效改为检查卡号 → 6 文案 修复后重新评分约 90 / 100。规则基于真实证据审查引用行号绝不猜测。修复清单按得分增益排序而非仅按严重性——这是更快拿到更好分数的路径。对于目录每个文件一行评分然后给出得分最低文件的完整明细。不要自动修改。本技能只测量和建议。仅在用户要求时应用修复。把它当作质量门禁生成 UI 后立即审查应用修复清单并在展示给用户之前重新审查直到评分超过约 80——任何初稿式、不协调的 UI彩虹状态列表、emoji 图标、两种强调色、缺失状态都不应该送到用户面前。这个门槛是下限而非上限过了 80 就发布不要为了凑 100 而拖延。基于StyleSeed——一个开源MIT设计引擎为 Claude Code、Cursor 和 Codex 提供设计判断力让 AI 构建的 UI 不再有生成感。完整 74 条规则参考、组件、品牌皮肤和动效https://github.com/bitjaru/styleseed局限性仅当任务与上游来源和本地项目上下文明确匹配时使用本技能。在应用更改前验证命令、生成的代码、依赖、凭据和外部服务行为。不要将示例视为环境特定测试、安全审查或用户对破坏性或高成本操作批准流程的替代品。