How to customise an AI template

What counts as the system

The system is every decision that would still be true if the template were about something else. The typefaces and their sizes. The spacing scale and the rhythm between sections. The neutral colours and how the accent is used. The shape of buttons and cards. What moves, when, for how long and with what easing.

These were set against each other. Headline size depends on line length, which depends on column width, which depends on spacing. Change one and the others stop agreeing. That is why a template with one adjusted value often looks worse than either the original or a clean redesign.

What counts as the subject

The subject is everything that names the particular thing the template was drawn for: the brand, the product, the sentences, the photographs, the prices, the menu, the project list. All of it goes. A template still carrying a line of its original copy is the most common sign of a hurried job.

Keep each piece of content in its natural form when you swap it. A timetable stays a grid, a price stays a number, a product is shown as the product. Forcing your content into the form of the template's content is how adapted sites end up with a testimonial where an address should be.

The order of work

1. Build it as it is. Run the template's prompt or project unchanged and confirm it matches the preview. Save that state.
2. Replace the words. Every headline, paragraph and label, each close to the original's length. Fix anything that wraps badly by editing the words before touching the type.
3. Replace the images and data. Your files, cropped to the originals' proportions; your prices, items and links.
4. Swap the centrepiece. Your object, scene or product in place of the template's, doing the same thing at the same moments.
5. Adjust one colour. The accent, if your brand needs it, checked for contrast. Leave the neutrals.
6. Check phones and reduced motion. Go through the whole page at phone width and with the reduced-motion setting on, because content changes move things the template had settled.

How to phrase the request

Give your tool substitutions, not impressions. "Replace the three feature titles with these three" is a task it can finish and you can check. "Make it feel more like our brand" invites it to change the system. Put the full list of substitutions in one message, in the order above, and say what must not change.

Ask for a report as well as a result: which files changed, which values moved, what it could not fit. A tool that has to list its changes makes fewer silent ones. Each category page here has a brief written for its kind of template, starting with website templates.

Mistakes that undo the design

• Changing the typeface first. It is the largest single part of the look. If you must, do it last and expect to re-check every line break.
• Lengthening the copy. A headline twice as long needs a smaller size, and then it is no longer the same design.
• Adding sections one request at a time. Each addition is designed without sight of the others. Plan additions together and base each on an existing section.
• Mixing image styles. One stock photograph among cut-out product shots breaks the page more than any colour change.
• Correcting in fragments. Twenty small follow-ups drift further than one complete brief.

When to go beyond the subject

Sometimes the system itself has to change: a brand typeface that is not negotiable, a second accent, a layout for a language that reads the other way. Make that a deliberate design step. If you have the Figma file, change the design there first, look at it as a whole, and then give your tool the new values. Changing the system in code, one request at a time, is the slow way to arrive at a worse design.

The first request: ask for the system in writing

Before I change this template, write down its system so we both treat it as fixed. Read the code that is open (or the template prompt above) and create ./SYSTEM.md with these headings:

1. Type: each family, where it is used, and every size, weight, line height and letter spacing, at desktop and phone widths.
2. Colour: every value in hex with its role (ground, surface, text, muted text, accent, warning), and each text and background pair with its contrast ratio.
3. Space: the spacing scale in px, section padding, the gap between sections, column widths and breakpoints.
4. Shape: radii, borders, shadows and any material effects such as blur or grain, with their values.
5. Components: each one, its states and its size.
6. Motion: each animation with trigger, duration in seconds, easing, distance or angle, and what prefers-reduced-motion does to it.
7. Subject: every piece of content that belongs to the original brand: names, copy, images, data, links. This is the list I will replace.

Change no code. Where a value is used only once and looks like an exception, mark it. End with the three values that most define the look, in your judgment, so I know what never to touch.

Send this once the template is built or its project is open, before any adaptation. The file it produces is what your later briefs refer to when they say keep the system.

Keep reading

• What an AI template isA definition of AI template for websites and UI, and how it differs from a theme, a UI kit, a starter and a prompt pack.
• Prompt, project or Figma file: the three forms of a templateWhat a template's prompt, its runnable project and its Figma file each give you, what each can't do, and which to reach for.
• How to choose an AI templateChoose an AI template by structure and content fit, not by subject or colour: a method in five steps, with a fit-check request to copy.

• Landing pages
• Components
• App screens