How do I make ChatGPT or Claude build HTML pages in the same design every time?

You asked ChatGPT for an event page on Monday and loved it: dark green header, round buttons, one column. On Thursday you asked for the next one with the same words, and got a purple gradient and three columns. Claude did something else again.

Nothing is broken. The prompt said what the page is for, not what it looks like, so the AI chose a look each time.

Why the design changes every time

A chat starts with no memory of the page you liked, and a prompt such as "make it look modern" fits a thousand designs. The AI fills every open choice (colors, fonts, spacing, how many columns) with a likely guess. The fix is to close those choices: write them down once, in words the AI follows, and give it the same words every time.

Turn the page you liked into rules in 4 steps

1. Open the page you liked and ask the AI to describe it

Paste the HTML file's code into the chat and ask for its design as rules: every color with its hex code, the fonts and sizes, the spacing, the corner radius, and the order of the sections.

2. Cut what was only true for that page

Keep what should hold for every page (colors, fonts, buttons, spacing). Drop what was about one event (its title, its date, its photo).

3. Add what it must never do

Write the mistakes you already saw: "no gradients", "one column on a phone", "no stock photos". A rule against a mistake you've seen helps more than an adjective.

4. Save the rules with the prompt as a skill

Put the rules, the prompt that worked, and one good output together. That is a skill: instructions the AI reads whenever someone asks for this kind of page. Anthropic's frontend-design skill does the opposite: it picks a new design to fit each page's subject (how to install it).

The prompt that writes the rules

Paste this into ChatGPT or Claude with the page's HTML:

Here is the HTML of a page whose design I want to reuse.
Write its design as rules another AI can follow to build new pages that look the same:
- every color as a hex code and where it is used
- fonts, sizes and weights for headings, text and buttons
- spacing, corner radius and shadows
- the order of the sections and how they stack on a phone
- 3 things the design never does
Leave out anything about this page's own content.

Read the rules back and fix any value that is wrong before you save them.

Use the same rules in Claude, ChatGPT, and Cursor

Inside one chat app you can keep the rules in a project's instructions. A team on several apps needs one copy that every AI reads, or each person's copy drifts.

AI Skill Pod's "Turn a prompt into a skill" skill turns "a prompt that works" into "a skill the whole team can reuse": a name, a when-to-use description, steps, an output template, an example, and checks. Its page shows what the skill does; from a team pod, everyone uses the same version in their own ChatGPT, Claude or Gemini, on any plan. AI Skill Pod is made by the team behind Convika.

See the page on a phone before you share it

A design that holds on a laptop can still break on a phone. Open the HTML file in the free HTML viewer, switch to phone width, and look before anyone else does. Nothing leaves your browser until you ask for a link.

Frequently asked questions

Why does ChatGPT give me a different design every time?

Because the prompt leaves the design open, so ChatGPT picks colors, fonts and layout anew in each chat. Give it the same written design rules every time and it stops guessing.

Can I give ChatGPT and Claude the same design rules?

Yes. The rules are plain text, so either AI can follow them. Keep one copy that both read, such as a shared skill, so a change reaches both.

Should I write the rules or let the AI write them?

Let the AI draft them from a page you liked, then check every value yourself. The AI reads the code faster than you do, but only you know which choices were on purpose.

Sources

• Agent Skills specification (the SKILL.md format; read November 5, 2026)