11.AI 学习之路 · 实战篇之「个人站点系列：先聊设计与审美」

兄弟们，从今天开始，给大家更新 AI 实战篇的全新系列——AI 个人站点。

不管是以前移动互联网的个人 IP，还是当下人人都在聊的 OPC，但是 AI 时代，每个人第一步先拥有一个专属自己的，面向全球的个人品牌站点，都是一件很必要，而且很酷的事。

从技术层面来说，个人品牌站点，本质就是一个纯前端静态网页，借助 AI 实现起来很简单，甚至看到不错的个人站点，让 AI 都可以很快复制，但是那是 AI 的能力，不是你的能力。

就像我之前给大家写的 AI 知识库系列教程，你把文档全部扔给 AI，也可以很快实现一个专属于自己的知识库产品。

但是下次让你独立做一个全新的项目或者产品，你依然不知道从何下手。

这就是我之所以要费很大功夫，给大家出通俗易懂的教程的意义，每个人务必都要亲自阅读和实践，尽力去理解。

话说回来，网上「3 分钟让 AI 做出大厂级网页」的教程一搜一大堆，但是这个系列教程，我依然不教大家上来就干，而是先单独花很长的篇幅来聊聊审美与设计这件事。

01 审美的重要性

我之前就说过，当下的 AI 能力很强，但是对人的综合要求也更高，而审美与设计，就是其中一个很重要的能力。

因为人人都可以用 AI 很快做出些产品来，但是你的产品有没有审美，决定了是否被用户一眼喜欢，是否在同类产品中有优势，是很重要的一环。

拿我自己举例子，我做的内部产品和工具，无所谓，但是只要我面向公开市场发布的产品，我在设计层面都会很重视，甚至很多小产品和小工具，反而是设计细节上投入的时间最多。

我自己本身不是设计师，更没有单独学过设计，但是我在用 AI 的过程中，我知道 AI 在设计领域的审美边界在哪里，我在大量项目的实践中，也逐渐积累了一些做设计的实操经验，今天这篇文章，我会把我所积累的所有设计经验和盘托出，只希望所有球友看完这篇文章之后，你之后做出的产品，可以在审美上有很大提升。

02 你的审美，决定了 AI 审美的上限

很多人在设计上，有一个最大的误区，认为 AI 无所不能，天然也是具备审美的，可是实际体验下来发现，大家用着同样的工具和大模型，做出来的东西却千差万别。

AI 本质上是没有审美的，之所以你感受到 AI 做出来的东西起码比你本人做出来的要好看多了，那是因为 AI 底层做了一些约束，包括市面上一些设计相关的 skill 或者工具，内置了一些前端设计的原则，知道什么颜色配什么颜色好看，知道做网页四周要留白，知道标题和正文该配什么样的字体和字号等等。

也就是说，这些设计原则的约束才让 AI 具备审美的，但是给 AI 定义这些设计原则的背后还是人。

你的审美，决定了 AI 审美的上限

如果一张海报，你自己都不知道好不好看，有没有品味，那 AI 更不知道了。

而不同的人，审美是不一样的。

今天同一套穿搭，不同的人看法会不一样，有人觉得好看，有人会觉得很丑。

好比今天一位普通人，和一位顶级设计师，他们装修的房子审美差异会非常大。

但是我们不可能每个人都成为设计师，AI 时代把审美下限拉高了，合理使用 AI 天然自带的设计能力，你做出来的东西不至于很丑。

什么意思呢？

没有 AI 的时代，不具备设计能力的程序员做的产品，审美设计可能只有 50 分，但是借助当下的 AI，再低也可以达到 70 分，这就是 AI 把审美下限拉高了。但是如果你想把你的产品审美拔高到 90 分甚至更高，那就是你个人审美决定的。

AI 不会替你「拔高」品味，它只会忠实执行你的判断。你能看出多好，它就做出多好；你说不清哪不对，它就交出一份 70 分的均值答案。

我们不是设计师，更不是艺术家，我们要做的就是掌握基本的设计原则，知道 AI 设计边界在哪里，合理指挥 AI 去帮我们做工程化的设计，提高到 80 分不是问题。

