如果你读过了这个系列的前两篇文章，相信你已经解决了 AI Coding 中「用什么写」和「怎么描述设计」这两大基础问题。但随着 Shadcn/ui 等组件库在 AI 代码生成产品中的广泛使用，Vibe Coding 的作品往往容易陷入同质化，缺乏独特的品牌感。
要让你的产品从Demo升级为具有独立灵魂的产品，我们需要了解更具体的设计规则，在此基础上根据目标人群与品牌调性，做出更明确的设计决策。
本篇我们将介绍4个不容易出错的设计法则，并提供进阶的学习资源。这将帮助你把抽象模糊的指令，转化为 AI 能够严格执行的色值、字体与间距参数，实现对视觉细节的精准把控。
由于篇幅问题，本篇我截取了知识库中最核心的观点进行呈现，完整版可以期待下「AI Coding 知识库 - 设计篇」～
本系列前两篇：
以下是本文大纲：
如果想要保持网站字号大小看起来和谐，首先要遵循 Type Scale（字号阶梯） 规则。
简单来说，字号阶梯就是选定一个基础字号（Base Size），然后按照一个固定比例（Ratio） 向上递增，生成一套有数学美感的字号系统
基础字号 (Base Size)：通常设为 16px（浏览器默认大小，适合阅读）。
常用比例 (Ratio)：
| 推荐值 | 比例 | 视觉效果 | 适用场景 |
| 1.25 | Major Third | 层级温和，既有对比又不会过于夸张 | 适合 SaaS、工具类、博客等绝大多数场景 |
| 1.333 | Perfect Fourth | 对比更明显 | 适合需要强调标题的文章页 |
1.5 或 1.618 | 黄金比例 | 极具张力 | 适合强调视觉冲击力的 Marketing 营销页或Landing Page着陆页 |
当你设定好网页基础字号后，可以输入这样一段Prompt让AI帮你计算网站的字号：
基础字号为 16px。请使用 Major Third (1.25) 的字号阶梯来构建排版层级，以确保视觉平衡和专业感AI 会自动帮你算出：
| 用途 | 字号 |
| 正文 | 16px |
| 小标题 H4 | 20px |
| 中标题 H3 | 25px |
| 大标题 H2 | 31px |
| 主标题 H1 | 39px |
另外你还可以使用 Typescale工具 在预设好的模板上调节字体、字号、字重、颜色等元素，直观看到不同设置项之间的差异，从而给自己的网站选择最合适的字体参数。
字体作为网页中出现频次最高的元素，直接影响了用户的阅读体验和品牌感知。
在 Vibe Coding 过程中，我们很容易给出类似“要现代一点的字体”这种模糊指令，但这往往会导致模型随机发挥。想要精准控制效果，最直接的方法就是指定具体的字体名称。
这里我整合了 Google、Figma 等平台的建议，整理了以下这份免费可商用字体清单。
| 风格定位 | 适用场景 | 常用英文字体 |
| 现代通用 | 工具软件、后台管理、文档、覆盖大多数产品使用场景 | SF Pro、Open Sans、Montserrat、Poppins、Lato、Raleway、Manrope、Work Sans、Geist |
| 科技/极客 | 开发者工具、Web3、技术博客、终端风格 | Orbitron、Audiowide、Tektur、Michroma、Nova Square、Wallpoet、Space Grotesk、JetBrains Mono、Fira Code |
| 优雅人文 | 知识库、阅读类产品、营销落地页 | Playfair Display、Merriweather、Lora、EB Garamond、Libre Baskerville、Noto Serif、PT Serif、Crimson Text、Source Serif4、Cormorant Garamond |
| 图形化字体 | 适合作为品牌logo字体 | Rubik Glitch、Rubik Broken Fax、Rubik 80s Fade、Monoton、Headland One |
| 复古像素 | 复古品牌、装饰元素、怀旧设计、Y2K美学 | Pixelify Sans、Press Start 2P、VT323、DotGothic16、 Jersey 10、Tiny5、Bytesized |
| 温暖友好 | 儿童产品、教育应用、社区网站、生活方式品牌、零售、女性向产品 | Comfortaa, Nunito, Lato, Karla, Jost, Bree Serif, Smooch Sans, Averia Serif Libre, Lexend, Caveat、Nunito |
| 常用中文字体 | / | 苹方、思源黑体 (Noto Sans SC)、阿里普惠体、HarmonyOS Sans、MiSans、vivo Sans、OPPO Sans、微软雅黑、冬青黑体 |
| 数字字体 | 需要突出的数据 | Open Sans、Montserrat、Lexend、Outfit、Alexandria、Readex_Pro、Reddit_Sans、Sansation、albert sans、HarmonyOS Sans |
观察近几年AI产品的 Landing Page ，出现了英文Serif (衬线体)、Sans-serif (非衬线体)混用的情况。衬线体作为装饰，可以将核心信息从页面内容中跳脱出来，有助于树立别具一格的品牌感受，非衬线体则更多被应用于产品正文中，保证用户阅读体验。
Luma AI、Perplexity
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。
这是室内设计领域的黄金法则，在网页设计中，它是防止色彩混乱、建立视觉秩序有效的手段。如果你希望网页保持简约干净，可以按照这个原则审查网页设计：
图片来源：Material Design2
比如我觉得上一篇文章中模仿 Material design 风格生成的网站用色过多了（下图左），便尝试使用 60-30-10 法则让 AI 自行迭代，输入提示词后可以看到优化效果非常明显：
请对当前页面应用 60-30-10 配色法则（60% 主色-30% 辅助色-10% 强调色），
对页面进行去噪处理，
以消除多种颜色在页面上的过度使用，并优化视觉层级，让重点信息更突出
那么如何获得那些带品牌倾向的浅色背景或深浅合适的按钮色呢？
这里介绍一个好用的工具 Kigen Color Generator，你可以在左上角RGB值位置输入品牌色，右侧的Shade Count 表示色阶数量，默认生成从最浅 (50) 到最深 (950) 的 11 个颜色，完美对应 Tailwind CSS 的标准色阶系统。
网站的下方你可以直接复制颜色Token到代码文件中进行使用。
通常在网页设计时，设计师会定义网页的栅格系统来作为排版布局的参考。这套系统的核心目的是让所有内容都对齐在一套隐形轨道上，栅格系统是对齐和秩序的基础，可以帮助网页设计节奏清晰。
在栅格系统指导下可以衍生出多种排版方式
而在Vibe Coding时，目前的AI能力无法让我们建立详细、严格的栅格系统，如果你发现你的网站布局比较乱，可以尝试这样审查AI生成的内容：
左侧网页边距合适，更有呼吸感
Our Menu、Visit US 模块的卡片超出了最小边距，影响了视觉节奏
为了保证阅读舒适度，我们需要控制每行文字的字数。
在英文网站中，正文的理想行长应控制在 45 ~ 75 个字符之间（粗略算大概 10 个英文单词一行），超过 75 个字符，会导致用户眼球移动距离过长，阅读极其疲劳；低于 45 个字符，又会让句子被频繁打断，阅读感被切碎。
如果是中文网站，中文是高密度的方块字，字与字之间没有明显的空格作为视觉停顿，因此信息密度更大，通常正文建议保持每行 35–45 个汉字左右。
当然，这个数字也并非完全绝对。阅读舒适度本质上是字号、行长与行高三者的动态平衡。例如，当你使用了更宽松的行高（如 1.8 倍以上）时，视觉上完全可以容忍略宽的行长，因此字符数可以搭配不同的字体及行高适时调整。
如下图，第一段篇幅很短，但适合微型文案；第二段太短，不符合标准段落文本的要求；第三段长度差不多；第四段则太长 。
By Google Fonts
此外，需要警惕在文本段句上AI的处理并不会特别细致，容易出现在专有名词中间断句，或在行末出现只剩一个词的“孤儿行”现象。一些关键场景建议大家仔细检查，手动调节。
两个均由 Gemini 3 生成的网页，在 Hero 文案的处理上，下方会比上方更好
留白与间距是视觉层级的核心工具 —— 彼此靠得更近的元素，会被自然认为是同一组；距离更远的，会被认为是不同组（这就是著名的格式塔亲密度法则），因此并非所有的内容都要等距排列。
正如下面这个案例：左侧是AI生成的Pricing 卡片方案。经过调整，标题、价格这样的相关内容紧密分组，权益列表也更紧密，只用了3种间距数值，便构建出更清晰的视觉层级，让用户一眼就能抓住卡片中的重点。
如果你想要更细节的调节页面间距，那么这条规则可以遵循：
通常设计师们在调整间距时会使用4或8的倍数：4, 8, 12, 16, 24, 32, 48, 64, 80... 这可以避免单数间距在元素缩放时导致的模糊虚边，可以让界面在视觉上统一、易于维护。
| 间距值 | 典型用途 | 对应 Tailwind 类名 (参考) |
| 4px / 8px | 组件内部元素间距 (紧密) | gap-1, gap-2 |
| 16px | 卡片内边距、列表项间距 | p-4, gap-4 |
| 24px / 32px | 区块/组件之间的分隔 | mb-6, mb-8 |
| 64px - 128px | 大区域/板块之间的留白 (呼吸感) | py-20, py-32 |
你也可以输入这段话，尝试规范AI的布局输出：
Google Material Symbols 中不同属性的图标
引入图标库的Prompt
gap-1) 或 8px (gap-2) 的间距，并确保两者对齐选取高质量图片：拒绝模糊、噪点和拉伸变形，主体要清晰，背景不要太乱，以免干扰文字阅读
和品牌色调匹配：图片的色温应与你的品牌色呼应，例如科技风网站选冷色调图，生活类选暖色调图。
如果你不想使用版权不明的网络图片，下方提供了设计工程师常用的资源库。
防止图片变形：确保图片使用 object-cover 样式（对应设计软件中的 Fill 填充），以防止图片随意拉伸
使用响应式图片：为重要图片提供多种尺寸，用 srcset 列出这些版本，再用 sizes 告诉浏览器在不同屏幕宽度下图片大概要多宽，让浏览器自动挑选最合适的一张，而不是在手机上也下载桌面端的大图
控制体积与尺寸：网页图片需具备足够清晰度，但也不是体积越大越好，图片过大导致加载速度缓慢会影响网站排名。因此我们最好控制单张图片尺寸和体积（比如 1500–2500px、<500KB），否则大图会拖慢加载，影响 SEO
使用懒加载技术：为非首屏图片添加 loading="lazy" 属性，这被称为懒加载技术，意味着只有当用户滚动到图片位置时，图片才会被真正下载，能极大节省带宽
使用预加载技术：对于首屏最重要的图片或视频封面，应明确标记为最高优先级（使用 fetchpriority="high" 或 preload），确保它们在页面加载时以最高优先级显示
优先使用现代格式：如果你的网站图片较多，在上线阶段尽量使用 WebP、AVIF 等现代图片格式，在相同主观画质下，相比JPEG/PNG 通常能减少约 25%–30% 的体积。
我将icon和配图的优秀资源整理在了多维表格中：https://ai.feishu.cn/wiki/IyTzwfdNKiKiS1krckNcpOZFnje?from=from_copylink
同时这里也有一些好用的开发工具推荐大家尝试：https://ai.feishu.cn/wiki/YCH4w8Hgki2No2kUFazctV4QnVe?from=from_copylink
手握称手的Coding工具，学会用提示词描述美感，再掌握专业的设计法则，我们可以从那个只会点击生成按钮的旁观者，蜕变成一个拥有审美决策权的产品创造者。
其实 AI 的存在并不是要替我们完成所有思考，而是帮我们分担掉那些枯燥的重复劳动，让我们能腾出精力去打磨那些真正让产品动人的细节。相信掌握了这些颜值急救法则，我们能更从容地指挥 AI，把脑海中的想法一点点磨成更有质感的作品。
AI Coding 的浪潮才刚刚开始，工具会不断迭代，但我们对美的感知和对规则的掌控，将是这个时代最核心的竞争力。期待在这个充满可能性的时代，我们都能做出有灵魂的作品。
不会设计也能搭出高级感网页：小白可用的 AI Coding 提示词模板 & 精品组件库推荐
11 款前端工具测评：给编程小白的 Vibe Coding 推荐榜
用 Agent Vibe Coding靠谱吗？7天制作2个网站，Flowith、Manus的实践、踩坑与思考
AI开发实践，小白如何用5k行代码打造个人项目？（完整经验复盘 + Cursor 提效攻略）
Perplexity 团队深度解析｜组织协作、AI原生产品体验与品牌美学
AI时代的工作模式｜Cursor设计主管专访，专业边界与学习路径的重新定义
AI视频进展速读｜Runway超强生图能力、Veo免费体验、3个剪辑新产品、优秀短片及提示词技巧
AI视频进展速读｜5个老牌产品更新，2个新产品动向，8个创意转绘、广告、动漫案例精选
AI视频进展速读｜Pika高速更新，动漫风格神仙打架，Wan 2.1成为最强开源模型
GPT-4o旅行贴纸创作全攻略｜城市系列、动漫系列、提示词技巧分享
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。