展开本页目录
开始前准备什么
- 下载独立练习包，使用 Node.js 20+；参考源码没有 npm 第三方依赖，React 库仅 W03/W11 随包提供。
- 在自己的独立目录中运行；所有业务和身份均为虚构教学数据。
- 目标 App、模型、账号授权与外部发布需按本页真实边界另行操作；不使用真实客户资料练习。
- 准备有权使用的清晰截图输入
- 区分 React 原生输出和项目工程
- 选择截图与对应的输出栈
- 核对标题、图片和语义结构
- 以相同视口对照原稿和参考
- 检查运行方式和外部脚本依赖
- 再决定是否另做工程化
独立原创源码、输入、逐步说明、运行脚本和真实本地检查；不含账号密钥或模型权重。
包含七步具体操作、来源与本题未执行范围。
真实执行本题纯函数/结构断言，不代替目标 App、模型、权限或发布测试。
离线 npm ci、check、build 与 HTTP 内容类型回读结果。
1. 准备有权使用的清晰截图输入
input.html 是原创“北岸设计周”活动界面，文字、几何海报和场次均为虚构。截图应包含完整首屏，并另附可复制文案；避免使用他人网站照片或把文字识别错误当作设计选择。
bash
npm run dev
2. 区分 React 原生输出和项目工程
官方当前 React 规则使用单 index.html、React UMD 与 Babel CDN，不能说选择 React 就自动得到 Vite/Next 工程。本题 native-react-reference.html 也采用单 HTML 结构；vendor 文件用于本题离线 React 渲染，不是工具自动导出的依赖包。
bash
cat output-shape.json3. 选择截图与对应的输出栈
在自己运行的 screenshot-to-code 中提交 screenshot-input.png，选择实际可用的 React 栈与视觉模型。先确认该模型支持图像输入；OPENAI_BASE_URL 并不证明录屏、图片生成或所有模型请求都兼容同一路径。
4. 核对标题、图片和语义结构
同一输入必须保留“让设计发生在街角”、活动日期、报名链接和可读正文，原创 SVG 几何海报可直接复用。本文手写参考只演示这些检查点，不提供不存在的模型耗时或生成成功日志。
bash
node verify.mjs5. 以相同视口对照原稿和参考
先比较桌面 1200 宽的标题换行、海报比例和留白，再比较 390 宽的单栏顺序。正文截图对应真实手写 HTML；外观相近不代表无障碍、键盘和链接都正确。
6. 检查运行方式和外部脚本依赖
浏览器直接打开本题服务的 native-react-reference.html 可使用本地 React 库，不需要 Babel 因为本站将 JSX 转写成 createElement。工具实际输出若使用 type=text/babel 和 CDN，须检查联网条件；不要将本站转换当工具原生结果。
bash
npm run dev
7. 再决定是否另做工程化
如果要迁入 Vite/Next，单独标为自己的转换步骤并重新测试构建、样式与资源路径。本包不提供伪造的 Vite 构建记录；verify.mjs 只验证参考文件、文本、图像路径和结构。
bash
node verify.mjs
来自 verification.json、clean-room.json 的真实本地检查排版；仅证明本站参考工程，未运行目标 App/模型/外部发布。
横向滑动查看细节，或打开原图放大对照。
怎样确认已经完成
- 输入、实际输出和模型/工具未执行范围分开记录，不把手写参考当模型结果。
- 真实运行本题 npm ci / check / build，并回读独立目录的页面与资源。
- 按本题七步核对负例、手机布局、数据或路由；外部服务单独保存实际验证结果。
常见问题
截图生成网页代码选 React 就会给 Vite 工程吗？
当前官方 React 提示规则主要是单 HTML 加 React/Babel CDN。需要 Vite/Next 时，要另外转换并单独验收。
一张设计图做网页可以自动还原手机端吗？
单张桌面图没有完整手机规则。需补充断点、阅读顺序和图片行为，再用真实手机宽度验证，不能把自动缩放等同响应式设计。