mcpField
C
claude-design-critic

claude-design-critic

github.com/onewave-ai设计与 UI393166 次安装1 周前更新
代码仓库

关于 claude-design-critic

claude-design-critic 是面向前端项目和线上网站的设计与文案审查技能，可定位具体问题、排列修复优先级，并提出实施高优先级修改。

主要功能

  1. 01审查布局、色彩、字体与间距
  2. 02检查动效、素材和无障碍性
  3. 03识别通用或带有 AI 痕迹的文案
  4. 04输出定位明确且排序的发现
  5. 05在可用时引用设计令牌
  6. 06提供实施修改与复审

适用场景

  1. 01审查生成式落地页
  2. 02诊断观感通用的线上网站
  3. 03依据设计令牌检查前端

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/onewave-ai/claude-skills --skill claude-design-critic

安装后在 Claude Code 中输入/claude-design-critic确认已加载。

详细介绍

Claude Design Critic

有些网站在技术上没有问题，却依然一眼就像是“AI 一次生成的”。这项技能会准确指出原因，并告诉你该如何修改。它会同时评审设计和文案，因为生成感十足的文字和居中的主视觉、紫色渐变一样，都会迅速暴露问题。

可将它用于润色 claude-landing-composer 的输出、任何氛围编程生成的前端，或感觉千篇一律的线上网站。如果有 claude-design-system-architect 提供的设计令牌，也可以结合使用（存在令牌时，请对照令牌进行审查）。

Step 1 — 了解目标

输入可以是 URL（使用 WebFetch + 截图）、本地项目（读取组件和样式），或粘贴的代码。先确定：这个页面的用途是什么？面向谁？它希望用户采取的唯一行动是什么？不了解目标的设计评审，只是发表意见。

Step 2 — 分维度审查

逐项检查各个维度，指出具体问题，而不是泛泛而谈：

布局与构图

  • 每个区块都是居中堆叠？下意识地放上三张一模一样的卡片？页面总是按主视觉 → 卡片 → CTA 排列，毫无节奏？本可采用不对称布局的地方却一味对称，缺少精心设计的感觉？留白过于拥挤或千篇一律？

色彩

  • 使用紫色或默认的 AI 渐变（这是最明显的破绽）。强调色过多，彼此争抢注意力。颜色偏离品牌，或随意使用未映射到令牌的十六进制色值。对比度不合格（检查 AA）。

字体

  • 默认系统无衬线字体，只用 2–3 种字号。没有真正的模块化比例。层级不清晰。字体搭配平庸。行长或行高看起来像默认值。

间距与细节

  • 到处都是相同的内边距。缺少视觉微调。边框或阴影不是完全一样，就是都很厚重。

动效

  • 每个元素都用相同的向上淡入效果。动效只起装饰作用，而非引导用户。忽略了 prefers-reduced-motion。

图标与素材

  • 把表情符号用作 UI（换成 Lucide/Heroicons）。使用泛泛的图库图片。留下占位徽标。

文案（审查力度要和设计一样严格）

  • AI 常用语：“提升”（elevate）、“解锁”（unlock）、“无缝”（seamless）、“赋能”（empower）、“在当今快节奏的世界中”（in today's fast-paced world）、“我们很高兴……”（we're thrilled to）、“……的力量”（the power of）；滥用破折号；每句话都列举三项。
  • 泛泛的价值主张（“实现 X 的最佳方式”）、含糊其辞的表达、“了解更多”按钮、“欢迎来到 {Product}”式主视觉，以及填充页面的微文案。
  • 标出具体的问题语句，并改写最糟糕的部分。

无障碍与语义

  • 标题顺序、替代文本、焦点状态、语义化地标、点击目标尺寸。

Step 3 — 给出有优先级、具体可行的修改建议

# Design Critique — {target}
Generated: {timestamp} · Goal: {…} · Verdict: {SHIP / FIX FIRST / REBUILD SECTION}

## The 30-second read
The 2–3 things making this look generated, in plain language.

## Findings (prioritized: High → Low)
| # | Dimension | What | Where (selector/line/section) | Why it reads as AI | Fix |

## Copy rewrites
"{exact current line}" → "{rewritten line}"

## Quick wins (under 30 min, high impact)
## Bigger moves (worth the time)
## What's already good (keep it)

建议应具体到他人无需提问就能逐项落实。注明文件、区块或行号。如果有设计令牌，请指出应使用哪个令牌。

Step 4 — 提出代为修改

主动提出直接落实高优先级修改（编辑组件和文案）并重新审查，或交由 claude-landing-composer 重建。

内部标准

高级感 = 有意设计的布局节奏、克制的配色、合理的字体比例、宽裕的留白、目标明确的动效、自然的人写文案。生成感 = 所有内容都居中、彩虹色或紫色渐变、默认无衬线字体、统一的内边距、所有元素都向上淡入，以及“提升你的工作流”。推动每个目标从后者走向前者。绝不用紫色，绝不把表情符号当作 UI。

注意事项回顾

同时审查设计和文案 · 每个问题都要具体且标明位置 · 存在令牌时注明应使用的令牌 · 按影响排序 · 提出代为修改，然后重新审查。

评论

支持 Markdown