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