# screenshot-to-code 截图转 React：核对版式、图片与移动端

输入设计和 React 参考均由本站手写，未调用 screenshot-to-code 或视觉模型；React 形态按官方单 HTML 输出约定准备，不冒充真实生成结果。

## 本地运行

需要 Node.js 20+，本参考工程没有 npm 第三方运行依赖。

```sh
npm ci --ignore-scripts
npm run check
npm run dev
```

服务只绑定 127.0.0.1:8456；修改端口可运行 `PORT=8457 npm run dev`。W03 与 W11 包含随包本地 React 18.3.1 UMD 运行库及许可，前者 hash 路由不需要服务器路径回退。

## 七步操作

### 1. 准备有权使用的清晰截图输入

input.html 是原创“北岸设计周”活动界面，文字、几何海报和场次均为虚构。截图应包含完整首屏，并另附可复制文案；避免使用他人网站照片或把文字识别错误当作设计选择。

```sh
npm run dev
```

### 2. 区分 React 原生输出和项目工程

官方当前 React 规则使用单 index.html、React UMD 与 Babel CDN，不能说选择 React 就自动得到 Vite/Next 工程。本题 native-react-reference.html 也采用单 HTML 结构；vendor 文件用于本题离线 React 渲染，不是工具自动导出的依赖包。

```sh
cat output-shape.json
```

### 3. 选择截图与对应的输出栈

在自己运行的 screenshot-to-code 中提交 screenshot-input.png，选择实际可用的 React 栈与视觉模型。先确认该模型支持图像输入；OPENAI_BASE_URL 并不证明录屏、图片生成或所有模型请求都兼容同一路径。

### 4. 核对标题、图片和语义结构

同一输入必须保留“让设计发生在街角”、活动日期、报名链接和可读正文，原创 SVG 几何海报可直接复用。本文手写参考只演示这些检查点，不提供不存在的模型耗时或生成成功日志。

```sh
node verify.mjs
```

### 5. 以相同视口对照原稿和参考

先比较桌面 1200 宽的标题换行、海报比例和留白，再比较 390 宽的单栏顺序。正文截图对应真实手写 HTML；外观相近不代表无障碍、键盘和链接都正确。

### 6. 检查运行方式和外部脚本依赖

浏览器直接打开本题服务的 native-react-reference.html 可使用本地 React 库，不需要 Babel 因为本站将 JSX 转写成 createElement。工具实际输出若使用 type=text/babel 和 CDN，须检查联网条件；不要将本站转换当工具原生结果。

```sh
npm run dev
```

### 7. 再决定是否另做工程化

如果要迁入 Vite/Next，单独标为自己的转换步骤并重新测试构建、样式与资源路径。本包不提供伪造的 Vite 构建记录；verify.mjs 只验证参考文件、文本、图像路径和结构。

```sh
node verify.mjs
```

## 输入与许可

虚构业务、客户、活动及几何插图均为本站原创教学输入；参考源码采用 MIT（见 LICENSE）。不是 Dyad/bolt.diy/screenshot-to-code UI 或模型输出。不包含真实 API 密钥、账号、发布 URL 或客户资料。

官方依据：
- https://github.com/abi/screenshot-to-code
- https://raw.githubusercontent.com/abi/screenshot-to-code/main/backend/prompts/system_prompt.py

查询词仅为任务意图，不是已验证 Google 月搜索量或抖音指数。