Claude Code Frontend Design Toolkit：给 Claude Code 去掉前端 AI 味的工具清单

用 Claude Code 写前端，最大的问题通常不是“写不出来”。

而是写出来之后，你盯着页面看两秒，心里就会冒出一句：

这也太 AI 了。

按钮圆角、卡片阴影、渐变背景、三栏布局，单看都没错，拼在一起就是一股模板味。像是把 Tailwind 默认审美又复制了一遍。

我看到这个 Claude Code Frontend Design Toolkit，第一反应就是：它不是又做了一个前端框架，而是把“怎么让 Claude Code 写得更像设计师”这件事，整理成了一份工具清单。

项目按场景分了十个板块。

从设计风格、主题配色、动效动画，到 Figma 转代码、浏览器测试，里面收了 70 多个插件和技能。

这类清单最怕变成网址大全。

但它比较实用的一点，是没有只按工具名堆东西，而是按使用场景给搭配。

比如你只是个人开发者，不想折腾太多，它会告诉你装哪三个就够。

团队里有设计师，交付的是 Figma 文件，那就按 Figma 到代码的链路去配。

如果你是 solo 开发，想快速糊一个原型出来，又会是另一套组合。

这个思路挺对。

Claude Code 现在写业务逻辑、补组件、改样式都很顺，但它对“视觉方向”的默认理解其实很窄。你不喂它参考、不加约束、不告诉它该走哪种风格，它很容易滑回那套安全但无聊的界面。

所以这个 Toolkit 的价值，不是替你写代码。

它更像是给 Claude Code 加了一组“审美外设”。

你可以让它先有主题，有动效库，有设计规范，有测试方式，再让它生成页面。这样出来的东西至少不会每次都长得像同一个 SaaS 落地页。

还有个小细节我挺喜欢：项目里标注了每个工具的 token 消耗。

这东西看起来不起眼，但实际用 Claude Code 的人都知道，前端任务很容易烧 token。

尤其是 Figma、截图、浏览器测试这类链路，一旦上下文拉长，成本会悄悄上去。

提前标出来，至少能让人知道哪些适合常驻，哪些只适合关键节点再开。

当然，它解决不了所有问题。

你不能指望装完一套工具，Claude Code 就突然变成资深视觉设计师。审美方向、产品气质、信息层级，这些还是得人来拍板。

但如果你已经在用 Claude Code 做前端，又受够了那种“看起来没错，但就是很 AI”的页面，这份清单确实值得收一下。

项目地址：Claude Code Frontend Design Toolkit。