掌握这4个设计法则 ，让你的 AI 网页更高级 ！
· 2026-07-29 01:06:26
前言
如果你读过了这个系列的计法前两篇文章 ，相信你已经解决了 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
- 一个页面里最多使用 2–3 种字体 ，是大多数网站设计中比较稳妥的做法 ，其余层级变化可以通过字号、字重 、字距来完成。
- 中文字体文件通常较大 ，全量加载会增加网页的加载时间，假如你只是想在标题里用个特殊字体突显品牌感 ，建议对字体进行子集化处理——简单说就是只提取并加载你用到的那些字 ，尽量把字体文件大小控制在 200KB 以内 。
- 如果你的网站中涵盖需要被强调的数字 ，可以特意选择一种好看的数字字体 。
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 Design2
比如我觉得上一篇文章中模仿 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
- 尺寸基于4px网格 ：规范图标外框为16px 、20px 、24px 、32px等尺寸
- 与文本视觉对齐 ：图标与文本混排时 ，通常需要比文本字号大 2-4px 才能视觉对齐（例如 ：14px 文字配 16px 图标；16px 文字配 20px 图标）
- 与文字保持适当间距：建议保持 4px (gap-1) 或 8px (gap-2) 的间距 ，并确保两者对齐
2. 图片使用原则
视觉审美
- 选取高质量图片 ：拒绝模糊 、噪点和拉伸变形 ，主体要清晰，背景不要太乱 ，以免干扰文字阅读
- 和品牌色调匹配 ：图片的色温应与你的品牌色呼应 ，例如科技风网站选冷色调图 ，生活类选暖色调图 。
如果你不想使用版权不明的网络图片 ，下方提供了设计工程师常用的资源库 。
适配规则
- 防止图片变形 ：确保图片使用 object-cover 样式（对应设计软件中的 Fill 填充） ，以防止图片随意拉伸
- 使用响应式图片 ：为重要图片提供多种尺寸，用 srcset 列出这些版本 ，再用 sizes 告诉浏览器在不同屏幕宽度下图片大概要多宽 ，让浏览器自动挑选最合适的一张 ，而不是在手机上也下载桌面端的大图
性能优化
- 控制体积与尺寸：网页图片需具备足够清晰度 ，但也不是体积越大越好，图片过大导致加载速度缓慢会影响网站排名。因此我们最好控制单张图片尺寸和体积（比如 1500–2500px、<500KB），否则大图会拖慢加载 ，影响 SEO
- 使用懒加载技术 ：为非首屏图片添加 loading="lazy" 属性 ，这被称为懒加载技术，意味着只有当用户滚动到图片位置时 ，图片才会被真正下载，能极大节省带宽
- 使用预加载技术 ：对于首屏最重要的图片或视频封面，应明确标记为最高优先级（使用 fetchpriority="high" 或 preload） ，确保它们在页面加载时以最高优先级显示
- 优先使用现代格式 ：如果你的网站图片较多 ，在上线阶段尽量使用 WebP、AVIF 等现代图片格式，在相同主观画质下 ，相比JPEG/PNG 通常能减少约 25%–30% 的体积 。
我将icon和配图的优秀资源整理在了多维表格中 ：
- 《AI 编程颜值急救课》飞书链接 ：
https://ai.feishu.cn/wiki/J28Aw3hYKikssMkzPqSc0WsgnFh?from=from_copylink - 《icon 和配图资源》多维表格
：
https://ai.feishu.cn/wiki/IyTzwfdNKiKiS1krckNcpOZFnje?from=from_copylink - 《前端开发工具箱》多维表格 ：
https://ai.feishu.cn/wiki/YCH4w8Hgki2No2kUFazctV4QnVe?from=from_copylink
五 、前端开发工具推荐
同时这里也有一些好用的开发工具推荐大家尝试 ：
结语
手握称手的Coding工具 ，学会用提示词描述美感 ，再掌握专业的设计法则 ，我们可以从那个只会点击生成按钮的旁观者，蜕变成一个拥有审美决策权的产品创造者 。
其实 AI 的存在并不是要替我们完成所有思考 ，而是帮我们分担掉那些枯燥的重复劳动 ，让我们能腾出精力去打磨那些真正让产品动人的细节 。相信掌握了这些颜值急救法则 ，我们能更从容地指挥 AI ，把脑海中的想法一点点磨成更有质感的作品。
AI Coding 的浪潮才刚刚开始 ，工具会不断迭代 ，但我们对美的感知和对规则的掌控 ，将是这个时代最核心的竞争力 。期待在这个充满可能性的时代 ，我们都能做出有灵魂的作品 。
设计 ：Bay的设计奥德赛
文章推荐：
往日人平易近币汇率灵敏拉升 专家料想 ：央行还将有行动来晃荡市场预期
余额宝为代表的货泉基金正蚕食传统存款营业 上市银行净利流损掉落踪落