Originally published on no-code.supply.
TL;DR
- I built 15 website templates, each with its own brand, in about a week, with an AI coding agent (Claude Code) doing the typing.
- The agent pretty much one-shotted the designs. My job moved from building to directing: the idea, the quality bar, and the final call.
- Where AI really shines: speed, bug hunting, and packaging it all as a business.
- Every template is AI-ready: it ships with docs your own AI assistant can read, so it edits the template the way it was built.
- Yes, some people call it AI slop. They're templates. A template is where your site starts, not where it ends.
Why I did this
I'm Lauri Lännenmäki, a design engineer. I've spent fifteen years designing and building for the web, most of it somewhere between Figma, Framer and code. I'm a consultant in Finland, and I freelance on nights and weekends. Before this I made Grit UI and Fhibli UI for Framer, and a handful of Framer code components. I'm also a certified Framer Pro Expert.
I've wanted my own template shop for a long time. What stopped me was always the same thing: time. Before this I only made Framer templates, and a good one took me at least a month, on and off. Doing fifteen of them, each drawn from scratch and shipped in two code editions, was never going to happen on nights and weekends.
So I wanted to find out: can one designer build a real template business with an AI agent doing most of the typing?
Short answer: yes. Let's dig in!
The setup
Two repositories and one agent:
- The templates repo: where every template is designed, built, reviewed and packaged. It also holds a small shared kit (the helpers every template reuses) and the tooling that checks and exports everything.
- The storefront: no-code.supply, a static Next.js site that shows and sells the templates. Checkout runs on Polar.
- The agent: Claude Code, on one of the higher-usage plans.
Every template ships in two editions:
- HTML: plain HTML, CSS and JavaScript. It opens straight from the folder you download. No build step, no accounts, no framework to learn.
- React: a Next.js + React + Tailwind project, with every word of copy in one file.
Some also get a Framer edition: Oda and Signal so far.
How one template gets made
Every template goes through the same phases. The agent does most of the work in each one. I decide when a phase is done.
1. The concept
This part is mine. Before any code exists, I decide what the template is: the industry, the brand, the mood, the type pairing, the palette and the one interaction people should remember.
Oda is an architecture studio designed as a drawing set: grid paper, hairline title blocks, sheet numbers, and line drawings that draw themselves as you scroll. Signal is a security SaaS. Meridian is travel. Each one gets its own identity, not a recolour of the last one.
For every concept I gave the agent 5–10 reference images and wrote down the typography (the type scale and its style), the spacing and the colour palette. And one rule above everything else: don't copy anything. Ever. The references set the mood. Everything on the page is created from scratch.
2. The first build
The agent builds the HTML edition from the concept. And this is the part that still surprises me: the first version is usually very close to done. I don't have a dramatic before/after to show you, because there isn't much of one. The first builds were just amazing. I had to change very little in any of the templates. Here and there I removed a section, but nothing much.
3. Review, docs and fixes
Close to done isn't done. This is where most of the time goes, and it's where the quality comes from.
Every template goes through the same definition of done before it ships:
- Zero console errors or warnings.
- No horizontal overflow at 360, 390, 768, 1024, 1440 and 1920 pixels wide.
- 0 serious or critical axe issues, a keyboard-only pass, and visible focus styles everywhere.
- WCAG 2.2 AA contrast for text.
- prefers-reduced-motion shows a complete, good-looking static page.
- No third-party requests at all. Fonts are self-hosted. No CDNs, no analytics.
- The HTML edition works from a double-clicked index.html, not just from a web server.
Lighthouse scores are a goal, not a rule. I aim for Accessibility ≥ 95, Best Practices ≥ 95 and SEO 100, but when a template's design calls for it, I'll accept a lower score.
That's a lot of checking. Luckily, checking is something the agent is very good at (more on that below).
4. The React edition
Same design, same copy, rebuilt as a Next.js project, then put through the same checklist.
5. Packaging
Zips, previews, a changelog, product copy, and the export to the storefront. More on this below too, because it turned out to be the most surprising part.
All in, it took about 3–6 hours to go from a design to a finished template in both editions.
AI-ready templates: what that actually means
This is the part I'm most proud of, and it's the reason I call these AI-ready templates.
Most people who buy a template in 2026 won't edit it by hand. They'll open it in Cursor, Claude Code or whatever assistant they use, and say "change the hero copy and make it blue." The problem: the assistant doesn't know how the template was built. So it guesses. It hard-codes a colour, breaks the mobile layout, or adds a dependency that breaks the no-build-step promise.
So every template ships with three files:
-
README.md: for you. How to install it, edit it, and move a section into another site. -
DESIGN.md: the design rationale. Tokens, type scale, the ideas behind the layout. -
AGENTS.md: for your AI assistant. Where things live, how the effects work, and the rules that must not break.
Here's a small piece of Oda's AGENTS.md:
## Rules that must not break
1. No external requests: no CDNs, Google Fonts, analytics or remote images.
3. Respect `prefers-reduced-motion`: new animations need a static equivalent.
6. Exactly one `<h1>`; keep headings ordered, landmarks, the skip link and `:focus-visible` styles.
8. Use existing tokens. If you need a new one, add it to `tokens.css` with a comment.
These files aren't an afterthought. The agent that built the template also wrote down how it built it, and I reviewed those docs like any other part of the product. So when your assistant opens the template, it follows the same rules the original was built with.
The Framer edition works the same way: it ships with Framer Skills that teach Framer's own agent how the site is built.
That's the idea behind AI-ready: the template is the starting point, and your AI assistant can take it the rest of the way without breaking it.
Where AI was great
Speed
The obvious one, but the numbers are still silly:
- 24 September: the templates repo starts.
- 26 September: the shop launches with the first six templates.
- 29 September: nine templates are out.
- 1 October: all 15 are done.
About a week. And not a full-time week, either: I did this around my consulting work, so the hours are hard to count.
Honestly, without AI I wouldn't have started this project at all. One template would have taken me months, let alone building an entire shop around them.
Bug hunting
This one surprised me. The agent spotted a lot of bugs by itself and fixed them without me telling it to. A few examples:
- Tender's form error colours failed contrast. You only see an error message when a form fails, so it's easy to never check its colour.
- Focus styles. Invisible with a mouse. You only notice them when you go through the page with a keyboard.
- An HTML comment could swallow markup in the step that exports a template to the store. A section could quietly disappear from a demo, with no error anywhere.
- Oda's reveal animations got clipped, cutting off the edges of elements as they animated in.
The list is much longer. Many times it corrected itself before I'd even noticed anything was wrong.
The quality checklist above is only realistic because of this. Checking six screen widths, two editions, reduced motion, keyboard navigation and contrast, on every template, after every change, is exactly the kind of boring, careful work people skip. The agent doesn't get bored.
Packaging it all as a business
This is the one I didn't see coming. Designing templates is maybe half of running a template shop. The other half is everything around them, and the agent built most of that too:
- The storefront itself: a static Next.js site with product pages, pricing, an All-Access offer and the legal pages.
- The export pipeline: one command takes a finished template and writes its product page data, previews and live demo into the store.
- The Polar sync: a script that creates the products in Polar, uploads each edition's zip, and writes the checkout links back to the site. When I ship an update, it swaps the files so every past buyer gets the new version.
- Share images: every product gets its own Open Graph image, generated at build time.
- The launch video: a script that films the store and the demos frame by frame and renders them to MP4. No screen recording, no editing app.
Without AI, the cost of all this would have been enormous for me. It would have been a long year of sleepless nights.
What I still had to bring
The agent did the typing. It didn't decide what's good. A few things were still my job:
- The concept. Every template starts with an idea only I can have: what it is, who it's for, what makes it memorable. And the rule that nothing gets copied.
- The bar. The definition of done above came from me. The agent meets the bar you set. Set it low and it'll happily ship something mediocre.
- The final call. I reviewed every template visually for bugs and checked that every interaction works. Basic stuff, but someone has to do it.
"Isn't this just AI slop?"
I've seen the comments. Some people say these templates are AI slop and that they clearly look AI-generated.
Here's the thing: they look good, and they're templates.
A template isn't the final site. It's where the final site starts. Nobody ships a template untouched. You add your brand, your copy, your photos, your product, your decisions. The template's job is to get you to a good, working, accessible starting point fast, so you can spend your time on the parts only you can do.
And "AI-generated" isn't what makes something slop. Slop is what you get when nobody made the decisions. Default fonts, default layouts, nobody checking whether it works on a phone or with a keyboard. Every one of these templates has its own concept, its own type pairing and its own signature interaction, and every one goes through the same checklist before it ships.
The AI wrote a lot of the code. It didn't decide what good looks like. I've seen hundreds, maybe thousands, of templates in my day, and to me these are top-tier by any standard.
What I'd tell a designer starting today
- Just try it. This is the biggest lesson. Get familiar with these tools. They're here to stay, and they can make your life a lot easier.
- Start with the concept, not the prompt. The clearer your idea, the closer the first build gets.
- Write your definition of done first. Think about the big picture you want to achieve. The agent will meet whatever bar you set.
- Make the agent write the docs. They help you, your buyers, and the next agent that opens the project.
- Hand it the tedious stuff. You don't have to do everything with AI. Give it the boring, careful work and keep the fun parts for yourself.
- Let AI do the business parts too. Checkout, exports, share images, even the launch video. That's where one person gets a lot more leverage.
- Experiment. Try things you wouldn't have had time for before.
FAQ
Can AI design a website on its own?
It can build a good one from a clear concept, and fast. The concept, the quality bar and the final call still come from a person. That's where the difference between a generic site and a good one comes from.
Are AI-built website templates any good?
They can be, if someone sets a real bar.
What is an AI-ready template?
A template that ships with docs your AI coding assistant can read: a README.md, a DESIGN.md and an AGENTS.md. The assistant then edits the template the way it was built, instead of guessing.
How long does it take to build a template with AI?
For me, about 3–6 hours from a design to a finished template, including both editions and the full quality checklist.
Do I need to know how to code to use these templates?
No. The HTML edition runs straight from the folder you download, with no build step, and the included docs let your AI assistant make changes for you.
Wrap-up
Building this shop with an AI agent changed what I think one designer can do. And I'm just getting started: more templates, and more posts like this one, are on the way.
If you read this far, thank you! 🙏
And if you'd rather skip all of this and start from something that has already been through the checklist, the templates are here. All-Access gets you every template, including every one I add later. 🔥
Top comments (0)