Design Prompting Basics
About 5 minutes
How you communicate with AI determines the quality of the design. Describing structure, color, fonts, spacing, and animation in precise language lets AI generate designs that are actually usable.
This section is where you build the vocabulary to do exactly that.
| Page | What you’ll learn |
|---|---|
| UI Prompting Basics | How to write instructions and component templates |
| Prompting for Typography | Font selection, size scales, pairing, and text animation |
| Animation & Dynamic Effects | Motion, background effects, and interaction states |
| Device Framing | Browser, iPhone, and iPad mockups |
| Advanced Techniques | Chain prompting and accessibility |
Core Principles for Effective Prompts
Section titled “Core Principles for Effective Prompts”Regardless of which design element you’re describing, these four points improve accuracy:
Use specific numbers — Say “48px” instead of “a large font”
State the implementation approach — Specify the CSS direction and constraints instead of saying “make it nice”
Include responsive requirements — Specify behavior for each screen size
Reference known designs — Point to familiar services like “similar to Airbnb’s hero section”
Layout-specific instructions now live in Layout Prompts, and color, shadow, theme, and framework instructions live in Styling Prompts.