DEV Community

Cover image for I Made an AI Template That Clones Any Website to Next.js (Works with Cheaper Models Too)
Alexander Adrian
Alexander Adrian

Posted on

I Made an AI Template That Clones Any Website to Next.js (Works with Cheaper Models Too)

#ai #automation #nextjs #showdev

I was tired of hosting costs.

My company runs several PHP sites on traditional VM hosting. Every month, same bills. Every small traffic spike, same scaling headaches. I kept thinking: "What if these were just static Next.js on serverless?"

But manually converting pages? Boring. Hiring someone? Too many pages, not enough budget. Using AI? Obvious solution, except...

Every guide assumes you have Claude Sonnet or GPT-5. I tried the cheaper models first (DeepSeek, GPT-4o-mini) and they kept hallucinating or creating weird folder structures. The prompts weren't designed for them.

So I spent a weekend figuring out how to make AI instructions that work regardless of which model executes them.

The Template That Doesn't Care What AI You Use

I made instruction files that produce consistent conversions whether you're using:

  • Premium models (Claude Sonnet, GPT-4o)
  • Budget models (DeepSeek, Qwen, GPT-4o-mini)
  • Open source (Llama, GLM-4)
  • Whatever's in your IDE (Google Antigravity, Cursor, Windsurf, Trae)

The key was treating AI instructions like infrastructure-as-code. Clear steps, explicit rules, no ambiguity.

What It Actually Does

Takes any website's frontend (static) and converts it to Next.js:

Input: any static web link

Output: Modern Next.js component with Tailwind CSS

You get the visual appearance cloned - HTML structure, CSS styling, responsive layout. Backend logic? You implement that separately after.

Think of it as: "Make this look the same in Next.js, I'll handle the functionality myself."

How It Works

Two instruction files:

  1. Full version - Detailed explanations, edge cases covered
  2. Lite version - Step-by-step checklist, optimized for simpler models

Both produce the same output. Use Full with premium models, Lite with budget ones.

The workflow is dead simple:

# 1. Give AI the instruction file
# 2. Point it at your page
curl https://yoursite.com > page.html

# 3. AI converts it to Next.js
# Output: app/page.tsx with Tailwind classes
Enter fullscreen mode Exit fullscreen mode

What makes it work across models? Explicit scope control.

Cheap models love to be "helpful" - they'll try to fetch linked pages, offer to set up your entire project, suggest deployment configs you didn't ask for. The instructions say:

Convert THIS page only. Don't fetch other pages. Don't offer setup help. Just give me the code and stop.

Turns out, being blunt with AI works better than being polite.

Real Example

Here's a before/after from our TCG site:

Original: PHP page with navigation, sections, footer

Converted: Next.js component, 90%+ visual match, deployed to Azure Static Web Apps

The AI (I tested with Trae built-in model - no idea what it actually uses) preserved:

  • Navigation structure
  • Black/white color scheme
  • Logo placement
  • Footer layout

It got wrong:

  • Made navigation mobile-first (hamburger menu instead of horizontal)
  • Inverted some icon colors

Total time: 10 minutes to convert, 10 minutes to fix the navigation. Still faster than writing from scratch.

What I Learned

1. Instruction design matters more than model choice

A well-structured prompt on DeepSeek beats a vague prompt on Claude Sonnet.

2. Tables > Prose for AI instructions

Putting transformation rules in tables (HTML → JSX conversion map) works way better than paragraphs explaining the same thing.

3. Cheaper models need stricter boundaries

Premium models can infer intent. Budget models need explicit "DO NOT do X, Y, Z" lists.

4. Test with unknown models

I validated this with Trae (black box - don't know the backend model).

The GitHub Repo

I open-sourced the whole thing:

  • Instruction files (Full + Lite versions)
  • Prompt templates
  • README with examples

Repo: github.com/ksmgen/NEKO-Template

It's MIT licensed. Use it, modify it, whatever. I built this for our internal use and figured others might find it useful.

When This Works (and When It Doesn't)

Good for:

  • Converting static pages (about, landing, marketing pages)
  • WordPress theme migrations
  • Legacy PHP frontends
  • Documentation sites

Not good for:

  • Complex SPAs (already modern)
  • Heavy JavaScript interactions
  • Real-time features
  • When you need the backend logic too

You're cloning appearance, not functionality. Backend is your job.

Cost Breakdown

For reference, here's what I spent testing different models:

  • Claude Sonnet: ~$0.07 per page (premium quality)
  • GPT-4o-mini: ~$0.003 per page (good enough)
  • DeepSeek-V3: ~$0.001 per page (surprisingly decent)

Even if you convert 100 pages with Claude Sonnet, that's $7. Compare that to hiring someone at $50/page = $5,000.

The template paid for itself in one project.

Why I'm Sharing This

I'm not selling anything. No course, no SaaS, no affiliate links.

I just got tired of seeing "use AI for development" content that assumes everyone has unlimited API budgets. Sometimes you need to use what you have.

If this template helps you migrate an old site without breaking the bank, that's enough.

Try it out: github.com/ksmgen/NEKO-Template

Questions? Drop them in the comments.

Top comments (0)