Writing effective prompts
The difference between a vague request and a specific one is the difference between "close enough" and "exactly what I wanted."
Anatomy of a good prompt
Every strong prompt has three parts:
| Part | What to include | Example |
|---|---|---|
| What to build | The app's purpose | "a task management app" |
| How it works | Features and behavior | "drag-and-drop cards, filter by status" |
| How it looks | Design and layout | "dark sidebar, rounded cards with shadows" |
Put them together:
"Build a task management app with kanban board drag-and-drop cards.
Dark sidebar, white content area, rounded cards with subtle shadows."
Vague vs effective
info
Your first prompt doesn't need to be perfect -- you can always iterate. But starting specific saves time.
Vague: "Make a todo app"
Effective:
"Build a todo app with a text input and add button at top.
Task list with checkboxes to mark complete. Strikethrough on completed tasks.
Delete button on each task. Filter tabs: All, Active, Completed.
Clean white design with blue accent color."
Vague: "Make it look better"
Effective:
"Add more whitespace between sections, round all card corners to 12px,
increase the heading font size, and add a subtle shadow to cards."
Vague: "Build a complete e-commerce platform"
Effective: Start small, then iterate:
Step 1: "Build a product catalog with search and category filters"
Step 2: "Add a shopping cart with quantity controls"
Step 3: "Add Stripe checkout"
Step 4: "Add order history page"
Attach images
Upload up to 3 images (5MB each) to show what you want:
- Mockups -- Figma designs, wireframes, sketches
- Screenshots -- Existing apps to reference
- Inspiration -- UI patterns you like
Images work as a visual prompt. Especially useful for complex layouts that are hard to describe in text.
Iteration prompts
After your first generation, keep building:
| Use case | Example prompt |
|---|---|
| Add a feature | "Add user authentication with email/password signup and login" |
| Fix something | "The save button doesn't work. It should save form data and show a success message." |
| Change design | "Change the color scheme to primary: #6366f1, background: #f8fafc, text: #1e293b" |
| Target a component | "In the TaskList component, add a sort dropdown with options for date, priority, and name" |
Common mistakes
| Instead of... | Try... |
|---|---|
"Make it look better" | "Add whitespace, round card corners, increase font size" |
"Build everything at once" | Start with core features, add more in follow-up prompts |
"Make it minimal but feature-rich" | "Minimal interface with advanced options in a collapsible panel" |
When to use AI vs the editor
| AI prompts | Code editor |
|---|---|
| New features | Quick color and spacing tweaks |
| Multi-file changes | Fixing typos and labels |
| Complex logic | Small CSS adjustments |
| Structural changes | Config file changes |