Remixing a template with an AI agent: from download to your own site in an hour

Posted on Oct 22 • Originally published at no-code.supply

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.

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.

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 Enter fullscreen mode Exit fullscreen mode 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.

Tender as it comes out of the zip, opened straight from the folder.

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. Enter fullscreen mode Exit fullscreen mode For Tender, a good answer mentions things like these, all from its AGENTS.md:

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.

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. Enter fullscreen mode Exit fullscreen mode 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. Enter fullscreen mode Exit fullscreen mode "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. Enter fullscreen mode Exit fullscreen mode 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. Enter fullscreen mode Exit fullscreen mode 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.

After the brand pass: plum, butter and tomato, Schibsted Grotesk, and the name Larder. At this point it's still a card product. That changes in the next step.

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> Enter fullscreen mode Exit fullscreen mode Then the same for Features, How it works, Pricing, and so on.

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. Enter fullscreen mode Exit fullscreen mode 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. Enter fullscreen mode Exit fullscreen mode 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 same template as stock and ordering software. The tilting card is now a supplier order, on the same stage, moved by the same script.

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.

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. Enter fullscreen mode Exit fullscreen mode 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.

The new Venues section. Built from the template's own tiles and tokens, plus a few lines of CSS for the grid and the bars.

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.

The closing section. The fan of metal cards is now a fan of supplier orders, built from the same docket as the hero.

Most templates have more images than that, and the steps are the same:

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> Enter fullscreen mode Exit fullscreen mode Also replace assets/img/og-image.png, the picture shown when someone shares your link.

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. Enter fullscreen mode Exit fullscreen mode 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.)

The HTML edition is a folder of static files, so deploying it is the easy part.

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.

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.

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.

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.

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.

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.

Same template, same layout, same scripts. A different product, about twelve minutes of agent time later.

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.