掌握这4个设计法则，让你的 AI 网页更高级！

前言

如果你读过了这个系列的前两篇文章，相信你已经解决了 AI Coding 中「用什么写」和「怎么描述设计」这两大基础问题。但随着 Shadcn/ui 等组件库在 AI 代码生成产品中的广泛使用，Vibe Coding 的作品往往容易陷入同质化，缺乏独特的品牌感。

要让你的产品从Demo升级为具有独立灵魂的产品，我们需要了解更具体的设计规则，在此基础上根据目标人群与品牌调性，做出更明确的设计决策。

本篇我们将介绍4个不容易出错的设计法则，并提供进阶的学习资源。这将帮助你把抽象模糊的指令，转化为 AI 能够严格执行的色值、字体与间距参数，实现对视觉细节的精准把控。

由于篇幅问题，本篇我截取了知识库中最核心的观点进行呈现，完整版可以期待下「AI Coding 知识库 - 设计篇」～

以下是本文大纲：

文中提到的「icon和配图资源」、「前端开发工具箱」多维表格和完整版提示词可以在公众号后台回复关键词 「网页设计基础」访问原文获取。

一、字体字号：阶梯比例与搭配技巧

1. Web 字号阶梯

如果想要保持网站字号大小看起来和谐，首先要遵循 Type Scale（字号阶梯） 规则。

简单来说，字号阶梯就是选定一个基础字号（Base Size），然后按照一个固定比例（Ratio） 向上递增，生成一套有数学美感的字号系统

基础字号 (Base Size)：通常设为 16px（浏览器默认大小，适合阅读）。

常用比例 (Ratio)：

当你设定好网页基础字号后，可以输入这样一段Prompt让AI帮你计算网站的字号：

基础字号为 16px。
请使用 Major Third (1.25)  的字号阶梯来构建排版层级，以确保视觉平衡和专业感

AI 会自动帮你算出：

另外你还可以使用 Typescale工具 在预设好的模板上调节字体、字号、字重、颜色等元素，直观看到不同设置项之间的差异，从而给自己的网站选择最合适的字体参数。

2. 常用字体推荐

字体作为网页中出现频次最高的元素，直接影响了用户的阅读体验和品牌感知。

在 Vibe Coding 过程中，我们很容易给出类似“要现代一点的字体”这种模糊指令，但这往往会导致模型随机发挥。想要精准控制效果，最直接的方法就是指定具体的字体名称。

这里我整合了 Google、Figma 等平台的建议，整理了以下这份免费可商用字体清单。

3. 字体搭配

观察近几年AI产品的 Landing Page ，出现了英文Serif (衬线体)、Sans-serif (非衬线体)混用的情况。衬线体作为装饰，可以将核心信息从页面内容中跳脱出来，有助于树立别具一格的品牌感受，非衬线体则更多被应用于产品正文中，保证用户阅读体验。

Luma AI、Perplexity

一些搭配 Tips

1. 一个页面里最多使用 2–3 种字体，是大多数网站设计中比较稳妥的做法，其余层级变化可以通过字号、字重、字距来完成。
2. 中文字体文件通常较大，全量加载会增加网页的加载时间，假如你只是想在标题里用个特殊字体突显品牌感，建议对字体进行子集化处理——简单说就是只提取并加载你用到的那些字，尽量把字体文件大小控制在 200KB 以内。
3. 如果你的网站中涵盖需要被强调的数字，可以特意选择一种好看的数字字体。

Dify

通过下图对比可见，默认字体的数字通常缺乏性格（如 PingFang SC）。而特意挑选的数字字体能打破沉闷，让关键数据从页面中跳脱出来，形成更高级的视觉节奏。

如果你的网站涉及字体混用，在代码中定义字体时，注意优先定义英文字体，将中文字体放在最后，例如：

theme: {
  extend: {
    fontFamily: {
      sans: [
        "Inter",          // 1. 英文字体 (优先负责数字、英文)
        "Noto Sans SC",   // 2. 中文字体 (负责汉字显示)
        "sans-serif",     // 3. 通用字体族 (系统默认的保底选项)
      ], 
    },
  },
}

这样做是因为通常英文字体不包含汉字，而常用中文字体中包含 a–z 英文字母和数字，浏览器渲染字体时会严格按照 font-family 的顺序查找，使用第一个包含该字符的字体。如果我们将中文字体放在第一位，页面里的英文和数字就会优先由中文字体来渲染；反过来，把 Inter 放在最前面，就能让英文和数字使用 Inter，汉字再回退到 Noto Sans SC。

尽量选择上下间距对称的UI 友好字体用于软件开发，可以减少很多对齐还原问题：

二、色彩搭配：60-30-10法则

1. 60-30-10 配色原则

这是室内设计领域的黄金法则，在网页设计中，它是防止色彩混乱、建立视觉秩序有效的手段。如果你希望网页保持简约干净，可以按照这个原则审查网页设计：

