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 ===

Источник