Day 26 of 28 · Vibe Coding Challenge
Advanced Prompting Strategies
⏱ 7 min
📊 Advanced
You've been prompting AI for 25 days. You know the basics — SPEC framework, iterative refinement, specific over vague. Today you'll learn the techniques that power users rely on to get exceptional results.
These are the patterns that make people ask, "How did you build that with AI?"
Multi-file prompting
Most of your prompts so far have focused on one thing at a time. Advanced vibe coders prompt across the entire project — making the AI understand how all the pieces fit together.
I need to add a notifications system to my app. Here's what it needs to touch:
1. **Database** — new notifications table (user_id, type, message, read status, created_at)
2. **Backend** — API routes to create, fetch, and mark notifications as read
3. **Frontend** — bell icon in the navbar with unread count badge, dropdown showing recent notifications
4. **Triggers** — automatically create a notification when: someone comments on your post, someone follows you, your post gets 10 likes
Make sure all four layers work together. The bell should update in real-time when new notifications arrive.
Notifications system built across all layers ✓
💾 **Database** — `notifications` table with proper indexes on user_id and created_at
📡 **API** — 3 endpoints:
- GET /api/notifications — fetch user's notifications (paginated)
- PATCH /api/notifications/:id — mark as read
- POST /api/notifications — create (internal, not exposed publicly)
🔔 **Frontend** — Bell icon with animated unread count badge. Dropdown shows last 10 notifications with relative timestamps. Click to mark as read.
⚡ **Triggers** — Backend hooks on comment, follow, and like events automatically create notifications
🔄 **Real-time** — Supabase real-time subscription updates the bell count without refreshing
All four layers connected and working together.
↻ Replay conversation
Knowledge Check
What makes the notifications prompt "advanced" compared to a basic prompt?
B
It uses technical jargon
C
It specifies changes across multiple layers (database, backend, frontend, triggers) and how they connect to each other
Advanced prompts think in systems, not components. Instead of "add a notification bell to the navbar," this prompt describes the entire system — data model, API, UI, and triggers — and how they interconnect. The AI produces a cohesive feature, not isolated pieces.
The specification prompt
For complex features, write a specification before coding. This is the highest-leverage prompting technique.
Before writing any code, create a technical specification for a real-time collaborative editing feature. Multiple users should be able to edit the same document simultaneously (like Google Docs). Include:
- Architecture approach
- Data model
- Conflict resolution strategy
- Technology choices
- API design
- Frontend components needed
Don't write code yet — just the spec.
Technical Specification: Collaborative Editing
**Architecture:** Operational Transform (OT) using Yjs library for conflict-free real-time sync
**Data model:**
- documents (id, title, owner_id, created_at)
- document_access (document_id, user_id, permission)
- document_versions (document_id, content_snapshot, version, timestamp)
**Conflict resolution:** Yjs CRDT handles concurrent edits automatically — no manual conflict resolution needed
**Technology:**
- Yjs for collaborative state
- WebSocket server for real-time sync
- Supabase for persistence and auth
**API:**
- GET /api/documents — list user's documents
- GET /api/documents/:id — load document with current state
- WS /collaborate/:id — WebSocket for real-time edits
**Frontend components:**
- DocumentEditor (Yjs-powered rich text editor)
- UserPresence (shows who's currently editing)
- CursorOverlay (shows other users' cursors)
- VersionHistory (browse and restore past versions)
Shall I implement this spec?
↻ Replay conversation
This pattern — spec first, code second — dramatically improves output quality. The AI thinks through the architecture before writing a single line. You can review the plan and catch problems before they're baked into code.
Knowledge Check
Why is "spec first, code second" effective?
A
It produces shorter code
B
It forces the AI to think through architecture and edge cases before writing code — you can catch design issues before they exist in code
C
Specifications are required by all code editors
D
It takes longer, which makes the AI try harder
When AI jumps straight to code, it makes architectural decisions implicitly — and sometimes those decisions are wrong. A spec makes those decisions explicit. You can say "actually, use WebSocket instead of polling" before the AI writes 500 lines of polling code.
The role-based prompt
Tell the AI who it should be, and it generates code that reflects that expertise.
You are a senior frontend engineer who specializes in accessible, performant React applications. You follow these principles:
- Every interactive element must be keyboard accessible
- All images must have descriptive alt text
- Color contrast must meet WCAG AA standards
- Components should be lazy-loaded when possible
- No unnecessary re-renders
With these principles, build a settings page for my SaaS app with sections for: Profile, Notifications, Billing, and Team Management.
Settings page built with senior-level best practices ✓
♿ **Accessibility:**
- All tabs keyboard navigable (arrow keys)
- Focus management when switching sections
- ARIA labels on all interactive elements
- Color contrast: 7:1 ratio (exceeds AA)
⚡ **Performance:**
- Each settings section is lazy-loaded (only loads when selected)
- Form state uses useReducer (no unnecessary re-renders)
- Optimistic updates on form save
📋 **Sections:**
- Profile: avatar upload, name, email, bio
- Notifications: granular toggles with descriptions
- Billing: current plan, Stripe portal link, usage metrics
- Team: member list, invite form, role management
Everything meets the principles you specified.
↻ Replay conversation
Knowledge Check
How does the "role-based prompt" improve results?
A
It gives the AI a specific perspective and standards to follow, producing code that reflects expert-level practices
B
It changes which AI model processes the request
C
It unlocks hidden features in the AI
D
It makes the AI respond faster
When you tell the AI it's a "senior frontend engineer focused on accessibility," every decision it makes filters through that lens. Button? Make it keyboard accessible. Image? Add alt text. Component? Lazy-load it. The role shapes hundreds of small decisions that would otherwise be arbitrary.
Constraint-driven prompting
Sometimes the best prompt tells the AI what it can't do. Constraints breed creativity.
"Build this without any external libraries." — Forces clean, dependency-free code.
"This must load in under 1 second on 3G." — Forces aggressive performance optimization.
"No JavaScript — CSS only." — Forces creative CSS solutions for interactions.
"Maximum 100 lines of code." — Forces conciseness and prevents over-engineering.
"It must work offline." — Forces thoughtful architecture around caching and local storage.
Build an animated landing page hero section with NO JavaScript. CSS only. Include: a gradient background that slowly shifts colors, text that fades in on load, and a floating animation on the CTA button. Must look professional.
CSS-only hero section ✓
🌈 **Background** — Keyframe animation shifting through 4 gradient colors over 15 seconds (infinite loop)
📝 **Text fade-in** — Uses CSS animation with opacity 0→1 and translateY for a slide-up effect, triggered on page load
🔘 **Floating button** — CSS animation with translateY bouncing 10px up and down every 2 seconds
Zero JavaScript. Zero dependencies. Pure CSS. Loads instantly and works even with JavaScript disabled.
↻ Replay conversation
Final Check
Which advanced prompting technique should you try first?
A
All of them simultaneously in one prompt
B
Constraint-driven — always add artificial limitations
C
Role-based prompting — always pretend the AI is someone else
D
Spec first, code second — it has the highest impact on output quality for complex features
The spec-first approach gives you the biggest quality boost. For any feature that touches multiple parts of your app, ask the AI to plan before it codes. You'll catch architectural mistakes early and get a cohesive implementation. Add role-based and constraint-driven techniques when they fit the situation.
🎯
Day 26 Complete
"Advanced prompting isn't about longer prompts — it's about smarter prompts. Think in systems, spec before coding, assign expertise."
Tomorrow — Day 27
When to Learn Traditional Coding
Vibe coding is powerful, but it has limits. Tomorrow you'll learn when traditional coding knowledge helps — and the smartest way to learn it.