后端转全平台 02｜把 AI 生成的界面做到可交付

读 V2EX 的后端转前端讨论时，有一处困惑很具体。2024 年 10 月，一位后端开发者说，别人搭好页面以后，自己能修改、联调和部署；从空白开始做界面就卡住了。2025 年的一篇 AI 编程讨论中，也有人担心样式的维护成本，以及界面出错却没有异常可交给 AI 的情况。这些具体问题决定了本课的练习方向。从空白开始做页面的困难 ↗、界面维护与问题描述 ↗

接着上一课的项目准备，这一课要留下可执行的界面说明、一次范围明确的修改，以及附带截图的验收记录。准备浏览器开发者工具和能修改本地文件的 AI 助手，从下载包里的 03-css 目录开始。也可以先打开慢读静态页面，对照样式文件。

这份页面只有三条手写资料。搜索表单把关键词写进 URL，列表不会筛选，也没有保存和登录功能。本课验收它的界面，后续课程再处理数据与行为。

先把 03-css 复制为同级的 ui-review 目录，保留 HTML 和样式表，在副本里修改。从示例根目录启动服务后，访问 /ui-review/index.html。把副本路径和视觉规则记进工作簿，第三课会读取这些产物；原始 03-css 继续用作对照。

把参考图写成能核对的要求#

“做得高级一点”留给 AI 的猜测太多。找参考图时，先标明你喜欢的区域与原因。同一张图里，导航结构可以借鉴，文字密度可能不适合慢读。截图最好附上视口尺寸，否则 AI 不知道看见的是桌面全屏，还是手机中的局部。

慢读的任务是选一条资料继续读。界面说明可以沿着这件事展开。

这里已有不少可以核对的依据。样式把公共容器限制在 72rem 以内，正文行高为 1.7，卡片标题用 1.35rem，摘要用 0.85rem。这些是当前设计选择，适不适合你的内容，需要放进页面比较。若觉得摘要偏小，就先调摘要这一处，观察换行与卡片高度，再决定是否保留。

静态页面没有加载中、搜索无结果和请求失败。给真实项目写界面说明时，要补上这些状态出现的条件、可见文字和下一步操作。只画三张外观相似的卡片，无法说明网络失败后用户该做什么。

统一样式，再决定哪些组件值得引入#

慢读在 :root 里已经定义了 --paper、--card、--ink、--muted 和 --green。这些有名字的设计值可以叫 token。让 AI 调整主题色时，先找这些变量的使用处，避免给按钮、链接、标签分别加一种近似的绿色。CSS 自定义属性可以通过 var() 复用，定义在 :root 的普通自定义属性还能随继承用于后代元素。MDN 的说明 ↗解释了其作用域和继承方式。

当前间距还写在各条规则里。如果后面多页都采用同一种卡片，可以把反复出现、含义相同的间距提取成变量。不要看到两个数值碰巧相同就合并，卡片内边距与按钮内边距以后可能分别变化。验收时先核对同类元素是否一致，再判断哪些值值得共用。

组件也按实际需要选择。慢读现有的链接、输入框和提交按钮可以继续使用原生元素。若项目已有组件库，先查它的表单、弹窗和选择器，核对当前版本的文档、键盘行为及主题配置。为了一个弹窗再引入第二套库，往往还得处理字号、间距与焦点样式的差异。

弹窗尤其适合检验复用的价值。一个背景遮罩加白色面板，还要配上打开时的焦点位置、Tab 在弹窗内移动、Escape 关闭，以及关闭后的焦点返回。WAI 的模态对话框模式 ↗列出了这些行为。挑现成组件时照样测试，库的名字不能代替验收。慢读的资料卡片只是内容排列，保留自己的结构也很合适。

视觉改进 Prompt#

先保存修改前的页面和截图。下面的空位填真实材料，没有参考图就写“未提供”，不能让 AI 补造一张已经验收过的图。

请改进慢读的资料列表界面，本轮只处理一个已明确的问题。

输入材料
- 当前页面 URL 与本地目录填写在这里
- 当前截图、视口宽高、浏览器版本与缩放比例填写在这里
- 参考截图填写在这里，并标注要借鉴的区域与原因
- 当前最需要改善的现象填写在这里
- 期望的可见变化填写在这里
- 允许修改的文件填写在这里

先阅读实际 HTML、CSS 和已有组件，不猜测项目使用的框架。
说明当前结构、字体、密度、间距与交互状态，指出本轮涉及的规则。
已有样式变量和组件优先复用。需要新依赖时先说明用途与代价。

本轮约束
- 保留三条资料及真实链接，保留标题层级和表单 label
- 保留原生 GET 表单，提交仍只改变 URL，不声称已经支持筛选
- 标题允许完整换行，状态继续显示文字
- 保留键盘焦点与跳到资料列表的入口
- 不重写整页，不同时修改业务行为

