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.
Learn more
Check the full skill on Prompt Guide to master this technique from A to Z.
View on Prompt Guide📬 Get new prompts every week
Join our newsletter and never miss a prompt.
Similar Prompts
Evaluate Climate Impact on Architectural Design
Analyze climate impact on your architectural projects and integrate resilience strategies from the design phase.
Write Impactful Advertising Copy
Writes persuasive advertising copy by exploring multiple creative angles using the AIDA method.
Midjourney Prompt for Creating Mockups
Mockups have become an essential part of the creative process, whether to present a logo on packaging, visualize a website design on a screen, or stage a product in a realistic context. Midjourney revolutionizes this step by generating photorealistic mockups in seconds, without the need for complex PSD files or expensive stock images. Thanks to its advanced understanding of materials, lighting, and perspectives, Midjourney produces professional-quality staging that rivals studio photography. Whether you are a graphic designer presenting a visual identity to a client, an entrepreneur looking to visualize packaging before production, or a marketer creating visuals for a campaign, mastering mockup prompts will save you considerable time. The main challenge lies in the precision of the instructions: type of support, viewing angle, lighting, environment, and level of realism must be carefully described to obtain a usable result. This guide provides optimized and tested prompts for creating compelling mockups with Midjourney, from simple product previews to ultra-realistic renders worthy of a professional shoot.
Claude Prompt for Creating YouTube Thumbnails
YouTube thumbnails are the first visual element viewers see before clicking on a video. An effective thumbnail can double or triple your click-through rate, making it one of the most powerful growth levers on the platform. Claude excels at thumbnail design thanks to its ability to generate precise visual descriptions, balanced compositions, and catchy text tailored to your niche. By using Claude as a creative assistant, you can quickly iterate on thumbnail concepts, get high-contrast color recommendations, structure visual hierarchy, and write short, emotionally impactful text. Whether you are a beginner creator or an established YouTuber, Claude helps you systematize your thumbnail creation process to produce visuals that are consistent with your brand, optimized for mobile, and designed to trigger the click. This guide provides ready-to-use prompts to turn Claude into a true art director for your YouTube thumbnails.