AI Design
Knowing what to tell AI — and how — lets you create professional-quality UI without any design background. This section is a systematic guide to articulating design instructions for AI.
Telling AI “make me a cool website” won’t get you far. Mastering how to describe fonts, layouts, colors, and animations in precise language turns AI into a powerful design partner.
Start Here
Section titled “Start Here”| You are… | Recommended page |
|---|---|
| New to AI design | UI Prompting Basics |
| Tightening layout structure | Layout & Responsive Design |
| Creating lists, grids, or bento layouts | Layout Prompt Examples |
| Refining color, shadows, and themes | Styling Fundamentals |
| Improving typography | Prompting for Typography |
| Adding animations | Animation & Dynamic Effects |
What You’ll Learn
Section titled “What You’ll Learn”Learn concrete prompting techniques to give precise design instructions to AI tools.
- UI Prompting Basics — How to write UI instructions and ready-to-use component templates
- Prompting for Typography — Font classification, pairing, size scales, and responsive typography
- Animation & Dynamic Effects — How to describe motion, background effects, and interaction states
- Device Framing — Creating realistic mockups with browser, phone, and tablet frames
- Advanced Techniques — Chain prompting, accessibility, and strategies for higher precision
Learn page structure, arrangement, and responsive behavior through the layout-specific articles.
- Layout & Responsive Design — How to specify grids, flex layouts, and breakpoints
- List Layout Prompts — User profiles, contacts, settings, notifications, and product lists
- Grid Layout Prompts — Card grids, masonry layouts, feature grids, and dashboards
- Bento Layout Prompts — Mixed-size cells for portfolios and dashboards
- UI Component Layout Prompts — Modals, navigation, sidebars, footers, and toolbars
- Layout Prompt Examples — Complete prompts for common UI patterns
Learn how to specify color, themes, shadows, accessibility, and CSS frameworks.
- Styling & Frameworks — CSS framework and color system specification
- Styling Fundamentals — Visual hierarchy, style types, and how color influences behavior
- Color Theory for UI Styling — Color psychology, harmony rules, and hex palette references
- Themes & Shadow Depth — Light/dark themes, shadow levels, and elevation hierarchy
- Responsive Design & Accessibility — Breakpoints, WCAG contrast, and accessibility
- Advanced Styling Techniques — Gradients, micro-interactions, CSS variables, and color palettes
Before You Start
Section titled “Before You Start”No design expertise required. If you’ve used an AI tool before, you can start right away.
Basic knowledge of CSS and HTML will deepen your understanding, but you can follow along without it.