photoshop无法“快速”生成可交付html模板，因其导出的代码语义混乱、无响应式、字体错乱、图片路径错误、无访问性且不可维护；所有“一键转换”工具输出均为需重写50%以上的半成品；真正上线模板必须人工校验结构、重写css、调试断点。
不能“快速”生成可交付的 HTML 模板，除非你接受语义混乱、响应式失效、字体错乱、图片路径错误、无访问性、无法维护的代码。 所有标榜“一键转换”的工具，输出的都是需要重写 50% 以上的半成品。真正能上线的模板，必须经过人工结构校验、CSS 重写和断点调试。
Photoshop 切片导出的 HTML 是过时陷阱
Photoshop 的「存储为 Web 所用格式（旧版）」会生成含 table 布局、内联 style、无语义标签、无响应式逻辑的 HTML。它连 header 或 section 都不会用，全是 <div id="slice1"> 这类不可读 ID。浏览器兼容性看似好，实则现代 CSS 特性（Flex/Grid、自定义属性、@media）完全缺失。
<p>常见错误现象：<code>index.html 在 Chrome 看正常，但在 Safari 中图片错位；font-family 显示成 Times New Roman；移动端直接水平滚动。
- 切片命名必须全英文、无空格、不带中文或特殊符号，否则生成的 ID 会变成
slice_123_或编码乱码 - 导出前务必关闭所有参考线、智能对象缩略图、图层组折叠状态——这些都会干扰切片区域识别
- 该功能在 Photoshop 2023+ 版本中已被标记为「遗留功能」，未来可能移除
Figma + AI 插件不是魔法，是信息搬运工
把 PSD 导入 Figma 后用 Builder.io 或 Anima 生成 HTML，并不等于还原设计稿。它们依赖图层命名、分组嵌套深度、文本图层是否栅格化这三项输入质量。AI 不理解“这个 banner 要 hover 放大”，只认得“图层名叫 hero-banner，尺寸 1200×400，填充色 #2c3e50”。
使用场景：适合已有规范命名的 Figma 文件，或你愿意花 20 分钟手动重命名/重组 PSD 图层后再导入。
- PSD 导入 Figma 前，先在 PS 中执行「图层 → 拼合图像」再另存为
.psb，能避免部分矢量形状解析失败 - AI 插件默认输出 Tailwind 类名（如
flex-col items-center），若项目禁用框架，需在插件设置里切换为「Vanilla CSS」模式 - 文字图层若含中文段落且未启用「导出为文本」选项，AI 会把它当 PNG 导出，导致 SEO 和可访问性归零
手写语义化 HTML + CSS 才是唯一可控路径
所谓“快速”，其实是把时间花在前期准备，而非寄希望于工具自动补全。一个合格的 HTML 模板，核心不在“写得多快”，而在“改得少不多”。这意味着你必须亲手控制三件事：HTML 结构层级、CSS class 命名规则、@media 断点数值来源。
性能与兼容性影响：用 rem 替代 px 控制字号，用 background-image: url() 引用 SVG 图标而非内联 base64，能让首屏加载快 300ms；用 prefers-reduced-motion 包裹动画，可满足 WCAG 2.1 AA 标准。
- 不要用 Photoshop 测量工具读取像素值后直接写死
margin: 24px，应换算为margin: 1.5rem（假设 root font-size=16px） - 颜色值统一从 PSD 的「吸管工具 + 信息面板」复制 HEX，避免用截图取色器导致轻微偏色
- 所有图片资源导出后，立即用
sharpCLI 或 TinyPNG API 批量压缩，否则banner.jpg可能达 2MB
最容易被忽略的是字体回退链和图标引用方式：PSD 里写的「思源黑体 Bold」，Web 上必须写成 font-family: "Source Han Sans SC", "Noto Sans CJK SC", sans-serif；SVG 图标若用 <img src="icon.svg">，就无法用 CSS 控制颜色，得改用 <svg><use href="sprite.svg#icon-home"></use></svg>。
