DEV Community: Vadim Karnopelev

I Built a Website Cloner with AI Agents (And It's Kinda Scary Good)

Vadim Karnopelev — Thu, 12 Feb 2026 10:45:40 +0000

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-site command)

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? ☕

☕ Buy Me A Coffee

Built with Buildmate - because manually setting up AI agents is so 2024.

How to Actually Use Buildmate (The Practical Guide)

Vadim Karnopelev — Mon, 09 Feb 2026 00:10:22 +0000

because "just read the docs" isn't helpful and we both know it

Hit the paywall? Read this article for free here

So You Installed It, Now What?

Ok so maybe you read my first post about Buildmate. Or maybe you just found the GitHub and thought "cool I'll try it." Either way - you got it installed but now you're staring at your terminal like "...what do I actually do with this thing?"

Yeah I get it. Docs are great and all but sometimes you just want someone to show you how they actually use the thing. So thats what this is. Real workflows. Real commands. Stuff I actually do every day.

Lets go.

Quick Setup (In Case You Skipped It)

If you already did this skip ahead. If not:

git clone https://github.com/vadim7j7/buildmate.git
cd buildmate
python3 -m venv .venv && .venv/bin/pip install -e .

Then bootstrap your project:

# Pick your stack
buildmate rails /path/to/my-app
buildmate nextjs /path/to/my-app --ui=tailwind
buildmate rails+nextjs /path/to/my-app

# Or just use a preset
buildmate --profile saas /path/to/my-app

Not sure what stacks are available? Check with:

buildmate --list           # all stacks
buildmate --profiles       # preset combos
buildmate --options nextjs # options for a stack

After this you got a .claude/ folder with all the agent stuff. Thats it. Your ready.

Your First /pm Command

Ok so /pm is the main thing. PM stands for Project Manager. Its the command that kicks off the whole workflow - planning, building, testing, reviewing, everything.

Lets try it. Open your project and run claude, then type:

/pm Build a user profile page with avatar, bio, and edit functionality

Heres what happens:

Phase 1 - Planning (this part is interactive)

PM: Ok so for user profile, I'm thinking:

    Requirements:
    - Profile page showing avatar, name, bio
    - Edit mode to update info
    - Avatar upload (or URL?)
    - Save/cancel buttons

    Questions:
    - Should avatar be file upload or just URL input?
    - Where does this page live? /profile? /settings?
    - Need to create User model or exists already?

You: URL is fine for now. /profile route. User model exists.

PM: Cool, heres the plan:
    [shows feature file with all the details]

    Ready to build?

You: yep go

Phases 2-5 (automatic from here)

Now it just runs. You dont do anything.

[Phase 2: Implementation]
→ Spawning backend-developer...
→ Creating ProfileController
→ Adding routes
→ Spawning frontend-developer...
→ Creating ProfilePage component
→ Creating EditProfileForm component

[Phase 3: Testing]
→ Spawning testers...
→ Writing controller specs
→ Writing component tests
→ Running quality gates...
→ Grind agent fixing 2 lint errors...

[Phase 4: Review]
→ Spawning reviewers...
→ Backend review: APPROVED
→ Frontend review: APPROVED

[Phase 5: Verification]
→ Starting dev server...
→ Testing /profile route...
→ Component renders ✓
→ Form submits ✓

Done! Score: 0.89 (B+)

And now you have a working profile page. With tests. Reviewed. Verified.

I know it sounds like magic but its not really. Its just agents doing their specific jobs in order. Backend dev writes backend. Frontend dev writes frontend. Tester writes tests. Each one is focused on one thing.

The Agents (Who Does What)

Quick reference cause I always forget:

Agent	What It Does	When It Runs
PM/Orchestrator	Plans the work, coordinates everyone	First, stays in control
Backend Developer	Writes Rails/FastAPI code	Phase 2
Frontend Developer	Writes React/Next.js code	Phase 2
Backend Tester	Writes backend tests	Phase 3
Frontend Tester	Writes frontend tests	Phase 3
Grind	Runs linters in loop, fixes errors	Phase 3
Verifier	Actually runs the code to test it	Phase 3-4
Reviewers	Code review	Phase 4
Eval	Scores the code	Phase 5
Security Auditor	Checks for vulnerabilities	When you ask

