đź“‹ CHEAT SHEET: UNIVERSAL PROMPT STRUCTURE powered by eMOBIQ AI

Quick Reference Guide for Writing Effective Prompts


THE PERFECT PROMPT FORMULA

[CONTEXT] + [ACTION] + [DETAILS] + [SUCCESS CRITERIA]

TEMPLATE

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]

EXAMPLE: GOOD VS BAD PROMPTS

❌ BAD (Too Vague)

Make a form

âś… GOOD (Clear & Complete)

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

THE 5 LEVELS OF PROMPT QUALITY

Level 1: Vague ❌

"Create an app"

Problem: No direction

Level 2: Basic ⚠️

"Create a todo app"

Problem: Missing details

Level 3: Detailed âś…

"Create a todo app with task name, due date, and priority.
Save to local storage. Display as list."

Good: Has essential details

Level 4: Comprehensive âś…âś…

"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

Level 5: Production-Ready âś…âś…âś…

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


QUICK PROMPT STARTERS

Creating New Features

Create a [THING] with [SPECIFICATIONS]

Modifying Existing

In the [FEATURE], make these changes:
- [CHANGE 1]
- [CHANGE 2]

Fixing Issues

The [FEATURE] is not working.
Expected: [WHAT SHOULD HAPPEN]
Current: [WHAT HAPPENS]
Please fix.

Adding Functionality

Add [NEW FEATURE] to [EXISTING APP]:
Purpose: [WHY]
Functionality: [WHAT]
Integration: [HOW IT CONNECTS]

PROMPT MODIFIERS (Add for Better Results)

For Better UI

- "with clean, professional styling"
- "mobile-responsive design"
- "easy to read on small screens"
- "modern, minimal interface"

For Better UX

- "show loading indicator while processing"
- "display error messages clearly"
- "add confirmation before deleting"
- "provide immediate feedback"

For Validation

- "make [field] required"
- "validate email format"
- "must be at least [X] characters"
- "check for duplicates"

For User Feedback

- "show success message for 3 seconds"
- "disable button while submitting"
- "clear form after successful submission"
- "animate the transition"

COMMON MISTAKES TO AVOID

❌ DON’T: Be Vague

"Make it good"
"Fix the bug"
"Add a button"
"Create a form"

âś… DO: Be Specific

"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"

ITERATION PROCESS

Round 1: Basic Structure

Create a task manager with:
- Add task form
- Task list
- Mark complete function

Round 2: Add Details

Update the task manager:
- Add due date field
- Sort by due date
- Highlight overdue tasks in red

Round 3: Improve UX

Improve task manager:
- Add task count badge
- Show completed tasks separately
- Add "Clear completed" button
- Add smooth animations

Round 4: Polish

Final touches:
- Add empty state message
- Add confetti on completion
- Add keyboard shortcuts
- Optimize mobile layout

CHECKLIST: IS YOUR PROMPT COMPLETE?

Before submitting, check:


QUICK EXAMPLES BY USE CASE

1. CREATING A FORM

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]

2. DISPLAYING DATA

Display [DATA TYPE] as [FORMAT]:
- Show: [field 1], [field 2], [field 3]
- Sort by: [field] [asc/desc]
- If empty: show "[MESSAGE]"
- On click: [ACTION]

3. ADDING VALIDATION

Add validation to [FIELD]:
- Rule: [VALIDATION RULE]
- Error message: "[ERROR TEXT]"
- Show error: [WHERE] in [COLOR]
- Clear error: [WHEN]

4. STYLING/UI

Style [COMPONENT] with:
- Colors: primary [COLOR], accent [COLOR]
- Layout: [DESCRIPTION]
- Spacing: [MEASUREMENTS]
- Mobile: [RESPONSIVE BEHAVIOR]

5. ERROR HANDLING

If [ACTION] fails:
- Show error: "[MESSAGE]"
- Log to console: [DETAILS]
- Keep: [USER DATA/STATE]
- Provide: [RETRY/ALTERNATIVE]

PRO TIPS

Tip 1: Start Simple, Then Add

Build basic version first, then iterate with improvements.

Tip 2: Use Examples

“Like [EXISTING APP]” or “Similar to [FEATURE]” helps AI understand.

Tip 3: Specify Data Format

“Store as JSON array” or “Format date as DD/MM/YYYY”

Tip 4: Include Edge Cases

“If no data exists…” or “If user clicks cancel…”

Tip 5: Ask for Logging

“Log [ACTION] to console” helps with debugging.

Tip 6: One Feature at a Time

Don’t combine unrelated requests. Break into separate prompts.

Tip 7: Reference Previous Prompts

“In the form we just created…” provides context.

Tip 8: Use Consistent Terminology

Pick terms and stick with them (submit vs save, delete vs remove).


REMEMBER

âś… 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


EMERGENCY PROMPT (When Stuck)

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.