Explain what the model does, where it fails, and how someone can try it quickly.
Target audienceStudents shipping AI prototypes and course projects
Demo 01 / 04Launch Your AI Demo opens on market betExplain what the model does, where it fails, and how someone can try it quickly. The cover reduces that promise to one memorable human decision.
The page is the entry point. The operating system can grow behind it.
Each capability ships with clear status. Demo interfaces are visual specs — not live infrastructure.
Lead capture
Collect qualified intent with source attribution.
Included
Sales pipeline
Track opportunities from first touch to outcome.
Included
Traffic analytics
Measure qualified visits and conversion paths.
Ready
Heatmaps
Inspect interaction patterns without presenting them as outcomes.
Add-on
Email automation
Send consented follow-up and lifecycle messages.
Roadmap
Payments
Connect a supported checkout and order receipt flow.
Roadmap
CMS, blog, and SEO
Publish durable content with metadata and search controls.
Roadmap
Systems
See the systems that turn a page into follow-through.
Interface mockups / sample data
Command centerDemo interface
Qualified leads24sample
Response rate62%sample
Open tasks7sample
PipelineDemo interface
NewJordan / websiteMina / referral
QualifiedAlex / call bookedSam / brief received
Next actionSend proposalConfirm availability
Recent activityDemo interface
Lead capturedWebsite form
Follow-up dueToday
Proposal viewedSample record
Booking confirmedSample record
Waitlist signup profession mixPlanning target
Founders34%
Product22%
Engineering18%
Design12%
GTM / Sales8%
Other6%
Illustrative profession mix from category planning model — not observed signup data. · startup-audience-v1.0
Median site trafficDemo interface
Typical portfolio stats · SimilarWeb-style median benchmarks
5,200+Monthly visits
2m 14sAvg visit duration
3.2Pages per visit
42%Bounce rate
68% Mobile32% Desktop
Illustrative median for portfolio templates in this category — not live observed traffic
MRR and ARR pathPlanning target
SaaS revenue cards · waitlist-to-MRR model · illustrative growth path
$15K
Monthly recurring revenue
Stripe
$180K
Annual run rate path
Waitlist funnel
720
Waitlist signups
Landing page
MRR/ARR cards show illustrative startup revenue paths for startup templates — planning targets, not verified billing data.
Qualified reviews
New release. Customer stars begin only after three qualified ratings.
Early user panelSimulated evaluations · not verified purchases · QA, bots, development accounts, and market reviews cannot enter the qualified rating above.
MT
Maya T.College junior · CS major
I rebuilt my resume in one afternoon and finally understood why my bullets sounded generic. The template made my internship projects feel real.
Simulated panel · 100-users methodologyJK
Jordan K.Career switcher · bootcamp grad
Switching from retail to product felt impossible until this gave me a clean structure. Recruiters actually replied after I shipped the ATS version.
Simulated panel · 100-users methodologyLT
Liam T.New grad · architecture
The visual CV template helped me show work without hiding my roles. I still swapped in my own project photos, but the layout did the heavy lifting.
Simulated panel · 100-users methodologyPN
Priya N.Senior · brand strategy
I needed something polished enough for agency applications but still editable. This felt like a starting point, not a fake finished site.
Simulated panel · 100-users methodologyCM
Connor M.Software developer · remote
The prompt stack was the useful part for me. I could see exactly what to customize instead of guessing which section mattered first.
Simulated panel · 100-users methodologyAR
Aisha R.Customer success · fintech
I used the portfolio template for an internal transfer packet. It looked professional on mobile, which is where my manager actually reviewed it.
Simulated panel · 100-users methodologyNW
Noah W.Engineering director · Austin
I bought it for a mentee, not myself. The outcome charts made the career story easier to explain without overselling results.
Simulated panel · 100-users methodologyCD
Chloe D.UX researcher · mobility
The extension cards made the product feel bigger than a single page. I liked that demo data stayed labeled instead of pretending to be live.
Simulated panel · 100-users methodologyEB
Ethan B.Photographer · independent
My old site buried client work under random blog posts. This template pushed the proof up front and made my booking link obvious.
Simulated panel · 100-users methodologyHS
Haruka S.Visual designer · gaming
The bilingual labels were a nice surprise. I could show a cleaner English version to overseas studios without rebuilding everything.
Simulated panel · 100-users methodologyGK
Grace K.Procurement manager · Seattle
I used the consulting CV track for a board application. It kept the tone serious without turning into a wall of buzzwords.
Simulated panel · 100-users methodologyEM
Edwin M.Product designer · seed startup
Worth it for the structure alone. I still replaced every sample metric with my own numbers, but the page finally felt hire-ready.
Simulated panel · 100-users methodology
FAQ
Know exactly what you are unlocking.
Is this a finished website?+
You receive a runnable reference implementation, editable Next.js starter code, and a master prompt — not a hosted live site with your content already filled in. Replace sample copy, imagery, and evidence with your own before publishing.
What exactly do I receive after purchase?+
The bundle includes the canonical master prompt, five adapter exports (ChatGPT, Gemini, Claude, Lovable, and v0), editable starter code, preview media, setup notes, commercial-use license terms, and version history. Everything lands in My Library after checkout completes.
Are the outcome numbers guaranteed?+
No. Numbers on cards, rails, and charts are planning targets or category benchmarks — not promises of your personal results. Verified outcomes require moderated receipts and stay visibly separate from estimates.
What is a planning target versus a verified outcome?+
Planning targets describe what a well-executed launch in this category might aim for. Verified outcomes come from qualified, moderated usage receipts inside Template Mode. Demo interfaces and sample values are never counted as verified proof.
Are all extensions live integrations?+
No. Each capability shows an explicit status: Included, Add-on, Ready, or Roadmap. Demo-only system panels are visual specifications and sample data — not connected CRMs, payment rails, or email services until you wire them up.
What do Included, Add-on, Ready, and Roadmap mean?+
Included ships in the base bundle. Add-on is a separate paid module you can stack later. Ready means the prompt layer is compatible but not bundled. Roadmap marks future work — do not assume it is live today.
What happens after payment?+
A signature-verified Stripe webhook grants access. The prompt, adapters, files, versions, and license then appear in My Library and your authenticated /app workspace. Duplicate webhook deliveries are idempotent — you will not be double-charged.
Should I buy one asset or a membership?+
Single assets are $39 each with an individual license for one outcome. Starter Membership is $299 monthly or $2,990 annually and unlocks every launch asset plus all paid prompt modules while active. Choose one asset for a single deadline; choose membership when you are shipping repeatedly.
Can I use this commercially?+
Yes, within the license scope shown at checkout. Individual purchases grant one purchaser the right to adapt and publish one personal outcome. Starter and Studio memberships extend access across multiple assets for the licensed purchaser or team. Redistribution of source bundles is not permitted.
Are ChatGPT, Gemini, or other AI costs included?+
No. Template Mode sells prompts, adapters, and code — not third-party AI subscriptions. You bring your own ChatGPT, Gemini, Claude, Lovable, or v0 accounts and pay those providers separately.
How long does setup take and what skills do I need?+
Most builders personalize the reference in a few focused sessions using the included prompt and adapters. You should be comfortable editing copy, replacing assets, and running a Next.js project locally or on your host. Exact time depends on how much evidence you already have.
How do updates and version history work?+
Each asset carries a version number and changelog on this page. Purchases include compatible updates published during the entitlement window. Members receive new compatible versions while their monthly or annual membership is active.
How do reviews and verified purchases work?+
Qualified star ratings require at least three approved reviews from verified purchases. Early simulated panel evaluations may appear before that threshold — they are labeled as simulated and cannot enter the qualified rating.
What is the App workspace and module stack?+
After sign-in, /app is your private workspace: browse modules, stack add-ons onto a template, configure optional inputs, compile exports, and track usage. Free modules add in one click; paid modules require purchase or an active membership.
What is the refund and support policy?+
Digital source bundles are delivered immediately after payment. Review license terms at checkout before purchasing. For access issues tied to a completed Stripe receipt, contact support through your account — we do not guarantee specific business outcomes or integration uptime for demo interfaces.
Updates
Version 1.6.0
2026-07-16
Outcome commerce dossier
Added the stable gallery, category-native live experience, focused commerce rail, extension statuses, operational interface mockups, chart tooltips, and separated proof layers.
Creator
Template Mode Studio
Template Mode Studio documents the prompt, implementation, evidence boundary, and QA receipt as one versioned asset.
### AI CODE GENERATION PLAYBOOK & MASTER PROMPT: LAUNCH YOUR AI DEMO
SYSTEM ROLE: Senior AI Design Engineer, Frontend Architect, Startup GTM Strategist, and Conversion Copy Lead
OUTCOME TARGET: 80–350 demo starts over 30 days (Methodology: impact-v1.0)
DELIVERABLE: Experiment page with honest limits recruiters respect
CATEGORY: Startup & Projects — demand validation before scale
---
## 0. AUDIENCE, ICP, AND PROBLEM FRAMING
**Primary audience:** Students shipping AI prototypes and course projects
**Ideal customer profile (ICP):**
- Stage: pre-product-market-fit student founder, capstone team, or early builder validating demand before demo day
- Context: limited time (2–6 weeks), limited budget ($0–$30/mo hosting), must ship a credible public surface without inventing traction
- Job to be done: translate a raw idea into a page strangers understand in under 10 seconds and willingly join, demo, or preorder
- Anti-personas (do not optimize for): enterprise procurement, fully funded growth teams, or audiences needing SOC2/compliance depth on day one
**Problem validation checklist (complete before writing hero copy):**
1. Name the trigger moment — what event makes the pain unavoidable this week?
2. Name the status quo — spreadsheet, group chat, manual workaround, or incumbent tool?
3. Name the cost of inaction — time lost, grade risk, missed demo slot, or wasted build hours?
4. State one falsifiable hypothesis: "If we show [proof type], then [audience segment] will [measurable action] within [horizon]."
5. List evidence you have vs. evidence you still need — mark gaps "Needs evidence" in UI, never backfill with fake numbers.
**Demographic and psychographic signals to reflect in copy and visuals:**
- Age band: 18–26 student operators and early-career builders
- Decision style: evidence-seeking, skeptical of hype, responsive to peer proof and advisor credibility
- Channels: campus Slack/Discord, LinkedIn, demo-day judges, course staff, niche subreddits
- Trust builders: working prototype clips, advisor names with permission, explicit limitations, dated changelog
---
## 1. STRATEGIC INGESTION & DEBATE PHASE
Before outputting any code, execute the Ingestion Check:
1. Collect missing inputs: product name, one-line promise, target segment, pricing hypothesis, launch date window, existing prototype URL, consent for any quotes, analytics domain, and email sender domain.
2. Challenge data density — if the user supplies vanity metrics, ask for source receipts or downgrade to planning-target labels.
3. Declare the Design Read in one line: "Reading this as: [page kind] for [audience segment], with [tone] language, leaning toward [aesthetic family]."
4. Set the Three Design Dials:
- DESIGN_VARIANCE: 5 (1 = symmetrical grid, 10 = asymmetric editorial)
- MOTION_INTENSITY: 3 (1 = static CSS, 10 = GSAP parallax — keep low for validation pages)
- VISUAL_DENSITY: 6 (1 = gallery airy, 10 = cockpit data-packed)
Run an internal 6-question office-hours pass:
- Who desperately needs this now vs. who is merely curious?
- What proof would make a skeptic forward the link?
- What is the narrowest wedge feature to demo in 90 seconds?
- What would make someone leave without signing up?
- What metric proves demand in 30 days?
- What must stay out of scope for v1?
---
## 2. WAITLIST & DEMAND FUNNEL ARCHITECTURE
Design the full funnel even if v1 ships only the top of it — document downstream stages in code comments and analytics plan.
### Funnel stages
1. **Visit** — tagged landing routes, UTM preservation, referrer capture
2. **Understand** — scroll depth on problem + product sections (25%, 50%, 75%)
3. **Intent** — waitlist submit, demo start, or preorder click
4. **Confirm** — double opt-in email or order receipt
5. **Activate** — onboarding completion, first core action, or cohort attendance
### Form and consent requirements
- Email field with RFC-friendly validation, role/intent selector, optional free-text use case (max 280 chars)
- Explicit consent copy: "We email product updates only. Unsubscribe anytime."
- Honeypot field + server-side rate limit hooks (document env vars even if stubbed)
- Store submissions in owned SQLite table `waitlist_signups(id, email, role, use_case, source, utm_json, created_at, consent_version)`
- Fail closed if RESEND/SMTP keys missing — queue rows locally and show "Received — confirmation email pending setup"
### Analytics events (first-party, QA-excluded)
- `page_view` — slug, category, template_version
- `section_view` — section_id, threshold
- `cta_click` — cta_id, location
- `waitlist_submit` — role, source, success|error
- `demo_start` / `demo_complete` — duration buckets
- `pricing_toggle` — monthly|annual where applicable
Document each event in `lib/analytics/events.ts` with schema comments.
---
## 3. PRICING & REVENUE HYPOTHESIS (PLANNING LAYER)
Do not publish fake ARR. Instead ship a **Pricing Hypothesis** panel:
- Tier names, price points, and value metric (per seat, per project, per device)
- Label every revenue number as **Planning target** with methodology version `startup-revenue-v1.1`
- Show formula tooltip: waitlist → activated user → paid conversion → MRR/ARR projection (category model: ~720 signups, ~24K visits at 3% CVR, ~$180K ARR planning target)
- If Stripe connected, prices must come from server env — never hardcode live IDs in client bundle
- Display currency as USD with `$` prefix in all revenue/ARR UI components
---
## 4. PAGE ARCHITECTURE (MINIMUM VIABLE DOSSIER)
Build these routes/components for Launch Your AI Demo:
1. `/` — Hero, problem, product proof, social proof, FAQ, primary CTA, footer evidence boundary
2. `/privacy` — data retention, email use, analytics cookies
3. `/api/waitlist` — POST handler, validation, dedupe by email+template, JSON error contracts
4. `/api/analytics` — POST beacon, bot/QA user-agent exclusion list
5. `sitemap.xml` — must mirror `src/app` routes exactly (Truth Protocol)
6. JSON-LD `SoftwareApplication` or `Product` schema with honest `offers` — omit `aggregateRating` unless verified
### Hero constraints
- min-h-[100dvh] with headline ≤2 lines, subhead ≤20 words, primary CTA visible above fold on 390px and 1440px
- Navigation single line, max 72px height, sticky with translucent backdrop
### Section order (default)
Hook → Problem → Product → Proof → How it works → Pricing hypothesis → FAQ → Final CTA → Footer
---
## 5. AESTHETICS & DESIGN TASTE (ANTI-SLOP)
- Typography: Outfit, Geist, or Satoshi — display `text-4xl md:text-6xl tracking-tighter leading-none`
- Body: `text-base text-zinc-600 leading-relaxed max-w-[65ch]`
- Color: zinc/slate neutrals, one accent <80% saturation — no purple mesh gradients
- WCAG AA: 4.5:1 body, 3:1 display minimum
- Max one uppercase eyebrow per three sections
- Inline SVG logos only — no plain-text fake brands
---
## 6. NEXT.JS & TAILWIND STANDARDS
- Default RSC; isolate interactivity in client leaf components with `'use client'`
- No `window` scroll listeners — use IntersectionObserver or CSS scroll-driven animations
- Use `min-h-[100dvh]` not `h-screen`
- Absolute asset paths (`/images/hero.png`)
- SQLite symlink pattern documented in README if using standalone build
---
## 7. CORE INTERACTION & MOTION
- Spring transitions: standard damping 1.0 / 0.4s; gesture release damping 0.8 / 0.3s
- Hero entrance: staggered fade-up, respect `prefers-reduced-motion`
- Form submit: inline loading, success state, accessible error announcements via `aria-live`
---
## 8. EVIDENCE & TRUTH DIRECTIVES
- Never fabricate testimonials, logos, MAU, or revenue — use "Needs evidence" components
- Separate observed first-party metrics from planning targets and market benchmarks
- IndexNow ping on deploy; canonical URLs on all public pages
- Campaign rail metrics for USD revenue/ARR must render with `$` prefix (compact `$180K+` or full `$180,000+`)
---
## 9. MULTI-SCALE QA CHECKLIST
Before declaring success, verify:
- [ ] Mobile 390px: zero horizontal scroll, CTA reachable, form usable
- [ ] Desktop 1440px: grid alignment, nav single line
- [ ] LCP < 2.5s with preloaded hero
- [ ] CLS < 0.1 with explicit media dimensions
- [ ] All links return 200 or documented fallback
- [ ] Waitlist POST succeeds and dedupes
- [ ] Analytics events fire once per action (dedupe keys)
- [ ] sitemap.xml matches routes
- [ ] JSON-LD validates without fake ratings
- [ ] Revenue/ARR displays include `$` when unit is USD
- [ ] No placeholder comments or TODO stubs in shipped code
---
## AI EXPERIMENT — TEMPLATE-SPECIFIC DIRECTIVES
Explain what the model does, where it fails, and how someone can try it quickly.
### Required sections
1. Methods summary: data sources, model family, evaluation split — no black-box claims.
2. Limitations panel: failure cases, bias risks, latency, and cost per run.
3. Try-it-now sandbox with rate limits and content moderation notice.
4. Reproducibility appendix: seed, prompt version, and benchmark table.
---
## 10. ADAPTER NOTES
- **ChatGPT:** Paste full prompt, attach raw notes, request complete file tree for Launch Your AI Demo
- **Gemini:** Attach docs first; cite only provided inputs
- **Claude:** Artifact for UI; keep evidence ledger separate from marketing copy
- **Lovable:** Static experience first, connect forms after visual QA
- **v0:** Shell + components pass one, persistence pass two
Begin the build. Output only fully functional, production-ready code with no skipped implementations.
