Inspiration
Websites are often the first impression of a product, but recreating a good frontend from an existing website can take hours of manual inspection, coding, and responsive testing. We wanted to turn that process into an AI-powered engineering workflow.
That idea led to Replicate.AI ⚡ — an agent that can take a public website URL, understand its visual and structural design, and generate a new, independent frontend from that understanding.
Instead of simply copying a website, we wanted to explore whether AI could actually analyze, reason about, build, validate, and then modify a frontend like a developer.
What it does
Replicate.AI ⚡ transforms a public website URL into a working React/Next.js frontend.
The workflow is:
URL → Analyze → Plan → Generate → Validate → Preview → Modify
It can:
🌐 Accept a public website URL 🔍 Analyze DOM structure and page content 🎨 Understand colors, typography, spacing, and layout 📱 Analyze desktop and mobile layouts 🖼️ Discover and process website assets 🤖 Use AI agents to create a structured UI specification ⚛️ Generate a new React/Next.js frontend 🧪 Build and validate the generated application 🔧 Automatically attempt to repair basic build errors 👀 Provide a local preview 💬 Modify the generated website using natural-language instructions 🕐 Maintain versions of generated websites
For example, after generating a website, a user can simply say:
"Make the navbar sticky, change the primary color to blue, and make the hero heading larger."
The AI identifies the relevant files, applies the changes, rebuilds the project, and validates the result.
The assignment specifically requires an independent frontend rather than an embedded copy of the original website, as well as natural-language modification after generation.
How we built it
We designed Replicate.AI as a multi-stage AI engineering pipeline instead of relying on a single "clone this website" prompt.
🔎 1. Website Analysis
We use browser automation to inspect the target website and collect:
DOM structure headings and text navigation images and assets colors typography spacing responsive behavior desktop/mobile screenshots 🧠 2. Structured Website Representation
The collected information is converted into a structured WebsiteSpec.
This acts as an intermediate representation between website analysis and code generation.
Instead of asking the model to generate code directly from raw HTML, the agent first understands what the website contains.
🏗️ 3. AI Planning
A planning agent determines:
component hierarchy page sections design tokens responsive rules asset mapping reusable components ⚛️ 4. Frontend Generation
The generator creates a fresh React/Next.js implementation using reusable components and responsive styling.
🧪 5. Validation & Repair
The generated project is built locally and checked for:
TypeScript errors build failures runtime errors broken assets basic responsive issues
If the build fails, a Repair Agent receives the error information and attempts to fix the generated code.
💬 6. AI Modification
A separate modification agent interprets natural-language requests and changes only the relevant parts of the generated project.
This avoids unnecessarily regenerating the entire application.
The overall architecture follows the assignment's requested flow of URL → Analysis → Generation → Validation → Modification.
Challenges we ran into
One of the biggest challenges was realizing that HTML alone isn't enough to recreate a website accurately.
Two websites can have similar HTML structures but completely different visual experiences.
We therefore had to combine multiple sources of information:
DOM + CSS + screenshots + assets + responsive behavior
Other challenges included:
Handling JavaScript-heavy websites Extracting meaningful structure from large DOM trees Avoiding huge prompts containing unnecessary HTML Preserving responsive behavior Downloading and mapping assets correctly Making AI-generated code actually build Recovering from generated-code errors Preventing infinite AI repair loops Making natural-language modifications without destroying existing work Keeping LLM usage and token costs under control Designing the system to work across different website types instead of hardcoding one layout
The assignment explicitly emphasizes generalization across three different websites, so designing a generic analysis pipeline was particularly important.
Accomplishments that we're proud of
⚡ Built an end-to-end AI website reconstruction workflow
Instead of stopping at code generation, Replicate.AI continues through build validation, preview, and modification.
🧠 Multi-agent architecture
We separated analysis, planning, generation, validation, repair, and modification instead of putting everything into one prompt.
🎨 Visual + structural understanding
The system considers both the website's underlying structure and its visual presentation.
📱 Responsive reconstruction
Desktop and mobile layouts are considered during the reconstruction process.
🔧 Self-repairing generation
When generated code encounters basic build problems, the Repair Agent can diagnose the error and attempt a fix.
💬 Natural-language coding
Users can modify the generated application using normal language rather than manually editing every component.
🌐 Designed for multiple websites
The architecture is based on a structured intermediate representation rather than website-specific templates.
📊 Engineering visibility
The system tracks agent stages, validation results, generation attempts, and other useful execution information.
Most importantly, we built the project around the actual evaluation areas of the assignment: frontend recreation, AI-agent implementation, generalization, code quality, modification, error handling, and cost awareness.
What we learned
We learned that AI code generation is only one part of an AI engineering system.
The difficult part is building the feedback loop around the model.
A reliable workflow looks more like:
Observe → Understand → Plan → Generate → Execute → Validate → Repair → Improve
rather than:
Prompt → Code
We also learned that structured intermediate representations make AI systems much more reliable. The WebsiteSpec gives different agents a common understanding of the website and reduces the amount of raw information that needs to be repeatedly sent to the model.
Another important lesson was that validation must be part of generation. Generated code should not be considered successful simply because an LLM returned code — it needs to build, run, and be inspected.
Finally, we learned that good AI engineering requires balancing quality, reliability, latency, and cost, especially when multiple AI calls are involved.
What's next for Replicate.AI ⚡
Replicate.AI is currently designed as a strong local MVP, but the architecture can evolve much further.
🚀 Smarter visual reconstruction
Introduce stronger computer-vision-based screenshot comparison to automatically identify differences between the original and generated frontend.
🤖 Autonomous improvement loop
Allow the agent to repeatedly:
Generate → Screenshot → Compare → Identify Differences → Fix → Repeat
until the visual result reaches a configurable threshold.
🧩 More framework support
Expand beyond React/Next.js to:
Vue Svelte Astro 🧠 Better component understanding
Automatically identify reusable patterns such as:
cards navbars hero sections pricing tables testimonials forms footers
and turn them into reusable component systems.
💻 Live AI coding workspace
Turn Replicate.AI into an interactive environment where users can chat with the agent while seeing the generated code and preview update in real time.
🌎 Multi-page reconstruction
Move from cloning a single landing page to reconstructing complete websites with:
multiple routes shared layouts navigation internal pages responsive states ☁️ Scalable execution
Eventually move generated projects into isolated cloud sandboxes so multiple reconstructions can run concurrently.
Built With
- fastapi
- llm/vision-ai
- next.js
- playwright
- pydantic
- python
- react
- shadcn/ui
- sqlalchemy
- sqlite
- tailwind-css
- typescript
Log in or sign up for Devpost to join the conversation.