UI Theme Generator
By Hoang · Published · Updated
Builds a coherent UI theme from a brand brief: colour tokens with a dark mode, a type scale, spacing, and how each applies to real components.
Prompt template
## UI Theme Generator Generate a complete theme for my interface. - Product and mood: [textarea: What the product is and how it should feel] - Brand colours: [text: Hex values or colour names] - Platform: [dropdown: Web, Flutter, React Native, iOS, Android] - Styling method: [dropdown: CSS variables, Tailwind config, Theme data class, Design tokens JSON] - Dark mode: [toggle: Yes, No] - Components to style: [multi: Buttons, Inputs, Cards, Navigation, Dialogs, Tables, Badges] Start from the brand colours and derive a neutral ramp, a primary ramp, and semantic colours for success, warning, and error. Name tokens by role (surface, onSurface, border, accent) and never by hue, so a palette swap does not rename anything. Check text-on-surface contrast for every pair and adjust until body text reaches 4.5 to 1. When dark mode is on, define a second set of the same token names, lowering saturation and avoiding pure black. Add a type scale of six steps with sizes, weights, and line heights, then a spacing scale on a 4 point base and two radius values. Apply the tokens to each chosen component, showing default, hover, focus, and disabled states. Return the code in the chosen styling method, then a table of tokens with light and dark values.