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:

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.
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.
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).
UI Components: specify styles for buttons (primary, secondary, outline, ghost), form fields, cards, alerts, and badges with their states (hover, focus, disabled, active).
Logo Usage Rules: protection zones, minimum sizes, variants (color, monochrome, inverted), usage prohibitions.
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

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

Copy the prompt with the button above.
Paste it into ChatGPT, Claude or your favorite AI assistant.
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 library Learn prompting Prompt builder Prompt 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 Course Plan

GitHub Copilot, the coding assistant powered by GitHub and OpenAI's artificial intelligence, is not limited to code generation. Thanks to its natural language understanding capabilities, it can be a valuable ally for teachers, trainers, and instructional designers who want to quickly structure a complete course plan. By formulating a well-crafted prompt directly in your code editor or via Copilot Chat, you can obtain a coherent pedagogical architecture including learning objectives, thematic progression, practical activities, and assessment methods. Copilot's advantage lies in its ability to adapt to the technical context: if you are creating a programming course, it can simultaneously suggest relevant coding exercises. This guide provides an optimized prompt to generate a structured course plan, adaptable to any discipline, with variants according to your level of pedagogical requirement. Whether you are preparing professional training, a university module, or a practical workshop, these prompts will save you considerable time in the design phase.

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 Create Personas

GitHub Copilot, the AI development assistant integrated into code editors, proves to be a powerful tool far beyond code generation. Used strategically, it can create detailed personas for UX design, marketing, or product management. By leveraging its ability to structure complex data and generate coherent content, Copilot can produce realistic user profiles based on demographic, behavioral, and psychographic criteria. The advantage of using Copilot lies in its ability to generate personas directly usable in your code — as JSON files, test fixtures, or seed data — while maintaining narrative consistency between the different persona attributes. Whether you are designing a SaaS application, a marketplace, or an e-commerce site, well-built personas guide your design and development decisions. This prompt will allow you to generate structured, realistic, and immediately usable personas in your product development workflow.