先提出一个小范围方案，再在允许文件内实施。
按相同数据、视口、缩放比例给出修改前后截图。
验证宽屏与 320 CSS px 窄屏，再用 Tab 检查相关控件。
若没有浏览器能力，明确列为未验证，给出人工操作步骤。
截图文件注明视口和修改版本，不能用不同尺寸的图片冒充前后对照。

最后交付修改文件、变更理由、实际验证结果及尚未验证的项目。
视觉评价请指出具体元素和差异，不能只写“更美观”。

一次只处理一个主要问题，比较时才知道改动带来了什么。卡片间距刚改完，又重写字体、颜色和侧栏，前后截图即使不同，也很难判断哪项改动值得留下。每轮保留一份可恢复的文件或提交，再继续下一轮。

页面被撑宽时，先找是哪一个盒子#

慢读的三条标题都很短，原页面看着整齐，还不能证明长内容也合适。在本地副本里把一条标题换成“从后端接口走到浏览器页面，记录一次跨设备阅读流程的排错过程”，再给来源文字追加一段连续英文字符。它们是验收数据，测试后可恢复。

如果出现横向滚动，选中越界元素，在 Elements 的 Computed 中看最终 width、min-width、white-space 和 overflow-wrap，再看盒模型里的内边距与边框。向上检查 .resource-content、.resource-card 和 .library，记录最先超过父容器的元素。Styles 能找到声明来源，Computed 帮助确认最后应用了什么。Chrome 的 CSS 检查指南 ↗有对应入口。

基线有三处相关安排。Grid 的主列使用 minmax(0, 1fr)，.resource-content 等容器设置了 min-width: 0，body 上的 overflow-wrap: anywhere 会继承到文字。Flex、Grid 项目的自动最小宽度可能受到内容尺寸影响；允许容器收缩、允许长字符串换行，分别处理不同条件。两者的准确含义可查 MDN 最小宽度 ↗和文字换行规则 ↗。

遇到故障时，先确认这些声明有没有被后来的规则覆盖。若标题最终用了 white-space: nowrap，应沿这条证据继续查。直接给整页加 overflow-x: hidden 会裁掉越界内容，截图里的滚动条消失了，文字仍可能读不全。

样式故障修复 Prompt#

这份模板接在测量之后。空位没有证据时保留“未取得”，让 AI 明确下一步怎么查。

请定位慢读的一处样式故障，先依据证据提出原因，再做最小修复。

页面 URL、代码目录与允许修改文件
填写这里

复现环境
填写浏览器版本、视口宽高、缩放比例和测试数据

复现步骤、预期与实际结果
填写这里，并附能看出问题的截图

已经取得的证据
- 越界或错位元素的选择器填写在这里
- 元素和父容器的实际尺寸填写在这里
- Computed 中相关属性的最终值填写在这里
- 获胜规则的文件与行号填写在这里
- 已尝试的改动及观察结果填写在这里
没有取得的内容写未取得，不补造数值。

请解释证据支持哪个原因，还有哪个条件需要验证。
若材料不足，给出下一项 DevTools 检查及预期观察，不直接大改。
优先修正造成故障的规则，避免连续追加覆盖规则。
不得用隐藏溢出、裁掉必要文字或删除焦点样式来掩盖问题。
不更换框架、组件库或数据，不改与本故障无关的文件。

修复后按原步骤复测，并复查正常标题、长标题、窄屏和键盘焦点。
输出实际修改、原因、前后证据、已验证与未验证项目。
无法打开浏览器时只提供待验证说明，不能声称测试通过。

给这一版留下验收记录#

慢读在 48rem 及以下切为单列，卡片内边距也会缩小。检查断点两侧，再检查 320 CSS px 的窄视口。WAI 的重排要求对普通纵向内容采用等效 320 CSS px 的宽度，要求保留信息与功能，并避免阅读时来回横向滚动；地图、数据表等确需二维布局的内容有例外。慢读列表可以按普通内容验收。WAI 重排说明 ↗给出了范围。

基线的 :focus-visible 使用 3px 外轮廓，页首还有获得焦点后显示的跳转链接。用 Tab 从顶部开始，确认能看清焦点，再走到输入框、提交按钮和资料链接。填写关键词后提交，预期只检查 URL 变化。WAI 要求键盘使用者能看见焦点位置，删除轮廓后必须有可见的替代样式。焦点可见说明 ↗解释了这一要求。

浏览器设备模式能帮助检查视口布局，手机上的字体、软键盘和触摸操作仍需真机补测。截图通过也只覆盖所记录的界面条件。把视觉规则和检查结果填入工作簿的第二课，带着具体页面进入下一课的需求委托。

继续查阅时，可以从 Chrome 样式检查 ↗、WAI 重排要求 ↗和模态对话框模式 ↗开始，分别核对尺寸证据、窄屏条件与复杂控件的交互约定。