Landing Page Architect Skill

Transform product implementations into compelling landing pages with content strategy, visual storytelling structure, and Shadcn component recommendations aligned with the Maslow AI design system.

When to Use This Skill

Invoke when you need to:

• Create a landing page for a new feature or tool
• Generate marketing copy that tells a coherent story
• Map content sections to appropriate UI components
• Ensure recommendations follow brand guidelines

Workflow

1. Analyze implementation code → Extract value proposition
2. Apply StoryBrand framework → Structure page sections
3. Generate content → Headlines, copy, CTAs for each section
4. Recommend components → Shadcn queries aligned with brand
5. Output strategy → Structured markdown ready for implementation

Input

The implementation you want to create a landing page for. This can be:

• A tool or feature codebase
• A product description
• An API or service

Output Format

For each landing page, output a structured strategy document:

## Landing Page Strategy for [Product Name]

### Value Proposition
[One-liner extracted from analyzing the implementation]

### Target Audience
[Who this product serves]

### Page Sections

#### 1. Hero Section
**Story Element:** Character + Aspiration
**Content:**
- Eyebrow: [Category label]
- Headline: [Main message - use bold/light pattern]
- Subheadline: [Supporting detail]
- Primary CTA: [Action text]
- Secondary CTA: [Alternative action]

**Shadcn Query:** `hero section 2-column asymmetric layout with CTA`
**Anti-patterns Avoided:** [List what NOT to do]
**Brand Alignment:**
- Layout: 2-column grid with visual on right
- Background: var(--silver-bg) #E6EAF3 or var(--dark-blue) #121D35
- Accent line: 3px height, 60px width, tool accent color
- Typography: Manrope 800 for headline
- CTA: #333333 primary button, #6DC4AD accent button

[Continue for all 7 StoryBrand sections...]

StoryBrand Framework Reference

Load frameworks/storybrand.md for the complete 7-part framework. Key sections:

Design Integration (Critical)

Anti-Patterns to AVOID

These patterns signal "generic AI output" - never recommend them:

Load design-integration/anti-patterns.md for the complete list.

Maslow Brand Tokens

Always align recommendations with these tokens:

Primary Colors:

• Teal #6DC4AD - Primary CTA, Technology
• Pink #EE7BB3 - Strategy, accents
• Purple #401877 - Premium, hero moments

Backgrounds:

• Light mode: #E6EAF3 (silver)
• Dark band: #121D35 (for emphasis sections within light pages)
• Surface: #FFFFFF (cards)

Typography:

• Headings: Manrope (weights 600-800)
• Body: Graphik (weight 400)
• Code: JetBrains Mono

Signature Elements:

• Accent lines: 3px height, brand colors
• Selection state: #EBF7F4 background + #6DC4AD left border
• Focus rings: 2px #6DC4AD outline

Load design-integration/maslow-tokens.md for the complete token reference.

Component Query Templates

When recommending Shadcn components, use semantic queries:

Hero Sections

hero section 2-column asymmetric with headline and CTA
hero with gradient text and email capture
hero minimal with single CTA centered

Feature/Stakes Sections

feature cards 3-column grid with icons
bento grid layout for features
stats section with large numbers

Social Proof

testimonial carousel with avatars
logo cloud with grayscale hover
quote block with attribution

Process/Plan Sections

steps section with numbered cards
timeline vertical with icons
process flow horizontal

CTA Sections

CTA banner with heading and button
newsletter signup with input
pricing cards comparison

Icons (NEVER use emojis)

icon search magnifying glass
icon chart bar analytics
icon lightbulb idea
icon target goal
icon flask experiment
icon check circle success
icon alert triangle warning

Query registries: @lucide-animated (367 icons), @animate-ui (518 icons)

Load component-patterns/section-types.md for comprehensive query templates per section type.

Example Output

For a tool called "Hypothesis" (scientific reasoning):

## Landing Page Strategy for Hypothesis Tool

### Value Proposition
Guide complex problem-solving through formal scientific method with structured hypothesis testing.

### Target Audience
Developers, researchers, and analysts who need systematic approaches to testing ideas.

### Page Sections

#### 1. Hero Section
**Story Element:** Character + Aspiration
**Content:**
- Eyebrow: THINK-MCP TOOLS
- Headline: **Test ideas** with scientific rigor
- Subheadline: Apply formal hypothesis testing to any problem. Design experiments, predict outcomes, and iterate based on evidence.
- Primary CTA: Try Hypothesis
- Secondary CTA: See Example

**Shadcn Query:** `hero section 2-column with code preview`
**Anti-patterns Avoided:** ❌ Generic centered layout, ❌ Purple gradient
**Brand Alignment:**
- Background: #E6EAF3 (silver-bg)
- Accent: Tool-specific color (e.g., #469DBB blue for scientific tools)
- Accent line: 3px, 60px width, animated grow on load
- Typography: Manrope 800 headline, Manrope 300 subheadline

#### 2. Stakes Section
**Story Element:** The Problem
**Content:**
- Headline: Assumptions kill products
- Points:
  1. Gut feelings aren't evidence
  2. Confirmation bias blinds teams
  3. Expensive pivots from untested ideas

**Shadcn Query:** `feature cards 3-column with warning icons`
**Anti-patterns Avoided:** ❌ Glass cards, ❌ Fade-up on each card
**Brand Alignment:**
- Background: #FFFFFF (surface)
- Card borders: 1px #D0D5E0, hover reveals 3px left accent
- Icon style: Minimal line icons, not filled Heroicons

[... continues for remaining sections]

Checklist Before Output

Before finalizing recommendations, verify:

• Every section maps to a StoryBrand element
• No anti-patterns in component recommendations
• No emoji icons - use @lucide-animated or @animate-ui components only
• All colors reference Maslow brand tokens
• Typography uses Manrope/Graphik only
• CTAs use correct button hierarchy (#333333 primary, #6DC4AD accent)
• Dark band sections use #121D35 (not arbitrary dark colors)
• Component queries are semantic, not specific component names