AI 前端设计审美实战指南

审美为什么成了 AI 时代的核心竞争力

AI 大幅降低了做产品的门槛。一个纯前端静态页面——例如个人品牌站点——借助 AI 可以在极短时间内完成;看到一个优秀的站点,让 AI 照着复刻,同样不难。

但鱼想先泼一盆冷水:那是 AI 的能力,不是你的能力。把一堆文档扔给 AI,它可以快速搭出一个知识库产品;可当你下次要独立启动一个全新的项目时,如果不理解背后的原理,你依然不知道从何下手。鱼的理解是,工具越强,越需要把方法内化成自己的判断力——不然你只是 AI 的复读机。

鱼自己的习惯是:内部工具怎么糙都行,但只要是面向公开市场发布的东西,设计细节上的投入绝不省——很多时候,小产品反而是在设计细节上花时间最多的。

这也是为什么,在动手让 AI 写页面之前,鱼坚持先花一整篇的篇幅把「审美与设计」这件事聊透。网上「十几分钟让 AI 做出网页」的教程随处可见,但缺失的恰恰是这一环。

AI 审美的本质:下限与上限

2.1AI 本质上没有审美

一个常见误区是认为 AI 无所不能,天然具备审美。实际情况是:同样的工具、同样的大模型,不同人做出来的东西千差万别——这一点鱼见得太多了。

AI 做出来的东西之所以「起码不丑」,是因为模型底层做了约束——包括市面上各类设计相关的 Skill 和工具,内置了一批前端设计原则:什么颜色搭什么颜色、页面四周要留白、标题与正文该用什么字体字号等等。但为 AI 定义这些原则的,依然是人。

2.2你的审美,决定 AI 审美的上限

鱼一直有个观点:如果一张海报,你自己都判断不了好坏,AI 更不可能替你判断。审美因人而异:同一套穿搭,有人觉得好看,有人觉得丑;普通人和顶级设计师装修出的房子,差异一目了然。

可以用一个分数模型来描述 AI 在其中的作用:

2.3普通人如何抬高自己的上限

不必成为设计师或艺术家,审美也没有绝对标准。鱼认为可行的路径就六个字:多看,多抠细节,在工程与产品的层面保持敏感。举几个鱼自己的强迫症现场:

• 文档里多余的空格与换行、连字符还是下划线,必须保持一致;
• 终端、编辑器的配色主题,不将就,换到自己看着舒服为止;
• 页面左右留白不对称,发现一次就受不了一次,立刻调。

倒不是说这种强迫症有多高级——鱼也是普通人。但这类「细节洁癖」日积月累,就是把上限一点点往上抬的过程。做到这一步,产品审美稳定在 80 分以上并不难。

工具底色:主流编码智能体的前端设计能力图谱

AI 的所谓「审美」建立在前端设计能力之上。用一句粗略的提示词让任何主流编码智能体做页面,它都不会做得很丑——基本设计原则是有保障的。但人与人之间有审美差异,编码智能体之间同样存在审美差异,这个差异就是前端设计能力的差异。很多人没意识到这一点,鱼展开讲讲。

几个关键事实:

1. Claude Code 系整体领先。在全球盲测打分榜单 Arena 上,单纯就基础前端设计能力而言,Claude 家族模型全面领先 Codex 系。这种领先体现在两个层面:一是大模型本身(Opus 对比 GPT),二是官方设计工具(Claude 自带的 frontend-design 与 Claude-Design)。
2. 差异只在「粗略提示词」场景下显著。同时让 Claude Code 和 Codex「做一个好看的海报/网页」,不加任何设计 Skill,两者产出风格截然不同:Codex 天然偏工程师视角,Claude Code 相对更偏设计师视角。看到这有人要拍桌子了:「我用 Codex 照样做出很好看的网页!」——没错,但那是因为你的审美在线,你在一步步精准指挥 AI 调字体、留白、配色,此时它俩只是执行者,最终当然能到同样的效果。鱼说的差异,是「一句话糊弄过去」时的差异。
3. 国产大模型基础前端设计能力更弱,同样的粗略提示词下,审美下限会更低。
4. 差距在快速收敛。Codex 与 GPT 一直在持续加强前端设计能力,新一代模型(如 GPT 5.6)前端设计能力已大幅提升。所以 Codex 用户完全不必纠结要不要转投,等待迭代即可。

结论:工具选择影响起点,但决定终点的仍是第二节所说的——你的审美与指挥能力。

设计不是一件事:先分清四个领域

提到「设计」,多数人脑子里只有一个词——「好看」。鱼要直接说:这是错的。「好看」是结果,不是输入。设计是一个系统,对非设计师而言,至少需要分清以下四个领域。

打个比方:你不需要会修车,但总得知道轮胎、方向盘、发动机各管什么,才能跟修车师傅有效沟通——指挥 AI 干设计师的活,同理。

鱼喜欢用开餐厅来类比:品牌是你卖什么菜系,视觉是装修和摆盘,动效是上菜节奏,交互是服务员态度。一家像样的馆子,四件缺一不可;每一件都做对,整体品味自然上去。

视觉设计四要素:参数化拆解

视觉设计继续细分,就是四件事:结构、配色、字体、间距。鱼的核心方法论就一句话:把「好看」翻译成参数——每一件都可以参数化,而参数化正是指挥 AI 的前提。

5.1结构:先定页面的「骨架」

主流个人站点的结构不外乎三种:

