Building with AI is all about communication. The C.L.E.A.R. framework gives you a repeatable process to get the right output every single time.
Principle | What it means | Example |
Concise | Remove fluff; say exactly what to build. | “Create a /pricing page with 3 tiers and a FAQ accordion.” |
Logical | Order your steps; think like a checklist. | “Plan first → scaffold → wire data → test roles.” |
Explicit | State the must-haves and must-nots clearly. | “Use shadcn Card; do not edit AuthContext.tsx.” |
Adaptive | Iterate based on the results you get. | “Summarize what changed; propose 2 better variants.” |
Reflective | Capture learnings for reuse. | “Document decisions at the file top as comments.” |
Prompt Structure Template
Think of a prompt as a contract with the AI. This structure is your secret weapon for success.
- Role: Define the AI's persona (
You are a senior AI dev...) - Context: Provide the product vision, users, and design system.
- Task: Specify one single, concrete outcome.
- Guidelines: List style, libraries, accessibility, and performance rules.
- Constraints: List files to avoid touching, limits, and security rules.
- Acceptance: What proves the task is complete and working?
Structure, Context & the Knowledge File
AI can't read your mind. The more context you provide, the better the output.
- Recommended prompt layout:
Context→Task→Guidelines→Constraints - Knowledge File: A single source of truth for your project. Lovable can use it for better, more consistent results.
Section | What to include |
Vision & Users | One-liner value prop, primary personas. |
IA & Routing | Key pages, URL structure. |
Design System | Colors, type scale, spacing (8pt), shadcn variants. |
UI Patterns | Modals, toasts, forms, empty states. |
Code Standards | Lint rules, folder layout, naming. |
Security | Secrets policy, RLS posture, logging. |
Integrations | Supabase schema, Stripe usage, email provider. |
Chat Mode vs Default Mode
Mode | Use it for | Credit Risk |
Chat Mode | Plan, analyze, debug without writing code. | Low |
Default | Make code changes now. | Normal |
