Using the AI kit

What is in the zip

index.html

The home page, built in plain HTML and CSS, as in the live demo.

DESIGN.md

What never changes (type, colours, spacing, the signature) and what you may change. Written for the template.

AGENTS.md

Tells the assistant to read DESIGN.md first, take every value from tokens.css and build new pages from the closest section of index.html.

tokens.css

Colours, type sizes, spacing and durations, in one file.

LICENSE.txt

The licence, and where the fonts and photos come from.

photos/, fonts/

When the template uses them. Each template page lists exactly what its kit holds.

Claude Code

Unzip the kit, open a terminal in the folder and start Claude Code there. Your first message: Read AGENTS.md and DESIGN.md before anything else. To have Claude Code load the rules in every session, add a CLAUDE.md file in the folder containing the single line @AGENTS.md; Claude Code reads CLAUDE.md on start and follows the import (Claude Code memory files).

Cursor, Lovable, v0

Cursor: open the unzipped folder as the project and ask it to read AGENTS.md and DESIGN.md before the first change. Lovable and v0: add index.html, tokens.css and the images to the project, and paste the content of DESIGN.md into the project instructions or knowledge, so it applies to every request.

Prompts that work

• Build the About page. Copy the closest section of index.html, keep every rule in DESIGN.md, and take values from tokens.css only.
• Replace the demo studio with this one: [name, address, services]. Change words and photos only.
• Check every page at 390 px and 1280 px wide. List anything that breaks a DESIGN.md rule and fix it.

Ask for one page at a time, and read the result before the next one. Each kit is tested with real prompts in Claude Code and Cursor before it goes on sale.

When the assistant drifts from the design

If it adds rounded cards, shadows, gradients or a new colour, it has stopped reading the rules. Say: Re-read DESIGN.md. Which rule did your last change break? Undo it. If it keeps happening, start a new session with the CLAUDE.md import above, so the rules load before the first message.

Change the brand colours or the type

Change values in tokens.css, never in a page. DESIGN.md says which values are free (often the accent and the photos) and which hold the design together. Fonts are free licences: the template page and Resources list them with their links.

Publish the site

The kit is static HTML and CSS: any host that serves files works, such as Cloudflare Pages, Netlify or GitHub Pages, or the hosting your assistant’s platform provides. Replace the fictional names, addresses and phone numbers of the demo before publishing, and keep the AI notice in the footer if you keep the demo photos.