做前端，先给 AI 选审美：110 万人装的设计 Skill

同样一句“做个 SaaS 页面”，很多 AI 的第一反应都很统一：蓝紫渐变、左边一行大标题、右边一张漂浮的仪表盘、下面三张圆角卡片。

功能没坏，代码也能跑。可产品一上线，隔壁十个页面像同一个人画的。

这不是 CSS 写得不够多，而是开工前少了一道选择题：这个产品该长成什么样，才像它自己？

Anthropic 官方的 frontend-design Skill 就盯着这一步。它在 skills.sh 上已有 110 万次安装，anthropics/skills 仓库有 18.74 万 GitHub Star。它不承诺替你凭空变成视觉设计师，做的是更朴素的一件事：把“直接生成页面”改成“先确定视觉方向，再生成页面”。

安装命令也只有一行：

npx skills add https://github.com/anthropics/skills --skill frontend-design

图：本文抓取的 skills.sh 源站资料图，用于标识 frontend-design 及其所属仓库。安装量和 Star 以正文引用的本次页面抓取口径为准。

我没有把它跑成一次“亲测翻新”的故事。下面的判断、命令和能力边界，来自它的公开 Skill 说明；文中的 Brief 是基于这些原则整理的可复制工作模板。

默认页面为什么总有一股模板味

模型不是没见过好页面。问题在于，当提示词只剩“做一个好看的后台”时，它只能押注最不容易被挑错的平均答案。

平均答案通常很安全，也通常很无聊。

frontend-design 的原始说明先让模型确认三件事：产品或主题是什么、给谁用、这个页面最主要的工作是什么。它还要求从行业、材料和语境里找视觉依据。给 8—11 岁孩子的玩具页面，和给金融分析师看的异常仪表盘，当然不能共用一套“科技感”。

这一步听起来像设计课开场白，但对写代码的人很实用。它把含糊的“做漂亮一点”，变成可以检查的约束：标题该像海报还是报表？首屏该放互动还是数据？字体是克制的工具，还是页面的主角？

官方文档还点了一下很常见的偷懒动作：大数字、小标签、渐变光晕确实好用，但不该成为每个 Hero 区的默认答案。页面的主角可以是标题、图片、动画、实时演示，甚至是一个让人立刻参与的小互动；选哪一个，得和产品本身有关。

开工前的 90 秒，写一张方向卡

不用先拉 Figma，也不用替 AI 写一整篇品牌手册。给它一张短而具体的方向卡就够了。下面这份可以直接改：

产品：给小团队排查线上异常的协作面板
用户：要在十分钟内判断是否需要回滚的值班工程师
页面任务：让人先看见风险、再定位责任服务、随后执行动作

视觉方向：安静、克制、像一份可签字的运行记录；
不要“未来城市”或游戏化控制台。深墨绿、灰白和少量琥珀色，
用等宽数字强化时间与状态。首屏不是宣传标语，而是一条真实感的异常时间线。

实现约束：React + 现有组件库；复用语义化颜色 token；
键盘焦点、移动端和空状态都要保留。

图：本文整理的方向卡结构。它不是设计稿，而是给 AI 下达设计任务前的约束清单。

这里最有价值的一句，不是“深墨绿”，而是“先看见风险、再定位责任服务、随后执行动作”。它规定了信息优先级，也顺手把页面从漂亮截图拉回真实工作。

再往下补一两条“不要什么”也很管用。比如不要玻璃拟态，不要泛紫色渐变，不要把每个指标都塞成同样大小的卡片。负面约束不是扫兴，它是在替产品省掉后面三轮“怎么又像 AI 做的”的返工。

第一版出来后，别只问“好不好看”

AI 把第一屏交出来时，最容易发生的事，是大家盯着颜色和阴影讨论五分钟，然后把真正的问题放过去：这张页面离开标题，还认得出它在解决什么吗？

我会用三个更硬的检查替代“感觉还行”。第一，截掉 Logo 和产品名，剩下的版式、图标和内容密度，能不能看出它是给谁干活的；第二，读者在三秒里能否找到此刻最该看的信息和下一步动作；第三，删掉渐变、浮球和装饰插画后，信息层级是否还站得住。

这三问都不是审美考试。它们在检查“视觉方向”有没有落到内容、顺序和动作上。答不上来，就回到方向卡补产品语境，不要急着再加一层阴影。很多页面不是不够炫，而是把装饰先做完了，真正的工作流还在排队。

把 Skill 用在两种最常见的活上

第一种是从空白页开始。把上面的方向卡贴进需求，再补一句“先列出你的设计决定和理由，确认后再写代码”。这样做的好处，是你能在代码出现前就挑战它的视觉判断，而不是等组件堆满屏幕后再拆。

第二种是给已有项目换视觉。官方材料很在意这一点：不是新建一套平行主题，而是审视既有的颜色、字体、间距、圆角和交互状态，把硬编码样式逐个换成语义化 token。页面已经有组件库时，这比“整站重做”稳得多。

可以这样下任务：

先读取现有路由、组件、样式和 design token。
保持交互与业务逻辑不变，只重做视觉系统。
根据“城市社区花店的预约页”这个主题，给出一套有机、纸张感、低饱和的方向。
先列出将复用或新增的颜色、字号、间距和状态 token；
再按组件批次迁移，收尾时检查对比度、键盘焦点与窄屏布局。

这份要求也暴露了它的边界：它擅长帮 AI 做有根据的视觉决定，不替你发明业务优先级，更不能替代真实用户反馈。一个没有人使用、没有内容结构、没有状态逻辑的页面，换多少字体都不会变成产品。

哪些情况别把它当万能药

如果团队还没确定信息架构，先别急着让它挑“复古未来”还是“极简瑞士”。此时最该补的是任务流、字段优先级和空状态，不是风格词。

如果你已经有成熟设计系统，也别让一个新 Skill 绕开 token 和组件边界另起炉灶。把已有规范、可改与不可改的部分写清楚，它才会成为迁移助手，而不是下一笔视觉债。

还有一点容易被忽略：设计方向不是一串形容词。“高级、现代、有科技感”基本等于没说。它至少要落到一个可观察的选择上：首屏的主角、文字的语气、信息密度、颜色扮演的角色，或一种和产品有关的材质与隐喻。

110 万次安装当然不证明它做出的每个页面都好看。它证明的是，越来越多人不满足于让 AI 吐出一套能跑的组件。真正值得借走的，是那张方向卡：在让 AI 写第一行 JSX 之前，先让它说清楚，这个页面准备成为什么。

你最近最想摆脱哪一种“模板脸”页面？是落地页、后台，还是产品里的某个空状态？

小岛 AI

参考：

• frontend-design 的 skills.sh 官方页面
• Anthropic Skills GitHub 仓库