浏览 AI使用教程
从设计稿还原网页，先定网格、尺寸和组件边界
从设计稿写页面前，先找出网格、间距规律和可复用组件。边看边猜像素，会让同一类卡片和按钮在代码里长出多套尺寸。
沿完整工作流推进
前一阶段的可检查结果，是下一阶段的输入；中间证据不足时停在当前阶段。
别急着写 CSS，先把设计稿背后的尺寸规则读出来
拿到 Figma 后，开发者边写 CSS 边猜 1170px 容器和 24px 间距，结果相似组件出现四套尺寸。设计稿其实已经使用 12 列网格和 8px 间距系统。
- 网格和 token 有统一来源
- 组件状态与响应规则明确
- 实现截图与设计稿差异已记录
先确认这次任务的起点、边界和交付
| 需要确认 | 本例内容 |
|---|---|
| 现有材料 | 下方是教学设计片段：1440画板上内容左右各120，内容宽1200；卡片内边距24；同类卡片都使用该值。不是对未附Figma文件的实测。 |
| 不能越过的边界 | 先提取网格、间距、字号、状态与组件边界；不要把每个页面块都做成独立组件；缺失状态先反馈。 |
| 要交付的结果 | 网格与组件规格表 |
从“标对齐线和容器”走到“从外到内实现”
| 当前阶段 | 实际处理 |
|---|---|
| 标对齐线和容器 | 找左右边界、列宽、沟槽、满宽区域和内容最大宽度，记录在不同画板上的变化。 |
| 建立尺寸令牌 | 从重复间距、圆角、边框、字体和颜色提取有限令牌，保留真实例外，不强行平均。 |
| 划分组件边界 | 有重复结构、独立状态或复用价值的区域做组件；纯布局包装保持简单。 |
| 列组件状态 | 默认、悬停、焦点、禁用、错误、空和长文本都要有稳定尺寸，不让动态内容推挤布局。 |
| 从外到内实现 | 先版心和主网格，再组件，再细节；每层完成后截图核对，避免末尾同时修全部差异。 |
从给定设计片段到源代码
教学输入：画板宽1440，左右边距各120，故版心宽1440−120−120=1200。移动布局边距另定为16，不能把桌面12列直接压到手机。
CSS
令牌定义与组件引用
:root { --content-max: 1200px; --space-card: 24px; }
.page { max-width: var(--content-max); margin-inline: auto; padding-inline: 16px; }
.card, .dialog-body { padding: var(--space-card); }
@media (max-width: 640px) { :root { --space-card: 16px; } }用 rg 搜索 1200px、24px 只能帮助发现重复位置，还需判断是否同一语义。截图不能证明代码没有魔法数；源码也不能证明视觉一定正确，两种证据分别记录。
完成后的网格与组件规格表
预期规格将1200与24提取为CSS变量，组件引用同一变量。是否存在重复常量需搜索源码；截图只能核对最终视觉、对齐和换行。
为什么“组件复用率提高，页面仍难维护”还不能交付
组件复用率提高，页面仍难维护
- 原因
- 组件按视觉碎片拆得过细或承担太多业务
- 怎么改
- 以稳定交互与状态边界划分组件，页面特有结构留在页面层