千问AI无法直接生成开箱即用的HTML页面，需分三步：准备双参考源（MasterGo链接+带标尺的模块化截图ZIP包）、首版生成语义化骨架HTML、逐块精修颜色/间距/响应式。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
当你手上有MasterGo或Figma链接、本地截图，想让千问AI把设计稿精准还原成可运行的HTML页面时，它不会直接给你一个开箱即用的成品——第一版只是骨架，后续必须分块精修、逐层对齐。
准备双参考源：设计稿链接 + 本地截图
只丢一个链接，AI容易把按钮间距猜成24px而不是设计稿标注的16px；只传一张截图，它又可能把“深灰#333”错判成“中灰#666”。必须双管齐下。
第一步：打开MasterGo设计稿，点击右上角「分享」→勾选「允许查看者复制链接」→复制完整URL（含token参数，有效期至少7天）。
第二步：在设计稿里按模块截图——轮播区、表单区、数据卡片、底部操作栏，每张图单独保存为PNG，统一放进名为reference的文件夹。注意：【截图必须包含标尺或尺寸标注，否则AI无法校准像素值】
第三步：把reference文件夹压缩成ZIP，和MasterGo链接一起上传到千问网页端对话框。不要只发文字链接，也不要把截图一张张拖入——ZIP包能强制AI识别这是“视觉参考集”而非零散图片。
首版生成：明确指令，锁定结构优先
别一上来就写“请还原整页”，AI会从导航栏开始堆DOM，但往往漏掉右侧折叠面板的初始隐藏状态。要先让它搭出可交互的骨架。
输入指令示例：
“你是一名前端工程师，请基于我提供的MasterGo链接和reference截图，生成一个仅含HTML+内联CSS的单文件页面。要求：① 使用语义化标签（nav/main/aside）；② 所有容器宽度用rem单位；③ 暂不实现JavaScript交互，但需预留class名如‘js-collapse-toggle’；④ 首屏内容必须100%可视区域居中。”
这一步输出的HTML，重点检查三个地方：body是否设置了font-family全局继承、flex布局是否被误写成float、所有图片是否用了placeholder占位符。如果发现header里塞了table标签，立刻停手——说明AI没理解现代布局规范，需重发指令并强调“禁止使用table做布局”。
块状精修：从上到下，一区一调
首版完成度约70%，剩下30%全靠分块打磨。不要全局替换，每次只聚焦一个模块，避免改完按钮又把标题字号带偏。
方法一：针对颜色与字体
把设计稿中标注的色值（如#2563eb）、字体（Inter SemiBold 16px）、行高（1.5）整理成清单，直接发给AI：“将reference截图中‘用户头像旁昵称’的文字颜色改为#2563eb，字体设为Inter SemiBold 16px/1.5，确保与设计稿完全一致。”
方法二：修正间距与圆角
截图里按钮内边距是12px，AI却生成了padding: 10px；卡片阴影本该是box-shadow: 0 2px 8px rgba(0,0,0,0.08)，它写成0 4px 12px。这时要精确到像素：“修改class=‘btn-primary’的padding为12px 24px，border-radius为8px，box-shadow严格按设计稿：0 2px 8px rgba(0,0,0,0.08)。”
方法三：修复响应式断点
AI常把移动端的flex-direction: column写死在PC样式里。正确做法是：“在reference截图‘移动端视图’中，导航菜单应垂直堆叠，最大宽度768px；当屏幕≥769px时，切换为水平排列。请只修改@media规则内的声明，不要动其他CSS。”
验证与交付：用浏览器开发者工具当场核验
把最终HTML扔进Chrome，按F12打开DevTools，用元素选择器点选任意模块。
检查computed tab里的font-size是否真为16px（不是15.99px），margin-top是否等于设计稿标注的24px（不是23.8px），background-color rgb值是否与设计稿取色器读数完全一致。
把页面缩放到100%，关闭所有浏览器插件，用Design Mode（右键→Inspect→Elements面板右上角三点→Design Mode）开启所见即所得编辑，拖动元素确认布局无坍塌。
确认无误后，复制整个HTML代码，保存为index.html，双击即可在本地浏览器运行。
