一、字体字号：阶梯比例与搭配技巧
1. Web 字号阶梯：打造和谐排版
字号阶梯（Type Scale）是网页排版的核心：选定基础字号，按固定比例递增，生成具备数学美感的字号系统。
- 基础字号：默认 16px（浏览器标准，适配阅读）
- 常用比例：
- 1.25（Major Third）：层级温和，适配 SaaS、工具、博客等绝大多数场景
- 1.333（Perfect Fourth）：对比鲜明，适合标题突出的文章页
- 1.5/1.618（黄金比例）：视觉张力强，适配营销页、落地页
AI 生成提示词：
基础字号为 16px，使用 Major Third（1.25）字号阶梯构建排版层级，保证视觉平衡与专业感。
可借助Typescale 工具，直观调节字体、字号、字重、颜色，快速选定最优参数。
2. 免费可商用字体推荐
避免模糊指令「要现代字体」，直接指定字体名称，精准控制效果：
- 现代通用：SF Pro、Open Sans、Montserrat、Poppins，适配工具软件、后台、文档
- 科技极客：Orbitron、Space Grotesk、Fira Code，适配开发者工具、Web3、技术博客
- 优雅人文：Playfair Display、Lora、Noto Serif，适配知识库、阅读类产品、营销页
- 温暖友好：Nunito、Lexend、Comfortaa，适配教育、社区、女性向产品
- 中文字体：思源黑体、阿里普惠体、MiSans、HarmonyOS Sans
- 数字专用：Outfit、Montserrat、Lexend，突出数据展示
3. 字体搭配核心技巧
- 单页字体控制在2-3 种，层级变化用字号、字重、字距实现
- 中文字体建议子集化处理，文件大小控制在 200KB 内，提升加载速度
- 英文 + 中文混排时，优先定义英文字体，再回退中文字体，保证英文 / 数字展示效果
- 优先选择上下间距对称的 UI 友好字体，减少对齐问题
二、色彩搭配：60-30-10 黄金法则
1. 60-30-10 配色原则
源自室内设计的黄金法则，是网页避免色彩混乱、建立视觉秩序的最优方案：
- 60% 背景色：页面主基调，用中性色或浅品牌色，营造留白与质感
- 30% 辅助色：卡片、次级按钮、选中态，用品牌色邻近色，构建层级
- 10% 强调色：CTA 按钮、链接、高亮图标，用主色 / 对比色，聚焦用户注意力
AI 优化提示词：
对页面应用 60-30-10 配色法则，去噪处理，减少色彩滥用，优化视觉层级，突出重点信息。
2. 专业色阶生成
使用Kigen Color Generator，输入品牌色即可自动生成 Tailwind CSS 标准色阶：
- 50-100：大面积背景、浅卡片
- 200-300：边框、分割线、输入框背景
- 400-600：核心按钮、图标、Logo
- 600-800：Hover 态、暗黑模式背景
- 800-950：标题、正文文字（替代纯黑，提升质感）
色阶可直接复制为 CSS Token，一键接入代码。
三、排版布局：用间距节奏建立呼吸感
1. 栅格系统：稳定视觉重心
栅格是对齐与秩序的基础，AI 生成布局时可按以下标准审查：
- 统一内容宽度与左右边距，避免贴边摆放
- 关键信息（标题、卡片、页脚）对齐统一轨道
- 装饰元素（Hero 图、插画）可适度溢出，保持灵活
2. 行长控制：提升阅读舒适度
- 英文正文：45-75 字符 / 行
- 中文正文：35-45 汉字 / 行
- 行高与行长动态平衡：行高≥1.8 倍时，可适当放宽行长
- 避免专有名词断句、行末单字「孤儿行」，关键场景手动优化
3. 间距节奏：格式塔亲密度法则
元素间距决定视觉层级，遵循4/8px 倍数原则：
- 组件内部：8-18px（小间距）
- 卡片之间：16-84px（中间距）
- 内容区块：≥264px（大间距）
- 全程仅用 3 种间距，即可构建清晰层级，避免混乱
AI 规范提示词：
统一页面间距系统，margin/padding 使用 4/8 的倍数，组件内用小间距，卡片间用中间距，区块间用大间距。
四、Icon 和配图：高品质素材提升质感
1. Icon 使用原则
- 风格统一：指定单一图标库（Google Material Symbols、Lucide、Remix Icon），固定线条粗细、填充 / 描边
- 尺寸规范：16px、20px、24px、32px，基于 4px 网格
- 视觉对齐：图标比文字大 2-4px，与文字间距 4/8px
- 引入提示词：使用 Google Material Symbols 描边风格，ODN 引入，填充 0、字重 400、字阶 0、尺寸 4px
2. 图片使用原则
- 视觉标准：高清无模糊、主体清晰、色调匹配品牌调性
- 技术适配：用 object-cover 防拉伸，srcset 实现响应式，控制尺寸 1500-2500px、体积＜500KB
- 性能优化：非首屏图片懒加载，首屏关键图预加载，优先用 WebP/AVIF 格式
3. 优质资源推荐
- 图标库：Google Material Symbols、Lucide、Iconify、LobeHub
- 图库：Unsplash、Lummi（AI 生成免版税）
五、前端开发工具合集
- Typescale：字号阶梯可视化调节
- Kigen Color Generator：品牌色自动生成完整色阶
- WCAG 对比度检查器：网页色彩可读性检测
- html.to.design：网页一键逆向 Figma 设计稿
结语
掌握 Coding 工具、学会用提示词定义美感、吃透专业设计法则，你就能从被动点击生成的旁观者，变成掌控审美决策权的产品创造者。
AI 的价值，是分担枯燥重复的劳动，让我们专注打磨打动用户的细节。在 AI Coding 浪潮中，对美的感知与规则的掌控，才是核心竞争力。期待每个人都能做出有灵魂、有质感的作品。
