P

Prompt GitHub Copilot to Create a Brand Style Guide

GitHub Copilot, the AI development assistant integrated into code editors, can be a powerful ally for creating a complete and structured brand style guide. Whether you are a front-end developer looking to formalize a project's visual identity, a designer wanting to quickly generate a reference document, or a project manager needing a consistent graphical framework, Copilot helps you produce a detailed style guide covering color palette, typography, spacing, UI components, and logo usage rules. By leveraging its ability to generate structured code (CSS, design tokens, JSON configuration), Copilot transforms your creative intentions into technical specifications immediately usable by a development team. The prompt-based approach allows rapid iteration on graphic choices while maintaining overall consistency. Here is an optimized prompt to get the most out of GitHub Copilot in creating a professional brand style guide, accompanied by variants adapted to your expertise level.

The prompt

GitHub Copilot

Generate a complete brand style guide for a professional web project. Include the following elements in a structured format:

  1. Color Palette: define a main palette (3-5 colors) and a secondary palette (3 neutral colors) with HEX, RGB, and HSL codes. Add light and dark variants for each main color. Generate corresponding CSS custom properties.

  2. Typography: recommend a combination of 2 Google Fonts (headings + body text), define the complete typographic scale (h1 to h6, body, caption, overline) with sizes in rem, line-heights, and font-weights.

  3. Spacing and Grid: define a spacing system based on a base unit of 8px, a responsive 12-column grid with breakpoints (mobile, tablet, desktop, large).

  4. UI Components: specify styles for buttons (primary, secondary, outline, ghost), form fields, cards, alerts, and badges with their states (hover, focus, disabled, active).

  5. Logo Usage Rules: protection zones, minimum sizes, variants (color, monochrome, inverted), usage prohibitions.

  6. Design Tokens: export the whole set as a JSON design tokens file compatible with Style Dictionary.

Brand tone is modern, professional, and accessible. The industry is [TO SPECIFY].

Personalize this prompt with Léa · AI assistant

Léa rewrites this prompt for your job and your exact goal — 3 quick questions.

Why it works

This prompt works because it breaks down the brand style guide into precise technical sections that Copilot can handle sequentially, each with concrete deliverables (CSS variables, JSON tokens). Specifying output formats (HEX, RGB, HSL, rem) eliminates ambiguity and forces an actionable response. The placeholder [TO SPECIFY] encourages user contextualization, which drastically improves the relevance of the generated graphic choices.

Expected result

You will obtain a structured document containing a consistent color palette with all variations, a harmonious typographic scale, a mathematically consistent spacing system, and detailed specifications for each UI component with their different states. Everything will be accompanied by CSS code ready to integrate and a JSON design tokens file usable with Style Dictionary or Figma Tokens.

Variants by level

FAQ

Can GitHub Copilot really create a professional-quality brand style guide?
GitHub Copilot excels at generating the technical part of a brand style guide: CSS variables, design tokens, spacing systems, and component specifications. It produces structured and consistent code that serves as an excellent foundation. However, creative choices (brand identity, conveyed emotions, visual originality) always require human artistic direction. The optimal approach is to use Copilot to generate the structure and technical specifications, then refine aesthetic choices with a designer or your own creative sensibility.
How do I adapt the prompt to my specific industry?
Replace the placeholder [to specify] or [INDUSTRY] with a precise description of your field and positioning. For example, instead of simply writing 'fintech', specify 'B2B fintech application targeting CFOs of SMEs, premium and reassuring positioning'. The richer the context, the better Copilot will adapt the color choices (institutional blue vs. creative purple), typography (classic serif vs. modern sans-serif), and overall tone of the style guide to your desired identity.
What output format should I use to integrate the style guide into my development workflow?
The most versatile format is Style Dictionary-compatible JSON design tokens. This format can be automatically transformed into CSS variables, SCSS, Swift files for iOS, XML for Android, or any other required format. If your team uses Figma, JSON tokens can be imported via the Figma Tokens plugin. For a simple project, CSS custom properties suffice and are directly usable. Specify the desired format in your prompt so Copilot structures its response accordingly.

How to use this prompt

  1. Copy the prompt with the button above.
  2. Paste it into ChatGPT, Claude or your favorite AI assistant.
  3. Replace the bracketed variables with your details, then refine the result.

About Prompt Guide

Prompt Guide is a free library of 4800+ ready-to-use prompts for ChatGPT, Claude and other AIs, with guides to learn prompting and tools to build and optimize your own prompts.

Prompt libraryLearn promptingPrompt builderPrompt optimizer

Already have a prompt?

Paste it into the Optimizer, AI improves it in 5 seconds: role, context, format. Free, no signup.

Open the Optimizer

More prompts to explore

Prompt GitHub Copilot to Create a Chatbot

GitHub Copilot has become an essential assistant for developers looking to accelerate the creation of conversational applications. Creating a chatbot

Prompt GitHub Copilot to Create a Social Media Strategy

GitHub Copilot, primarily known as a development assistant, proves to be a remarkably effective tool for structuring a social media strategy.

Prompt GitHub Copilot to Create a Syllabus

GitHub Copilot, GitHub's AI assistant integrated into code editors, also proves to be a powerful tool for creating structured educational content.

Prompt GitHub Copilot to Create Instagram Stories

GitHub Copilot, the AI-powered coding assistant, is not limited to writing traditional code. It also excels at generating visual components and templates for social media, especially Instagram Stories. By leveraging its HTML/CSS, SVG, and creative code generation capabilities, you can produce professional Story designs directly from your code editor.

Prompt GitHub Copilot to Summarize a Document

GitHub Copilot, the AI assistant developed by GitHub and powered by OpenAI's models, is not limited to code generation. Integrated directly into your editor, it also excels at summarizing technical documents, specifications, README files, or any documentation present in your project.

Prompt GitHub Copilot to Write a Cover Letter

GitHub Copilot, known primarily as a development assistant, also proves to be a formidable tool for writing professional documents like

Go further

Free prompt library

4800+ prompts sorted by category, one-click copy.

Get new prompts every week

Join our newsletter.

Your privacy preferences

Google Analytics measures the site’s audience. If you accept, it sets cookies to recognise your visits. If you refuse, no audience cookie is set, but Google’s tag still sends cookieless measurements. You can change your mind at any time. Learn more about the data we use