你有没有发现，AI 帮你写的前端页面总有一种说不出的「AI 味」？白底、圆角卡片、Inter 字体、蓝紫渐变按钮——每家大模型吐出来的界面都长得像同一个模板刻出来的。看多了真的会审美疲劳。
Anthropic 出了一个叫 frontend-design 的 Claude Code 技能，专门治这个问题。它不是帮你「快速搭个页面」，而是帮你做出那种让人看一眼就记住的界面。
它到底在干嘛
一句话说：这个技能让 AI 在写前端代码之前，先认真想清楚「这个界面应该长什么样」。
普通流程是你告诉 AI「帮我做个 landing page」，它就直接开写，出来的结果大概率是安全但无聊的。frontend-design 的做法是把设计思考前置——先确定美学方向，再动手实现。它会引导你选一个明确的视觉风格，然后围绕这个风格把每个细节做到位。
它自己总结了五大设计支柱：排版、CSS 变量的色彩主题、动效设计、空间构图、纹理细节。听起来有点学院派，但落到实处就是：字体选什么、颜色怎么定、元素怎么动、留白怎么处理、质感怎么做。这些事情 AI 以前不太管，现在这个技能把它们当成核心来抓。
怎么用
安装就一行命令：
npx skills add https://github.com/anthropics/skills --skill frontend-design
装好之后，在 Claude Code 里跟它描述你要做的界面就行。你可以简单说「帮我做一个咖啡店的 landing page」，也可以给更多上下文——目标用户是谁、用什么框架、有没有参考风格。
这个技能的特别之处在于，它不会拿到需求就直接写代码。它会先跟你讨论美学方向：你想要极简还是极繁？复古还是未来感？粗犷还是精致？确定了方向之后，再按照这个方向去实现。
这种「先想后做」的流程听起来慢，但其实省时间——因为你不用反复改那种「好像差点意思但又说不上来哪里不对」的半成品。
美学方向库
这个技能内置了一堆美学方向供你选择，覆盖面挺广的：
- 粗野主义（Brutalist）：裸露、原始、不加修饰，适合想表达态度的项目
- 极繁主义（Maximalist）：堆满细节、信息密度拉满，适合需要视觉冲击的场景
- 复古未来主义（Retro-futuristic）：老式科幻的感觉，CRT 显示器配霓虹色
- 奢华风（Luxury）：精致、克制、高级感，适合品牌类项目
- 有机风（Organic）：自然、流动、柔和的形状和配色
- 趣味风（Playful/Toy-like）：圆润、鲜艳、好玩，适合面向年轻用户的产品
- 编辑/杂志风（Editorial）：大标题、强对比、排版本身就是设计
- 装饰艺术/几何（Art Deco）：对称、金色调、几何图案
- 柔和/粉彩（Soft/Pastel）：低饱和度、温柔、舒适
- 工业/实用风（Industrial/Utilitarian）：功能导向、硬朗、工具感
不过它也说了，这些只是灵感来源，你可以组合或者自创。关键不是选哪个标签，而是选完之后真的按照这个方向去执行。
核心理念：意图性
这个技能反复强调一个词——「意图性」（intentionality）。
它的原话是：「大胆的极繁和精致的极简都有效，关键是意图性，而非强度。」翻译成大白话就是：你做得很满可以，做得很空也行，但每一个设计决策都得是你想清楚了的，而不是随便来的。
这其实点出了 AI 生成界面最大的问题：不是丑，是没有设计意图。AI 会选择「安全」的方案——圆角、阴影、标准间距——因为这些在训练数据里出现最多。但安全不等于好看，更不等于有辨识度。
支持的技术栈
目前支持三种：
- HTML/CSS/JS：最基础，适合静态页面或原型
- React：组件化实现，适合正式项目
- Vue：同样组件化，Vue 用户可以直接用
不管哪种，它都会把 CSS 变量用起来做主题系统，方便你后期调整配色和间距。代码是生产级的，不是那种只能看不能用的 demo。
一句话总结
frontend-design 解决的是「AI 写的页面看着都一样」这个问题。它的办法是让 AI 先做设计决策再写代码，而不是先写代码再假装有设计。如果你受够了千篇一律的 AI 界面，值得试试。