OPC AI工具 · 电商 · screenshot-to-code 竞品详情先别从零搭

场景

电商一人公司 常要参考淘宝/拼多多/独立站 详情长图 的模块顺序：主图区、卖点 bullet、参数表、评价样式。手搓 DOM 慢；纯设计稿又要 Figma 技能。screenshot-to-code 是开源 截图/录屏 → 代码 工具（GitHub abi/screenshot-to-code），支持 HTML+Tailwind、React+Tailwind 等栈；官方也提供 hosted 版 screenshottocode.com，本篇走 本地 PoC，方便改竞品文案与价格占位符。

装

需要 Node 前端 + Python 后端（以 README 为准）。最快 Docker 路线，在仓库根目录：

```bash
git clone https://github.com/abi/screenshot-to-code.git
cd screenshot-to-code
echo "OPENAI_API_KEY=sk-your-key" > .env
echo "GEMINI_API_KEY=your-key" >> .env
docker-compose up -d --build
```

浏览器打开 http://localhost:5173。不想 Docker 就按 README 分启：backend 里 poetry install + uvicorn main:app --reload --port 7001，frontend 里 yarn && yarn dev，Key 也可在前端设置齿轮里填。我 PoC 时 至少配一个 Gemini 或 OpenAI Key，多 Key 可对比生成质量。Windows 下 .env 注意 UTF-8 编码，README Troubleshooting 有说明——Key 读不对会表现为后端启动即报错，别误以为是模型不行。

过关： 前端能上传图片；后端 health 正常，不报 UTF-8 / Key 缺失。

用

今天只处理 1 张 竞品详情截图（建议裁成 首屏 + 一个卖点模块，别整页 5000px 一次塞进去——生成慢、易糊）。上传后栈选 HTML + Tailwind，生成完在浏览器预览 移动端宽度。我只改三处就够用：标题文案、价格占位、按钮链接；图片 src 换成你自己的 CDN 地址，别直接 hotlink 竞品图（版权与失效风险）。

导出 HTML 存进你的商品资料夹，和 rembg 抠图、Real-ESRGAN 放大 那条链配合：主图处理完，详情骨架用本篇出，最后再进店铺装修后台。生成栈我默认 HTML + Tailwind——比 React 版少一层 build，一人公司改文案直接在静态文件里搜替换。先别 一次批量 20 个 SKU；先做 1 张过关，确认 Tailwind 类名你能改得动，再谈模板化。hosted 版 screenshottocode.com 适合零安装试玩，但 竞品图含价格 时我更倾向本地 Docker，避免上传敏感截图到第三方。

过关： 预览区布局与截图 模块顺序基本一致；改一行标题文字，刷新仍正常。

验收

• 生成 HTML 在 375px 宽 下不横向溢出；参数表、bullet 列表可读。
• 图片位已换 自有素材 或占位图；无竞品域名硬编码链接。
• 与「手搓空白页」相比，你能在 30 分钟内 改完一版可给运营看的静态详情。

踩坑

• 印刷级细节、复杂动效 别指望截图一次还原；动画、视频模块要手删或后做。
• 与 browser-use 抓页 不同：本篇是 截图 → 代码，不是 live 爬 DOM；竞品反爬严也不影响，因为你用的是 自己截的图。
• API 费用按模型计费；PoC 阶段控制 单张分辨率，别 4K 长图直传。
• 商用上架前 人工过一遍 文案与资质声明，AI 可能抄到竞品违禁表述。
• Docker 路线 不适合边改代码边热更；要二次开发请走前后端本地 dev。
• README 默认模型含 Gemini / GPT / Claude 多选；PoC 只开 一个 Key 即可，别为对比质量一次跑五模型烧额度。

今天省下的，是 少从零写 Tailwind 网格——screenshot-to-code 先 1 张竞品详情变可编辑 HTML，再决定是否整店批量。谁适合：要对齐竞品详情结构、主图已就绪 的卖家；谁先别急：只有平台自带富文本、不需自定义详情 的，后台编辑器更省事。

你抄竞品详情 截图转代码 还是 手搓 HTML？留言说说，大家讨论下哪个更稳。