AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

Branding

Brand Style to AI Prototype

Create AI prompts that generate prototypes matching your exact brand style, colors, typography, and visual identity.

Prompt

Create an AI prompt that generates prototypes matching this brand style exactly.

Brand Style Guide:
[Paste brand guidelines, style guide, or brand assets]

Brand Elements:
- Primary colors: [list with hex codes]
- Secondary colors: [list with hex codes]
- Typography: [font families, sizes, weights]
- Logo/branding: [describe]
- Visual style: [minimalist / bold / playful / professional / etc.]
- Tone: [describe brand personality]

Target Prototype: [describe what you want to build]

Provide:

1. Brand Style Analysis
   - Key visual characteristics
   - Design principles
   - Color usage patterns
   - Typography hierarchy
   - Spacing and layout style

2. AI Prompt with Brand Constraints
   - Brand style requirements
   - Color specifications
   - Typography specifications
   - Visual style guidelines
   - Tone and personality

3. Complete Prototype Prompt
   - Ready-to-use prompt
   - Incorporates all brand elements
   - Specifies visual style
   - Includes brand guidelines
   - Defines tone and personality

4. Brand Consistency Checklist
   - Colors to use (exact hex codes)
   - Typography to use
   - Spacing patterns
   - Visual style elements
   - What to avoid

5. Validation Guide
   - How to verify brand consistency
   - Common brand violations
   - What to adjust if off-brand

6. Iteration Tips
   - How to refine for better brand match
   - What to emphasize in follow-up prompts
   - How to maintain consistency across screens

Format as a complete AI prompt ready to generate brand-consistent prototypes.

How to use

  1. 01

    Gather your brand guidelines: This can be from a PDF, brand guidelines website, Figma design system, or screenshots of existing branded assets

  2. 02

    Before the prompt, write your brand context: List your primary colors with hex codes (e.g., "#007AFF for primary"), typography (font family, sizes), and visual style (minimalist, bold, playful, professional)

  3. 03

    Replace [Brand Style Guide] section with your brand guidelines. If you don't have formal guidelines: Use this prompt with screenshots of your existing product/brand and say "Extract brand style from these screenshots"

  4. 04

    Replace [Target Prototype] with what you want to build (e.g., "a landing page for our SaaS product" or "a mobile app dashboard")

  5. 05

    Paste the modified prompt into your preferred AI tool, like Claude or ChatGPT

  6. 06

    The AI will create a reusable brand-constrained prompt. Use that generated prompt with your AI prototyping tool (v0, UX Pilot, Cursor) to build components

  7. 07

    Test the brand-constrained prompt: Generate a simple component first (like a button) to verify it matches your brand before building full screens

Tips

  • If you don't have brand guidelines: Upload screenshots of your existing branded product to AI tools with vision, then use this prompt to extract and formalize your brand style
  • Include exact hex color codes - AI tools need precise values to match your brand exactly
  • Specify your visual style clearly: "minimalist with lots of white space" or "bold with vibrant colors" helps AI understand your brand personality
  • The generated brand-constrained prompt is reusable - save it and use it for all future prototypes
  • For a complete workflow: First extract design system from Figma using MCP, then convert to AI prompt using the "Design System to AI Prompt Converter"