GitHub Copilot Prompt to Create a Brand Style Guide
GitHub Copilot, the AI coding 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 graphic 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, configuration JSON), Copilot transforms your creative intentions into immediately actionable technical specifications for a development team. The prompt approach allows for rapid iteration on design 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, along with variants adapted to your expertise level.
Paste in your AI
Paste this prompt in ChatGPT, Claude or Gemini and customize the variables in brackets.
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 of 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-height, and font-weight.
-
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 everything as a JSON design tokens file compatible with Style Dictionary.
The brand tone is modern, professional, and accessible. The industry sector is [INDUSTRY_SECTOR].
Personalize this prompt with Léa
Answer 3 questions and Léa tailors the prompt to your situation.
Why this prompt works
This prompt works because it breaks down the style guide into precise technical sections that Copilot can process sequentially, each with concrete deliverables (CSS variables, JSON tokens). Specifying output formats (HEX, RGB, HSL, rem) eliminates ambiguity and forces a usable response. The placeholder [INDUSTRY_SECTOR] encourages the user to provide context, which dramatically improves the relevance of the generated design choices.
Use Cases
Variants
Expected Output
You will obtain a structured document containing a coherent 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 ready-to-integrate CSS code and a JSON design tokens file usable with Style Dictionary or Figma Tokens.
Frequently Asked Questions
Can GitHub Copilot really create a professional-grade design system?
GitHub Copilot excels at generating the technical backbone of a design system: CSS variables, design tokens, spacing systems, and component specifications. It produces structured, consistent code that serves as an excellent foundation. However, creative choices (brand identity, conveyed emotions, visual originality) still require human artistic direction. The optimal approach is to use Copilot to generate the structure and technical specs, then refine the aesthetic choices with a designer or your own creative sensibility.
How do I adapt the prompt to my specific industry?
Replace the [to be specified] or [industry] placeholder with a precise description of your field and positioning. For example, instead of simply writing 'fintech,' specify 'B2B fintech app targeting SME CFOs, with a premium and reassuring positioning.' The richer the context, the more Copilot will adapt the color choices (institutional blue vs. creative purple), typography (classic serif vs. modern sans-serif), and overall tone of the design system to your desired identity.
What output format should I prioritize to integrate the design system into my development workflow?
The most versatile format is a Style Dictionary-compatible JSON of 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 can be used directly. Specify the desired format in your prompt so Copilot structures its response accordingly.
Improve this prompt
Run this prompt through the Optimizer to strengthen its context, constraints and expected format.
Improve this prompt with the OptimizerComments
Be the first to comment on this prompt.
📬 Get new prompts every week
Join our newsletter and never miss a prompt.
Go further
Similar Prompts
Create Catchy Social Media Headlines
Generates punchy, optimized headlines for your social media posts, adapted to your audience and platform.
Write a color system rationale
Document color system decisions
Prompt Claude for Creating Illustrations
Claude, Anthropic's AI assistant, offers remarkable capabilities for creating illustrations thanks to its fine understanding of visual descriptions and artistic concepts. Whether you are a graphic designer, an author looking to illustrate a book, or an entrepreneur wanting to create visuals for your brand, Claude can generate detailed illustrations by following your precise guidelines. By formulating structured prompts that define the artistic style, composition, color palette, and desired mood, you get consistent and professional results. Claude's advantage lies in its ability to interpret complex creative briefs, respect specific technical constraints, and iterate quickly on visual concepts. This page guides you with optimized prompts to get the most out of Claude for your illustration projects, from simple conceptual sketches to elaborate editorial illustrations. Each prompt is designed to maximize the quality of the output while giving you full control over the final result.
User stories with acceptance criteria
Creating comprehensive user stories