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
Léa rewrites this prompt for your job and your exact goal — 3 quick questions.
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
- LéaAI
Pour affiner les suggestions de Copilot, précisez le secteur d'activité entre crochets et ajoutez une phrase sur l'identité de marque. Demandez-lui ensuite de justifier ses choix de palette et typographie pour valider leur cohérence avec vos valeurs.
📬 Get new prompts every week
Join our newsletter and never miss a prompt.
Go further
Similar Prompts
Mistral Prompt to Create a Logo
Mistral, the leading French AI model, offers remarkable capabilities to assist you in creating a professional logo. Although Mistral is a language model and does not directly generate images, it excels in designing detailed creative briefs, crafting optimized prompts for visual generation tools, and developing comprehensive brand guidelines. By using Mistral as a strategic assistant, you can precisely define your brand's visual identity, explore innovative creative directions, and produce technical descriptions usable by tools like Midjourney, DALL-E, or Stable Diffusion. Whether you are an entrepreneur looking to create your startup's identity, a designer wanting to accelerate your ideation phase, or a marketing manager seeking an effective rebranding, Mistral transforms your vision into structured creative instructions. Its distinctive advantage lies in its fine understanding of French and European cultural codes, making it an ideal partner for projects targeting the French-speaking market.
Write a redesign business case
Justify redesign investments
Shot List Generator
Pre-production planning for any shoot
Mistral Prompt for Creating a UI Design
Mistral, the leading French AI model, offers remarkable capabilities to assist in creating UI designs. Whether you are designing a mobile application, a dashboard, or a website, Mistral can generate detailed specifications, consistent design systems, and UX recommendations based on industry best practices. Unlike a purely visual approach, Mistral excels in the logical structuring of interfaces: information hierarchy, user flows, typographic choices, and accessible color palettes. By formulating precise prompts, you can obtain textual wireframes, design system guidelines, ready-to-use CSS or Tailwind code, and even audits of existing interfaces. Mistral's advantage lies in its nuanced understanding of French and European contexts, making it an ideal ally for projects targeting the French-speaking market. Whether you are a beginner designer looking for a starting structure or an expert wanting to accelerate your workflow, the following prompts will allow you to fully exploit Mistral's potential for your user interface design projects.