Design Instructions with AI
Knowing what to tell AI — and how — helps you move closer to professional-quality UI even without a formal design background. This section is a systematic guide to articulating design instructions for AI.
Telling AI “make me a cool website” usually produces vague results. Describing fonts, layouts, colors, and animations precisely makes it easier to explore UI directions that match your intent.
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 |
| Preserving accessibility | Accessibility Overview |
What You’ll Learn
Design Prompting Basics
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
Layout Prompts
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
Styling Prompts
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
Accessibility Design
Learn how to make AI-generated UI usable not only visually, but also across input methods, reading environments, and display conditions.
- Accessibility Overview — WCAG basics, UI review points, and requirements to include in AI prompts
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.