The brand.md File for Claude Code
Your AI-built site looks generic because Claude Code has no brand to follow. This is the one file that fixes it before a single line of design gets written.
By Ryan Frizelle · 3 min read
Most AI-built sites look like slop because of one missing file. No brand, no consistency, just generic gradients and stock fonts on every page. Here is the file that fixes it before Claude Code writes a single line of design.
Here is what you will do:
- 1.Open Claude Code in your project and paste the prompt below.
- 2.Answer 6 quick questions about your colors, fonts, and vibe.
- 3.Claude saves a brand.md file your whole project reads from on every conversation after that.
Without this file, every page Claude Code builds picks random colors and random fonts. With it, every page looks like the same designer built the whole site. The difference is night and day.
Generate your brand.md and lock it into Claude Code
Walk me through creating my brand.md file by asking these questions one at a time. Wait for my answer before moving to the next question. Suggest options and ideas for each so I am not starting from scratch.
1. Do I have any reference websites I love? If so, I will paste the URLs. If not, suggest a few based on my industry and let me pick.
2. What does my business or service do, and who is it for?
3. What vibe do I want my site to have? Suggest 3 to 4 options like clean and professional, bold and editorial, warm and approachable, or minimal and modern. Or let me describe my own.
4. Based on my answers, suggest 2 to 3 color palette options with hex codes. Show a primary color, a secondary color, a background, a text color, and an accent. Let me pick one or mix and match.
5. Suggest 2 to 3 font pairings (heading + body) that match the vibe. Use free Google Fonts only.
6. What sections should the site have? Suggest a structure based on everything above. Hero, services, how it works, testimonials, CTA, and so on. Let me add, remove, or reorder.
After I answer all the questions, generate a brand.md file at the root of my project with everything documented clearly. Include the colors with hex codes, the fonts, the voice and tone description, the section structure, and any other brand decisions we made together.
Then add a rule to my CLAUDE.md (or create one at the root of my project if it does not exist) that says "Always read brand.md before making any visual or UI decisions, and update brand.md when overall site styles change so it stays accurate."
After both files are saved, confirm what you wrote and tell me how you will use brand.md going forward.That prompt walks you through your brand one question at a time. Colors, fonts, vibe, sections, voice. Then it writes brand.md to your project root and adds a rule into your CLAUDE.md so Claude reads from it on every single conversation after that.
Here is how to actually use it from here:
- 1.Keep brand.md at the root of your project. Claude Code finds it automatically.
- 2.Reference it whenever you ask for a UI change. Just say "follow brand.md" and the output stays on-brand.
- 3.When you change colors, fonts, or spacing down the road, update brand.md first. Never let Claude drift away from your brand.
Pro move. Paste 2 or 3 reference websites you actually love into the prompt. Claude pulls patterns from them when it builds yours. This is the single biggest unlock for designs that look high-end instead of looking like AI made them.
That is the whole thing. Run the prompt. Answer the questions. Save brand.md. Every page Claude Code builds from here on out looks intentional. Same fonts. Same spacing. Same voice. The kind of work that looks like a designer built it, but it is just you and Claude Code.
Want more files like this that turn Claude Code into your personal design team?
Liked this? There's 50x more in the course.
One-time purchase. Keep forever.
Keep going
More walkthroughs from the library.
The CLAUDE.md Blueprint
The one file that makes Claude Code build like a senior developer. This is the single biggest difference between AI slop and production-quality apps.
Humanizer + VOICE.md: Make Claude Write Like You
Sick of copy that screams AI wrote this? Install one Claude Code skill plus a VOICE file and your writing finally sounds like you, not a robot.
Claude Code Setup Guide
Complete walkthrough of installing Claude Code, setting up GitHub, Vercel, and Supabase from scratch. You do not need any coding experience.