至于个人审美怎么提升？

我想说，就是多看，多注意细节。

比如以前写代码的时候，我会有代码洁癖，现在写文章一样，函数命名不规范，文档多一个空格和换行，是用连字符还是下划线我都会很在意。

我用的终端配色主题，不喜欢的话我不会将就，要立马寻找一套我看着舒服的。

我自己做的页面，如果被我发现左右留白不对称，我一定忍受不了，会立刻调整。

当然不是说我的审美多高级，并不是，我们大部分人都是普通人，我不是让大家想办法成为设计师或者艺术家，审美是没有绝对的，我们能做的，就是从工程和产品的细节层面，注意点点滴滴，把你那个「上限」往上抬一抬，那么你做出来的产品审美就可以起码到 80 分。

03 Claude Code vs Codex，前端设计能力到底差多少

前面我说了，AI 本质是没有绝对的审美的，它的所谓「审美」是建立在前端设计能力上的，你直接一句话让 cc 或者 codex 帮你做个页面，它都不会给你做得很丑，起码它会遵循基本的设计原则。

人和人之间有审美差异，但是很多人不知道的是，Claude Code 和 Codex 也是有审美差异的，这个审美差异就是前端设计能力的差异。

如果你深度使用 cc 和 codex，相信很多人应该感受到，同样的粗略提示词，cc 和 codex 做出来的产品设计有很大差异。

全球盲投打分排行榜单 Arena，在单纯的基础前端设计能力层面，cc 家族的大模型全面领先 codex 系。

我们应该都听过 cc 是有审美的，在前端开发中，有两个层面，一是大模型层面，也就是 Opus 对比 GPT，二是设计工具层面，比如 Claude 官方自带 frontend-design 和 Claude-Design，本质就是体现在前端设计能力上，cc 吊打 codex。

有人说，你不是扯淡么？

codex 明明也很强，我现在用 codex 也可以做出一个很好看，审美很在线的网页。

那是因为你的审美在线，同时你也掌握了精准指挥 AI 实现调整细节的能力。

我前面有个前提，是在粗略提示词的情况下，比如你同时让 cc 和 codex 做一个好看的海报，或者一个好看的网页，不用任何设计相关的 skill 和工具，cc 和 codex 出来的东西绝对不一样，codex 天然出来是工程师角度的产品，而 cc 相对更偏设计师角度。

你后面一步步优化，用什么字体，留白多少，字间距行间距多少，主题配色怎么搭配，那是借助你自己的审美，精准操控 AI 去调细节，它俩只是去执行与实现，当然最后可以做到同样的效果。

当然，如果你用其他国产大模型，它们基础前端设计能力更弱，同样的你让它们做一个好看的海报，它们的审美下限会更低。

不过，codex 用户不用担心要不要转投 cc，大可不必，codex 和 gpt 最近已经一直在不断加强前端设计能力，现在差距已经越来越小，GPT 5.6 前端设计能力已经大幅加强，只是现在还不能用，等等就好。

04 设计不是一件事：四个领域你得分清

我们没必要成为设计师，但是起码要知道设计领域一些设计原则和专有名词吧。

就好比，你不需要会修汽车，但是你起码得知道汽车领域有一些专有名词，轮胎、方向盘、发动机、后备箱等分别是做什么用的吧。

所以我们要先了解下设计领域有哪些维度和原则，这样才能更好地指挥 AI 去干设计师的活。

聊到「设计」，大多数人脑子里只有一件事——「好看」。

错。「好看」是结果，不是输入。真正的设计是个系统，它包含了很多方面，但是对于大部分人来说，你需要了解以下至少四个领域：

• 品牌（Brand）：定调子。你的站要传递什么气质——极客、文艺、商务、反差萌？

• 视觉（Visual）：让人第一眼舒服。结构、配色、字体、间距——读者打开站 3 秒做决定走不走，看的就是这四件事

• 动效（Motion）：让网页活起来。动效不是炫技，是引导视线和暗示交互。加得对网页有灵性；加得多整站抽风

