Make It Match My Brand: Prompts for AI-Built Apps

“Match my brand” in AI coding means giving the tool enough specifics — hex codes, font names, spacing values, tone descriptions, and reference URLs — that the generated output looks like your product, not a default template. Most AI app builders produce visually competent results. The problem is that every result looks the same. The colors are Tailwind defaults. The fonts are Inter. The spacing is uniform. Nothing says “this is ours.”

This post gives you practical brand prompts you can paste into Cursor, Claude Code, Lovable, AI Studio, or any AI tool that generates UI. The goal: make the output look like it belongs to your company, not to a component library’s demo page.

What “brand” means in AI coding context

Brand in this context is not a logo file. It is the set of decisions that make your product visually and tonally distinct. For AI coding tools, brand breaks down into six concrete areas:

1. Colors. Primary, secondary, accent, surface, and text colors expressed as hex values or design tokens.
2. Typography. Font families, weights, and sizes for headings, body, labels, and special uses like code or captions.
3. Spacing. Your density preference — tight for data-heavy tools, generous for marketing-facing pages — and a base spacing scale if you have one.
4. Tone of voice. The personality that shows up in button labels, empty states, error messages, and onboarding copy. Formal or casual. Terse or conversational.
5. Imagery style. Illustrations, photos, or icons. Line weight, fill style, color treatment. Whether you use abstract shapes or real photography.
6. Layout patterns. Whether your app favors full-width dashboards, centered content, sidebar navigation, or compact lists.

AI tools cannot infer these from a vague prompt. When you write “build a settings page,” the model fills every gap with its training-data average — and that average is the same for everyone.

How to communicate brand to AI tools

The most reliable way to match your brand is to provide explicit values. AI tools follow specifications. They struggle with interpretation.

Provide hex codes, not adjectives. “Use a warm palette” means nothing to a model. “#F5F0EB for backgrounds, #1A1A1A for text, #C75C2E for primary actions” means everything. Even three colors dramatically change the output.

Name your fonts. “Use a modern sans-serif” produces Inter or system-ui. “Headings in Space Grotesk at 600 weight, body in Atkinson Hyperlegible at 400” produces something recognizable.

Describe personality in one sentence. “This app should feel like a calm, precise financial tool — not playful, not loud, information-dense but unhurried.” That single sentence steers copy tone, spacing, color saturation, and interaction style.

Link to reference URLs. “The navigation should feel like Linear’s sidebar — compact, keyboard-first, muted with one accent color for the active item.” A named product anchors the model far better than abstract descriptions.

Paste your style guide. If you have brand guidelines, even rough ones, paste the relevant section into the prompt context. Font names, color tokens, border-radius values, spacing scales. The model follows exact values with high fidelity.

Brand prompt examples for different AI tools

These examples show the difference between a generic prompt and one that carries brand context.

Cursor — generic prompt: “Add a settings page with profile editing and notification preferences.”

Cursor — brand prompt: “Add a settings page with profile editing and notification preferences. Use our design tokens: background #FAFAF8, card surface #FFFFFF with 1px border in #E2E0DC, text #1C1917, primary action #2563EB. Headings in Plus Jakarta Sans 600, body in Inter 400. Two-column layout on desktop, single column on mobile. Compact 8px/16px/24px spacing scale. No drop shadows. Buttons are solid fill for primary, ghost for secondary.”

Claude Code — generic prompt: “Generate a React onboarding flow with three steps.”

Claude Code — brand prompt: “Generate a React onboarding flow with three steps. Match our brand: background #0F172A, card #1E293B, text #E2E8F0, accent #38BDF8, error #EF4444. Font: headings in Instrument Sans 700, body in Inter 400. Step indicator should be a horizontal bar, not numbered circles. Buttons have 6px border-radius, no uppercase text. Transitions: 200ms ease-out opacity. Tone: friendly but direct — ‘Tell us about your team’ not ‘Let’s get started!’ Avoid gradients.”