They live in .claude/agents/ as markdown files. You can read them if your curious. Or edit them - more on that later.

Commands You'll Actually Use

/pm "task"

The big one. Full workflow.

/pm Add pagination to the products list
/pm Fix the login bug where sessions expire too fast
/pm Build checkout flow with Stripe integration

Use this for anything substantial. Features, big fixes, new pages.

/verify

Tests your code by actually running it. This ones newer and honestly I use it all the time now.

/verify                              # test last changes
/verify --component Navbar           # test specific component
/verify --endpoint POST /api/users   # test specific endpoint
/verify --page /dashboard            # test whole page

If something fails it tries to fix it automatically. Up to 3 times.

/new-model and /new-component

Quick scaffolding. Creates the thing plus tests plus all the boilerplate.

/new-model Product name:string price:decimal active:boolean
/new-component ProductCard
/new-component forms/CheckoutForm

Way faster than doing it manually. Follows your project conventions too.

/parallel

Got independent tasks? Run them at the same time.

/parallel "Add user avatars" "Add product images" "Add company logos"

Creates separate git worktrees, runs agents in each, merges when done. I use this when I got a bunch of similar things to do.

/security

Security audit. Run it before you deploy pls.

/security

Checks for injection, auth issues, XSS, CSRF, all that OWASP stuff.

/eval

Just want a score without the whole workflow?

/eval

Gives you the grade. Good for checking your own work.

/test and /review

Sometimes you just want one thing:

/test          # just run tests
/review        # just review current changes

Git Workflow (The /branch → /ship Flow)

Ok so this one is newer and I use it all the time now.

Instead of manually creating branches, writing commit messages, pushing, writing PR descriptions at 5pm when your brain is fried... just:

/branch user-auth                    # creates feature/user-auth
# ... do your work or use /pm ...
/ship                                # commits, pushes, creates PR

Thats it. It auto-generates commit messages from your changes. Writes the PR description for you. Even runs quality gates before shipping.

More examples:

/branch login-fix --type fix         # creates fix/login-fix
/branch user-auth --issue 42         # links to github issue #42
/sync                                # rebase on main if youre behind
/ship --draft                        # create PR as draft

The /sync one is useful when main has moved ahead and you need to catch up. It handles the rebase (or merge if you prefer) and force-pushes for you.

/sync                    # rebase on main
/sync --merge            # merge instead of rebase
/sync --base develop     # sync with develop branch

And /ship does everything at once:

/ship                    # commit + push + create PR
/ship --draft            # same but draft PR
/ship --no-pr            # just commit and push, no PR

No more "oh wait I forgot to push." No more staring at the PR template trying to remember what you changed. It just does it.

Customizing Your Setup

Editing Agents

The agents are just markdown files. You can edit them.

.claude/agents/
├── orchestrator.md      # the PM brain
├── backend-developer.md # Rails/FastAPI dev
├── frontend-developer.md
├── grind.md
└── ...

Open one up. Youll see instructions, patterns, do's and donts. Change whatever you want.

For example maybe you want the backend dev to always use a specific gem:

## Rules

- Always use Pagy for pagination (not Kaminari)
- Always use Pundit for authorization
- ...

Just add it to the file. Next time it runs itll follow your rules.

Adding Patterns

Got coding patterns you always follow? Add them to .claude/patterns/.

These are reference docs the agents read. Stuff like "how we structure services" or "our API response format."

Changing Quality Gates

In the stack config you can change what commands run:

quality_gates:
  lint:
    command: bundle exec rubocop
    fix_command: bundle exec rubocop -A
  tests:
    command: bundle exec rspec

Add more, remove some, change commands. Whatever works for your project.

Real Workflows I Actually Use

Building a New Feature

This is like 80% of what I do:

1. /pm Build [feature description]
2. Answer a few questions about requirements
3. Approve the plan
4. Go get coffee
5. Come back, its done
6. Maybe tweak something small manually
7. Commit and push

