Do I need a brand kit before asking AI to build my site?

You don't need one, but the difference is dramatic. Without a kit the AI invents colors and fonts per page and the result drifts generic. With a kit — like the ones Vectura generates from a single logo — every page inherits the same palette, type pairing and voice.

Home › Resources › Design to website with AI

Guide · AI Workflow

How to Give Your Brand Design to Claude (or Any AI) and Get a Website Back

Q: Can AI really build a website from a brand kit PDF?

Yes. Modern AI assistants like Claude can read a brand guidelines PDF — the palette, typography, voice and logo rules — and produce a working website that follows them. This article includes a real brand kit PDF and the real single-file website an AI built from it, both free to view.

Q: What should I give the AI besides the brand kit?

Tell it the job of the site (book appointments, sell a product, collect emails), your top three pages or sections, and any real content you have — actual services, prices, photos and location. The brand kit controls how it looks; your brief controls what it says and does.

By VecturaUpdated July 9, 20267 min read

AI assistants can now build real, working websites — but what they build is only as coherent as what you hand them. Give Claude a vague sentence and you get a generic template. Give it a proper brand kit — palette, typography, voice, logo rules — and you get a site that looks like your business built it. This guide shows the exact workflow, and includes a real brand kit PDF and the real website an AI produced from it, so you can judge the output yourself.

The workflow in one line

Generate (or upload) your logo → export the brand kit PDF → hand the PDF to a design-capable AI with a short brief → review the site it returns against the kit's rules. That's it. The brand kit does the heavy lifting: it's a machine-readable contract for how your business looks and sounds.

Step 1 — Start from a brand kit, not a blank prompt

The single biggest quality lever is what you attach. A brand guidelines PDF answers, up front, every question the AI would otherwise guess at: exact hex colors and where each belongs, the headline/body font pairing, how the brand speaks, and what may never be done to the logo. Vectura generates this document automatically from one logo — here's a real one, unedited:

The exact document given to the AI — nothing else. Open the PDF in a new tab ↗ — free to view, no signup.

Step 2 — Write a brief the AI can act on

The kit controls how the site looks; your brief controls what it says and does. Keep it short and concrete:

The job. One sentence: "a one-page site for a Tokyo dog-grooming studio whose goal is bookings."
The sections. Name three to five: hero, services with prices, why-us, photos, booking/contact.
Real content. Actual service names, actual prices, the actual neighborhood. Placeholder text in means placeholder text out.
The instruction that matters: "Follow the attached brand guidelines exactly — colors, fonts, voice and logo rules. Where the guidelines and your instincts disagree, the guidelines win."

Why this works: AI models are excellent at applying explicit rules and mediocre at inventing taste under ambiguity. A brand kit converts taste into rules — which is exactly the form an AI executes best.

Step 3 — See what comes back

This is the website Claude built from that exact PDF and a brief like the one above — a complete single-file site, embedded here unedited. Notice what carried through without being re-asked: Wiggle Orange as the primary field, the rounded playful furniture the kit prescribes for a pet brand, the warm "tail wag" voice in every heading, and the logo reproduced verbatim:

Quick heads-up before you dive in: the example site below was built by Claude, Anthropic's AI assistant — a separate tool from Vectura. Claude's first drafts are designed for desktop screens, so it won't look its best on a phone just yet — that's simply how Claude's first pass works, not this site. Getting it phone-ready is easy and expected: a couple of follow-up messages in the same Claude chat ("make this work on mobile") and it's there. We're showing you the honest, unedited first draft so you can see exactly what the workflow produces.

The output · Built by Claude Best viewed on a desktop This example was built by Claude (Anthropic's AI assistant) — a separate tool from Vectura. Claude's first drafts are designed for desktop, so it shines on a bigger screen; a couple more Claude chat messages would make it phone-ready too. Open the website anyway ↗

Claude's actual output, unedited. Open the full site in a new tab ↗

Step 4 — Review like an owner, not a fan

AI output is a strong first draft, not a finished product. Before you publish, check it against the kit and against reality:

Brand fidelity. Sample the actual hex values; confirm the fonts loaded (not a fallback); make sure the logo wasn't stretched, recolored or redrawn.
Truth. AI happily invents opening hours, addresses and testimonials. Every fact on the page must be yours.
The basics. Click every link, test on a phone, check contrast on text over color fields.
Voice drift. Long generations drift generic toward the bottom of the page. Rewrite any line that could belong to any business.

Where Vectura fits

Everything in this workflow downstream of the logo is automated in Vectura: generate a logo (or upload the one you have and fill in your business context), and it builds the full brand kit — palette with usage, type pairing, voice & tone, logo rules — and exports it as the Official Brand Guidelines PDF, bundled in your asset ZIP. That PDF is deliberately structured to be handed to an AI, a freelancer, or a print shop and followed without you in the room. The same brand context also drives your brand video and social posts, so everything you make matches.

Verify the complete handoff yourself

Nothing here is a mock testimonial: open the first-party source PDF, the generated website demonstration, and the provenance notes.

Get a brand kit an AI can build from

One logo in — a complete, hand-off-ready brand guidelines PDF out.

Open Vectura Studio

Frequently asked questions

Can AI really build a website from a brand kit PDF?

Yes. Modern assistants like Claude read the PDF's palette, typography, voice and logo rules and produce a working site that follows them. The embedded example above is a real, unedited input/output pair.

What should I give the AI besides the brand kit?

The job of the site, three to five named sections, and your real content — services, prices, location, photos. The kit controls the look; the brief controls the substance.

Do I need a brand kit first?

You don't need one, but without it the AI invents colors and fonts as it goes and the result drifts generic. With a kit, every page inherits one system — which is exactly what makes the output feel like a brand instead of a template.