60% 背景色（Background）：页面整体基调。通常使用中性色（白色、浅灰、或者深色模式下的深灰），保证耐看和留白感。你也可以选择拥有一点点品牌色倾向的颜色，避免纯白的生硬冷漠感，让页面弥漫着淡淡的品牌氛围；

30% 辅助色（Secondary）：用于卡片背景、次级按钮、文本选中态等，通常是强调色的邻近色，或者深浅不同的变体，负责建立视觉层级；

注意：不应使用高饱和度的彩色，会喧宾夺主

10% 强调色（Primary）：用于行动按钮（CTA 按钮）、链接、高亮图标等，可以直接使用品牌主色或与主色对比明显的颜色，用来吸引用户的注意力；

比如我觉得上一篇文章中模仿 Material design 风格生成的网站用色过多了（下图左），便尝试使用 60-30-10 法则让 AI 自行迭代，输入提示词后可以看到优化效果非常明显：

请对当前页面应用 60-30-10 配色法则（60% 主色-30% 辅助色-10% 强调色），
对页面进行去噪处理，
以消除多种颜色在页面上的过度使用，并优化视觉层级，让重点信息更突出

2. 如何为网站配色

从品牌色获得色阶

那么如何获得那些带品牌倾向的浅色背景或深浅合适的按钮色呢？

这里介绍一个好用的工具 Kigen Color Generator，你可以在左上角RGB值位置输入品牌色，右侧的Shade Count 表示色阶数量，默认生成从最浅 (50) 到最深 (950) 的 11 个颜色，完美对应 Tailwind CSS 的标准色阶系统。

50-100 (最浅)：可用于大面积背景底色、极浅卡片背景，如果希望背景带一点点品牌倾向，而不是纯白纯黑，那么可以使用这个色值；

200-300 (较浅)：可用于 组件边框、分割线、输入框背景或次要卡片背景；

400-600 (中间)：通常为核心色域。通常用于普通实色按钮、图标、Logo；

600-800 (较深)：可用于鼠标悬停 (Hover) 状态。用户把鼠标放上去时，按钮变深一点，提供交互反馈，也可以用作暗黑模式下的深色背景；

800-950 (最深)：可用于标题与正文文字。使用极深色替代纯黑，能提升页面的质感与协调性，也可以用作暗黑模式下的深色背景。

网站的下方你可以直接复制颜色Token到代码文件中进行使用。

三、排版布局：用间距节奏建立呼吸感

1. 栅格系统：稳定视觉重心

通常在网页设计时，设计师会定义网页的栅格系统来作为排版布局的参考。这套系统的核心目的是让所有内容都对齐在一套隐形轨道上，栅格系统是对齐和秩序的基础，可以帮助网页设计节奏清晰。

在栅格系统指导下可以衍生出多种排版方式

而在Vibe Coding时，目前的AI能力无法让我们建立详细、严格的栅格系统，如果你发现你的网站布局比较乱，可以尝试这样审查AI生成的内容：

页面设定了统一的内容宽度和左右边距，让正文区在页面中有一个稳定的视觉重心，而不是贴边摆放；

左侧网页边距合适，更有呼吸感

关键信息（标题、正文、主要卡片、页脚）尽量都落在同一套内容宽度和对齐线上；

Our Menu、Visit US 模块的卡片超出了最小边距，影响了视觉节奏

栅格系统是灵活的，部分模块可根据需求单独成块，不一定非要完全统一对齐到同一条栅格线上；

像Hero 区的大图、背景插画等装饰性元素可以适度溢出。

2. 行长：控制阅读节奏

为保证阅读舒适度，我们需要控制每行文字字数。

在英文网站中，正文的理想行长应控制在 45 ~ 75 个字符之间（粗略算大概 10 个英文单词一行），超过 75 个字符，会导致用户眼球移动距离过长，阅读极其疲劳；低于 45 个字符，又会让句子被频繁打断，阅读感被切碎。

如果是中文网站，中文是高密度的方块字，字与字之间没有明显的空格作为视觉停顿，因此信息密度更大，通常正文建议保持每行 35–45 个汉字左右。

当然，这个数字也并非完全绝对。阅读舒适度本质上是字号、行长与行高三者的动态平衡。例如，当你使用了更宽松的行高（如 1.8 倍以上）时，视觉上完全可以容忍略宽的行长，因此字符数可以搭配不同的字体及行高适时调整。

如下图，第一段篇幅很短，但适合微型文案；第二段太短，不符合标准段落文本的要求；第三段长度差不多；第四段则太长 。

By Google Fonts

此外，需要警惕在文本断句上AI的处理并不会特别细致，容易出现在专有名词中间断句，或在行末出现只剩一个词的“孤儿行”现象。一些关键场景建议大家仔细检查，手动调节。

