Think → Understand → Ship
The framework for building with AI - and beyond.
- •Start with the problem you're solving
- •Define inputs, outputs, and user flow
- •Write a clear PRD - AI needs context
- •Scope small: one core feature first
- •Events: clicks, typing, form submits
- •State: data that changes over time
- •Conditionals: if this, show that
- •These concepts help you guide AI better
- •Deploy early - a live URL is powerful
- •Iterate based on real feedback
- •Learn more when you need it
- •Your website is just the beginning
This framework scales. Whether you're building a personal site or a startup product, the process is the same: think clearly, understand the tools, and ship something real.
Quick Reference Cards
Core concepts explained through Singapore hawker analogies. Keep these handy during your build.
When [USER ACTION], then [SYSTEM RESPONSE]
Remember [WHAT] so users don't have to [REPEAT ACTION]
Users [SPECIFIC ACTION] to get [SPECIFIC RESULT]
If [CONDITION], then [DIFFERENT BEHAVIOR]
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)