Thats it. Most features take 10-15 minutes now instead of half a day.

Fixing a Bug

1. /pm Fix [describe the bug and where it is]
2. Agent reads the code, finds the issue
3. Fixes it
4. Writes a test so it doesnt happen again
5. Done

For small bugs I sometimes just do it myself cause its faster. But for anything tricky I let the agent figure it out.

Adding to Existing Code

1. /pm Add [thing] to [existing feature]
2. Agent reads the existing code first
3. Follows the patterns already there
4. Adds the new thing in the same style

This is where it really shines tbh. It actually reads your code and matches the style. No more "this new code looks totally different from everything else."

Quick Scaffolding Day

When I'm setting up a new project I'll just rapid fire:

/new-model User email:string name:string
/new-model Product title:string price:decimal
/new-model Order user:references total:decimal
/new-component Navbar
/new-component Footer
/new-component ProductCard
...

Boom. All the basics in like 5 minutes. With tests.

Common Issues (And How to Fix Them)

"Its stuck in a loop"

The grind agent will try 10 times then give up. If its not converging theres probably something weird going on. Read the error, might need manual fix.

"Agent didnt follow my style"

Edit the agent file in .claude/agents/. Add specific rules about your style. Be explicit - "always use X, never use Y."

"Tests keep failing"

Check if your test setup is correct. Sometimes the agent writes good tests but the test environment isnt configured right. Run the tests manually to see whats up.

"It made too many files"

Yeah it can get enthusiastic sometimes. You can tell it in the initial prompt: "keep it simple, minimal files."

"The code works but I dont like how its structured"

Use /review to get feedback, or just refactor yourself. The agents are good but theyre not perfect. Your judgment still matters.

Tips From Actually Using This Thing

Be specific in your prompts. "Build a login page" is ok. "Build a login page with email/password, remember me checkbox, forgot password link, and redirect to dashboard after" is better.
Answer the planning questions. Dont just say "whatever." The more context you give, the better the output.
Use /verify often. Catches dumb mistakes before you even see them.
Read the feature files. They live in .claude/context/features/. Good for remembering what was built and why.
Edit the agents. Seriously. Make them yours. Add your patterns, your rules, your preferences.
Trust but verify. The code is usually good but always do a quick look before shipping.
Use the git flow. /branch → do work → /ship. No more manual PR descriptions at 5pm.

Whats Next

Working on website cloning - point it at any site and itll generate your own version using your UI library. Thats gonna be a whole other post tho.

For now, go try this stuff. Break things. Fix things. Let me know what works and what doesnt.

GitHub: github.com/vadim7j7/buildmate

Found This Useful?

If this saved you some time maybe buy me a coffee?

☕ Buy Me A Coffee

Now go build something cool.

- Vadim

I Got Tired of Being a One-Man Dev Team (So I Built This Thing)

Vadim Karnopelev — Sun, 08 Feb 2026 08:21:11 +0000

aka how I finally stopped mass-complaining about linter errors at 2am... mostly

Ok So Here's the Thing

Its 3am. I'm so tired. Probably on my fifth coffee at this point, maybe sixth idk I lost count. Eyes are burning from staring at the screen. And I've been fighting with the SAME rubocop error for like an hour now.

You know the cycle right? Run rubocop. 3 errors. Fix them. Run again. Now its 2 different errors. Fix those. Run again. 5 ERRORS. HOW. I literally just fixed things and now theres MORE???

(I once spent 4 hours debugging something and it turned out I had a typo in a variable name. Four. Hours. I dont wanna talk about it.)

Anyway so I'm sitting there at 3am, questioning my life choices, and I'm thinking - wait. Didnt I become a developer to BUILD cool stuff? Not to fight with semicolons and copy paste Stack Overflow answers about "unexpected end of input"?

Thats basically why I made Buildmate. I got tired of doing everything myself lol.

What Is This Exactly

Ok so like... you know how in a real company you got different people doing different things:

