I recently gave a free live talk on how I use AI to design systems. It was well-received, so I’m going to give you guys my exact strategy + prompts to get the best results and avoid the slop in slop out trap.
If you’ve ever asked Cursor (or any AI) to “build a beautiful [my idea for an app]” and ended up with an unfamiliar tech stack, missing integrations you need, no idea where your system will break, and now idea how to deploy, you’ve already felt the problem.
Here is exactly what Cursor gave me with the following prompt “beautiful budget tracking website”.
After reading this, you’ll be able to get something 10x more complete with just a little more effort.
The first thing you should always do is ask yourself questions before you ask AI. Here are some I use as a good starting point:
Who is this for?
What is the one action users take over and over again?
What breaks first?
What needs to be boring and reliable?
What tools am I comfortable with?
Once you’ve answered these, you should have a comprehensive list of requirements (both functional and non-functional). Next, we need to decide how you are going to meet these requirements.
For each of the 4 following, I suggest you buy (or use a free existing solution), not build.
Authentication
Authorization
Payments (Stripe)
User accounts
Some tools I like for these (but feel free to use whatever you know / fits into your tech stack):
Clerk – dev-friendly auth + UI components (great for Next.js apps).
Auth0 – full-featured hosted auth (social login, enterprise SSO, MFA, rules/actions).
AWS Cognito – AWS-native user pools + federation (powerful, sometimes fiddly DX).
Firebase Auth – simple auth for mobile/web, especially if you’re already on Firebase.
Supabase Auth – good if you’re using Supabase; easy email/password + OAuth.
The CLEAR Framework
Now time for some AI magic. I use the CLEAR prompting framework to get the best results. The following examples are using Cursor which is currently my AI-IDE of choice, but this prompting framework consistently produces better results with every environment I’ve tested it on (Claude Code, Cursor, Augment Code, JetBrains).
C — Concise
Goal: Give only the context that materially affects decisions.
What to include:
What you’re building (high level)
Who it’s for (ideal customer profile)
Key constraints (scale, infra, language)
What stage you’re at (design vs implementation)
What to avoid:
Vague product vision
Marketing language
Unnecessary backstory
Example:
You are my senior full-stack engineer + system designer. I’m a Next.js (TypeScript) developer building a budget tracking app for households. This is a small scale project with less than 1,000 concurrent users. Primary users are households up to 10 members. You first goal is to design the system.
L — Logical (Make Relationships Explicit)
Goal: Help the model understand how concepts relate and how to think about each concept.
Do this by:
Naming the core loop
Calling out dependencies
Define how you want the model to reason about unknowns
Example:
Defining the core user flows and data model that support household budgeting.
Design a simple, secure architecture that fits Next.js + Supabase.
Prefer boring, reliable choices over complex patterns.
E — Explicit (Define the Output)
Goal: Remove ambiguity about what you want back. Give clear direction and examples where appropriate.
Be specific about:
Tech stack & technologies
Deployment
Formatting
Anything else you care about
Example:
Frontend + backend: Next.js (App Router)
Database/Auth: Supabase (I do not want to self-manage DB)
Language: TypeScript preferred (ok if some JS, but default TS)
Deployment on Vercel.
Make sure to include the following in the design:
1. Architecture diagram
2. Data model
3. API/design approach
4. MVP build plan
4. Deployment plan
6. Limits of the system
7. Assumptions
8. Anything else we might need
A — Adaptive (Expect Iteration)
Goal: Adapt and improve your prompt over time.
Good practices:
Change things one at a time
Lock decisions incrementally
Change constraints as you learn more
Example follow-ups:
Remove Stripe and assume manual payments
Optimize for cost instead of latency
Assume 10× more traffic
Example:
Ask any clarifying questions you need before proceeding with the design.
R — Reflective (Review and Refine)
Goal: Force the model to reason about its own decisions.
Ways to do this:
Ask why tradeoffs were made
Request alternatives
Surface risks and assumptions
Example:
Explain why you chose this architecture.
What would you change at 10× scale?
What assumptions are most fragile?
Putting it all together
Let’s start by looking at my initial prompt:
You are my senior full-stack engineer + system designer. I’m a Next.js (TypeScript) developer building a budget tracking app for households. This is a small scale project with less than 1,000 concurrent users. Primary users are households up to 10 members. You first goal is to design the system.
Defining the core user flows and data model that support household budgeting.
Design a simple, secure architecture that fits Next.js + Supabase.
Prefer boring, reliable choices over complex patterns.
Frontend + backend: Next.js (App Router) Database/Auth: Supabase (I do not want to self-manage DB) Language: TypeScript preferred (ok if some JS, but default TS) Deployment on Vercel.
Make sure to include the following in the design:
Architecture diagram
Data model
API/design approach
MVP build plan
Limits of the system
Assumptions
Anything else we might need
These are just the diagrams generated, we also got a complete plan for the app, and exactly how to setup infrastructure, etc.
Architecture Overview
Data Model
Authentication Flow
Deployment Plan
Do this yourself!
Next time you pull out your favorite AI-enabled editor, try the CLEAR framework and think a little bit before you let AI do everything. Spending an hour planning saves you 100x that amount of time in the long run.
See you next week.
Arjay