两个均由 Gemini 3 生成的网页，在 Hero 文案的处理上，下方会比上方更好

3. 间距节奏

留白与间距是视觉层级的核心工具 —— 彼此靠得更近的元素，会被自然认为是同一组；距离更远的，会被认为是不同组（这就是著名的格式塔亲密度法则），因此并非所有的内容都要等距排列。

正如下面这个案例：左侧是AI生成的Pricing 卡片方案。经过调整，标题、价格这样的相关内容紧密分组，权益列表也更紧密，只用了3种间距数值，便构建出更清晰的视觉层级，让用户一眼就能抓住卡片中的重点。

间距使用 4px、8px 的倍数

如果你想要更细节的调节页面间距，那么这条规则可以遵循：

通常设计师们在调整间距时会使用4或8的倍数：4, 8, 12, 16, 24, 32, 48, 64, 80... 这可以避免单数间距在元素缩放时导致的模糊虚边，可以让界面在视觉上统一、易于维护。

你也可以输入这段话，尝试规范AI的布局输出：

四、icon和配图：使用高品质素材

1. Icon 使用原则

保持一致性：同一套Icon风格统一（线条粗细、填充/描边风格）你可以在提示词中让AI使用一套图标库来保证风格统一

Google Material Symbols 中不同属性的图标

引入图标库的Prompt

1. 尺寸基于4px网格：规范图标外框为16px、20px、24px、32px等尺寸
2. 与文本视觉对齐：图标与文本混排时，通常需要比文本字号大 2-4px 才能视觉对齐（例如：14px 文字配 16px 图标；16px 文字配 20px 图标）
3. 与文字保持适当间距：建议保持 4px (gap-1) 或 8px (gap-2) 的间距，并确保两者对齐

2. 图片使用原则

视觉审美

1. 选取高质量图片：拒绝模糊、噪点和拉伸变形，主体要清晰，背景不要太乱，以免干扰文字阅读
2. 和品牌色调匹配：图片的色温应与你的品牌色呼应，例如科技风网站选冷色调图，生活类选暖色调图。

如果你不想使用版权不明的网络图片，下方提供了设计工程师常用的资源库。

适配规则

1. 防止图片变形：确保图片使用 object-cover 样式（对应设计软件中的 Fill 填充），以防止图片随意拉伸
2. 使用响应式图片：为重要图片提供多种尺寸，用 srcset 列出这些版本，再用 sizes 告诉浏览器在不同屏幕宽度下图片大概要多宽，让浏览器自动挑选最合适的一张，而不是在手机上也下载桌面端的大图

性能优化

1. 控制体积与尺寸：网页图片需具备足够清晰度，但也不是体积越大越好，图片过大导致加载速度缓慢会影响网站排名。因此我们最好控制单张图片尺寸和体积（比如 1500–2500px、<500KB），否则大图会拖慢加载，影响 SEO
2. 使用懒加载技术：为非首屏图片添加 loading="lazy" 属性，这被称为懒加载技术，意味着只有当用户滚动到图片位置时，图片才会被真正下载，能极大节省带宽
3. 使用预加载技术：对于首屏最重要的图片或视频封面，应明确标记为最高优先级（使用 fetchpriority="high" 或 preload），确保它们在页面加载时以最高优先级显示
4. 优先使用现代格式：如果你的网站图片较多，在上线阶段尽量使用 WebP、AVIF 等现代图片格式，在相同主观画质下，相比JPEG/PNG 通常能减少约 25%–30% 的体积。

我将icon和配图的优秀资源整理在了多维表格中：

1. 《AI 编程颜值急救课》飞书链接：
   https://ai.feishu.cn/wiki/J28Aw3hYKikssMkzPqSc0WsgnFh?from=from_copylink
2. 《icon 和配图资源》多维表格：
   https://ai.feishu.cn/wiki/IyTzwfdNKiKiS1krckNcpOZFnje?from=from_copylink
3. 《前端开发工具箱》多维表格：
   https://ai.feishu.cn/wiki/YCH4w8Hgki2No2kUFazctV4QnVe?from=from_copylink

五、前端开发工具推荐

同时这里也有一些好用的开发工具推荐大家尝试：

结语

手握称手的Coding工具，学会用提示词描述美感，再掌握专业的设计法则，我们可以从那个只会点击生成按钮的旁观者，蜕变成一个拥有审美决策权的产品创造者。

其实 AI 的存在并不是要替我们完成所有思考，而是帮我们分担掉那些枯燥的重复劳动，让我们能腾出精力去打磨那些真正让产品动人的细节。相信掌握了这些颜值急救法则，我们能更从容地指挥 AI，把脑海中的想法一点点磨成更有质感的作品。

AI Coding 的浪潮才刚刚开始，工具会不断迭代，但我们对美的感知和对规则的掌控，将是这个时代最核心的竞争力。期待在这个充满可能性的时代，我们都能做出有灵魂的作品。