真正能落地的html代码需上传前语义标注、上传后手动调优并理解每个标签与class的作用：草图须用文字标注功能区块（如“nav”），避免纯线框；生成代码要修正语义标签、响应式配置、路径及可访问性问题，ai输出仅为初稿而非终稿。
草图转HTML不是“一键生成就完事”，真正能落地的代码，取决于你上传前怎么画、传完后怎么调、以及是否理解生成结果里每个 <div> 和 <code>class 的实际作用。
草图必须带语义标注，否则AI会猜错区块功能
Qwen3-VL 或 GPT-4 Vision 这类模型不识别“视觉美感”，只识别“结构意图”。一张没标注的纯线框图，导航栏 可能被当成 <div> 普通容器，<code>搜索框 可能被塞进 <span></span> 里——后续改样式或加交互都得重写。
- 手绘/白板图拍照后，用手机备忘录或截图工具在关键区域加文字框：比如在顶部横条里写“nav”，在中间大块写“main-content”，按钮旁标“submit-btn”
- 避免用颜色区分功能（如“蓝色=按钮”），AI对色值不敏感；但可用不同线型：实线框=容器，虚线框=可折叠区域，双线=分隔线
- draw-a-ui 的
tldraw画布支持文本标签，直接用工具栏的“T”图标打字，比后期PS加注更可靠
生成的 HTML 常见结构陷阱：class 名混乱、语义缺失、响应式失效
多数工具输出的是“能跑”的代码，不是“可维护”的代码。比如 bg-blue-500 p-4 rounded-lg 这类 Tailwind 类名堆砌，或 div_123、section_a 这种无意义 ID，上线后改一个颜色要全局搜替换。
- 检查是否有
<header></header>、<main></main>、<aside></aside>等语义化标签——没有就手动把对应<div class="..."> 替换掉，别留着一堆 <code><div> <li>确认媒体查询是否生效：生成代码里若有 <code>md:flex却没引入 Tailwind CSS，或用了grid-cols-12但没配container宽度约束，页面在手机上会错位 - Qwen3-VL 输出常带内联
style，和外部 CSS 冲突；建议删掉所有style="..."属性，统一抽到<style></style>块或外部文件 - 用 VS Code 装
Live Server插件，右键 HTML 文件选 “Open with Live Server”，自动起http://localhost:5500 - draw-a-ui 本地运行时走 Next.js，生成代码若含
app/layout.tsx片段，需复制进真实项目对应目录，不能直接扔进空文件夹 - 图片路径问题最常见：草图里标了 “logo.png”，生成代码写
<img src="logo.png">，但实际文件在./images/logo.png——得手动补路径或改<base href="./"> - 表单控件必查：所有
<input>有name吗？<select></select>有<option value="..."></option>吗？没这些，后端收不到数据 - 可访问性基础项：标题是否按
<h1></h1>→<h2></h2>→<h3></h3>降序？<img>有alt吗？没这些，WCAG 2.1 AA 就不达标 - 性能隐患点：生成代码若含大量内联 SVG 或 Base64 图片，加载慢；优先换成
<img src="xxx.svg">外链引用
本地调试时别直接双击打开 HTML 文件
生成的代码往往含 fetch 加载资源、import 模块、或相对路径引用图片，双击用 file:// 协议打开会触发跨域或 404，浏览器控制台报 net::ERR_FILE_NOT_FOUND 或 Failed to load module script。
别跳过手写微调，这是保证交付质量的关键一步
AI 生成的代码是初稿，不是终稿。哪怕只改三处：修正一个 <form></form> 缺少 method 属性、给 <button></button> 补 type="button" 防止误提交、把 <h1></h1> 从居中改成左对齐——这些细节决定 QA 是否卡点、用户能否完成操作。
真正卡住进度的，从来不是“生成不出来”，而是生成后不敢改、不会调、不愿花十分钟理清 DOM 结构和 class 依赖关系。
