Section architecture, hero patterns, layout principles, and conversion optimization for marketing landing pages. Ensures strategic, high-converting page structure.
Create gorgeous micro-interactions and animations using CSS and Svelte transitions. Use this skill when adding motion to components, page transitions, scroll animations, or any interactive elements that need polish.
Guides distinctive brand colors, typography, and visual choices. Contains human-first design principles to ensure sites look intentional and memorable.
Write human-sounding marketing copy that converts. Contains overused word alternatives, headline formulas, CTA patterns, and tone guidelines for specific, authentic text.
Maintain clear, non-technical documentation for website projects. Use this skill after ANY code change to update SITE.md with what changed. Triggers on file edits, new pages, component changes, or when the user asks about their site. Essential for keeping non-developers informed about their project.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that feels intentional and memorable.
Guided discovery flow for new Ship Studio projects. Asks about business, audience, brand personality, and goals to create a personalized SITE.md and build plan.
| name | marketing-site-design |
| description | Section architecture, hero patterns, layout principles, and conversion optimization for marketing landing pages. Ensures strategic, high-converting page structure. |
This skill provides proven patterns for structuring marketing pages that convert visitors into customers.
The most effective homepage follows this flow (adapt based on SITE.md goals):
| Section | Goal | Visitor Mindset |
|---|---|---|
| Hero | Stop scroll, promise outcome | "What is this?" |
| Social Proof Bar | Build instant credibility | "Is this legit?" |
| Problem | Show you understand them | "Do they get me?" |
| Features | Explain capabilities | "What does it do?" |
| How It Works | Remove complexity fear | "Is it hard?" |
| Benefits | Paint the after-state | "What's in it for me?" |
| Testimonials | Prove others succeeded | "Has it worked for others?" |
| Pricing | Enable decision | "Can I afford it?" |
| FAQ | Remove final doubts | "But what about...?" |
| Final CTA | Convert the convinced | "I'm ready" |
Best for: Pain-point-driven products
[Headline: State the problem]
Tired of losing customers to slow support?
[Subheadline: Agitate + solve]
Every hour you take to respond, 60% of leads go cold.
Our AI responds in seconds—24/7.
[CTA]
Start responding faster →
Best for: Aspirational products/services
[Headline: Promise the end state]
Wake up to a full calendar
[Subheadline: How you deliver it]
Automated booking that fills your schedule while you sleep.
[CTA]
See how it works →
Best for: Established brands with strong numbers
[Headline: Lead with proof]
Join 12,847 marketers who doubled their open rates
[Subheadline: Explain the mechanism]
AI-powered subject lines that your audience actually clicks.
[CTA]
Write better emails →
Best for: Clear, simple products
[Headline: Straight to the benefit]
Ship 10x faster
[Subheadline: Brief explanation]
The React component library built for speed.
[CTA]
Browse components →
Best for: Audiences aware of problem but not solution
[Headline: Ask their burning question]
What if your website actually brought in leads?
[Subheadline: Promise the transformation]
Stop being a digital brochure. Start being a sales machine.
[CTA]
Transform my site →
For text-heavy pages (blogs, docs):
Implementation:
For conversion-focused pages (landing pages):
Implementation:
Ways to add visual interest without chaos:
[Logo] [Logo] [Logo] [Logo] [Logo]
"Trusted by 10,000+ companies"
Or with metrics:
12M+ 4.9★ 99.9%
Users Rating Uptime
Option A: Alternating Image/Text
[Image] [Text Block]
[Text Block] [Image]
[Image] [Text Block]
Option B: Bento Grid
[Large Feature Card] [Small]
[Small] [Small] [Medium]
Option C: Single Feature Focus
[Large Screenshot/Demo]
[3 bullet points below]
Always 3 steps (cognitive sweet spot):
1. Sign Up 2. Connect 3. Grow
Create account Link your tools Watch results
in 30 seconds with one click roll in
Use numbered circles or icons, horizontal layout.
Option A: Featured Quote
"[Impactful quote]"
— Name, Title at Company
[Photo]
Option B: Grid of Cards
[Quote + Photo] [Quote + Photo]
[Quote + Photo] [Quote + Photo]
Option C: Carousel (use sparingly) Only if you have 5+ strong testimonials.
Always include:
Use accordion/expandable pattern:
Must include: