Design & Midjourney
Advanced
Design System Architecture
Design systems ensure consistency across large product codebases. This token architect prompt maps out semantic color tokens, typography scales, spacing tokens, and component states, helping UI designers and engineers establish a unified design source.
How to Run it
Describe the type of application you are building (e.g., a SaaS calendar, a Fintech mobile app). The output will detail a structured design token manifest.
Optimization Tips
- HSL Colors: Ask the AI to write color tokens in HSL format. This makes programmatically adjusting lightness and saturation for hover states and dark modes much easier.
Customize Prompt Parameters
AI Prompt Blueprint
Act as a Senior Design System Engineer. Design a layout system and UI token specifications for a modern [Insert App Type, e.g., Fintech Dashboard]. Deliver: 1. Color System Palette: Primary, Secondary, Background, Surface, Border, and semantic status colors (Success, Warning, Info, Error) using exact HEX/HSL codes. 2. Design Token Architecture: Typography scale (headings, body, captions), spacing scales, and border-radius tokens. 3. Interactive State Guidelines: Focus, active, hover, and disabled token logic for UI components like input fields and primary buttons.