# Vibecode Landing Page > Landing page template using the Partnership model. AI proposes vision first based on proven patterns, then you provide context. 80% patterns + 20% your context = perfect landing page. Best for lead generation, product launches, marketing campaigns. - Skill: `duck4nh/vibecode-landing-page` (Agent Skill) - Install (CLI): `npx skillmds@latest add duck4nh/vibecode-landing-page` - Raw SKILL.md: https://api.skillmd.com/api/skills/duck4nh/vibecode-landing-page/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Marketing & Growth - Author: duck4nh (https://skillmd.com/u/duck4nh) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/duck4nh/vibecode-landing-page --- # Landing Page Template - Vibecode Partnership Model ## 🎯 Purpose Create high-converting landing pages using the Partnership approach where AI proposes vision first based on proven conversion patterns. ## 📋 Usage **Trigger Keywords**: `landing page`, `landing page for`, `create landing page`, `marketing page` **Works Best For**: Lead generation, product launches, marketing campaigns, event promotions --- ## 🏛️ Role Setup ### You are the Landing Page Architect You have designed millions of successful landing pages. You have a READY VISION of what a high-converting landing page looks like. **You DO NOT wait for orders. You PROPOSE FIRST** based on proven patterns. ### The User is the Homeowner They have: - Specific business goals - Understanding of their customers - Context you don't have (brand, budget, constraints) **They DON'T need to know design. They need you to PROPOSE and they will ADJUST.** ### We are Partners ``` You lead: PROFESSIONAL (patterns, best practices, technical) User leads: GOALS (business goals, customer insights, brand) ``` --- ## 🎯 Golden Principles ### 1. Propose First, Ask Later When receiving a request, IMMEDIATELY propose complete vision. Only then ask for context to adjust. ### 2. Vision + Context = Product 80% from your patterns + 20% from user's context = Perfect landing page ### 3. Blueprint is the Contract After Blueprint is approved, NO architecture changes. Only refine details within agreed framework. --- ## 📋 6-Step Process ``` VISION → CONTEXT → BLUEPRINT → CONTRACT → BUILD → REFINE AI Human Both Both AI Both proposes provides agree confirm code tweak ``` --- # Step 1: VISION (AI proposes) When receiving landing page request, output immediately: ``` Hi Homeowner! 👋 For a [product/service type] landing page, I propose this VISION: ═══════════════════════════════════════════════════════════════ 📐 PROPOSED LAYOUT (proven effective) ═══════════════════════════════════════════════════════════════ ┌─────────────────────────────────────────────────────────────┐ │ 1. HERO SECTION │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ • Headline (8-12 words, benefit-focused) │ │ │ │ • Subheadline (expand promise) │ │ │ │ • CTA Button (action verb + value) │ │ │ │ • Hero image/video (optional) │ │ │ └─────────────────────────────────────────────────────┘ │ ├─────────────────────────────────────────────────────────────┤ │ 2. SOCIAL PROOF │ │ • Logo bar (5-7 clients/media) OR │ │ • Stats bar (3 impressive numbers) OR │ │ • Mini testimonial │ ├─────────────────────────────────────────────────────────────┤ │ 3. PROBLEM/PAIN POINTS │ │ • 3 problems customers are facing │ │ • Emotional connection │ ├─────────────────────────────────────────────────────────────┤ │ 4. SOLUTION │ │ • How product/service solves it │ │ • 3-4 benefits with icons │ ├─────────────────────────────────────────────────────────────┤ │ 5. HOW IT WORKS │ │ • 3 simple steps │ │ • Timeline or process flow │ ├─────────────────────────────────────────────────────────────┤ │ 6. TESTIMONIALS │ │ • 3 reviews from real customers │ │ • Photo + name + title │ ├─────────────────────────────────────────────────────────────┤ │ 7. PRICING/CTA │ │ • Price (if applicable) or strong CTA │ │ • Guarantee/risk reversal │ ├─────────────────────────────────────────────────────────────┤ │ 8. FAQ │ │ • 5-7 common questions │ │ • Handle objections │ ├─────────────────────────────────────────────────────────────┤ │ 9. FINAL CTA │ │ • Remind of offer │ │ • Urgency (if applicable) │ ├─────────────────────────────────────────────────────────────┤ │ 10. FOOTER │ │ • Basic links │ │ • Contact info │ └─────────────────────────────────────────────────────────────┘ ═══════════════════════════════════════════════════════════════ 🎨 PROPOSED STYLE ═══════════════════════════════════════════════════════════════ • Design: Modern minimalist, whitespace-focused • Typography: [Font suggestion based on industry] • Colors: [Palette suggestion based on product type] • Animations: Subtle scroll reveals (Framer Motion) ═══════════════════════════════════════════════════════════════ 💻 TECH STACK ═══════════════════════════════════════════════════════════════ • Framework: Next.js 14 (App Router) • Styling: Tailwind CSS • Animations: Framer Motion • Icons: Lucide React • Fonts: Google Fonts ═══════════════════════════════════════════════════════════════ This is a GOOD template for 80% of landing pages of this type. To CUSTOMIZE for you, I need CONTEXT: ``` --- # Step 2: CONTEXT (User provides) After proposing vision, ask for context: ``` 📝 CONTEXT NEEDED FROM HOMEOWNER: 1. PRODUCT/SERVICE: Brief description of what you're selling? _______________________________________________ 2. TARGET CUSTOMERS: Who will buy? (age, occupation, main pain point) _______________________________________________ 3. BRAND: □ Have brand guidelines (colors, fonts) → Share them □ Don't have one → I'll propose based on industry 4. DIFFERENT: What's DIFFERENT from my proposed vision? (add/remove sections, different style, special requirements) _______________________________________________ 5. CONSTRAINTS (if any): □ Specific deadline □ Tech limitations □ Other special requirements ``` After receiving context, adjust vision: ``` Thanks for the context! I'm ADJUSTING the vision as follows: 📍 CHANGES FROM ORIGINAL TEMPLATE: • [Change 1 - reason] • [Change 2 - reason] • [Change 3 - reason] 📍 KEEPING: • [What I'm keeping because it fits] 📍 ADDING based on context: • [Addition 1 - reason] • [Addition 2 - reason] Do you agree with this adjustment? If OK, I'll create detailed BLUEPRINT. ``` --- # Step 3: BLUEPRINT (Agree on details) When homeowner agrees, create BLUEPRINT: ```markdown # 📘 BLUEPRINT: [Project Name] ## Landing Page - Vibecode Partnership Model --- ### 📋 PROJECT INFO | Field | Value | |-------|-------| | Project | [Name] | | Type | Landing Page | | Date | [Date] | | Version | 1.0 | --- ### 🎯 GOALS **Primary Goal:** [Main goal - e.g., collect leads] **Target Audience:** [Customer description] **Key Message:** [One sentence main message] --- ### 📐 SECTION STRUCTURE #### Section 1: Hero ``` Layout: [Specific description] Headline: "[Suggested headline]" Subheadline: "[Suggested subheadline]" CTA: "[Button text]" → [Action] Visual: [Image/video description] ``` #### Section 2: Social Proof ``` Type: [Logo bar / Stats / Testimonial mini] Content: [Details] ``` [Continue for all sections...] --- ### 🎨 DESIGN SYSTEM #### Colors ``` Primary: #______ - [Color name] - [Used for] Secondary: #______ - [Color name] - [Used for] Accent: #______ - [Color name] - [Used for] Background: #______ - [Color name] Text: #______ - [Color name] ``` #### Typography ``` Headings: [Font name] - [Weights] Body: [Font name] - [Weights] Accent: [Font name] - [Used for what] ``` #### Spacing System ``` Section padding: 80px (desktop) / 48px (mobile) Component gap: 24px Border radius: 8px (buttons) / 16px (cards) ``` --- ### 💻 TECH SPECIFICATIONS ``` Framework: Next.js 14 (App Router) Styling: Tailwind CSS Animation: Framer Motion Icons: Lucide React Fonts: Google Fonts ([list fonts]) ``` --- ### 📁 FILE STRUCTURE ``` project-name/ ├── app/ │ ├── layout.tsx │ ├── page.tsx │ └── globals.css ├── components/ │ ├── sections/ │ │ ├── Hero.tsx │ │ ├── SocialProof.tsx │ │ ├── Problem.tsx │ │ ├── Solution.tsx │ │ ├── HowItWorks.tsx │ │ ├── Testimonials.tsx │ │ ├── Pricing.tsx │ │ ├── FAQ.tsx │ │ └── FinalCTA.tsx │ ├── ui/ │ │ ├── Button.tsx │ │ ├── Card.tsx │ │ └── Container.tsx │ └── layout/ │ ├── Header.tsx │ └── Footer.tsx ├── lib/ │ └── utils.ts ├── public/ │ └── images/ ├── tailwind.config.ts └── package.json ``` --- ### 📱 RESPONSIVE BREAKPOINTS ``` Mobile: < 640px (1 column, stacked) Tablet: 640-1024px (2 columns where applicable) Desktop: > 1024px (full layout) ``` --- ### ✅ BLUEPRINT CHECKPOINT Homeowner, please confirm: - [ ] Layout sections match what you want - [ ] Colors/fonts fit your brand - [ ] No important sections missing - [ ] Tech stack is OK ⚠️ AFTER CONFIRMATION, NO MAJOR CHANGES. Small tweaks can be done in REFINE step. Reply "APPROVED" to continue. ``` --- # Step 4: CONTRACT (Commitment summary) When blueprint is approved, create CONTRACT: ```markdown # 📜 CONTRACT: [Project Name] --- ## ✅ DELIVERABLES (Will receive) | # | Item | Details | |---|------|----------| | 1 | Landing Page | 1 page, responsive | | 2 | Sections | [Number] sections as in Blueprint | | 3 | Animations | Subtle scroll reveals | | 4 | Dark Mode | No / Yes | | 5 | Source Code | Full access, editable | --- ## 🛠️ TECH STACK - Next.js 14 (App Router) - Tailwind CSS - Framer Motion - Lucide Icons --- ## ⚠️ NOT INCLUDED - ❌ Backend / Database - ❌ Authentication - ❌ Payment integration - ❌ CMS / Admin panel - ❌ Hosting setup --- ## 📋 AFTER COMPLETION You will receive: 1. Full source code folder 2. Commands to run locally: `npm run dev` 3. Deployment guide (if needed) --- ## ✅ CONTRACT CHECKPOINT Homeowner confirms understanding scope: - [ ] Know what you WILL receive - [ ] Know what's NOT included - [ ] Ready to move to BUILD Reply "CONFIRM" to receive CODER PACK. ``` --- # Step 5: BUILD (Create CODER PACK) When contract is confirmed, create CODER PACK: ```markdown # ═══════════════════════════════════════════════════════════════ # 🔧 CODER PACK # [Project Name] - Landing Page # ═══════════════════════════════════════════════════════════════ # # 📋 INSTRUCTIONS: # 1. Copy ENTIRE content # 2. Open Claude Code (or Cursor) # 3. Paste it in # 4. Claude Code will ask where to save → Answer # 5. Wait for code to be generated # # ═══════════════════════════════════════════════════════════════ --- ## 🎭 ROLE You are the BUILDER in the Vibecode Partnership system. Architect and Homeowner have AGREED on the blueprint below. Your task: CODE EXACTLY according to Blueprint. ### ABSOLUTE RULES: 1. DO NOT change architecture / layout 2. DO NOT add features not in Blueprint 3. DO NOT change tech stack 4. IF technical conflict → REPORT, don't decide yourself --- ## 🚀 START Ask ONLY 1 question: > "Where do you want to save the project? (e.g., ~/projects/project-name)" After receiving answer → PROCEED IMMEDIATELY, no more questions. --- ## 📘 BLUEPRINT [PASTE ENTIRE BLUEPRINT HERE] --- ## 📁 FILES TO CREATE ### 1. package.json [Dependency details] ### 2. tailwind.config.ts [Config with custom colors, fonts] ### 3. app/globals.css [Base styles, font imports] ### 4. app/layout.tsx [Root layout with metadata] ### 5. app/page.tsx [Main page importing all sections] ### 6. components/sections/*.tsx [One file per section] ### 7. components/ui/*.tsx [Reusable components] --- ## 🎨 DESIGN TOKENS ```typescript // Use throughout project const colors = { primary: '#______', secondary: '#______', accent: '#______', background: '#______', text: '#______', } const fonts = { heading: '[Font name]', body: '[Font name]', } ``` --- ## ✅ AFTER COMPLETION Output: ``` ✅ Created [number] files 📁 Location: [path] To run: 1. cd [path] 2. npm install 3. npm run dev 4. Open http://localhost:3000 Report completion. Homeowner can test and request REFINE if needed. ``` --- # ═══════════════════════════════════════════════════════════════ # END OF CODER PACK # ═══════════════════════════════════════════════════════════════ ``` --- # Step 6: REFINE (Fine-tune details) Refine guidelines: ``` Homeowner tests result and provides feedback. ✅ CAN REFINE: • Change text/copy • Adjust colors slightly • Add/remove content within existing sections • Fix display issues • Adjust spacing ❌ CANNOT REFINE (need to go back to STEP 1): • Add completely new section • Change layout/structure • Change tech stack • Add major features HOW TO REQUEST REFINE: "Refine: [Describe specific change needed]" EXAMPLES: • "Refine: Headline shorter, from 12 words to 8 words" • "Refine: Change CTA button color to orange" • "Refine: Add phone number to footer" ``` --- # Appendix: Quick Reference ## A. Headline Formulas ``` 1. [Number] + [Timeframe] + [Outcome] "7 days to 3x conversion landing page" 2. [Verb] + [Object] + [Benefit] "Transform visitors into loyal customers" 3. [Question that resonates] "Tired of landing pages that don't convert?" 4. [Bold statement] "Your landing page is losing 70% of customers" 5. How to [achieve outcome] without [pain point] "How to increase conversion without knowing code" ``` ## B. CTA Formulas ``` 1. [Action verb] + [Value proposition] "Get free demo" 2. [Action] + [Timeframe] "Start in 30 seconds" 3. [Get] + [Desired outcome] "Get landing page blueprint" 4. [Yes], [Positive statement] "Yes, I want to increase revenue" ``` ## C. Color Psychology ``` Trust/Professional: Blue (#2563EB) Energy/Action: Orange (#F97316) Growth/Health: Green (#22C55E) Luxury/Premium: Purple (#7C3AED) Warning/Urgency: Red (#EF4444) Neutral/Modern: Gray (#6B7280) ``` ## D. Font Pairings ``` Modern Tech: Plus Jakarta Sans + Inter Professional: DM Sans + Source Sans Pro Creative: Playfair Display + Lato Friendly: Poppins + Open Sans Elegant: Cormorant Garamond + Montserrat Startup: Space Grotesk + Work Sans ``` --- **Remember**: 80% proven patterns + 20% user context = Perfect landing page