[CONTEXT] + [ACTION] + [DETAILS] + [SUCCESS CRITERIA]
I want to build [THING] that [PURPOSE]
The user should be able to:
- [ACTION 1]
- [ACTION 2]
- [ACTION 3]
When [TRIGGER], the app should [RESPONSE]
Store data in [local storage / Supabase / API]
Show data as [list / cards / table / chart]
Design specifications:
- [COLOR/STYLE]
- [LAYOUT]
- [MOBILE CONSIDERATIONS]
Make a form
Create a student registration form with:
Fields:
- Name (text, required, 2-100 characters)
- Email (email format, required, validated)
- Course (dropdown: CS, Engineering, Business)
Validation:
- Check all required fields before submit
- Validate email format
- Show errors in red below fields
Actions:
- On submit: save to local storage, show success message, clear form
- Disable submit button until form is valid
Display:
- Show all students below form in cards
- Sort by registration date (newest first)
- Show total count
Design:
- Primary color: #2563eb (blue)
- Mobile-responsive
- Clean, professional look
"Create an app"
Problem: No direction
"Create a todo app"
Problem: Missing details
"Create a todo app with task name, due date, and priority.
Save to local storage. Display as list."
Good: Has essential details
"Create a todo app with:
- Fields: task (required), due date, priority (high/med/low)
- Actions: add, complete, delete
- Display: list sorted by due date
- Validation: task name required
- Storage: local storage
- UI: color-coded by priority"
Better: Complete specification
Complete spec with:
- Exact field requirements
- Full validation rules
- Error handling
- Success feedback
- Edge cases covered
- Accessibility considerations
- Mobile optimization
Best: Ready for real use
Create a [THING] with [SPECIFICATIONS]
In the [FEATURE], make these changes:
- [CHANGE 1]
- [CHANGE 2]
The [FEATURE] is not working.
Expected: [WHAT SHOULD HAPPEN]
Current: [WHAT HAPPENS]
Please fix.
Add [NEW FEATURE] to [EXISTING APP]:
Purpose: [WHY]
Functionality: [WHAT]
Integration: [HOW IT CONNECTS]
- "with clean, professional styling"
- "mobile-responsive design"
- "easy to read on small screens"
- "modern, minimal interface"
- "show loading indicator while processing"
- "display error messages clearly"
- "add confirmation before deleting"
- "provide immediate feedback"
- "make [field] required"
- "validate email format"
- "must be at least [X] characters"
- "check for duplicates"
- "show success message for 3 seconds"
- "disable button while submitting"
- "clear form after successful submission"
- "animate the transition"
"Make it good"
"Fix the bug"
"Add a button"
"Create a form"
"Add a success message after form submission"
"Fix submit button - should save data to database"
"Add delete button next to each item with red color"
"Create form with name, email, phone fields - all required"
Create a task manager with:
- Add task form
- Task list
- Mark complete function
Update the task manager:
- Add due date field
- Sort by due date
- Highlight overdue tasks in red
Improve task manager:
- Add task count badge
- Show completed tasks separately
- Add "Clear completed" button
- Add smooth animations
Final touches:
- Add empty state message
- Add confetti on completion
- Add keyboard shortcuts
- Optimize mobile layout
Before submitting, check:
Create a [SUBJECT] form with:
- [FIELD 1]: [type], [required/optional], [validation]
- [FIELD 2]: [type], [required/optional], [validation]
- Submit button: [color], [disabled state]
- On submit: [action], [feedback], [next step]
Display [DATA TYPE] as [FORMAT]:
- Show: [field 1], [field 2], [field 3]
- Sort by: [field] [asc/desc]
- If empty: show "[MESSAGE]"
- On click: [ACTION]
Add validation to [FIELD]:
- Rule: [VALIDATION RULE]
- Error message: "[ERROR TEXT]"
- Show error: [WHERE] in [COLOR]
- Clear error: [WHEN]
Style [COMPONENT] with:
- Colors: primary [COLOR], accent [COLOR]
- Layout: [DESCRIPTION]
- Spacing: [MEASUREMENTS]
- Mobile: [RESPONSIVE BEHAVIOR]
If [ACTION] fails:
- Show error: "[MESSAGE]"
- Log to console: [DETAILS]
- Keep: [USER DATA/STATE]
- Provide: [RETRY/ALTERNATIVE]
Build basic version first, then iterate with improvements.
“Like [EXISTING APP]” or “Similar to [FEATURE]” helps AI understand.
“Store as JSON array” or “Format date as DD/MM/YYYY”
“If no data exists…” or “If user clicks cancel…”
“Log [ACTION] to console” helps with debugging.
Don’t combine unrelated requests. Break into separate prompts.
“In the form we just created…” provides context.
Pick terms and stick with them (submit vs save, delete vs remove).
âś… Be Specific: Details get results âś… Be Clear: Avoid ambiguity âś… Be Complete: Include all requirements âś… Be Patient: Iteration is normal âś… Be Curious: Experiment and learn
❌ Don’t Assume: AI needs explicit instructions ❌ Don’t Overcomplicate: Start simple ❌ Don’t Give Up: Refine and retry
I'm trying to [GOAL] but [PROBLEM].
What I want:
- [CLEAR DESCRIPTION]
What's happening:
- [CURRENT BEHAVIOR]
What should happen:
- [EXPECTED BEHAVIOR]
Please help me fix this.
Keep this sheet handy while building apps!
Version 1.0 | eMOBIQ AI Workshop Materials © Orangekloud Technology Inc.