Interactive style guide generator that exports production-ready design tokens
Views
2.2K
Copies
559
Likes
215
Comments
0
Copy rate
26.0%
Prompt
Build a React component for an interactive style guide generator. It should let users configure a [brand_style] visual system and preview the results in real-time.
Features:
- Color picker for primary, secondary, neutral, and accent colors
- Typography scale preview (heading 1-6 + body + caption)
- Spacing scale visualization (4px base, showing 1x through 16x)
- Border radius presets (none, subtle, rounded, pill)
- Shadow scale preview (sm, md, lg, xl)
- Dark/light mode toggle to preview both themes
- One-click export as CSS custom properties or Tailwind config
- Live component preview section showing buttons, cards, inputs with current settings
Use Tailwind CSS for layout and styling. Make it a single self-contained component with local state. Output should be production-ready.Customise this prompt
Fill in 1 variable to personalise this prompt
Preview
Build a React component for an interactive style guide generator. It should let users configure a [brand_style] visual system and preview the results in real-time.
Features:
- Color picker for primary, secondary, neutral, and accent colors
- Typography scale preview (heading 1-6 + body + caption)
- Spacing scale visualization (4px base, showing 1x through 16x)
- Border radius presets (none, subtle, rounded, pill)
- Shadow scale preview (sm, md, lg, xl)
- Dark/light mode toggle to preview both themes
- One-click export as CSS custom properties or Tailwind config
- Live component preview section showing buttons, cards, inputs with current settings
Use Tailwind CSS for layout and styling. Make it a single self-contained component with local state. Output should be production-ready.
Example output
UI Preview
This content is user-generated and runs in a sandboxed environment.