做前端别再套 AI 模板：86 万人装的设计 Skill，到底改了哪一步

你把一句需求丢给 Coding Agent，十分钟后拿到一个能跑的页面。圆角卡片、渐变、三个统计数字、一个大按钮，一个没少。

问题也在这儿：它看着像页面，却不像你的产品。换个 Logo，谁家的都能用。前端返工最磨人的部分，往往不是把代码跑通，而是把这股「又是这一套」的味道挪走。

Anthropic 开源的 frontend-design Skill，在 skills.sh 上已有 85.99 万次安装。它给的不是一套更花哨的组件库，而是把「别急着生成」写进了第一步。安装也很短：

npx skills add anthropics/skills --skill frontend-design

我把它看完后，觉得最值钱的不是那串命令，是它逼 Agent 在开工前回答的几个小问题。你不装这个 Skill，也能把这张检查表塞进项目的 AGENTS.md 或设计 brief。

先把页面要替谁解决什么事说清，后面的色彩和布局才有落点。

不要从「做一个好看页面」开始

这类需求给 AI 的自由度太大，常常会换来一组它最熟的默认值。这个 Skill 的开头反而很朴素：先找出产品是什么、给谁用、页面最主要的工作是什么。

比如「给数据团队做一个仪表盘」，还不够。你得再往前推一步：这是给每天盯告警的值班同学，还是给月底复盘的负责人？他打开第一页，是要发现异常、确认一项变更，还是把一张图拿去开会？

同样叫 Dashboard，答案会把页面往完全不同的方向带。前者要让异常先冒头，后者要让趋势和解释站得住。别急着讲毛玻璃、渐变和动效，先把这个句子补全：

这页是给 谁 在 什么时刻 完成 哪一个动作 的。

它有点子土，但很好用。因为这一句一旦写具体，AI 就没法再把任何项目都渲染成一张融资路演封面。

大胆只花在一个地方

frontend-design 里有个很像设计总监当面敲桌子的提醒：页面需要一个能被记住的东西，别给每一块都加特效。

很多生成页面的毛病，不是元素太少，而是每个元素都在抢戏。大圆角、柔阴影、渐变洗底、眉题、箭头、悬浮动画一起上，反倒没有一个地方真能留下印象。

它建议先挑一个「签名动作」。可以是产品世界里真正有辨识度的物件，可以是一种特别的排版，也可以是一个让人一眼看懂价值的交互。只选一个。其余部分安静下来，反而更像有人做过取舍。

记忆点不是装饰清单。越是想让每一块显得特别，越容易变成任何产品都能套的样子。

这里有一个很实用的反问：把产品名称遮掉，这个页面还像它自己吗？如果答案是「换谁都行」，就别继续加组件了，回到产品语境。

让 Agent 先交设计计划，再写 JSX

这个 Skill 要求先用很短的一轮计划，把颜色、字体、布局和设计原则写出来；再问自己一遍，这套决定是不是换个项目也会原样出现。

这不是多一道文档手续。它是在把审美判断从生成结果里提前。你可以直接这样给 Coding Agent：

产品：给独立店主查看今日订单异常的移动端 Web。
受众：营业中没有时间读长报表的人。
页面任务：让他 30 秒内确认哪笔订单需要处理。
签名动作：用「待处理订单」像收银小票一样从页面顶部拉出。
禁止：大面积渐变、三张同尺寸圆角卡、无意义的英文眉题。
先给颜色、字体、布局和取舍计划；我确认后再写代码。

计划不需要写成品牌手册。四行够了。关键是让它在码代码前把选择摆上桌，而不是在你看见成品后才问「为什么又是紫色渐变」。

Anthropic 在原文里还点了几种高频套路：暖米色配高对比衬线字、近黑底加一抹荧光色、报纸式密集分栏、所有内容切成同款圆角卡片，以及每个标题上方都塞一个全大写标签。它们不是永远不能用；只是如果 brief 没有给出理由，默认端出来，多半会露馅。

什么时候先别用它

别把「有个设计 Skill」理解成每个页面都该追求强风格。

如果你在补一个成熟设计系统里的表单、修一个内部后台的筛选项，或者产品已经有严格的品牌组件库，稳定和一致性更重要。这时要把现有 token、组件规范和无障碍约束交给 Agent，别鼓励它为了「独特」另起炉灶。

它更适合三种场景：从零做产品首屏、把一张过于模板化的落地页救回来、或者团队还没形成设计语言，但已经受够 AI 每次都长成同一张脸。

收尾放一张开工前的四项检查表：

• 这页是谁在什么时刻打开的？
• 他离开前要完成什么动作？
• 我只想让他记住哪一个视觉或交互？
• 遮住 Logo 后，它还有没有产品自己的理由？

能把这四题答出来，再让 Agent 动手，返工会少很多。页面不是「好看」这个形容词的比赛，它得先像你的产品。

你最近一次被 AI 页面逼着返工，是哪一个模板套路露了馅？

资料：Anthropic frontend-design Skill；skills.sh 安装页。