This is our real one. Sixteen sections, one HTML file, no build step. Copy the prompt below, hand it to your agent, and get the same thing back in your own colours.
Most brand guidelines are a PDF nobody opens. This one is a web page that shows the system working. Click a colour, it copies the hex. The type scale is set in the real fonts. The animations play. The business card, email signature and social templates are already built.
One file. Inline CSS, vanilla JavaScript, fonts from Google. Open it in a browser, host it anywhere, edit it live on a call.
Take the prompt in section 002.
Claude, Claude Code, ChatGPT, Cursor. Anything that can read a web page.
It tells you what it needs and what it is about to do, before it builds. Read that part. That is the whole skill.
It fetches our guide, works out what it does not know about you, asks, then builds. How you brief it is up to you. A paragraph about the business works. So does your website URL, or the name of a brand you want to feel like.
Fetch https://unpaste.ai/brand/index.html and read the whole file.
It is a working visual brand guide: 16 sections, one self-contained HTML
file, inline CSS and vanilla JavaScript, no build step, no dependencies.
It belongs to a business called Unpaste. It is not mine.
Rebuild it as my brand guide.
KEEP the machinery:
- the 16 section structure and the numbered section tags
- the CSS custom property token system in :root
- click to copy colour swatches
- scroll reveal, scroll progress, the animation demos
- one file, no dependencies, no build step
REPLACE everything that belongs to Unpaste. None of it is mine:
- business name, wordmark and logo mark
- tagline, positioning and brand essence (section 001)
- contact details in section 001 and in the footer
- every colour token in :root, light and dark
- the font pair
- voice and tone rules, including the banned word list (section 007)
- all asset templates: business card, email signature, letterhead,
social templates, proposal (sections 011 to 016)
- the page title and meta description
Before you write any code: tell me what you need to know about my brand
that you cannot work out on your own, and ask me for it. Then show me
your plan. Then build.
Where I have not decided something yet, propose an option and tell me
why you picked it.
When you are done, search the file for "unpaste", "Brisbane", "DC2626"
and "Swiss Brutalist" and show me every hit. There should be none.
Output one HTML file I can open in a browser.
This is a live brand guide for a working business, not a blank template. Every value in it is a decision we made. If your agent leaves any of it in, you are publishing our colours, our positioning and our email address.
Check them off
Download it and edit it by hand. It is plain HTML with the sections marked in comments. Nothing to install.