Theres a developer who writes the code (and googles stuff constantly)
A tester who breaks everything (on purpose... hopefully)
Code reviewer who points out you forgot null checks again
Some PM who keeps everyone from losing their minds
Security person who tells you everything is wrong

Buildmate gives you all of these. But as AI agents. That actually talk to eachother and do stuff while you go get lunch or whatever.

Me: "/pm Build user authentication with OAuth"

Buildmate: "got it"

         → spawns a backend dev (writes the Rails code)
         → spawns frontend dev (does the React stuff)
         → spawns testers (writes tests, runs them)
         → runs linting in a loop until everything passes
         → actually RUNS the code to verify it works
         → fixes its own mistakes automatically
         → spawns reviewers (finds my mistakes)

Me: *drinking coffee* "nice"

I know it sounds wild. When I first got this working I didnt believe it either.

The Linter Loop From Hell (And How I Fixed It)

We've ALL been here:

$ rubocop
3 offenses detected

*fixes them carefully*

$ rubocop
2 offenses detected (different ones??)

*fixes those too*

$ rubocop
5 offenses detected

*stares at screen*
*questions existence*

I swear I've lost years of my life to this.

The fix: Theres this thing called the Grind Agent. It runs your linters in a loop and fixes stuff automatically. Until everythings green. Or until it gives up after 10 tries.

Grind Agent:
  Iteration 1: rubocop → 3 errors → fixing...
  Iteration 2: rubocop → 0 errors, nice
  Iteration 3: rspec → 2 failures → fixing...
  Iteration 4: rspec → all green

  Status: CONVERGED

  Fixed:
  - app/models/user.rb:15 - frozen_string_literal
  - spec/models/user_spec.rb:28 - nil vs empty string

You didnt do anything. It handled it.

"LGTM" Isnt Really a Code Review

Be real. When your tired and the PR has 47 files, "Looks Good To Me" really means "I looked at maybe 3 files and gave up."

We all do it. Its human nature.

The fix: Theres an Eval Agent that scores your code with actual grades.

Thing	Weight	Score
Correctness	30%	0.85
Code Quality	25%	0.90
Security	20%	0.95
Performance	15%	0.80
Test Coverage	10%	0.75
Final		0.87 (B)

Actual numbers. No more arguing about tabs vs spaces. It tells you stuff like "line 47 might have an N+1 query" or "this method is doing 5 things, split it up."

It Actually Tests Itself (This Is the Cool Part)

Most AI coding tools just write code and hope it works. You run it, it crashes, you spend 30 minutes debugging.

I got tired of that too.

So theres /verify. It actually RUNS your code:

Backend: Starts dev server, makes real HTTP requests, validates responses

Frontend: Opens a browser, navigates to your page, takes screenshots, checks if components render, looks for console errors

But heres the best part. If something fails? It fixes itself.

[Verification] Creating HeroSection...

[Testing]
- Starting dev server... ✓
- Looking for .hero-section...
- Component NOT FOUND ✗

[Analyzing]
- Component exists but not exported
- Adding export...

[Retry 1/3]
- Component found ✓
- No console errors ✓

Verification passed after 1 fix.

It built the component. Tested it. Found it wasnt exported. FIXED it. Tested again. All by itself.

Backend too:

[Verification] POST /api/users

- Making request...
- Status: 500 ✗

[Analyzing]
- Missing user_params method
- Adding to controller...

[Retry 1/3]
- Status: 201 Created ✓

Verification passed after 1 fix.

The stupid mistakes that take 20 minutes to debug? Gone.

Security (Actually Important)

Theres a Security Auditor agent. Checks OWASP stuff - injection attacks, auth problems, XSS, CSRF, etc.

## Security Report

Found: 2 issues

1. [MEDIUM] Possible SQL injection
   File: app/models/search.rb:45
   Fix: use parameterized query

2. [LOW] No rate limiting on login
   Suggestion: add rack-attack

Verdict: PASS WITH WARNINGS

I used to forget to check for this. Now it just happens.

How to Get Started

git clone https://github.com/vadim7j7/buildmate.git
cd buildmate
python3 -m venv .venv && .venv/bin/pip install -e .

