TL;DR
- You can turn a website template into your own site in about an hour with an AI coding agent. The hour is real only if you already have your copy and images ready. Writing them takes the rest of the day.
- The steps: unzip and open it, let the agent read the
AGENTS.md, swap the brand (name, colours, fonts), replace the copy, add one section, run the checks, deploy. - Do it in that order, and one step per prompt. Big "redesign everything" prompts are where it goes wrong.
- I'm using Tender, a landing page for company cards, in the HTML edition, and turning it into a product that has nothing to do with cards. The same steps work for the React edition and for any other template I sell.
- Prompts you can copy are below.
Why this works at all
I build these templates with Claude Code. (Here's how that went.) Because I built them that way, I also wrote them so that an agent can edit them without breaking them. That's the whole trick.
An agent is good at "change this, in the way this project already does things". It's bad at guessing what the rules of an unfamiliar project are. So every template ships with an AGENTS.md, a file that says where things live, which rules must not break and what "done" means. (What goes in one, and why.)
Your job in this walkthrough is small. Make sure the agent reads that file, give it clear steps, and check its work.
What you need
- A template. I'm using the HTML edition of Tender. If you're not sure which edition to buy, here's how I'd choose. HTML is the easiest to start with.
- An AI coding agent that can read and edit files in a folder. Claude Code, Cursor, Codex or Copilot's agent mode all do. I use Claude Code, so the prompts below are written for it, but nothing in them is specific to one tool.
- A code editor to look at what changed. VS Code is fine.
- Your content, ready. This is the part people skip. Your product's name, a short description of what it does, a sentence for each feature, your prices, your contact details, and the images or logos you want to use. Put it all in one text file.
- A free account on a static host for the last step. Vercel, Netlify or GitHub Pages all work.
No Node, no terminal and no build step for the HTML edition. For the React edition you'd also need Node, and you'd run npm install and npm run dev.
Step 1: Download, unzip, open
After you buy, the download is a zip file from Polar's customer portal. Unzip it somewhere you'll find it again.
Tender is a landing page for a spend-management product: company cards for creative studios, with live budgets and receipts that match themselves. I picked it because its sections are the ones most product sites need (features, how it works, pricing, FAQ, a call to action), so it's a fair test of how far one template stretches. For this post I turned it into Larder, a made-up stock and ordering app for restaurant kitchens. No payment cards anywhere.
For Tender's HTML edition the folder looks like this:
index.html the page, all the text in it
404.html, privacy.html
assets/css/tokens.css colours, fonts, sizes. Start here to rebrand
assets/css/main.css layout and section styles, in page order
assets/js/effects/ the card, the toasts, the calculator and the other demos
assets/fonts/ the included fonts, with their licences
assets/img/ favicon, social-share image
README.md, DESIGN.md, AGENTS.md
Double-click index.html. The site opens in your browser. That's the template, running, before you've done anything.
Now open the folder in your agent. In Claude Code that's cd into the folder and run claude. In Cursor it's File, Open Folder.
Step 2: Let the agent read the AGENTS.md
This step takes thirty seconds and saves the most trouble.
Most agents read AGENTS.md on their own when they start. Don't rely on it. Ask, and make the agent tell you what it found. If it can't repeat the rules back, it didn't take them in.
Read AGENTS.md, README.md and DESIGN.md in this folder. Then tell me in
five bullets: what this site is, where the colours and fonts live, where
the copy lives, which rules must never break, and what has to be true
before you say a change is done. Don't edit anything yet.
For Tender, a good answer mentions things like these, all from its AGENTS.md:
- There is no build step and there must never be one. The page has to keep working when
index.htmlis opened from disk. - Colours and fonts live in
assets/css/tokens.css, not inmain.css. - The demos ship in their finished state. If you change a number a demo starts from, the HTML has to change with it.
- No external requests: no CDNs, no Google Fonts, no analytics.
- Exactly one
<h1>, visible focus styles, andprefers-reduced-motionrespected.
If the summary skips the build-step rule, say it once more in your own words. Without it, the first thing a helpful agent does is add a bundler.
Step 3: Swap the brand
Do the brand in three small passes, so you can look after each one.
Colours first. Tender's tokens.css starts with a block called "Brand, start here": a background, a primary colour, a secondary one, an accent and the text colour. Every translucent version of them (hairlines, shadows, glass) is mixed from those values, so changing five lines recolours most of the page.
Rebrand the colours. Primary: a deep plum, #3B1E3F. Secondary: butter,
#F2D38A. Accent: tomato, #E5482F. Background: a warm white, #F7F3EE.
Change them in the Brand block of assets/css/tokens.css, and update the
darker and paler versions below it to match. Then search the whole
folder for the old hex values and list every place they still appear.
Check that text in the accent colour still reaches 4.5:1 on the
background, and tell me the ratios you got.
That last search is the part that matters, because "most of the page" isn't all of it. Tender's README warns that a few brand values are typed out in the HTML pages, the web manifest and the favicon. In my run the search found more than the README lists: the footer's big wordmark, the small card inside the phone mock-up, the text on one of the feature tiles and the edge of the card were all green, written straight into main.css. Each was a line or two to change, and the page would have shipped with green bits on a plum brand without them.
The card needed its own decision. Tender's README says the card finishes are illustration, not brand colour, so they don't follow the tokens. That's on purpose: a metal card has its own shading. The agent restyled the green finish into a plum one, following the README's "Change the card design" recipe, and renamed the swatches in the card maker to match.
Then fonts. Swapping a font is more than changing a name. The file has to be in the folder, there has to be an @font-face rule, and the token has to point at it.
Replace the sans font with <your font>. I've put the .woff2
files in assets/fonts/. Add the @font-face rules in assets/css/fonts.css,
update --f-sans in tokens.css, and update the font preload
script in the head of every HTML page if file names changed. Put the
licences in assets/fonts/licenses/ and update CREDITS.md and fonts.json.
No Google Fonts links.
"Every HTML page" is there because of my run. The README says to update the preload script in index.html. The 404 and privacy pages have the same script, and they'd have kept asking for font files that no longer exist.
The "No Google Fonts links" line is not decoration. An agent's first instinct for a new font is a link to a font service. That breaks the no-external-requests rule and your privacy page.
Pick a font with the same proportions. A designed layout is fitted to its font: three-line headlines, buttons sized to their labels, numbers lined up in columns. Swap in a wider font and headlines wrap onto a fourth line; a narrower one leaves gaps. Tender is set in Onest, so I asked the agent to compare the self-hosted fonts I already had against it: the width of the headline and of a line of body text, and the height of a lowercase x.
Compare these fonts against Onest at the weights the page uses: the
width of the hero headline at 600, the width of a body sentence at 400,
and the x-height. Report each as a ratio to Onest, then tell me which is
closest but still looks clearly different.
Schibsted Grotesk came out within 1% on every measure: the headline 0.6% wider, body text 0.7% narrower, the same x-height. It looks clearly different, with sharper, more squared-off letters than Onest's rounded ones, but every line on the page breaks in the same place. For the monospace I used Geist Mono, which I already had.
Then the name. The product name is in the nav, the title tag, the footer, the 404 and privacy pages, the web manifest, the social-share tags, the card itself and the notifications.
The product is called "<your name>", not Tender. Find every place the
old name appears that a visitor or a search engine can see (all three
HTML pages, site.webmanifest, the meta tags, the structured data in the
head, alt text) and update it. Leave the window.Tender namespace in the
scripts alone. List the files you changed.
Two things from my run. First, don't let the agent find-and-replace the name across the whole folder. The scripts use it as their namespace (window.Tender), and renaming that is how you break every demo on the page at once. Second, the name isn't only in the HTML. The little "tender" label on each notification in the hero is written in toasts.js. Ask the agent to search the scripts for the name as visible text, not as code.
Open the page, refresh, look. If something is off, fix it now, before the copy goes in.
Step 4: Replace the copy, or the whole idea
This is the long step, and it's the one that decides whether you finish in an hour.
In the HTML edition most of the text is in index.html, one section after another, and each section starts with a banner comment that says "SECTION:" and the section's name, like Hero or Pricing, so you and the agent can search for it.
Work one section at a time. Paste your content file in, and tell the agent which part is for which section.
Here is my content (below). Rewrite the Hero section of index.html using
it. Keep the same HTML structure, classes and data attributes, and keep
headlines about the same length as the originals so they still fit the
layout. Change text only. Don't touch any other section.
<paste the hero copy>
Then the same for Features, How it works, Pricing, and so on.
Two honest warnings:
- Length matters in a designed layout. Tender's headline is three short lines with a hand-drawn underline under one word. In my run the headline went from "Every card knows which job it's for" to "Stock that orders its own lemons". I kept the new lines about as long as the old ones (ten, ten and twelve characters), so the headline still breaks into three lines and the underline still sits under one word. Check it at phone width straight away.
- Don't ask the agent to invent your content. It will, confidently, and it will sound like every other product. The template's copy is written in a specific voice. Yours should come from you. Use the agent to fit your words in, and to tidy them, not to produce them.
Some of Tender's copy isn't in the HTML, because it changes while you watch: the notifications in the hero, the receipts and approvals in the feature tiles, and the calculator's sentence. The README's "Edit the text" section lists which script holds each one. Give the agent that list, or it will rewrite the HTML and leave the old product's receipts playing on a loop.
Your currency is part of the copy. Tender is priced in euros. Larder is American, so in my run everything moved to dollars. Tender's AGENTS.md says amounts are formatted in four scripts, which need to change together, and the HTML has the same amounts typed out for when the page first loads.
Switch the site from euros to US dollars. AGENTS.md lists the four
scripts that format amounts: change the locale and currency in all four.
Then change every euro amount typed into index.html and the scripts.
Before you finish, look for anything that converts between currencies
and check it still makes sense.
The last sentence of that prompt is the one I added after my run. A plain swap of "€" for "$" left one feature tile wrong: it shows foreign spend converted into your home currency, so it listed "USD $860" being converted into dollars at the old euro rate. The fix was to make that row euros and give the tile dollar rates. It's the kind of mistake that looks fine at a glance, and that's exactly why it's worth asking for.
Some things a currency swap shouldn't touch. Tender talks about VAT, and an American product would talk about sales tax. That's a decision about your business, not a find-and-replace, so in the first pass the agent listed those places for me instead of changing them. They went later, with the rest of the old idea.
Changing what the product is. Most people stop at new words for the same kind of product. A template stretches further than that, if you know which parts are design and which parts are the demo product. In Tender, the card is everywhere: the hero, a "make a card" section, the phone screens, the freelancer tile and the fan of cards at the bottom. Larder doesn't sell cards, so all of it had to change.
Larder isn't a card product. It's stock and ordering software for
restaurant kitchens: counts from your phone, par levels per site,
supplier orders that write themselves, delivery notes checked against
the order. Go through the page section by section and list everything
that only makes sense for a card product: objects, demos, copy, legal
text, structured data. Don't change anything yet.
Ask for the list first. Mine had more on it than I expected, and seeing it whole is how you decide what to replace, what to delete and what to keep. Then I worked through it one section at a time, like the copy:
- The hero card became a paper order. Tender's card sits on a stage that tilts with your cursor.
AGENTS.mdsays the script only needs an element with the idheroCard, so the agent swapped the card for a supplier order docket with the same id. The tilt, the shadow and the entrance animation all carried over without touching the script. - The card maker was deleted. There was nothing to replace it with, and the README says a section can be cut safely. It can, on that page. The 404 and privacy pages have their own copy of the nav and footer, and both still linked to the deleted section. Search all the pages for links to anything you remove.
- The demos got new data. Receipts became delivery notes, approvals became big orders, freelancer cards became prep labels that count down to their use-by date. Most of that is data in
bento.jsand the other effect scripts, so the HTML and the scripts change together. - The invisible parts. The legal text in the footer described an e-money licence. The structured data in the
<head>still listed the old plan names, priced in euros, which the currency pass had missed because it wasn't on the page. The privacy page described card payments. None of it is visible at a glance, and all of it would have shipped.
A word on where this copy came from. For a made-up product, I let the agent write it, which is exactly what I said not to do with your real site. It's placeholder for a demo. Yours should come from you.
Step 5: Add a section in the template's style
This is the test of whether your agent is following the project, or just writing HTML.
Tender's AGENTS.md has a recipe for it: start from the Features or Calculator section, open with the numbered rail ("(06) Venues"), use the shared heading and lead paragraph, build with the existing panels and tiles, and add the section to both navs. If you ask for a new section without mentioning any of that, the agent will often write something that looks fine in isolation and wrong next to everything else.
Add a section called "Venues" between Stories and Pricing, using the
recipe in AGENTS.md ("Adding a section in Tender's style"). Three tiles,
one per restaurant, each with its monthly spend, its budget and a bar.
Use the existing tokens, tiles and reveal attributes, no new colours and
no inline styles beyond the bar's width. Add it to both navs, and
renumber the rails and the phone menu after it.
The words doing the work are "use the recipe in AGENTS.md". You're pointing the agent at the file, rather than describing the design again from memory.
Tender numbers its sections, "(05)" for Stories, "(06)" for Pricing, and the phone menu repeats the numbers. A section in the middle means renumbering everything after it, and the recipe says so. That's why the prompt asks for it.
Check the result. The new section should be impossible to tell apart from the ones around it: same rail, same heading, same tiles, same reveal. If it isn't, ask the agent to compare it with the section it copied and list the differences.
Step 6: Replace the images
Tender has almost no image files. The card, the phone, the receipts and the logos are drawn in HTML and CSS, so they followed the rebrand on their own. The order docket that replaced the card is HTML too, which is why the same docket could also fill the fan of cards at the bottom of the page. What's left is the social-share image, the home-screen icon and the logos in the marquee.
Most templates have more images than that, and the steps are the same:
- Put your images in
assets/img/, already resized. A hero image doesn't need to be 6000 pixels wide. - Ask the agent to use them, with proper
widthandheight, realalttext, andloading="lazy"below the fold.
Replace the logos in the marquee with the SVG files in assets/img/logos/.
Follow the README's "Use your own logos and images", update the
marquee's aria-label to list the names, and don't link to any external
image host.
<one line per logo: file name and company name>
Also replace assets/img/og-image.png, the picture shown when someone shares your link.
Step 7: Check it
Every template I sell has the same definition of done: no console errors, no horizontal scroll from 360px to 1920px wide, visible keyboard focus, a complete page with reduced motion on, and one <h1>. Tender's AGENTS.md ends with a checklist of this kind, and it adds its own items, like the page still making sense with JavaScript off.
The point of that list is that you can hand it to the agent, and also check it yourself. Don't take "all done" as an answer.
Run through the "Before you finish" checklist in AGENTS.md and report
each item as pass or fail, with how you checked it. Open the page at 360,
390, 768 and 1440px wide and tell me if anything overflows or wraps
badly. Search the project for any http:// or https:// URL that loads a
resource and list them. Check that there's still exactly one h1.
Then do the parts an agent can't: open the site on your phone, tab through it with the keyboard, turn on reduced motion and reload, and run Lighthouse in Chrome DevTools. Don't compare your scores with the ones on the template's page. Compare them with the template you downloaded, before you changed anything.
My remixed page had no console errors, made no requests to other servers, and didn't scroll sideways at any width from 360 to 1920 pixels. Lighthouse on mobile gave it 89 to 93 for performance, 96 for accessibility and 100 for best practices and SEO, the same as the untouched Tender on the same machine. (The 96 is Lighthouse catching the manifesto's words halfway through lighting up as you scroll. The untouched template gets the same note.)
Step 8: Deploy
The HTML edition is a folder of static files, so deploying it is the easy part.
- Netlify or Vercel: drag the folder onto the dashboard, or connect a Git repository. No build command, and the publish directory is the folder with
index.htmlin it. - GitHub Pages: push the folder to a repository and turn Pages on.
For the React edition the template is a Next.js static export. Run npm run build and publish the out folder, or import the repository into Vercel or Netlify with npm run build as the build command and out as the output directory.
When it's live, check three things the local version can't show you: your own domain works over HTTPS, the share image appears when you paste the link into a chat, and robots.txt and the sitemap point at the right address.
How long it actually takes
Here's the honest version. I timed my run with Claude Code. The agent's part took about twelve minutes: under two for the colours, the fonts and the name, under a minute for the dollars and the exchange-rate fix, under a minute for the Venues section, about seven for turning the card product into a stock app, and a minute or two for the checks. Lighthouse took longer than any single edit.
Twelve minutes is the agent's time, not yours. Your part is reading what it changed and looking at the page after every step, and that's the part I'd never skip.
The copy in my run was placeholder for a made-up product, which is why it was quick. Real copy is the step that isn't fast. If you have it ready, the whole thing fits in about an hour. If you don't, you're writing for most of a day, and the agent can't change that for you. It can only fit what you write into the layout.
I'd budget it like this: one hour for the template, and as long as you need for your own words.
What goes wrong, and how to steer it
These are the ones I see most.
- The agent adds a build step. It wants a bundler, or a package.json, or a framework. Fix: the build-step rule is in
AGENTS.md, so quote it back: "No build step. The page must open from disk." - It reaches for an external font, icon set or CDN script. Fix: "No external requests. Put it in
assets/." Then check the files for URLs. - It renames things it shouldn't. A find-and-replace on the template's name also hits the code that uses it. Fix: say which files the name lives in, and that
assets/js/isn't one of them. - Your words are longer than the demo's. Headlines and wordmarks are sized for the demo text. Fix: check the page at phone width after every change, footer included.
- It swaps symbols without reading what they mean. A currency, a time zone or a unit can be part of how a demo works. Fix: ask it to check anything that converts or calculates after the swap.
- Deleting a section leaves links behind. The page you deleted it from is fine. The other pages, with their own nav and footer, still point at it. Fix: ask the agent to search every HTML file for links to what you removed.
- It changes
main.csswhen it should changetokens.css. The colours drift, and your next rebrand takes twice as long. Fix: say which file in the prompt. - It says it's done and it isn't. Fix: ask for the checklist item by item, with how it checked each one, and look at the page yourself.
- The session gets long and the agent starts forgetting the rules. Fix: start a new session and have it read
AGENTS.mdagain. It has no memory of yesterday, only the file.
FAQ
Do I need to know how to code?
Not to follow this. You do need to be able to open a folder in an editor and look at a browser. If you can describe a change clearly, the agent can make it. The HTML edition is the gentlest start because there's nothing to install.
Which agent should I use?
Whichever you already pay for. All the templates ship with an AGENTS.md, which most agents read, and the React edition also has a CLAUDE.md that points at it. I use Claude Code.
Will the agent break the template?
It can, and the AGENTS.md is there to make that less likely. Keep the original download next to your working copy, or put the folder in Git, so you can always compare and undo.
Can I use the template for a client?
Yes. The licence covers unlimited projects, your own and your clients', and you can charge for the sites you build and hand them over. What you can't do is resell or share the template itself, modified or not, as a template or starter. The license page has the full terms.
Wrap-up
The shape of the process is simple: make the agent read the rules, change one thing at a time, and check the result yourself. The template does the design. The agent does the typing. You do the part that was always yours, which is deciding what the site says.
If you try it, I'd like to hear how long it took you. Tell me on X or at contact@no-code.supply.
Tender is the template I used here. Every other template works the same way, so pick one and start from its README.md.
