Quick Reference Cards
Core concepts explained through Singapore hawker analogies. Keep these handy during your build.
Event-Driven Thinking
Life is Event-Driven. So Are Websites.
Customer orders laksa
→
User clicks 'Search'
Uncle prepares the dish
→
System finds results
Customer pays and receives food
→
User sees hawker list
When [USER ACTION], then [SYSTEM RESPONSE]
State Management
Websites Need Memory, Like Conversations
Uncle remembers your usual order
→
Site remembers search preferences
Less spicy, extra noodles
→
Saved user settings
Your favorite stall
→
Bookmarked locations
Remember [WHAT] so users don't have to [REPEAT ACTION]
User Interactions
Clear Inputs, Predictable Outputs
Point at the dish you want
→
Click the button
Say your spice level
→
Select from dropdown
Get exactly what you ordered
→
See expected results
Users [SPECIFIC ACTION] to get [SPECIFIC RESULT]
Conditional Logic
Different Situations, Different Responses
If sold out, show 'Finished' sign
→
If no results, show 'No matches found'
If lunch rush, longer wait time
→
If many users, show loading state
If regular customer, give extra
→
If logged in, show saved items
If [CONDITION], then [DIFFERENT BEHAVIOR]
Precision Phrases That Always Work
Copy these templates and fill in the blanks for instant AI clarity
Add [SPECIFIC FEATURE] that triggers when [SPECIFIC EVENT]
Change [ELEMENT] to look like [REFERENCE SITE]
When users [ACTION], show [DETAILED RESULT]
Make it work on mobile devices
Include sample data about [SPECIFIC EXAMPLES]
Use [COLOR SCHEME] with [VISUAL STYLE] like [REFERENCE]
💡 Pro Tip: The Magic Formula
Always include: WHO (users) + WHAT (action) + HOW (input method) + RESULT (specific output)