# Bootstrap your project
buildmate rails /path/to/my-app
buildmate nextjs /path/to/app --ui=tailwind
buildmate rails+nextjs /path/to/app  # fullstack

# Or use a preset
buildmate --profile saas /path/to/app

Then:

/pm "Build user authentication"

And watch it work.

Commands Cheat Sheet

Command	What it does
`/pm "thing"`	Full workflow - plan, build, test, review
`/verify`	Actually runs your code to test it
`/verify --component Hero`	Test specific component
`/verify --endpoint /api/users`	Test specific endpoint
`/parallel "a" "b"`	Do multiple things at same time
`/new-model Name`	Create model + migration + spec + factory
`/new-component Name`	Create component + test
`/security`	Security audit
`/eval`	Score the code

The /verify one is new and honestly its my favorite now.

FAQ

"What if the AI makes mistakes?"

It will. But:

Verify agent RUNS your code and catches runtime errors
If something breaks, it fixes automatically (up to 3 times)
Grind agent catches lint/type errors
Eval agent scores it so you know if its good

Most AI tools just write code and pray. This one tests it.

"Will it work with my project?"

Yeah. It just creates a .claude/ folder. Doesnt touch your code unless you ask.

"What frameworks?"

Rails, Next.js, FastAPI, React Native. More coming.

Coming Soon: Website Cloning

Working on something kinda crazy:

/analyze-site https://some-cool-website.com
/clone-page https://some-cool-website.com/pricing

It will look at any website, extract the design, and generate YOUR code using YOUR UI library. See a landing page you like? Clone it.

Will write a whole post about it when its ready. Follow me so you dont miss it.

Try It

git clone https://github.com/vadim7j7/buildmate.git
cd buildmate
python3 -m venv .venv && .venv/bin/pip install -e .

buildmate rails /path/to/your-app
/pm "Build something cool"

Takes like 2 minutes.

Support This Thing

If Buildmate saved you from a 3am debugging session - maybe consider buying me a coffee?

☕ Buy Me A Coffee

DEV Community: Vadim Karnopelev

I Built a Website Cloner with AI Agents (And It's Kinda Scary Good)

The Problem (AKA Why I Did This)

Quick Setup

Enter the Clone Commands

Let's Clone Cal.com (For Science)

Step 1: Analyze the Site

Step 2: Generate the Code

Running What You Cloned

What You Actually Get

Why Agents Instead of Just... Code?

The Site Analyzer Agent

The UI Cloner Agent

The API Generator Agent (New!)

Why This Matters

All the Formats

But Wait, There's More: /clone-site

Clone Site Options

Real Talk: What It's Good For

Great For:

Not Great For:

The Workflow I Actually Use

But Wait, Does It Actually Work?

The Frontend Agents Jump In

Want a Code Review Too?

The Full Clone-to-Production Flow

Tips From Actually Using This

Try It Yourself

What's Next?

How to Actually Use Buildmate (The Practical Guide)

So You Installed It, Now What?

Quick Setup (In Case You Skipped It)

Your First /pm Command

The Agents (Who Does What)

Commands You'll Actually Use

/pm "task"

/verify

/new-model and /new-component

/parallel

/security

/eval

/test and /review

Git Workflow (The /branch → /ship Flow)

Customizing Your Setup

Editing Agents

Adding Patterns

Changing Quality Gates

Real Workflows I Actually Use

Building a New Feature

Fixing a Bug

Adding to Existing Code

Quick Scaffolding Day

Common Issues (And How to Fix Them)

Tips From Actually Using This Thing

Whats Next

Found This Useful?

I Got Tired of Being a One-Man Dev Team (So I Built This Thing)

Ok So Here's the Thing

What Is This Exactly

The Linter Loop From Hell (And How I Fixed It)

"LGTM" Isnt Really a Code Review

It Actually Tests Itself (This Is the Cool Part)

Security (Actually Important)

How to Get Started

Commands Cheat Sheet

FAQ

Coming Soon: Website Cloning

Try It

Support This Thing

Links