Lovable — generic prompt: “Build a landing page for a SaaS product with a hero, features, and pricing.”

Lovable — brand prompt: “Build a landing page for a SaaS product. Brand context: we are a developer tool for infrastructure monitoring. Palette: #09090B background, #FAFAFA text, #22C55E accent (green means systems healthy). Font: JetBrains Mono for headings (it signals ‘technical’), Inter for body. Hero: left-aligned headline, no stock illustrations, terminal-style code snippet on the right. Features section: two-column grid, icon-left layout, icons from Phosphor in thin style. No testimonial carousels. No gradient CTAs. Tone: competent and understated.”

Brand brief template for AI tools

Copy this template, fill in your values, and paste it at the top of any prompt that generates UI.

BRAND CONTEXT (include in every UI prompt):

Colors:
  Background: [hex]
  Surface/card: [hex]
  Text primary: [hex]
  Text secondary: [hex]
  Primary action: [hex]
  Accent/highlight: [hex]
  Error: [hex]

Typography:
  Headings: [font name] [weight] [size if known]
  Body: [font name] [weight]
  Special (code/labels): [font name if different]

Spacing: [tight / moderate / generous] with [Npx] base unit
Border radius: [value, e.g. 4px, 8px, or 0 for sharp]
Shadows: [yes/no, if yes describe]

Personality: [one sentence, e.g. "Calm, precise, professional --
  not playful, not loud."]

Reference products: [1-2 products whose visual feel
  matches your target]

Do not use: [list defaults to avoid, e.g. "no gradients,
  no purple accents, no card shadows, no stock illustrations"]

Keep this in a file and paste it at the start of every generation prompt.

Signs your AI-built app doesn’t match your brand

These symptoms appear when brand context is missing or incomplete:

• Every page uses different colors. Each prompt was written independently, so the model picked its own palette each time.
• The typography feels anonymous. Inter everywhere, default sizes, no typographic hierarchy.
• Button styles change between screens. One page has rounded pill buttons, another has sharp rectangles. No standard was set.
• Copy tone shifts from page to page. The login screen says “Welcome back!” while the error page says “An error has occurred.” No voice was defined.
• Your app looks identical to a competitor’s. You both used the same AI tool with equally vague prompts. The model gave you both the same output.
• Investors or users say it looks like a template. This is the clearest signal. If outsiders notice, the brand gap is costing you credibility.
• You cannot open two pages side by side and see a family resemblance. Consistent spacing, color, and type across screens is the baseline. Without it, the product feels assembled rather than designed.

Three or more of these symptoms mean you need a brand system, not just better prompts.

Brand consistency checklist for AI-built apps

Run through this list before you ship any AI-generated screen:

• Color palette applied. Every screen uses the same set of hex values. No Tailwind defaults remain.
• Fonts loaded and consistent. The specified typefaces appear on every page, with correct weights for headings and body.
• Spacing follows a scale. Padding and margins use your defined increments, not arbitrary values.
• Button styles match. Primary, secondary, and ghost buttons look the same on every screen.
• Copy tone is uniform. Headings, labels, empty states, and error messages use the same voice.
• Icons come from one set. Same library, same stroke weight, same size.
• No default component library styling visible. No shadcn defaults, no untouched Tailwind classes that clash with your palette.
• Responsive behavior is specified. Layouts adapt to mobile without breaking the visual system.
• Reference screenshot comparison. Open your app next to the reference product you cited. The visual feel should rhyme, even if the layouts differ.

When brand prompts reach their limit

Good brand prompts produce dramatically better output. But prompting alone cannot replace a design system built from strategy and user research. Prompts execute specifications; they do not invent them.

If you have applied the brand brief consistently and the app still feels generic, the issue is not your prompts. It is the absence of a visual system that ties everything together.

At Spin by Fryga, we work with founders whose AI-built products need to look and feel like a real brand, not a template. We stabilize the codebase, establish a design system the AI can reference, and close the gap between “it works” and “it is ours.” If your product functions but carries no visual identity, that is the gap we fill.