A lot of modern UI work is "vibe coded" with AI. That's great for speed, but not so great for consistency. One screen is soft and rounded, the next is sharp and boxy, and suddenly your app feels like three different products.

The Problem

When you use AI to generate UI designs or code, each prompt starts fresh. The AI doesn't remember the style choices from your last session. So you end up with:

  • Inconsistent button styles across screens
  • Different spacing and padding on every page
  • Color variations that don't quite match
  • Typography that shifts between views

The solution? Create a reusable style guide that you can attach to every prompt.

The Flow

To solve this, I use a single ChatGPT prompt that turns any reference image into a lightweight UX Guide I can reuse across the project.

1

Capture Your Reference

Take a screenshot or mood board that represents the look and feel you want.

2

Upload to ChatGPT

Upload the image(s) to ChatGPT (GPT-4 with vision works best).

3

Run the Prompt

Use the prompt below to generate a comprehensive style guide.

4

Reuse Everywhere

Drop the generated guide into your repo and attach it to future prompts.

The result is a compact text guide that ensures every new screen the AI designs follows the same rules, instead of reinventing the style every time.

The Full Prompt

Copy this prompt and use it with any reference image. It will generate a comprehensive style guide covering colors, typography, components, spacing, and more.

ChatGPT Prompt 
You are a senior product designer and design system specialist.

I will upload one or more reference images that show the visual style for an app or website.

Your job is to turn these images into a clear, text based UI/UX style guide that I can reuse inside other prompts so that future UIs follow the same visual language.

Please:

1. Analyse the images
   • Identify the core visual vibe and themes.
   • Assume this is the canonical style, even if the images differ slightly.

2. Produce a style guide in Markdown with the following sections and structure:

   1. Brand summary
      • 2 to 3 bullet points describing overall mood, personality, and visual feel.
      • Keywords I can reuse in prompts.

   2. Color system
      • List primary, secondary, accent, background and surface colors.
      • For each, give: Name, Hex code, Typical usage (for example "Primary / #123456 / main actions and highlights").
      • Include success, warning, and error colors if visible or implied.

   3. Typography
      • Heading font(s) and body font(s) as families or closest generic style if exact fonts are unknown.
      • Define: H1, H2, H3, Body, Caption.
      • For each: font family, weight, approximate size (for example "H1, bold, 32px, tight line spacing"), casing preferences, and where it is used.

   4. Core components
      Describe visual rules for these elements, based on what you see in the images and general consistency:

      • Buttons
        • Primary, Secondary, Ghost/Link (if applicable).
        • Shape (corner radius), padding, border style, text style, icons, and typical states (default, hover, active, disabled) in words.

      • Inputs and form elements
        • Text fields, text areas, dropdowns, checkboxes, radio buttons, toggles.
        • Border radius, border color, fill color, label style, focus state, error state.

      • Cards and panels
        • Background color, elevation or shadow, border radius, padding, typical use cases.

      • Navigation
        • Top bar or side bar style, tab style, icons vs text, active state styling.

   5. Layout and spacing rules
      • Describe common spacing (for example "small = 4px, medium = 8px, large = 16px style spacing").
      • General layout patterns (for example "centered card on neutral background", "content width constrained to a max of 1200px", "rounded containers on soft background").

   6. Iconography and illustration
      • Icon style (outline, solid, rounded, duotone, etc).
      • Line thickness or weight.
      • Illustration style if visible (flat, gradient, 3D, playful, realistic, etc).

   7. Usage guidelines for AI generated UIs
      • 5 to 10 short prompt snippets that I can paste inside other prompts.
      • Each snippet should say how to ask for a UI in this style, for example:
        • "Use the primary action button style from the design system, with high contrast and rounded corners."
        • "Apply the card style with soft shadow, 16px padding, and medium radius corners on a neutral background."

3. If there are any ambiguities in the images, make reasonable assumptions and be explicit about them in the guide.

4. Keep everything technology agnostic (do not mention React, Angular, Tailwind, etc). The output must be pure design language that I can feed into other prompts.

How to Use It

What You'll Get

The prompt generates a style guide with these sections:

1 Brand Summary Mood, personality, and reusable keywords
2 Color System Primary, secondary, accent, and state colors with hex codes
3 Typography Font families, weights, sizes for H1-H3, body, and captions
4 Core Components Buttons, inputs, cards, and navigation styles
5 Layout & Spacing Spacing scale and layout patterns
6 Iconography Icon style, weight, and illustration approach
7 AI Prompt Snippets Ready-to-paste prompts for future UI generation

Pro Tips

Use multiple images — Upload 2-3 screens that show different states (forms, lists, modals) for a more complete guide.
Save as a file — Store the output as STYLE_GUIDE.md in your repo and reference it in future prompts.
Include in system prompts — For coding assistants like Cursor, paste the guide into your project's rules file.
Iterate and refine — If the guide is missing something, ask ChatGPT to add specific sections or clarify details.

Need Help Building a Design System?

We can help you create a comprehensive design system that works across all your digital products — whether you're using AI tools or building from scratch.

Get in Touch WhatsApp Us