Day 6 of 28 · Vibe Coding Challenge
The Art of Prompting
⏱ 7 min
📊 Beginner
The difference between a bad vibe coder and a great one isn't technical skill — it's prompting skill. The same AI tool, with a better prompt, produces dramatically better code.
Today you'll learn the framework that makes every prompt you write more effective.
The SPEC framework
Great prompts follow a simple pattern. Remember SPEC:
S — Stack. What technology should the AI use? React? HTML/CSS? Next.js with Tailwind? If you don't specify, the AI will guess — and it might guess wrong.
P — Purpose. What is this thing? A landing page? A dashboard? A mobile app? Give the AI the big picture.
E — Exact features. What specifically should it do? List the features, sections, or behaviors you want. Be concrete.
C — Constraints. What design rules, brand guidelines, or limitations should it follow? Dark mode? Specific colors? Mobile-first? Accessibility requirements?
Here's a basic landing page with a header, hero section, and footer. It uses plain HTML and CSS.
Want me to add anything?
↻ Replay conversation
The SPEC framework turns vague requests into precise, effective prompts.
That prompt has no Stack, vague Purpose, zero Exact features, and no Constraints. Here's the same request with SPEC:
Build a landing page using Next.js and Tailwind CSS. It's for a SaaS product called "Flowboard" — a project management tool for small teams. Include a hero section with headline, subheadline, and CTA button; a features grid with 6 feature cards and icons; a pricing section with 3 tiers; a testimonials section with 3 quotes; and a footer with links. Use a modern design with a white background, blue (#2563EB) accent color, and plenty of whitespace. Mobile-responsive.
Building Flowboard's landing page...
Done ✓ Here's what I created:
🏠 **Hero** — "Manage projects without the chaos" headline, subheadline about small teams, blue CTA button
⚡ **Features grid** — 6 cards with Lucide icons, each with title and description
💰 **Pricing** — Free ($0), Pro ($12/mo, highlighted), Team ($29/mo) tiers
💬 **Testimonials** — 3 customer quotes with avatars and roles
🔗 **Footer** — Product, Company, Resources link columns + copyright
📱 Fully responsive — mobile menu, stacked layout on small screens
🎨 Clean white design with #2563EB accents throughout
Preview is live. What would you like to adjust?
↻ Replay conversation
Same AI, SPEC prompt. Hero, features, pricing, testimonials — from one prompt.
Knowledge Check
What does the SPEC framework stand for?
A
Simple, Powerful, Easy, Clean
B
Start, Prompt, Edit, Confirm
C
Structure, Plan, Execute, Complete
D
Stack, Purpose, Exact features, Constraints
Stack (what technology), Purpose (what it is), Exact features (what it does), and Constraints (design rules and limitations). You don't need all four every time, but covering them consistently produces dramatically better results.
Prompting patterns that work
Beyond SPEC, here are patterns that consistently produce better results:
Use analogies. "Build a dashboard like Linear" or "Make it look like Notion." AI models understand popular products and can match their style.
Bullet-point your features. Lists are easier for the AI to parse than paragraphs. Each bullet becomes a clear requirement.
Specify what you DON'T want. "No animations." "Don't use a hamburger menu." "No placeholder text — use realistic content." Constraints by exclusion are powerful.
Reference visual styles. "Minimal and clean like Apple." "Bold and colorful like Stripe." "Brutalist design with sharp edges and monospace fonts."
Build a task management app that looks like Linear. Clean, minimal, fast-feeling. Features:
- Sidebar with projects list
- Main area with task list
- Tasks have title, status (todo/in-progress/done), priority (low/medium/high/urgent)
- Click a task to see details in a side panel
- Keyboard shortcuts: N for new task, / for search
Constraints:
- Dark theme only
- No animations except subtle transitions
- Use real-looking task data, not "Lorem ipsum"
Building your Linear-inspired task manager...
Done ✓
📋 **Sidebar** — 5 sample projects with icons and task counts
📝 **Task list** — 12 realistic tasks with status badges and priority indicators
🔍 **Side panel** — Click any task to see full details, description, and activity
⌨️ **Shortcuts** — N opens new task modal, / focuses search bar
🌙 Dark theme with subtle transitions
📊 Realistic data: "Fix authentication bug", "Update pricing page", "API rate limiting"
Feels snappy. Take a look!
↻ Replay conversation
Knowledge Check
Why is "Build an app like Linear" more effective than "Build a task management app"?
A
Linear is open source so the AI can copy the code
B
Linear is easier for the AI to build
C
It's not — both prompts give the same result
D
The AI understands Linear's design patterns and can match the visual style and interaction patterns
AI models have been trained on countless descriptions, screenshots, and discussions about popular products. When you reference "Linear," the AI understands the entire design language — minimal, dark, fast, keyboard-driven. One word carries a thousand design decisions.
The iteration prompts
Your first prompt gets the structure. Your follow-up prompts refine it. Here are the most useful iteration patterns:
Styling changes: "Make the font larger." "Use more whitespace." "Change the accent color to green."
Behavior changes: "Add a hover effect on the cards." "Make the sidebar collapsible." "Add a search bar that filters in real-time."
Content changes: "Use more professional copy." "Add a section about pricing." "Replace placeholder images with gradients."
Layout changes: "Switch to a two-column layout." "Move the CTA above the fold." "Make the navigation sticky."
Each prompt should be one or two changes. Resist the urge to dump ten changes at once.
Knowledge Check
How many changes should you request per iteration prompt?
A
As many as possible to save time
B
Exactly five — that's the sweet spot
C
One or two — keep each iteration focused
D
It doesn't matter — the AI handles any number
Focused prompts get better results. When you ask for ten things at once, some get done well and others get overlooked. One or two changes per prompt lets you verify each change and course-correct immediately.
Prompts to avoid
"Make it better." Better how? The AI has no idea what "better" means to you. Say "make the typography more consistent" or "add more visual hierarchy."
"Fix it." Fix what? Point to the specific problem. "The button is overlapping the text on mobile" is something the AI can act on.
"Make it more professional." Vague. Try: "Use a more muted color palette, clean sans-serif fonts, and more whitespace between sections."
The pattern: replace adjectives with specifics. Don't say "modern" — describe what modern looks like to you.
Final Check
Which prompt will produce the best results?
A
"Build a SaaS landing page using React and Tailwind with a hero section, feature grid with 4 cards, and pricing table. Use a dark theme with purple accents."
B
"Build something modern and professional"
D
"Make the best possible website you can"
It has Stack (React + Tailwind), Purpose (SaaS landing page), Exact features (hero, feature grid, pricing table), and Constraints (dark theme, purple accents). Specific beats vague, every time.
✍️
Day 6 Complete
"A great prompt isn't long — it's specific. Stack, Purpose, Exact features, Constraints. That's your formula."
Tomorrow — Day 7
Reading and Understanding AI Code
The AI wrote code for you — but can you read it? Tomorrow you'll learn to understand what it built and why.