• 交互（Interaction）：让网页会聊天。按钮有没有反馈？表单填错给不给提示？这些决定了用户用得顺还是别扭

类比：开餐厅。品牌是你卖什么菜系，视觉是装修和摆盘，动效是上菜节奏，交互是服务员态度。

一个成熟的商业级网站或产品，四件缺一不可，每一件都做得很对，整体审美品味就会上去。

对于市面上的大部分产品，视觉层面占了非常大的比重，而如果你想提升你的网站审美，80% 的工作量都是在视觉层面，所以接下来就主讲视觉设计。

05 视觉设计：好看的网页就拆成四件事

视觉设计如果再细分的话，再拆就是这四件事。

结构：先决定你站的「骨」

主流个人站不外乎三种：

• 左对齐叙事流——像写一篇文章自上而下读，适合写作者

• 居中聚焦式——中间一柱大字 + 链接堆，适合产品人 / 品牌人

• 网格陈列式——作品堆成 grid，适合设计师 / 摄影师

选一个，别混。混着用就是四不像。

配色：色彩有限制反而好看

核心反直觉规则：4 色封顶——主色、辅色、背景色、文字色。多了就乱，当然也不能乱配，比如你红配绿，肯定不好看，但是你定个主色之后，其他的交给 AI，cc/codex 的主题配色是基本的前端设计能力。

三类常见调子：

• 深色科技调（深蓝底 + 青/绿主色）：适合技术人

• 浅色干净调（白底 + 黑字 + 一抹小亮色）：适合写作者

• 高对比强观点调（黄黑、红黑、紫黑）：适合个性鲜明、想被记住的人

我自己 stormzhang.ai 用的是深色科技调，主色 #38f9d7——薄荷绿 + 深 slate 蓝。**为啥选这俩？** 这色在深底上既亮眼又不刺眼、还不会被人误读成「游戏感」或「金融感」，正好卡在「技术人」这个位置。**色彩选择是一道身份问题，不是审美问题**。

字体：网页是被字撑起来的

99% 的网页好不好看，字体占了一半。

中英文搭配标准答案：

• 英文：Inter / Geist / Satoshi / Manrope（别再用默认 Inter 了，Anthropic 自爆里第一个点名的就是它）

• 中文：PingFang SC（苹果系统自带）/ HarmonyOS Sans / 思源黑体

字号梯度至少四级：大标题（48-72px）/ 中标题（24-32px）/ 正文（16-18px）/ 注释（13-14px）。

❌ 新手两大病：默认字体 + 14px 灰字——肉眼可见的廉价感。

间距：贵气是留白堆出来的

好看的网页都很「空」。

记住 8 倍数体系：4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128。所有间距都从这串里取，不要写 13px、27px 这种魔法数字。你这么要求 AI，它会乖乖照办。

💡 一句话总结：视觉四件事每一件都是单独的判断题，拆开看你就能给 AI 下精确指令

至此你知道视觉设计包含的几个方面，就可以直接写一个比较宽泛的、让 AI 优化的提示词，不再是「帮我做得好看点」，而是「视觉层面帮我优化下，包含字体、字号、留白、间距、配色等，整体有设计感」，起码 AI 就知道好看的定义是涉及到哪些参数了。

06 借 CC 做设计优化的 4 个真实场景

讲完判断维度，进入实操。下面 4 个场景都是我 stormzhang.ai 迭代时反复用的话术，直接抄走改两个参数就能用。

场景 1：让 CC 当评委，挑你站的毛病

把你站截图扔进 CC：

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

关键是给具体维度 + 给评分要求 + 强制排序——CC 立刻就专业了，再也不会说「挺好的」。

场景 2：让 CC 重做配色系统

我的主色是 #38f9d7（薄荷绿），整站走深色科技调。
请给我配一套完整色板：
- 背景色（深底，3 个深度）
- 文字色（主标题、次标题、正文，3 个维度）
要求：色彩克制，整体不超过四个颜色，不要紫色渐变，不要彩虹色阶。

关键是最后一句「不要紫色渐变」——明文卡住 CC 的默认套路。

