结论：设计稿转html不是切图，而是首个可验证交付节点，必须承载设计意图、适配逻辑、可维护结构和迭代入口；未建模即写div，80%返工由此始。
div，后面 80% 的返工都从这儿开始。
设计系统与 HTML 结构的映射关系必须提前约定
很多团队把 Sketch/Figma 文件当“最终交付物”，但设计稿本身不包含响应式断点阈值、状态切换规则、可访问性标签要求、组件复用边界等关键信息。一旦开发按自己理解写 class 名，后续改版、A/B 测试、无障碍审计就会全部脱节。
实操建议：
- 在设计评审阶段，强制输出一份轻量级「设计语义表」：列出每个模块对应的语义化标签（如
header、nav、article）、必需的 ARIA 属性（如aria-expanded）、以及允许的嵌套深度（如ul内最多两层li） - 禁止使用纯视觉命名的
class，例如red-btn或big-title；统一采用 BEM 风格且带业务域前缀，如product-card__price--discounted - 所有动效/交互动效必须标注触发条件（hover / focus / reduced-motion），否则前端无法做媒体查询降级
Figma 插件导出 HTML 为什么总出问题
像 Anima、Figma to Code 这类插件生成的代码，常见错误不是语法错，而是语义断裂：把图标导成 img 而非 svg，把按钮导成 div 而非 button，把文字层级导成 span 堆叠而非 h1~h6 递进。这类代码能跑，但一接入自动化测试就报 WCAG 错误，一做 SEO 就掉权。
实操建议：
- 禁用“一键导出完整 HTML”功能，只用插件提取图层命名、尺寸、颜色变量，其余结构手写
- 把 Figma 的「Auto Layout」约束转化为 CSS
flex或grid的具体取值，而不是依赖插件猜 —— 比如插件把 “水平居中+间距 12px” 导成margin: 0 auto;，实际应写justify-content: center;+gap: 12px; - 导出前检查图层命名是否含非法字符（空格、中文、emoji），否则插件会静默替换为
div或丢弃样式
HTML 作为接口契约：如何让后端、测试、设计都认这个文件
很多团队把 HTML 当作前端私有资产，但它是唯一被三方共同消费的中间格式：后端要注入数据（data- 属性必须稳定）、测试要写 selector（id 和 data-testid 必须可预测）、设计要核对像素（font-size 和 line-height 必须可追溯）。一旦某方擅自改结构，整条链就断。
实操建议：
- 建立
html-contract.json文件，明确定义每个区块的必填属性、可选属性、废弃属性（如禁止再用align属性） - 所有
data-属性名加前缀，如data-product-id，避免与第三方库冲突 - 用
prettier+ 自定义规则强制格式化，确保换行、缩进、引号风格一致 —— 差异哪怕一个空格，Git diff 就会污染协作记录
div，而是没人愿意花 20 分钟对齐「这个 section 到底算不算一个独立语义单元」。全生命周期管理在这里不是加流程，是把模糊共识变成可执行、可验证、可回滚的 HTML 契约。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
