浏览 AI 知识库

从设计稿还原网页，先定网格、尺寸和组件边界

从设计稿写页面前，先找出网格、间距规律和可复用组件。边看边猜像素，会让同一类卡片和按钮在代码里长出多套尺寸。

沿完整工作流推进

前一阶段的可检查结果，是下一阶段的输入；中间证据不足时停在当前阶段。

沿一件真实任务走到底

拿到 Figma 后，开发者边写 CSS 边猜 1170px 容器和 24px 间距，结果相似组件出现四套尺寸。设计稿其实已经使用 12 列网格和 8px 间距系统。

本例材料

需要确认	本例内容
现有材料	桌面与手机设计稿、组件状态页、字体与图标资产；页面包含表格、筛选、弹窗和空状态。
不能越过的边界	先提取网格、间距、字号、状态与组件边界；不要把每个页面块都做成独立组件；缺失状态先反馈。
要交付的结果	网格与组件规格表

处理记录

当前阶段	实际处理
标对齐线和容器	找左右边界、列宽、沟槽、满宽区域和内容最大宽度，记录在不同画板上的变化。
建立尺寸令牌	从重复间距、圆角、边框、字体和颜色提取有限令牌，保留真实例外，不强行平均。
划分组件边界	有重复结构、独立状态或复用价值的区域做组件；纯布局包装保持简单。
列组件状态	默认、悬停、焦点、禁用、错误、空和长文本都要有稳定尺寸，不让动态内容推挤布局。
从外到内实现	先版心和主网格，再组件，再细节；每层完成后截图核对，避免末尾同时修全部差异。

令牌抽取

令牌/状态	观察值	规则	例外
内容版心	最大 1200px	页面级约束	全宽媒体区
间距	8/16/24px 重复出现	有限阶梯	数据表密集间距
卡片默认	标题、摘要、操作三层	固定内边距和最小高度	空状态允许更高说明
错误状态	边框/提示增加高度	内容换行不改变列宽	长错误可折叠
焦点状态	可见 outline	不依赖颜色单独表达	高对比模式加粗

最终输出

规格表记录容器 1200px、12 列、24px gutter、8px spacing token；Button、Field、Dialog 的变体与状态独立。页面组合只引用这些规格，桌面/移动端对比截图显示无重复魔法数。

常见失败

验收方式

网格和 token 有统一来源组件状态与响应规则明确实现截图与设计稿差异已记录重复结构和独立状态已识别尺寸、间距、字体和颜色令牌有限默认、悬停、焦点、禁用、错误、空态均有稳定尺寸长文本与缺失数据不会推挤相邻内容组件级规则能覆盖所有画板

进一步核对

核对 HTML、CSS、表单、响应式布局和浏览器 API 的标准行为。

键盘、焦点、文本对比和语义结构按适用的 WCAG 要求检查。