5.2配色:限制反而成就好看

核心反直觉规则:四色封顶——主色、辅色、背景色、文字色。颜色一多必乱;当然也不能乱配(红配绿是反例),但只要定好主色,其余交给 AI 即可,主题配色是主流编码智能体的基本功。

三类常见调性及适配人群:

以深色科技调为例:深色底之上压一层带蓝灰(slate)倾向的层次,再以一个高辨识度的主色点睛,可以做到「亮眼又不刺眼」,同时避免被误读成「游戏感」或「金融感」,稳稳落在「技术人」的气质区间。鱼的理解是,色彩选择本质上是一道身份问题,而不是审美问题——先想清楚你是谁,再决定用什么颜色。

5.3字体:网页是被字撑起来的

一个网页好不好看,鱼认为字体起码占了一半。中英文搭配的当前标准答案:

• 英文:Inter、Geist、Satoshi、Manrope(注意:默认 Inter 已被过度使用,Anthropic 官方设计指引中第一个点名的就是它,建议在此基础上做替换或调整);
• 中文:PingFang SC(苹果系统自带)、HarmonyOS Sans、思源黑体。

字号梯度至少四级:

5.4间距:贵气是留白堆出来的

观察一下你觉得「高级」的网页,会发现它们都很「空」。记住 8 倍数体系:所有间距一律从下面这串数字里取值,禁止 13px、27px 这类「魔法数字」。你这么要求 AI,它会乖乖照办。

5.5新手 vs 进阶对照表

掌握以上参数体系后,给 AI 的优化指令就不再是一句「帮我做得好看点」,而是:

视觉层面帮我优化,包含字体、字号、留白、间距、配色等,整体要有设计感。

仅仅是点出维度,AI 就已经知道「好看」的定义涉及哪些参数了。而更进一步的写法,见下一节。

提示词工程:三个可直接复用的实战模板

以下三个场景都是鱼在真实项目里反复用过的,替换一两个参数即可直接抄走。它们共同遵循一个公式,先记住它:

场景 1让 AI 当评委,挑出页面的毛病

把站点截图发给 AI:

你是顶级视觉设计师,审视这张网页截图。
按 [视觉权重 / 信息层级 / 留白节奏 / 色彩] 各打一个分(1-10),
给出问题严重度和修改建议,
最后按严重度排序,输出前 5 条修改清单。

要点:给具体维度 + 给评分要求 + 强制排序。三者齐备,AI 立刻进入专业评审状态,再也不会敷衍你一句「整体挺好的」。

场景 2让 AI 重做配色系统

主色是 #38f9d7(薄荷绿),整站走深色科技调,帮我配一套完整色板:
- 背景色(深底,3 个深度)
- 文字色(主标题、次标题、正文,3 个维度)
要求:色彩克制,整体不超过四个颜色,不要紫色渐变。

要点:最后一句「不要紫色渐变」是点睛之笔——用明文反例卡住 AI 的默认套路,否则它大概率会滑回训练数据里最常见的那套配色。这是鱼踩过坑才总结出来的。

场景 3让 AI 加克制的微动效

给首屏标题加一个入场动效:
- 打开页面时慢慢淡入出现,大概半秒钟
- 同时整个标题从下往上轻轻浮起一点
- 整体感觉要丝滑,不要弹跳和回弹
- 不要鼠标跟随,也不要自动循环

要点:注意看,动效指令的一半篇幅都在写「不要什么」。动效加得对页面有灵性,加得多整站抽风,禁止项就是防抽风的护栏。

工具与资源:少而精的外挂

经常有人问鱼:有没有好用的设计 Skill 或开源工具推荐?说实话,鱼本地装的 Skill 非常少,做过的项目九成以上都是原生 Claude Code / Codex 手搓的。原生工具的前端设计能力已经足够强,只要审美在线、掌握基本设计原则、会用 AI 能理解的设计系统语言下指令,产出优质页面并不依赖外挂。

如果非要推荐,鱼只推两个:

除此之外,鱼的做法是维护一个个人设计资源知识库:平时碰到不错的设计相关资源——流程图工具、特定风格的小工具等——看完有印象就归档进去,后续项目用到时直接去翻,比临时搜索高效得多。

从零做一套原创设计的工作流

套用现成风格之外,如果想做一套完全属于自己的原创设计,鱼的工作流是三步:

流程铁律:前端设计永远放在最后

最后是一条流程层面的原则。很多人开发项目时喜欢边做功能边调设计,鱼明确不建议。

如果拿不准站点该走什么风格——苹果风极简、科技深绿、杂志风,甚至主题色都没想好——不要先让 AI 直接写代码,而是:

先选型,再实现,才是高效且正确的使用方式。

结语

AI 时代,「做得出来」已经变得容易,但做出来的东西有没有审美是另一回事。鱼的答案是,我们不需要人人成为艺术家或设计师,需要做的只有两件事:

1. 尽力提升自己的审美——多看、多在细节上较真,抬高自己这个「上限」;
2. 用正确的方法指挥 AI——分清设计的四个领域,掌握视觉四要素的参数体系,用「维度 + 参数 + 反例」的公式写提示词,让最强的「有审美能力」的 AI 为你所用。

两者相乘,才是普通人在 AI 时代做出高审美产品的完整路径。

提示词模板速查

上线前视觉自检清单

点一下就能勾掉。发布前,把 10 项全部清零再上线。