<aside> 💡
Create a comprehensive style guide with this AI prompt, ensuring brand consistency and accelerating development across products.
</aside>
● Provides a comprehensive style guide to unify design across products. ● Offers interactive components and code snippets for seamless implementation. ● Ensures brand consistency with responsive and accessible design features.
● Define clear objectives for the style guide to align with your brand's identity and ensure it meets the needs of both designers and developers.
● Conduct a thorough analysis of existing design assets to integrate them effectively into the new style guide, maintaining brand consistency.
● Regularly update the style guide based on feedback from your design and development teams to keep it relevant and useful.
<context>
You are working with a team drowning in design chaos where every new feature loo
ks different, developers guess at spacing, colors are inconsistent, and brand id
entity feels diluted across products. Traditional design guidelines have failed
because they were either too abstract to implement or too rigid to scale. The or
ganization needs a comprehensive style guide that serves as a single source of t
ruth, eliminating ambiguity while empowering teams to build with confidence and
speed across hundreds of products and features.
</context>
<role>
You are a world-class design systems architect and brand strategist who has buil
t visual identity frameworks for companies like Airbnb, Stripe, and Linear. You'
ve spent years creating design languages that teams actually use and that scale
seamlessly across massive product ecosystems. After witnessing countless design
systems gather dust because they were built for designers rather than developers
, you developed a methodology that creates living, breathing style guides with i
nteractive components, real code snippets, and foolproof implementation guidance
that bridges the gap between design vision and engineering reality.
</role>
<response_guidelines>
● Create a comprehensive, production-ready style guide as an interactive web art
ifact
● Build in React with Tailwind CSS using clean, professional styling similar to
Stripe's documentation or shadcn/ui
● Include live component examples, usage guidelines, and copy-paste code snippet
s for immediate implementation
● Ensure responsive design and accessibility compliance (WCAG AA minimum)
● Structure navigation logically from Foundation → Components → Patterns → Resou
rces
● Generate downloadable design tokens in multiple formats (CSS variables, JavaSc
ript objects, JSON)
● Add interactive features like color pickers, font size previews, and component
playgrounds
● Include comprehensive documentation explaining integration into existing proje
cts
● Use proper semantic HTML and modern CSS practices throughout the implementatio
n
</response_guidelines>
<task_criteria>
Build a complete style guide covering brand foundation (color palette with hex c
odes, typography system with usage rules, spacing scale with 4px base grid), com
ponent library (buttons with variants and states, input fields, cards, badges, a
lerts, modals), and layout patterns (12-column grid system with responsive break
points). Include search functionality, sidebar navigation, dark mode toggle, and
keyboard shortcuts. Generate design tokens as CSS variables and JavaScript obje
cts for easy developer adoption. Ensure the artifact is a single-file React appl
ication with embedded styles and includes a comprehensive README section. Focus
on creating a system that eliminates design decisions and accelerates developmen
t velocity while maintaining brand consistency.
</task_criteria>
<information_about_me>
- Industry: [SPECIFY THE INDUSTRY OR BUSINESS SECTOR]
- Brand Personality: [DESCRIBE BRAND STYLE - modern/classic/playful/professional
]
- Existing Brand Assets: [LIST ANY CURRENT LOGOS, COLORS, OR DESIGN ELEMENTS]
- Primary Use Cases: [DESCRIBE MAIN PRODUCTS OR APPLICATIONS WHERE STYLE GUIDE W
ILL BE USED]
- Team Structure: [DESCRIBE DESIGN AND DEVELOPMENT TEAM COMPOSITION]
</information_about_me>
<response_format>
<brand_foundation>Complete color system with primary, secondary, neutral, and se
mantic colors including hex codes and usage guidelines</brand_foundation>
<typography_system>Font hierarchy with families, sizes, weights, line heights, a
nd specific usage rules for headers, body text, and UI elements</typography_syst
em>
<spacing_scale>Standardized spacing system with 4px base grid and 8px increments
, including margin and padding guidelines</spacing_scale>
<component_library>Interactive components including buttons (primary/secondary/g
host variants in sm/md/lg sizes with all states), input fields, cards, badges, a
lerts, and modals with live examples and code snippets</component_library>
<layout_patterns>Responsive grid system with 12-column layout, mobile/tablet/des
ktop breakpoints, and common page templates</layout_patterns>
<design_tokens>Exportable CSS variables and JavaScript objects for seamless deve
loper integration</design_tokens>
<interactive_features>Search functionality, sidebar navigation, responsive desig
n, and accessibility features</interactive_features>
<implementation_guide>Comprehensive README with step-by-step integration instruc
tions and best practices</implementation_guide>
</response_format>
Take a deep breath and work on this problem step-by-step. MOST IMPORTANT: Delive
r the output as a single-file React artifact with embedded Tailwind styles and c
omplete interactive functionality.
● Fill in the [INDUSTRY] and [BRAND PERSONALITY] placeholders with your specific business sector and the style that best represents your brand. ● Example: If your industry is "Technology" and your brand personality is "modern and professional," your style guide should reflect these attributes in its design elements and components.