页面能运行、按钮能点，但首屏挤满卡片，标题和正文也像同一级。
本周先别让 AI 再“做得更漂亮”：先定用户、页面重点和视觉方向，再写组件规则，最后用截图逐项验收。AI 代码生成擅长按指令产出代码，却不会自动替你建立视觉层级、设计系统和审美判断；能运行，不代表好看。
正在用 AI 编程工具生成网页、却对观感不满意的开发者，可以用这套流程定位问题。
没有专职设计师、需要独立完成界面的创作者，可以用明确约束减少反复试错。
负责小型网站或原型交付的团队，可以把这些步骤作为共同验收方式。
能运行，不等于页面有清晰的视觉秩序
“看起来不好看”不是一个能直接交给 AI 的问题。它可能指首屏没有重点，也可能是字体、留白、颜色和组件风格各自为政。先把观感拆成可检查的现象，才知道该改提示、样式，还是页面结构。
常见原因通常不在代码能不能执行，而在页面缺少统一的设计决策：
- 需求只写功能。 “做一个产品首页”没有说明谁来用、用户先要看什么、页面要引导什么动作。AI 可以补出常见模块，却未必知道哪些应优先。
- 没有视觉方向。 没有参考页面、品牌气质或具体描述时，颜色、字体、圆角和装饰往往由模型临时选择。单个元素可能顺眼，组合起来却未必协调。
- 局部生成，缺少全页视角。 单独生成卡片或导航栏时，AI 看不到它们和整页标题、网格、段落密度之间的关系。
- 相同组件被反复“重做”。 页面分开生成后，按钮高度、卡片边距、标题样式等细节容易漂移。局部看不出大问题，放在一起就显得不统一。
排查时先对照同一页面的四件事：内容层级是否明确，元素是否沿一致的网格对齐，间距是否有规律，同类组件的外观与状态是否一致。这样比一句“AI 审美差”更能说明要修什么。
先定页面目标，再让 AI 生成视觉方案
开始写代码之前，先回答几个实际问题：谁会打开这个页面？他最想完成什么？页面首先要解释什么？你希望它看起来克制、活泼，还是偏专业？答案要能指导版面，而不只是提供风格形容词。
可以把设计方向写成简短的页面说明：
- 用户与任务： 访客是谁，最主要的下一步动作是什么。
- 信息顺序： 首屏先呈现的内容，以及之后才需要阅读的内容。
- 页面气质： 用可观察的描述代替“高级”，例如留白充足、装饰克制、标题醒目、强调色只用于关键操作。
- 参考与边界： 提供一两个可访问的视觉参考，并指出借鉴的是布局、字体关系还是色彩；同时说明不希望出现的效果。
用首屏核对方向有没有落地：访客能否快速识别页面主题、主要价值和下一步动作？如果关键信息不突出，先调整内容优先级或布局，再考虑阴影、渐变等装饰。给 AI 的提示也应包含这个判断标准，而不是只要求“更有设计感”。
用统一规则，替代每次临时挑样式
设计系统不是把各种装饰堆在一起，而是规定常用元素如何协同。你可以先定义颜色角色，例如页面背景、正文、弱化文字、边框和操作强调色；再约定标题与正文的字体层级、间距变量、内容栅格，以及按钮、输入框、卡片在默认、悬停、聚焦和禁用时的样式。
规则最好落到可复用的变量与组件上。提示 AI 时，要求它沿用现有令牌和组件；如果没有对应组件，先补规范，再让页面调用。不要一边要求全站一致，一边又让它每个页面独立“自由发挥”。
检查效果时看跨页面，而非单张截图：同类按钮是否有相同的形状与状态？卡片是否沿用一致的内边距和标题关系？颜色是否承担固定角色？如果新页面重复创建近似但不同的组件，就说明规范还没有进入实现流程。
规范也要照顾阅读与操作，而不仅是外观。例如，WCAG 对一般文本与背景的对比度给出 4.5:1 的最低要求，大号文本则为 3:1；可点击目标的最小尺寸原则上为 24 × 24 CSS 像素，并列有例外情况。把这些值作为检查依据，比单凭屏幕观感判断更可靠。可查看 W3C 的文本对比度说明 与 可点击目标尺寸说明。
从页面草稿到成品：把生成过程拆成可判断的步骤
不要一次要求 AI 完成整站、视觉、响应式和交互，再指望它同时处理所有取舍。每轮只做一件能验收的事，出现偏差时也更容易回退。
- 先列页面结构。 只确认区块顺序、每区块要传达的信息和主要动作，不急着细调颜色与装饰。检查删掉某一区块后，用户是否仍能理解产品和下一步。
- 确认单页方向。 选最关键的一页，写明用户、内容优先级、版面气质和参考依据。先看首屏与页面整体是否支持主要任务。
- 建立组件和样式规则。 把布局、字体、颜色、间距及交互状态落实到可复用的组件与变量。检查新写的页面是否调用既有规则，而不是新增一套近似样式。
- 填入真实内容。 用实际标题、按钮文案、介绍文字和图片替换占位内容。确认长标题或较长文案出现时，不会把版面挤坏，也不会让按钮文字失去重点。
- 处理不同屏幕布局。 根据内容何时开始拥挤来调整布局，而不是迷信某个固定断点。CSS 媒体查询能根据视口等条件应用不同样式，可参考 MDN 的媒体查询说明。对照 W3C 的重排要求，检查页面在相当于 320 CSS 像素 的宽度下是否仍能阅读主要内容，而不必横向滚动。
- 走完关键任务路径。 从访客进入页面开始，实际点击主要操作、提交表单或查看核心内容。确认界面状态变化清楚，错误和成功反馈也能被看见。
每一步都留下一项可复查的结果：结构草稿能说明信息顺序；样式规范能说明组件约束；完成页面能用真实内容和任务路径验证。这样，AI 编程工具生成的代码才会逐步接近可交付的界面，而不只是视觉上拼起来的原型。
截图反馈要具体，才能让下一轮修改有效
截图是对齐判断的共同依据，不是让 AI 猜测你心里的“好看”。在相同视口下对照修改前后的页面，按信息层级、对齐、留白、色彩、字体和内容密度记录问题。每轮先选最影响理解的一项。
反馈可以这样写：
- 不说“首屏不够高级”，改成“主标题与说明文字视觉权重接近，请突出标题，并降低说明文字的强调程度；不要改动按钮文案”。
- 不说“卡片很乱”，改成“检查卡片标题、正文和操作按钮是否沿同一边缘对齐；请让同类卡片使用相同的内边距与标题间距”。
- 不说“移动端有问题”，改成“窄屏时导航和主标题挤在一行；请调整为可阅读的纵向布局，并保留主要操作入口”。
改完后用相同视口重新截图，只检查本轮提出的目标是否达到；如果改善了，再处理下一项。若修改前后没有变化，就补充具体位置、参照元素和不可改动范围，不要同时叠加互相冲突的要求。
截图评审还要看交互状态。键盘操作时，当前焦点应有可见标记，这是 WCAG 对焦点可见性的要求；用户偏好减少动画时，也应避免不必要的动态效果。可分别查看 W3C 的焦点可见性说明 和 MDN 对减少动态效果设置的介绍。
上线前，用清单检查视觉是否真正完成
视觉验收不能只靠“看着顺眼”。拿关键页面、真实文案和主要任务路径来检查；发现问题时，记录具体位置、复现方式和预期结果。
- [ ] 首屏能辨认页面主题、主要价值和关键操作，不需要从装饰图形里猜重点。
- [ ] 标题、正文、说明文字和按钮有清楚的层级；颜色对比足以支撑阅读。
- [ ] 同类导航、卡片、按钮和表单使用一致的样式与状态，不因页面不同而变形。
- [ ] 使用真实标题和正文检查溢出、截断、重叠及不自然的换行。
- [ ] 在窄屏和较宽的桌面视口检查布局；主要内容可读，必要操作没有被遮挡。
- [ ] 用键盘走过主要操作，确认焦点清楚可见；表单错误、成功和禁用状态也有明确反馈。
- [ ] 调整文本间距后，内容仍可见且功能不丢失。WCAG 的文本间距说明给出一组适配测试条件，包括行高 1.5 倍、段后间距 2 倍、字母间距 0.12 倍、词间距 0.16 倍；它要求内容在这些设置下不丢失，而不是要求所有页面默认都采用这些数值。详见 W3C 的文本间距说明。
常见问题：从 AI 代码生成转向 UI 设计
为什么页面功能正确，视觉效果还是不协调？
功能实现回答的是“页面能不能工作”，网站视觉设计还要回答“用户先看到什么、如何理解内容、下一步怎么操作”。需求没有提供层级、布局与组件规则时，AI 只能根据局部描述补足样式。把问题拆成标题层级、元素对齐、间距规律和组件一致性，才能形成可检查的修改任务。
怎样统一 AI 生成页面的布局和字体？
把页面容器、字体角色、颜色用途、间距变量与组件状态设为共享约束，并要求后续页面优先复用。完成后横向比较多个页面的标题、导航、按钮和卡片；如果同类元素各有一套样式，就先修规范或组件实现，而不是继续单页微调。这样能同时减少视觉漂移和后期维护负担。
写提示时，怎样把 UI 设计要求变成明确动作？
描述页面面向的用户、首屏信息顺序、主要操作、内容分组与窄屏变化；补充参考页面，并说明具体借鉴什么、不借鉴什么。再把主观愿望转成检查条件，例如主标题必须比说明文字突出、同类按钮使用相同组件、窄屏下主要内容纵向排列。每轮只要求处理一个目标，结果更容易核对。
如何用截图反馈，让 AI 逐步改善界面？
先固定视口并用真实文案截图，再指出最影响理解的问题、出现的位置和预期变化，同时写清不能改动的功能。每次只安排一个主要修改目标，完成后用同样的视口截图对照；确认目标改善后，再继续处理下一项。这样能避免大量模糊意见互相冲突，也方便在改坏布局时回退。
处理不同屏幕布局时，如果你需要远程 Mac 环境来预览或构建网页，可以先查看 Hashvps 的云端 Mac 环境信息，再确认它是否适合自己的开发与测试流程。若使用过程中需要了解连接与日常操作，可查阅 Hashvps 帮助中心。这些环境能支持开发与验证，但不会替代设计判断；如果工作主要是本地网页迭代，也可以继续用现有电脑完成。
本周就从最关键的一页开始：写出页面目标和组件约束，完成截图反馈，再按清单检查窄屏、键盘操作与真实文案。若你还需要远程 Mac 环境来预览或构建网页，可以了解 Hashvps 的云端 Mac 环境；如果工作主要是本地网页迭代，也可以继续用现有电脑完成。