You know that feeling when you see a beautifull website and think "I wish I could build something like that"?
Yeah, me too. Except I got tired of manually inspecting elements, copying hex codes, and pretending I understand why designers use 47 shades of gray.
So I built something that does it for me. And honestly? It works better than it should.
The Problem (AKA Why I Did This)
Here's my typical workflow when I see a nice landing page:
- Open DevTools
- Start copying CSS values
- Get distracted by how messy their code is
- Forget what I was doing
- Give up and use a template
- Hate myself a little
Sound familiar?
I wanted something that could just... look at a website and recreate it. Not pixel-perfect (that's what screenshots are for), but structurally accurate with the right design tokens.
Quick Setup
Before we dive in, here's how to get this running (takes like 2 minutes):
# 1. Clone the repo
git clone https://github.com/anthropics/buildmate
cd buildmate
# 2. Install
python3 -m venv .venv
.venv/bin/pip install -e .
# 3. Bootstrap your project (pick what you need)
buildmate nextjs+fastapi /path/to/project # Full-stack cloning
buildmate nextjs+fastapi+scraping /path/to/project # Full-stack + multi-page
buildmate nextjs /path/to/project # Frontend only
Stack breakdown:
-
nextjs- Frontend (Next.js + Tailwind) -
fastapi- Backend (FastAPI + SQLAlchemy + JWT auth) -
scraping- Multi-page site crawling (/clone-sitecommand)
Enter the Clone Commands
I added three skills (slash commands) that invoke specialized AI agents:
/analyze-site <url> # → site-analyzer agent
/clone-page <url> # → ui-cloner + api-generator agents
/clone-site <url> # → all three agents working together
And here's the kicker - it doesn't just clone the frontend. It generates the backend too. Full-stack cloning with one command.
Let me show you what they actually do.
Let's Clone Cal.com (For Science)
I picked cal.com because:
- It's open source (so no weird ethical stuff)
- The design is clean and modern
- Developers actually know what it is
- Their landing page has good variety of components
Step 1: Analyze the Site
/analyze-site https://cal.com
The site-analyzer agent wakes up and does its thing. It's not just taking a screenshot - it's actually understanding the page:
Analyzing https://cal.com...
Extracting:
- Color palette (primary, secondary, accents)
- Typography (fonts, sizes, weights)
- Spacing system (margins, paddings, gaps)
- Component structure (hero, features, testimonials)
- Layout patterns (grid, flex, positioning)
Analysis saved to .agent-pipeline/site-analysis.md
Here's what the analysis looks like (abbreviated):
# Site Analysis: cal.com
## Design Tokens
### Colors
- Primary: #111827 (near black)
- Accent: #2563eb (blue)
- Background: #ffffff
- Text Secondary: #6b7280
- Border: #e5e7eb
### Typography
- Headings: Cal Sans, Inter (fallback)
- Body: Inter
- Sizes: 14px, 16px, 18px, 24px, 36px, 48px, 60px
### Spacing
- Base unit: 4px
- Common gaps: 16px, 24px, 32px, 48px, 64px
## Components Identified
1. **Navigation**
- Logo left, links center, CTA right
- Sticky on scroll
- Mobile hamburger menu
2. **Hero Section**
- Large heading with gradient text
- Subheading with muted color
- Two CTA buttons (primary + secondary)
- Product screenshot below
3. **Features Grid**
- 3-column layout
- Icon + title + description pattern
- Hover effects on cards
4. **Testimonials**
- Carousel/slider
- Avatar + quote + name + company
5. **Footer**
- Multi-column links
- Newsletter signup
- Social icons
The agent extracts the actual values, not just "it looks blue-ish". These are real design tokens you can use.
Step 2: Generate the Code
Now the fun part:
/clone-page https://cal.com --frontend nextjs --ui tailwind
But here's the thing - it doesn't just yolo generate code. First, it shows you a plan:
┌─────────────────────────────────────────────────────────────────┐
│ CLONE GENERATION PLAN │
├─────────────────────────────────────────────────────────────────┤
│ Source: https://cal.com │
│ Output: ./ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ FRONTEND (Next.js + Tailwind) │
│ ├── Pages: 1 (landing) │
│ ├── Components: 12 (5 sections, 7 UI) │
│ └── Output: ./frontend/ │
│ │
│ BACKEND (FastAPI) │
│ ├── Models: 2 (User, Subscription) │
│ ├── Endpoints: 5 (auth, subscribe, etc.) │
│ └── Output: ./backend/ │
│ │
├─────────────────────────────────────────────────────────────────┤
│ Proceed? [y/n] │
└─────────────────────────────────────────────────────────────────┘
You get to review before it writes anything. After confirmation:
Generating...
./cloned/
├── frontend/
│ ├── src/
│ │ ├── app/
│ │ │ ├── page.tsx
│ │ │ └── layout.tsx
│ │ ├── components/
│ │ │ ├── ui/
│ │ │ │ └── Button.tsx
│ │ │ └── sections/
│ │ │ ├── Hero.tsx
│ │ │ ├── Features.tsx
│ │ │ └── Testimonials.tsx
│ │ └── hooks/
│ └── package.json
│
└── backend/
├── app/
│ ├── api/routes/
│ │ └── auth.py
│ ├── models/
│ │ └── user.py
│ └── main.py
└── pyproject.toml
Done! Frontend: npm run dev | Backend: uvicorn app.main:app
Running What You Cloned
The clone generates the code, but you need to install dependencies:
# Frontend
cd cloned/frontend
npm install
npm run dev
# → http://localhost:3000
# Backend (in another terminal)
cd cloned/backend
pip install -e ".[dev]"
docker-compose up -d db # Start PostgreSQL
alembic upgrade head # Run migrations
uvicorn app.main:app --reload
# → http://localhost:8000
# → API docs at http://localhost:8000/api/docs
Full-stack. One command to generate, a few more to run. I still can't belive it works.
And here's what it looks like running at localhost:3000:
Live demo: calcom-clone-experiment.vercel.app — yes, this is the actual output. I deployed it so you can see for yourself.
Source code: github.com/vadim7j7/calcom-clone-experiment — the full generated code, unedited.
What You Actually Get
Here's the Hero component it generated:
// components/Hero.tsx
export function Hero() {
return (
<section className="pt-24 pb-16 px-4 md:px-8 lg:px-16">
<div className="max-w-6xl mx-auto text-center">
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">
Scheduling infrastructure
<span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
{" "}for everyone
</span>
</h1>
<p className="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto mb-8">
The open source Calendly alternative. Self-host or let us handle it.
White-label by design.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<button className="px-6 py-3 bg-gray-900 text-white rounded-lg font-medium hover:bg-gray-800 transition-colors">
Get Started
</button>
<button className="px-6 py-3 border border-gray-300 rounded-lg font-medium hover:bg-gray-50 transition-colors">
View Demo
</button>
</div>
</div>
</section>
);
}
Is it pixel-perfect? No. Is it 90% there and actually usable? Yes.
Why Agents Instead of Just... Code?
Good question. Here's why this is a multi-agent thing:
The Site Analyzer Agent
This one's job is understanding, not generating. It:
- Fetches the page (handles JS rendering if needed)
- Extracts visual patterns
- Identifies component boundaries
- Pulls exact design token values
- Discovers data models and API endpoints
- Creates structured documentation (both JSON and Markdown)
It doesn't write code. It writes a brief for someone who will. And now it looks for backend stuff too - what data the page displays, what API calls it makes, what auth methods exist.
The UI Cloner Agent
This one's job is building the frontend. It:
- Reads the analysis (not the original site)
- Knows framework-specific patterns
- Generates idiomatic code for your stack
- Applies the design tokens correctly
- Creates proper file structure
- Asks for confirmation before generating
And it doesn't create giant monolithic components. The cloner follows atomic design:
components/
├── ui/ # Atoms: Button, Card, Input
├── sections/ # Organisms: HeroSection, Features
└── layout/ # Templates: PageLayout
So when it generates a HeroSection, it imports the Button from ui/ instead of copying button styles inline. You get components you can actually reuse across your project:
// It generates THIS (reusable)
import { Button } from '../ui/Button';
export function HeroSection() {
return (
<div>
<h1>Title</h1>
<Button size="lg">Get Started</Button> {/* Reusable! */}
</div>
);
}
// NOT this (copy-paste nightmare)
export function HeroSection() {
return (
<div>
<h1>Title</h1>
<button className="px-6 py-3 bg-indigo-600..."> {/* Duplicated everywhere */}
Get Started
</button>
</div>
);
}
Separation of concerns, even for AI agents.
The API Generator Agent (New!)
This is the new one. It handles the backend:
- Reads the site analysis (data models, endpoints, auth)
- Generates FastAPI code (Rails and Express coming soon)
- Creates SQLAlchemy models with proper relationships
- Sets up JWT authentication (email + OAuth)
- Generates database migrations with Alembic
- Includes proper Pydantic schemas for validation
The backend it generates isn't a toy - it's production-ready with:
- Async database operations
- Password hashing (bcrypt)
- Token refresh flows
- CORS configuration
- OpenAPI docs at
/api/docs
Why This Matters
If one agent did everything, it would:
- Mix up analysis with generation
- Conflate frontend and backend concerns
- Generate inconsistent code
- Be harder to debug when things go wrong
With three agents, you can:
- Review the analysis before generating anything
- Generate frontend only (
--no-backend) - Generate backend only (
--no-frontend) - Swap output formats without re-analyzing
- Debug issues at the right layer
All the Formats
The cloner supports pretyt much everything:
| Format | What You Get |
|---|---|
html |
Single index.html (quick prototypes) |
react |
CRA-style components |
nextjs |
App router structure |
native |
React Native + StyleSheet |
vue |
Single File Components |
svelte |
.svelte files |
And UI libraries:
/clone-page --format react --ui tailwind # Tailwind CSS
/clone-page --format react --ui shadcn # shadcn/ui
/clone-page --format react --ui mantine # Mantine
/clone-page --format react --ui chakra # Chakra UI
/clone-page --format react --ui mui # Material UI
Same analysis, different output. The agent knows how each library works and generates appropriate code.
But Wait, There's More: /clone-site
/clone-page is great for landing pages. But what if you want to clone an entire e-commerce site? Or a SaaS dashboard with 15 different page types?
That's what /clone-site is for:
/clone-site https://example-store.com --depth 2 --max-pages 20
It crawls the site, discovers pages, and then does something smart - it deduplicates shared components.
┌─────────────────────────────────────────────────────────────────┐
│ SITE DISCOVERY │
├─────────────────────────────────────────────────────────────────┤
│ Pages Found: │
│ ├── / (landing) │
│ ├── /products (listing) │
│ ├── /products/:id (detail) │
│ ├── /cart (form) │
│ ├── /checkout (multi-step) │
│ ├── /login (auth) │
│ └── /account/orders (dashboard) │
│ │
│ Shared Components Detected: │
│ ├── Header (all pages) │
│ ├── Footer (all pages) │
│ ├── ProductCard (3 pages) │
│ └── Button (47 instances) │
└─────────────────────────────────────────────────────────────────┘
Instead of generating 47 different buttons, it creates ONE reusable Button component. The output is actually maintainable.
Clone Site Options
# Limit how deep to crawl
/clone-site https://example.com --depth 3
# Only certain sections
/clone-site https://example.com --include "/products/*,/categories/*"
# Skip admin pages
/clone-site https://example.com --exclude "/admin/*"
# Frontend only (skip backend generation)
/clone-site https://example.com --no-backend
# Custom output directory
/clone-site https://example.com --output ./my-clone/
Real Talk: What It's Good For
Great For:
- Learning - See how designs translate to code
- Prototyping - Quick starting points
- Client work - "Make it look like X" becomes easier
- Component inspiration - Steal patterns, not pixels
- Design system extraction - Pull tokens from sites you admire
Not Great For:
- Pixel-perfect clones - Use Figma for that
- Complex interactions - Animations need manual work
- Dynamic content - It clones structure, not functionality
- Replacing designers - Please don't
The Workflow I Actually Use
Here's my real process now:
# 1. Find inspiration
# Browse Dribbble, land-book, or just cool sites I find
# 2. Clone it (with confirmation)
/clone-page https://site-i-like.com --frontend nextjs --ui tailwind
# 3. Review the plan, confirm
# Agent shows me what it'll generate, I say yes
# 4. Customize
# This is where the real work begins
For multi-page sites:
# Clone an entire e-commerce site
/clone-site https://cool-store.com --depth 2 --max-pages 15
# Review the plan (pages, components, models, endpoints)
# Confirm
# Get a full-stack app with:
# - Frontend: Next.js with all pages and shared components
# - Backend: FastAPI with models, routes, auth
The clone isn't the final product. It's the starting point that would have taken me a day to set up manually.
But Wait, Does It Actually Work?
Here's the thing - generated code is just code. It might have bugs. It might not even compile. That's why Buildmate doesn't stop at generation.
After cloning, I run the code through the same validation pipeline as any other feature:
# Verify the clone actually works
/verify
This kicks off the quality gates:
Running quality gates...
TypeScript: Checking types...
✓ No type errors
Lint: Running ESLint...
⚠ 3 warnings in Hero.tsx
→ Auto-fixing...
✓ Fixed
Build: Running next build...
✓ Build successful
Tests: Running test suite...
⚠ No tests found for new components
The Frontend Agents Jump In
If something's broken, you don't have to fix it manually. The grind agent handles it:
/grind
Grind agent activated...
Issues found:
1. Missing 'use client' directive in Testimonials.tsx
2. Image component not using next/image
3. Unused import in Footer.tsx
Fixing...
✓ Added 'use client' to Testimonials.tsx
✓ Replaced <img> with <Image> component
✓ Removed unused import
Re-running quality gates...
✓ All checks pass
The grind agent knows Next.js patterns. It doesn't just delete the error - it fixes it properly.
Want a Code Review Too?
/review
The frontend-reviewer agent looks at the generated code with fresh eyes:
## Code Review: Cloned Components
### Overall
Clean component structure. Design tokens applied consistently.
### Suggestions
**Hero.tsx**
- Consider extracting gradient colors to tailwind config
- Button styles could be a reusable component
**Navbar.tsx**
- Mobile menu needs aria-labels for accessibility
- Consider usePathname for active link highlighting
**Performance**
- Add loading="lazy" to below-fold images
- Testimonials carousel could use dynamic import
Now you have AI-reviewed, validated code instead of "hope this works" code.
The Full Clone-to-Production Flow
# 1. Clone (with confirmation)
/clone-page https://cal.com --frontend nextjs --ui tailwind
# 2. Verify both frontend and backend compile
/verify
# 3. Fix any issues automatically
/grind
# 4. Get code review
/review
# 5. Ship it
/ship
Five commands. From "I like that website" to "full-stack PR ready for review".
Want the full orchestrated experience? Run /pm Clone cal.com as a Next.js app and let the orchestrator handle everything - planning, cloning, verification, review. One command, zero babysitting.
Tips From Actually Using This
Tip 1: Simple pages work best
Landing pages, marketing sites, dashboards - these clone well. Complex web apps with lots of state? Not so much.
Tip 2: Check the analysis first
Sometimes the analyzer misses things or gets confused. Quick review saves headaches later.
Tip 3: Mix and match
Analyze three sites, take colors from one, typography from another, layout from the third. The analysis files are just documentation - combine them however you want.
Tip 4: Use it for learning
Seriously, analyzing well-designed sites and seeing how they structure things taught me more than any CSS course.
Tip 5: Don't be creepy
Clone patterns and approaches. Don't clone someone's actual business and pretend it's yours. That's not cool.
Try It Yourself
After setup (see Quick Setup at the top), start Claude Code and run:
# Single page (full-stack)
/clone-page https://cal.com --frontend nextjs --ui tailwind
# Frontend only
/clone-page https://cal.com --frontend nextjs --no-backend
# Multi-page site (needs +scraping stack)
/clone-site https://example-store.com --depth 2
That's it. Go clone something cool.
What's Next?
Things I'm still thinking about:
- Screenshot comparison - Visual diff between original and clone
- More backend frameworks - Rails and Express are on the roadmap
- Design token export - Figma/Tokens Studio format
- Animation extraction - Detect and document transitions
But honestly, the current version does 90% of what I need. Full-stack cloning with three agents is already kind of insane.
Got questions? Found a site that breaks it? Let me know.
And if this saved you time, maybe grab me a coffee? ☕
Built with Buildmate - because manually setting up AI agents is so 2024.
Top comments (0)