A tree nursery site, built by an AI coding agent I led

Key contributions

1. 01

   Led the agent like a team

   Wrote the rules it works by, had it research before building, used the studio's standard as the bar, kept a decision log, and sent open questions to the studio in one batch on day one.

2. 02

   Shipped the whole site

   Next.js, TypeScript, CSS Modules and GSAP: a ten-section home page, plant pages, a three-step quote wizard with a live summary, nursery, garden services, FAQ, articles, contact, legal pages and redirects from the old site.

3. 03

   A CMS the nursery runs

   Schemas that match each section, migration and seed scripts, page refreshes on publish, multi-photo upload and a guide for the editors inside the Studio.

Screens

(opens in a new tab)

(opens in a new tab)

(opens in a new tab)

(opens in a new tab)

(opens in a new tab)

(opens in a new tab)

(opens in a new tab)

Screens from the live site, October 2026. The nursery's name, logo and contact details are removed or blurred.

How I run the agent

The agent writes, builds and checks the code; I decide what gets built and whether it is done. That only works when the rules are written down and every step ends with proof, so the work is set up the way you would set up a team.

1. 1Rules first. A file the agent reads before every task: the stack, what is forbidden, naming, structure.
2. 2Research before code. The agent studied three earlier projects of the studio and wrote one pattern document: tokens, components, consent, animation and CMS. New work follows it.
3. 3The studio's standard as the bar. 95% match with the design at 1440px, six screen widths, every state from hover to loading, motion on everything you can touch, and copy taken literally from the design.
4. 4Build, then prove it. One section at a time; the agent checks each in a real browser at all six widths before it reports back.
5. 5I review. On the preview, on my phone and next to the design, then decide the next step.
6. 6Write it down. Every decision goes into a log with its reason and what it means for the code.

# Hard rules (from the rules file, shortened)
- No Tailwind. Not in new projects, not as an addition.
- Code is English: comments, names, commits. User-facing copy stays Dutch.
- Asset filenames follow the site's language: over-ons.jpg, pijl-rechts.svg.
- .container is untouchable: nest a module class inside it, never on it.
- Optimise assets before they enter the repo. Never commit raw client files.
- Never replace a design icon. The icon in the design is the icon in the build.

What the agent caught, and where it stopped

Checking every step is what turns fast output into finished work. A few things from the log:

• Cut off, not overflowing

  At 390px a section's text and button were clipped. No scrollbar appeared because the parent hid overflow, so a scroll check alone would never have found it.

• 47px, not 45px

  Buttons measured two pixels taller than the design: a transparent border the design does not have. Removed and measured again at exactly 45px.

• Fonts that never loaded

  The design used font weights the site was not loading, including the display weight used most.

• A carousel that never woke up

  Its next button stayed disabled because it measured before the images had laid out. It now watches the track and cards for size changes.

• A pattern the new linter rejects

  The cookie consent pattern from earlier projects fails the newer lint rules. Rewritten so consent also stays in sync across tabs, and flagged for the other projects.

• Not making things up

  The design showed six FAQ questions but only one answer. The agent did not write five answers; it shipped them as plain headings and added them to the questions for the studio.

Feedback as a plan

The client's first feedback round arrived as a 14-page document. Each point was checked against the live code and given one of three labels before any code changed: A do it now, B do it, then a person checks it, C blocked until someone decides or sends an asset.

A sample of the real triage, translated. The A items were done the same day on one branch; the C items went back as questions.

The CMS

The site started without a CMS. When the nursery needed one, the schemas were written to match each section of the finished pages one to one, existing content was moved in with migration scripts, and publishing refreshes the right pages through a webhook. The Studio has a guide in Dutch for the people who edit it, and gallery fields take many photos at once.

(opens in a new tab)

(opens in a new tab)

(opens in a new tab)

The CMS, October 2026. Names and addresses are removed or blurred.