本文是「AI 设计词典」系列的上篇，旨在帮助普通用户用准确的专业视觉词汇与 AI 沟通设计需求，解决「知道哪里不对却描述不出来」的问题。文章系统梳理了五大维度：画幅与区域（宽高比、安全区域、边距）、构图（居中/非对称构图、三分法、网格系统）、位置与对齐（对齐方式、前景/中景/背景）、空间与密度（负空间、留白、视觉密度、间距）以及层级与视觉重心（视觉层级、焦点、视觉重量、平衡）。每个词条均附中英文对照和实用示例 Prompt，并给出组合应用的完整案例，让描述从模糊的「感觉」变为可量化的准确需求。
文章以Punk咖啡馆点单小程序为例，沿着菜单、规格、购物袋、确认订单四个页面，图文讲解15个布局与视觉设计名词，包括信息架构、用户流程、线框图、首屏、视觉层级、栅格、对齐、留白、响应式布局、安全区域、设计变量、语义色、字阶、行高及Padding/Margin。作者还指出固定底栏遮挡内容的常见坑，并给出从定入口、画线框、定边距对齐到小程序内验证的完整排版流程，帮助读者用具体语言描述布局需求，让AI能精准修改页面。
文章基于《Refactoring UI》一书，精选出 20 条实用的 UI 设计黄金军规，配合前后对比图讲解。作者指出在 AI 编码工具（Claude Code、Cursor 等）抹平写代码门槛后，UI 设计美感成为区分玩具与商业产品的关键壁垒。内容涵盖：为设计定好风格基调、先灰度后上色、用字重和颜色而非字号建立视觉层级、通过弱化凸显重点、按钮按主次分级、从过度留白开始做减法、间距的亲疏之别、动态调整行长与行高、以基线而非居中对齐等可工程化落地的设计原则，帮助开发者补齐 UI 设计这块最后拼图。
文章介绍用AI生成网页时的7个基础设计规则：对齐、留白、视觉层级、控制字体数量、减少配色、统一图片风格、页面节奏。作者指出网页的高级感不来自炫酷动效，而来自这些基本功，并建议在使用AI/Codex时用具体的设计语言描述需求（如统一对齐、拉开层级、增加留白、限制主色等），能让生成结果更稳定好看。
作者系统梳理经典设计理论、格式塔原理与网格系统，整理出 32 种可直接写入 AI 提示词的海报构图，本文为上册，介绍前 16 种。文章先讲解海报的六个可控变量（焦点、层级、分组、平衡、动势、空间）及总提示词模板，再分“平衡与焦点”和“几何骨架”两组详解中轴对称、非对称平衡、三分法、黄金螺旋、大留白、边缘锚定、三角构图、倒三角、同心环绕、框中框等构图，每种均附视线路径、适用场景、避坑要点及图像模型与 HTML/CSS 提示词，帮助用户把视觉需求清晰传达给 AI。