场景 3：让 CC 加克制的微动效

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

💡 一句话总结：把「再好看点」翻译成「维度 + 参数 + 反例」——这就是 prompt 工程在设计上的应用。

07 开源设计工具和 Skill

很多人老是问我，有没有好用的设计 skill 或者开源工具推荐的，我说实话，我自己本地装的 skill 非常少，我做的所有项目 90% 基本就是原生 cc/codex 手撸。

在设计层面，cc/codex 本身前端设计能力已经很强了，如果你的审美在线，加上掌握一些基本的设计原则，会精准用 AI 能够理解的设计系统提示词去指挥，能做出很不错的前端页面的。

如果非要推荐的话，我就推荐两个：

open-design

Anthropic 家的 claude-design 是额外收费的，而 open-design 你可以理解为 claude-design 的开源逆向版，免费使用。

还有一个是：

awesome-design-md

这个项目把全球顶级公司的网站设计提取出了一套专有设计系统，如果你没想法的时候，就可以直接指定你的网站按照什么公司的风格去做就好。

然后其它碰到我觉得不错的设计相关的，比如流程图，比如特定风格的小工具，我看完有印象后就直接扔到我的知识库，后续项目用到的时候，就直接去知识库翻。

08 stormzhang.ai 的设计灵感

我前面说了，我自己的网站没有套用任何现成风格，从一开始我就想做一套自己亲自设计的个人品牌站点。

如果你也想自己全新设计，第一步就先有灵感，我的灵感来源是当初深圳线下大会的「仰望星空，脚踏实地」主题。

有了灵感之后，我的大脑就开始构建我想要的模样，这一步非常重要，如果你自己的大脑都不知道最后你要的是什么蓝图，AI 更不知道了。

在开始动工之前，我的大脑蓝图就有背景是星空，有地球、有银河、有星星、有流星。

接下来就是一点点给 AI 提示词，一步步调整了。

很多人总是说，AI 时代，一句一句问，让 AI 一步步做是过时了，是不高效的做法。

但是我要告诉你们的是，如果是调设计细节，就需要一个元素、一个字体、一个动效的不断调整，这个场景，一句一句问答式的，AI 才可以精准地去一步步完成，你的产品细节和审美才能拔高。

我的个人品牌网站从功能开发，到部署上线可能只用了 2 小时，但是我调整设计细节花了我 2 天的时间。

当然，我做好之后，你们扔给 AI 很快就能克隆出一样的效果，但是我要教给你们的是方法论，是一整套做前端设计的正确方法，以后你们自己做全新项目全新设计的时候，可是不会有直接克隆的概念的。

09 前端设计永远放在最后

这里我必须要额外补充一点，很多人开发项目的时候，喜欢先做页面设计，我不建议这样。

永远先实现功能，功能实现完了，最后阶段，单独抽出时间去做前端设计，一点点调细节和审美。

而如果你不确定一些风格哪种更合适的时候，比如走苹果极简风、科技深绿风、杂志风，甚至主题色也不是很确定的时候，这个时候，不要先上手让 AI 直接写代码去试，直接让 AI 给你出一版各种不同风格的 demo 预览页，AI 会把这些风格和主题配色全放在一个页面上，你亲自肉眼看过，很直观地对比，确认过真实视觉效果，选定了之后，再让 AI 按照这个风格去实现，才是高效且正确的使用方式。

小结

这一篇依然没让大家写一行代码，但是算是系统地给大家做了设计领域的科普，把我自己借助 AI，做前端设计的所有经验全都分享给大家，和市面上教程完全不一样，这篇也不涉及任何技术内容，每个人都可以看懂并理解，接下来，大家可以对比去实操，去优化你现有的产品和工具，我相信一定有不一样的效果。

AI 时代，「做得出来」很容易，但做出来的东西有没有审美很重要。不需要我们每个人成为艺术家和设计师，只需要尽力提升自己本人的审美，尽力用上最强的「有审美能力」的 AI，尽力用正确高效的前端设计方法，综合维度都提升，相信你的产品审美上限也会提升。

本系列持续更新，建议收藏。