I built a tool that reverse‑engineers any website into React in one command. Here’s how the capture actually works.

说明与用途

"breakinggood" 工具通过一条命令自动克隆仓库并将任何网站转换为 React 项目，使用 Playwright 捕获样式、DOM 和截图，然后利用 LLM 生成代码。

问题

Cloning a repo and inspecting a live site by hand is time‑consuming and error‑prone.

结果

The tool reduces manual setup time from ~20 minutes to a single command, and produces a functional React clone with API mocking and accurate styling.

工作流

• 1. Run npx breakinggood <repo-url> to clone, scan dependencies, set up .env, install, run, and open browser.
• 2. Run npx breakinggood <site-url> to capture the page: launch installed Chrome, record network, load page, handle cookies, scroll to load lazy content.
• 3. Extract computed styles (fonts, colors, radii) and simplify DOM (tags, key attributes, text).
• 4. Take tiled screenshots (desktop and mobile) to feed the model.
• 5. Build a prompt with style tokens, simplified DOM, screenshots, and stack fingerprints.
• 6. Call a language model (Anthropic, OpenAI, etc.) to generate a project with package.json, vite.config, src/App.jsx, components, mock server, and Tailwind config.
• 7. Parse the model’s delimiter‑formatted output and write files.
• 8. Run the generated project to verify API mocking and UI fidelity.

证据

I wrote one command that does both.

来源

Everything lives in one file, src/site/capture.ts, about 330 lines of Playwright.

来源

The model writes: === FILE: src/App.jsx === ... === END FILE ===

来源