The complete masterclass on building high-converting landing pages with the current Claude product family. Claude.ai chat, Artifacts, Claude Code, Custom Skills, Claude Design, Cowork, and the API. Universal across Shopify, Hydrogen, WordPress, Webflow, Framer, and raw HTML.
Claude AI ships a family of models and tools that together can produce production-quality landing pages from a single prompt. The current lineup is Opus 4.7 for hard creative direction, Sonnet 4.6 as the default workhorse, and Haiku 4.5 for high-volume variant generation.
For one-off pages, use Claude.ai chat with Artifacts. For multi-file production work, use Claude Code with a 1M context window. For repeatable brand-consistent output, package your workflow as a Custom Skill. For visual-first exploration, use Claude Design at claude.ai/design.
This masterclass walks all ten paths end-to-end, with 100 paste-ready prompts, 5 downloadable Custom Skills, 8 page templates, and platform deployment guides for Shopify, Hydrogen, WordPress, Webflow, Framer, and raw HTML.
This is a 10-module curriculum. Most readers do not need every module. Pick the persona closest to your situation and the path below points to the modules that pay back fastest.
You want a converting landing page shipped this week. You have never opened a terminal. You will live in Claude.ai chat and use Artifacts.
Claude Code, Cursor, Antigravity are your daily drivers. You want repeatable workflows, custom skills, and multi-model pipelines.
You need a defensible process, brand-consistent output across clients, and the ability to swap visual direction without rebuilding code.
Claude is not one product. As of May 2026, Anthropic ships seven distinct surfaces, each with different strengths for landing page work. The single biggest mistake people make is using the wrong one for the task. This module is the decision matrix.
Three tiers in the Claude 4 family, all current production models as of May 2026. Always pin to the full version string in production code so a new release does not silently change your behavior.
| Surface | Best For | Skill Level | Cost |
|---|---|---|---|
| Claude.ai chat | One-off pages, exploration, prompt refinement | Anyone | Free or $20/mo Pro |
| Artifacts (in chat) | Live preview of HTML, React, SVG, Mermaid | Anyone | Included with Claude.ai |
| Claude Projects | Multi-page work with persistent context and files | Anyone | Pro+ subscription |
| Claude Code | Multi-file production work, full repo refactors, deployment | Comfortable with terminal | Pro+ subscription or API |
| Custom Skills | Repeatable workflows (brand voice, page templates) | Markdown + YAML | Included on Free+ |
| Claude Design | Visual-first design exploration, decks, prototypes | Anyone | Pro+ subscription |
| Cowork | Local file system access, multi-step delegated work | Comfortable granting folder access | Pro+ subscription (macOS first) |
| Anthropic API | Programmatic generation at scale, custom apps | Developer | Pay per token |
Most landing page work for solo founders and marketers lives in Claude.ai chat with Artifacts. That covers Modules 1, 2, 3, 7, and 8. If you are getting tired of re-explaining your brand on every prompt, that is the signal to move up to Custom Skills (Module 5). If you outgrow that, you have the budget for Claude Code (Module 4). Do not skip ahead.
Most generic Claude output is the result of generic prompts. Structured prompts produce structured output. This module covers the four-block prompt pattern, XML tags, and the constraint engineering that separates production-quality prompts from amateur ones.
Claude was trained to parse XML-style tags natively. Tags create unambiguous boundaries between context, examples, instructions, and output specs. The result is dramatically more consistent output and far fewer "Claude ignored my instructions" moments.
Compare these two prompts. Same intent. Wildly different output quality.
Write me a landing page for a coffee subscription. Make it modern and not generic. The brand is called Origin and they sell single-origin coffees from small farms. Should have a hero, features, pricing, FAQ. Don't be cringy.
<instructions>
You are a senior conversion copywriter for premium DTC brands. Write a single-page HTML landing page following the structure in <output_format>.
</instructions>
<context>
<brand>
Name: Origin Coffee Co.
Product: Single-origin coffee subscription
Audience: Coffee enthusiasts who already grind at home
Positioning: Direct trade with named farms, not commodity beans
Tone: Confident, specific, no superlatives
</brand>
<banned_phrases>
"game-changer", "revolutionary", "unlock", "elevate your", "next-level"
Any use of the word "amazing" or "incredible"
Generic claims like "the best coffee" without proof
</banned_phrases>
</context>
<task>
Write a complete single-page HTML file with inline CSS. The page must convert a coffee enthusiast on the first scroll. The hero must answer "why these beans, why now" in under 20 words.
</task>
<output_format>
Single HTML file with:
1. Hero (headline, subhead, primary CTA, secondary CTA)
2. Three feature cards (each with one concrete proof point)
3. Pricing block (one subscription tier, monthly only)
4. Three-question FAQ
5. Final CTA
Inline CSS only. No external dependencies. Mobile-first, 375px to 1200px.
Use a warm earth-tone palette derived from coffee (deep browns, cream, single accent gold).
Self-host system fonts only.
</output_format>
The strong prompt produces a usable page 9 times out of 10. The weak prompt produces a forgettable page 9 times out of 10. The difference is structure, not cleverness.
Every landing page prompt in this masterclass uses the same four blocks. Memorize the order and you can build any prompt.
Paste this once at the top of any chat or save it as a Project instruction. Every prompt after it benefits.
You are a senior conversion copywriter and frontend engineer who ships premium landing pages for serious brands.
Hard rules:
- Never use AI-cliche phrases (revolutionary, game-changer, unlock, elevate, level up, supercharge, next-gen).
- Never invent statistics, percentages, customer counts, or testimonial quotes.
- Never claim certifications a brand does not hold.
- If a fact is uncertain, mark it [needs verification].
- Default to mobile-first responsive design (375px / 768px / 1200px).
- Default to WCAG 2.1 AA accessibility (focus rings, alt text, semantic HTML).
- Default to inline CSS for single-file HTML deliverables, scoped CSS for components.
Output discipline:
- One file per deliverable unless asked otherwise.
- No placeholder Lorem ipsum unless explicitly requested.
- No "// TODO" stubs in shipped code.
- Show me the deliverable, then a 3-line summary of what you built and what is intentionally missing.
If you do not have enough context, ask one targeted question before writing.
One sentence: "If you would normally write a generic phrase here, write a specific concrete claim instead, or skip the section entirely."
That single instruction cuts AI slop by an order of magnitude. Add it to every prompt.
This is the fastest path from zero to a deployable landing page. No terminal, no setup, no install. Open Claude.ai in your browser, paste a prompt, watch a live preview render in the Artifacts side panel, iterate by conversation, copy the code, ship.
Artifacts is Claude's live-preview side panel for substantial standalone content. When Claude generates an HTML page, React component, SVG, Mermaid diagram, or formatted Markdown, the artifact appears in a split pane with a rendered preview. You see the page render in real time as Claude writes it. You can interact with the preview. You can edit code inline. You can share via link or download the source.
Supported artifact types as of 2026:
Default to HTML for landing pages. React makes sense only when:
For everything else (hero + features + pricing + FAQ + CTA), HTML wins on portability, simplicity, and deployment ease. You can paste HTML into Shopify, WordPress, Webflow, or Vercel. React requires a build step.
These are the refinement prompts that produce the best results inside Artifacts. Each one is small enough to keep Claude focused and produce a clean diff.
If you want a complete artifact in under 2 minutes, paste the system prompt from Module 2.4, then the landing page prompt from the Module 3 templates, then the brand details. The system prompt does the work of constraint engineering for you on every subsequent request.
Claude Code is Anthropic's terminal-native coding agent. Where Artifacts shines for single-file pages, Claude Code shines for multi-file production work: managing an entire project, refactoring existing themes, integrating with Git, and shipping to production. Its 1M token context window can hold an entire Shopify theme or a small Next.js project without chunking.
Native installer is the current recommended path. Works on macOS, Linux, and WSL on Windows.
# Install Claude Code (native installer, current recommended path)
curl -fsSL https://claude.ai/install.sh | sh
# Or via npm if you prefer
npm install -g @anthropic-ai/claude-code
# Launch from any project directory
cd ~/projects/my-landing-page
claude
The first run prompts you to log in. Use your Claude Pro, Max, Team, or Enterprise subscription, or supply an Anthropic Console API key.
Claude Code automatically reads CLAUDE.md at the project root on every session. This is where you encode your conventions, your brand, your forbidden patterns, your deployment target. Without it, Claude defaults to generic React conventions and ignores your stack.
Here is a battle-tested CLAUDE.md for landing page projects.
# Project: Landing Page System
## Stack
- Static HTML / CSS / vanilla JS only
- No frameworks, no build step
- Mobile-first responsive (375 / 768 / 1200)
- Self-hosted system fonts; no Google Fonts
- Inline critical CSS; defer everything else
## Brand
- Palette: deep #0a1a0f, accent #d97757, cream #f5f0e8
- Display font: Playfair Display
- Body font: DM Sans
- Tone: confident, specific, no superlatives
## Forbidden
- No AI cliches: "revolutionary", "game-changer", "unlock", "elevate"
- No fake urgency: "only 3 left", "ends tonight"
- No invented stats, counts, testimonials, certifications
- No external CDN dependencies
- No `console.log` in shipped code
- No jQuery, ever
## File conventions
- One landing page per directory under `/pages/`
- Each page is index.html + assets/ folder
- Schemas (JSON-LD) inline in <head>
- Open Graph and Twitter Card tags required
- Canonical URL required
## Pre-ship audit (run before any commit)
- Lighthouse mobile score >= 90
- All images have alt text
- All interactive elements have visible focus rings
- All schemas validate at validator.schema.org
- No console errors on page load
## Tone for chat responses
- Match the DDS Vibe Academy style: short sentences, headings, no emojis
- Audit code before presenting
- Show only changed lines unless full file is requested
Slash commands are custom shortcuts you create once and call forever. Drop a file at .claude/commands/new-page.md and Claude Code makes /new-page available in every session.
# .claude/commands/new-page.md
Scaffold a new landing page directory under /pages/$ARGUMENTS with this structure:
/pages/$ARGUMENTS/
index.html # complete page following our CLAUDE.md conventions
assets/
.gitkeep
The index.html must include:
1. Hero with one headline (under 10 words) and one CTA
2. Three feature cards
3. Pricing block
4. Three-question FAQ
5. Final CTA
Read CLAUDE.md before writing the file. Apply all brand rules.
After scaffolding, run a Lighthouse audit and report the four Core Web Vitals.
Usage: /new-page coffee-subscription scaffolds a complete page directory.
Claude Code's 1M token context window means you can hand Claude an entire Shopify theme, an entire WordPress theme, or a small Next.js project as context. Three landing-page workflows this unlocks:
Subagents are specialized Claude instances with their own context and tools. Useful for landing pages when you want one agent doing copy and another doing code in parallel.
# .claude/agents/copywriter.md
---
name: copywriter
description: Senior conversion copywriter for landing pages. Use when generating or refining headlines, feature copy, CTAs, or any persuasive prose.
tools: Read, Write, Glob
---
You are a senior DTC conversion copywriter.
Apply the constraints from /CLAUDE.md/Forbidden.
When given a feature, lead with a concrete outcome or proof point, not the feature name.
Never use cliche AI phrases. Reject vague claims. If a stat is uncertain, mark it [needs verification].
Output one variant unless asked for more.
Shopify open-sourced the Shopify AI Toolkit on April 9, 2026. It plugs into Claude Code as an MCP server and turns it into a Shopify-aware development environment with validated Liquid output, theme push commands, and live store control.
# Install the Shopify AI Toolkit plugin
/plugin marketplace add Shopify/shopify-ai-toolkit
/plugin install shopify-plugin@shopify-ai-toolkit
# Authorize with your store
shopify auth login
# Now ask Claude Code to build a Shopify landing page section
# It will validate Liquid against the bundled schema before writing
The toolkit has no draft mode. Store mutations execute on the live store immediately. Always push themes with --unpublished first. Run product updates one at a time before bulk operations. There is no undo. For full risk analysis, check the official toolkit documentation.
Skills are the single highest-ROI feature for anyone shipping multiple landing pages. Released October 2025, Skills let you package a workflow once and have Claude invoke it automatically whenever the description matches. Stop re-explaining your brand every session. Build the skill once, use it forever.
A Skill is a directory containing a SKILL.md file at minimum. The SKILL.md has two parts: YAML frontmatter with a name and description (max 200 chars), and a markdown body with the actual instructions. Optional extras: templates, reference docs, example outputs, executable scripts.
Claude scans every skill's description at the start of every conversation, using roughly 100 tokens per skill. If your message matches a skill's description, the full content loads. If nothing matches, no skill loads and you pay no token cost. This is called progressive disclosure and it is why you can have dozens of skills without performance impact.
---
name: landing-page-builder
description: Build conversion-optimized single-file HTML landing pages following the DVA pattern with hero, features, pricing, FAQ, and CTA. Trigger when user asks for a landing page, sales page, marketing page, or product page.
---
# Landing Page Builder Skill
## When to use this skill
Use whenever the user asks for a landing page, sales page, marketing page, product launch page, or any single-page conversion asset.
## Output structure
Every landing page produced by this skill must have these sections in this order:
1. **Hero** — Headline (under 10 words), subhead (under 20 words), primary CTA, optional secondary CTA
2. **Trust bar** — Customer logos, certifications, or one-line proof points
3. **Three feature blocks** — Each leading with a concrete outcome, not a feature name
4. **Social proof** — One specific testimonial OR one specific result metric
5. **Pricing or offer** — One clear offer with explicit pricing
6. **Three-question FAQ** — Real objections, real answers
7. **Final CTA** — Same primary action as the hero
## Hard rules
- Single file. Inline CSS. No external dependencies.
- Mobile-first (375px / 768px / 1200px breakpoints).
- WCAG 2.1 AA compliant (focus rings, semantic HTML, alt text).
- Self-hosted system fonts only.
- Never use AI-cliche phrases: revolutionary, game-changer, unlock, elevate, level up, supercharge.
- Never invent statistics, customer counts, or testimonial quotes.
- Mark uncertain facts as [needs verification] rather than fabricating.
## Required structured data
Every page must include in the <head>:
- Open Graph tags (og:title, og:description, og:image, og:url, og:type)
- Twitter Card tags (summary_large_image)
- Canonical URL
- One JSON-LD schema appropriate to the page type (Product, Service, Event, or WebPage)
## Tone
Confident. Specific. Direct. No superlatives. No urgency theater. No fake scarcity.
## Output discipline
After generating the page, append a 3-line summary:
1. What the page is selling
2. The primary conversion goal
3. One thing you intentionally left out (with rationale)
my-skill/SKILL.md. Optionally include subfolders for templates, reference docs, scripts.my-skill.zip.Prerequisite: Code execution must be enabled in your settings. For Enterprise plans, an owner must enable Skills at the organization level first.
# Project-scoped skills (versioned with repo)
mkdir -p .claude/skills/landing-page-builder
# Drop your SKILL.md into that directory
# User-scoped skills (available across all projects)
mkdir -p ~/.claude/skills/landing-page-builder
# Drop SKILL.md there
# Verify the skill loaded
claude
# In session, ask: "What skills are available?"
Anthropic ships an official Skill Creator plugin at claude.com/plugins/skill-creator. It walks you through an interactive Q&A that generates a complete SKILL.md with proper structure. If you have never written a skill before, start here.
Skills do not fire because their internal instructions are bad. They fire (or fail to fire) because of the description. A vague description like "Helps with pages" will rarely trigger. A specific description like "Build conversion-optimized single-file HTML landing pages following the DVA pattern with hero, features, pricing, FAQ, and CTA" fires reliably. Write your descriptions in the language you actually use when asking Claude for that task.
Five complete downloadable skills are in the Skills Library below.
Claude Design launched April 17, 2026 as a research preview from Anthropic Labs. It runs on Claude Opus 4.7 and lives at a different URL than the chat app: claude.ai/design. Where Artifacts is code-first with a live preview, Claude Design is canvas-first with code as the output.
Three things separate Design from Artifacts:
| Situation | Use | Why |
|---|---|---|
| Exploring visual direction for a new brand | Claude Design | Canvas interaction beats code iteration for visual exploration |
| You have a brand and need a landing page now | Artifacts | Faster to ship; code is portable |
| Multi-file project, repo integration, deploy | Claude Code | Only Code handles multi-file work cleanly |
| Pitch deck or executive presentation | Claude Design | Native PPTX export |
| 50 A/B copy variants for one hero | Artifacts (or API) | Design is overkill for pure copy |
| Production refactor of existing theme | Claude Code | 1M context plus repo access |
Claude Design respects a DESIGN.md file the same way Claude Code respects CLAUDE.md. Drop your brand identity into a DESIGN.md, attach it to the project, and every output stays on-brand without re-explanation.
# DESIGN.md
## Brand identity
- Name: Origin Coffee Co.
- Positioning: Direct trade single-origin from named farms
- Tone: Confident, specific, no superlatives
## Visual system
- Primary: #3d2817 (espresso brown)
- Secondary: #d97757 (warm coral accent)
- Background: #faf6f1 (cream)
- Text: #1a1310
## Typography
- Display: Playfair Display (Bold, 600)
- Body: DM Sans (Regular, 400; Medium, 500)
- Line height: 1.18 display, 1.65 body
- Letter spacing: -0.01em display, 0 body
## Visual rules
- Generous whitespace; sections at 96px desktop, 64px mobile
- Photography style: warm, golden hour, no harsh shadows
- No stock photos of people; product hero only
- One accent color per page maximum
## Forbidden
- No gradients except subtle radial atmospheres
- No drop shadows on text
- No icon libraries (Lucide etc.) without explicit approval
- No emojis
## Layout grid
- 12 column on desktop (1200px container)
- 6 column on tablet (768px)
- 4 column on mobile (375px)
- 24px base spacing unit, scale: 8, 16, 24, 40, 64, 96
claude.ai/design. Upload your DESIGN.md as a project file./import-design against the bundle.If you are an experienced front-end developer who already thinks in code, Artifacts and Code are faster paths. Design pays back most for designers transitioning into code-adjacent work, and for non-designers who need to explore visual direction without committing to one path early.
You generated the page. Now ship it. Claude produces platform-agnostic HTML, CSS, and JS that paste into almost any host. This module walks the six most common deployment targets with paste-ready instructions for each.
| Platform | Output Format | Effort | Best For |
|---|---|---|---|
| Shopify Liquid (theme) | Section file + JSON template | Medium | Existing Shopify store, theme editor integration |
| Shopify Hydrogen | React Router v7 route | Hard | Headless Shopify with React team (see Hydrogen masterclass) |
| WordPress | Custom HTML block or page template | Easy | Existing WP site, marketers managing content |
| Webflow | Embed element with raw HTML | Easy | Design-led teams, marketers |
| Framer | Code component or HTML embed | Easy | Designers shipping production sites |
| Vercel / Netlify / Cloudflare Pages | Static HTML in a Git repo | Easy | Solo founders, fastest custom domain |
Claude generates an HTML page. To make it editable in the Shopify theme editor, wrap it in a section schema. The pattern:
{% comment %} sections/landing-coffee.liquid {% endcomment %}
{%- assign section_id = 'landing-' | append: section.id -%}
<section id="{{ section_id }}" {{ section.shopify_attributes }}>
<!-- Paste the Claude-generated HTML here -->
<!-- Replace hardcoded values with section.settings references -->
<h1>{{ section.settings.hero_title | escape }}</h1>
<p>{{ section.settings.hero_subtitle | escape }}</p>
<!-- ... rest of the page ... -->
</section>
{% schema %}
{
"name": "Coffee Landing Page",
"tag": "section",
"settings": [
{
"type": "text",
"id": "hero_title",
"label": "Hero headline",
"default": "Single-origin coffee from farms we know"
},
{
"type": "textarea",
"id": "hero_subtitle",
"label": "Hero subhead",
"default": "Direct trade. Named farms. Shipped within 7 days of roast."
}
],
"presets": [
{ "name": "Coffee Landing Page" }
],
"enabled_on": {
"templates": ["page"]
}
}
{% endschema %}
Then create a JSON template at templates/page.landing-coffee.json:
{
"sections": {
"main": {
"type": "landing-coffee",
"settings": {}
}
},
"order": ["main"]
}
In Shopify admin, create a new page and assign the page.landing-coffee template. The section now appears in the theme editor with all settings editable.
Three paths in order of simplicity:
your-theme/page-landing.php. Wrap with get_header() and get_footer() if you want the site chrome, or skip them for a chromeless landing.<?php
/**
* Template Name: Landing Page Chromeless
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body>
<!-- Paste the Claude-generated HTML body content here -->
<?php wp_footer(); ?>
</body>
</html>
<body> and </body>). Skip <html> and <head>.<style> blocks to the page's custom code in Project Settings.<script> blocks to before the closing body tag in custom code.Two paths. The Embed element works the same as Webflow. For React components, use a Framer code component:
// MyLandingPage.tsx (Framer code component)
import { addPropertyControls, ControlType } from "framer"
export default function MyLandingPage({ heroTitle, ctaUrl }) {
return (
<div style={{ fontFamily: "DM Sans" }}>
<h1>{heroTitle}</h1>
<a href={ctaUrl}>Get Started</a>
</div>
)
}
addPropertyControls(MyLandingPage, {
heroTitle: { type: ControlType.String, defaultValue: "Single-origin coffee" },
ctaUrl: { type: ControlType.Link, defaultValue: "/checkout" }
})
The cheapest, fastest, most flexible path for solo founders.
# Create a new directory with the Claude-generated index.html
mkdir my-landing-page
cd my-landing-page
# Paste the generated index.html here
# Push to GitHub
git init
git add .
git commit -m "Initial landing page"
git branch -M main
git remote add origin git@github.com:you/my-landing-page.git
git push -u origin main
# Deploy to Vercel (one command)
npx vercel
# Or Netlify
npx netlify deploy --prod
# Or Cloudflare Pages: connect the repo in their dashboard
All three give you free hosting, free SSL, and a working URL in under five minutes. Add your custom domain in the platform dashboard. Done.
If you are committed to Shopify Hydrogen, see the companion Hydrogen 2026 Masterclass. It covers headless storefront construction end-to-end and includes a Module 6 on wiring AI agents directly to the storefront via Storefront MCP.
A pretty landing page that does not convert is a hobby project. This module covers the patterns that actually move the conversion rate: variant generation, conversion psychology prompts, performance budgets, and the schema markup that wins SERP real estate.
This is the single highest-ROI prompt in this masterclass. Use Sonnet 4.6 by default. Drop to Haiku 4.5 if you want 50+ variants on a budget.
<instructions>
You are a conversion-rate optimization specialist. Generate A/B variants for the landing page hero in <source>.
</instructions>
<source>
Current hero headline: [paste current headline]
Current subhead: [paste current subhead]
Current CTA: [paste current CTA text]
</source>
<context>
<audience>[describe the audience in 2 sentences]</audience>
<product>[describe the product in 2 sentences]</product>
<primary_objection>[what stops them from buying]</primary_objection>
</context>
<task>
Generate 10 hero variants. Each variant is one alternative headline, one alternative subhead, and one alternative CTA.
Spread the variants across 5 angles:
1. Outcome-led (lead with the result the buyer gets)
2. Problem-led (lead with the pain they currently have)
3. Identity-led (speak to who they want to become)
4. Curiosity-led (open a loop they need to close by clicking)
5. Specificity-led (lead with a concrete number or proof point)
Two variants per angle.
</task>
<output_format>
A markdown table with columns: Angle, Headline, Subhead, CTA.
After the table, append one sentence per variant explaining the psychology it activates.
</output_format>
Three frameworks that produce reliable copy across categories. Each can be invoked by name in a prompt: "Rewrite this hero in the PAS framework."
Claude-generated pages can hit these targets with the right constraints in the prompt. Add this to your system prompt or CLAUDE.md:
| Metric | Target | Prompt lever |
|---|---|---|
| LCP (Largest Contentful Paint) | < 1.5s | "Hero image must have loading=eager and fetchpriority=high" |
| INP (Interaction to Next Paint) | < 200ms | "No render-blocking JS. Defer everything non-critical." |
| CLS (Cumulative Layout Shift) | < 0.1 | "All images must have width, height, or aspect-ratio set" |
| TTFB (Time to First Byte) | < 200ms | Host-dependent; pick a CDN-backed host |
Add these to the <head> of every landing page. Claude will generate them correctly if you ask explicitly.
The prompt to generate them in one pass:
Add the following JSON-LD schemas to the <head> of this landing page:
1. Product schema with offers, availability, brand
2. FAQPage schema mirroring the on-page FAQ exactly
3. BreadcrumbList showing Home > Collection > This Product
4. WebPage with speakable specification targeting .speakable-summary class
Validate that all four parse as JSON. Use schema.org context. Pin @id values to the canonical URL with hash fragments.
Run this on any landing page (yours or a competitor's) to get a ranked list of CRO improvements.
<task>
Audit the landing page below for conversion-rate optimization issues. Identify the top 5 weaknesses ranked by likely impact on conversion rate.
</task>
<page>
[paste the full HTML or a screenshot]
</page>
<output_format>
For each of the 5 issues:
1. The issue in one sentence
2. The fix in one sentence
3. Estimated impact: high / medium / low
4. Estimated effort: high / medium / low
Sort by impact descending, then effort ascending.
Do not invent statistics. If you mention an industry benchmark, mark it [needs verification].
</output_format>
Using Opus for everything is expensive. Using Haiku for everything is bad. The discipline of multi-model orchestration is matching the right model to each step of the workflow. This module is the cost-quality routing guide.
| Task | Model | Why |
|---|---|---|
| Creative direction, hard headlines, novel framing | Opus 4.7 | Quality matters more than cost; runs once |
| Page draft, copy refinement, code generation | Sonnet 4.6 | Default workhorse; 97% of Opus quality at 60% cost |
| 50 A/B variants, headline scoring, bulk rewrites | Haiku 4.5 | Volume tasks where individual quality matters less |
| Pre-launch audit, JSON-LD validation, CRO scoring | Sonnet 4.6 | Structured analysis is Sonnet's sweet spot |
| Schema drafting, meta tag generation, alt text | Haiku 4.5 | Mechanical work; speed beats quality |
| Multi-page strategy, funnel architecture | Opus 4.7 | Long-horizon reasoning is Opus' strength |
Single-Opus equivalent cost for the same output: 5-10x higher.
Inside Claude.ai chat you can switch models mid-conversation. The convention I use to make this explicit:
# When switching to a smaller model, drop this in:
I am switching to Haiku 4.5 for the next 10 headline variants. Apply only the brand rules from CLAUDE.md sections "Forbidden" and "Tone". Skip the deep reasoning. Return the variants as a numbered list with no commentary.
# When switching back up to Opus for the hard call:
Switch to Opus 4.7. Pick the top 3 variants from the list above. For each, write one sentence on the psychology it activates and one sentence on the audience segment it best targets.
For high-volume work (50+ pages per month), move to the Anthropic API. You get fine-grained cost control and can budget per project.
from anthropic import Anthropic
client = Anthropic()
# Pick the right model per task
def generate_headlines(brand_context: str, n: int = 10) -> list[str]:
"""Headlines are volume work. Use Haiku."""
response = client.messages.create(
model="claude-haiku-4-5-20251001",
max_tokens=1024,
messages=[{
"role": "user",
"content": f"Generate {n} headline variants for the brand below.\n\n{brand_context}"
}]
)
return response.content[0].text.split("\n")
def write_hero_section(brand_context: str) -> str:
"""Hero copy is balanced work. Use Sonnet."""
response = client.messages.create(
model="claude-sonnet-4-6",
max_tokens=2048,
messages=[{
"role": "user",
"content": f"Write the hero section for:\n\n{brand_context}"
}]
)
return response.content[0].text
def architect_funnel(brand_context: str) -> str:
"""Funnel strategy is hard work. Use Opus."""
response = client.messages.create(
model="claude-opus-4-7",
max_tokens=4096,
messages=[{
"role": "user",
"content": f"Design a 3-page funnel architecture for:\n\n{brand_context}"
}]
)
return response.content[0].text
For repeated prompts (the same brand context across many pages), the Anthropic API supports prompt caching. The brand context is cached for ~5 minutes after first use and subsequent requests inside that window cost up to 90 percent less for the cached portion. Worth setting up for any agency or high-volume operator.
A typical solo founder shipping 5 pages per month spends well under $10 in API costs across this pipeline. Agencies shipping 30+ pages per month spend $50-150 depending on Opus usage and revision count. Compare to the labor cost of a single freelance copywriter ($800-2,500 per page) and the math obviously holds.
Generating a page is the easy part. Shipping a page that actually converts and stays live is the work. This module is the pre-launch checklist, the post-launch measurement plan, and the iteration cadence that turns one good page into a portfolio of converting assets.
The full checklist is in the Checklist Library below. Run every item against every page before it goes live. If you cannot tick every box, the page is not ready. No exceptions.
Three layers, escalating in complexity. Pick the simplest that meets your needs and resist adding the next layer until you actually need it.
page_view with UTM params, source, medium, campaignhero_cta_click with the hero variant IDscroll_depth_25 / _50 / _75 / _100 for engagementform_start when the first form field is touchedform_submit_success when the form completessecondary_cta_click for any non-primary actionvideo_play if there is an embedded videoCompounding wins come from regular small tests, not heroic relaunches. The cadence:
Four weekly tests per page per month. Twelve tests per quarter. Even at a 25 percent win rate, that compounds dramatically over a year.
The end state of this masterclass: a personal landing-page system you can reuse forever. The components:
CLAUDE.md with your brand encoded/templates folder with your tested page structures/prompts folder with your tested prompts organized by stage/new-page, /audit, /variants)The first page you ship will not be great. The tenth will be solid. The fiftieth will be a system that runs without you. The point of this masterclass is not the first page. It is the system you build along the way. Start small. Ship one page this week. Compound from there.
Ten prompts per category, ten categories. Every prompt is calibrated for Claude Sonnet 4.6 unless noted otherwise. Use Opus 4.7 for the hard creative ones (marked with the Opus tag). Use Haiku 4.5 for the volume-task ones (marked with the Haiku tag). Replace bracketed placeholders with your specifics.
Use these before writing a single word of copy. Discovery is where conversion rate is won or lost.
You are a customer research analyst. Given [product name] and [audience description], list the 5 strongest emotional drivers that move this audience to buy. For each driver, write one sentence on the underlying belief and one sentence on the fear that blocks action.
Generate 15 specific objections a [audience persona] might have to purchasing [product]. Rank them by likely impact on conversion rate. For each, suggest one piece of evidence or copy that would defuse it.
Acting as the target customer for [product], write a one-paragraph internal monologue starting with "I keep thinking about buying this but..." Surface the actual hesitations a buyer feels, not surface-level ones.
Compare [my product] against [competitor 1] and [competitor 2]. For each, identify the single biggest positioning angle I could own that they cannot. Mark any claim as [needs verification] if you are uncertain.
Given [product] and [pricing], identify the 3 buyer segments most likely to convert. For each segment, write a one-sentence problem statement in the buyer's own voice.
Audit my current website at [URL]. Identify the 5 messages a first-time visitor most likely takes away. Rank them by clarity. Note which are intentional versus accidental.
Generate 20 long-tail keywords a buyer might type before purchasing [product]. Group into 4 stages: problem-aware, solution-aware, product-aware, ready-to-buy. Note search intent for each.
Given [audience] and [product category], generate the "Jobs to be Done" for this customer in 3 layers: functional job, emotional job, social job. Use Clayton Christensen's framework. Be specific, not abstract.
I am about to write a landing page for [product]. Ask me the 7 most important questions you need answered before you can write a high-converting hero section. Wait for my answers before proceeding.
Synthesize [paste 5-10 customer reviews]. Extract the language patterns customers actually use. Output: 10 exact phrases I should consider using in headlines or subheads, with the underlying emotion each signals.
Use these once discovery is locked. Pair with the Module 2.4 system prompt for best results.
Write 10 hero headline variants for [product]. Each must be under 10 words. Spread across 5 angles: outcome-led, problem-led, identity-led, curiosity-led, specificity-led. Two per angle. No AI cliches.
For each of these 5 hero headlines [paste headlines], write one subhead under 20 words that completes the value proposition without repeating words from the headline.
Write 5 CTA button variants for [primary conversion goal]. Each must be 2-4 words. Lead with a verb. Avoid generic "Submit" or "Click here". Score each from 1-10 on specificity.
Rewrite these 3 feature blocks [paste] so each leads with a concrete outcome or specific proof point, not the feature name. Maximum 30 words per block. Tone: direct and confident.
Write 5 unique value propositions for [product]. Each must complete this sentence: "[Product] is the only [category] that [unique mechanism] so that [specific outcome]." Vary the mechanism and outcome.
Write 3 versions of a social proof section for [product]. Version 1: a single specific testimonial structure. Version 2: a metrics-led approach. Version 3: customer logo bar with one-liner. No invented quotes or numbers. Leave placeholders for real data.
Write a 60-word about block for [brand]. Must establish credibility without bragging. Lead with the work, not the credentials. End with one sentence on what we will not do.
Rewrite this paragraph [paste] in three tones: confident-direct, warm-empathetic, technical-precise. Same information in each. Note which audience each tone fits best.
Generate 10 microcopy elements for [product checkout flow]: form field labels, helper text, error states, success states, loading states. Keep each under 8 words. Tone: helpful, not chirpy.
Write 5 versions of a money-back guarantee statement for [product]. Each in a different voice: legal-precise, founder-personal, customer-protective, no-risk-bold, soft-reassuring. Note which legal review they need before shipping.
Use these to plan the page sections before writing them.
Design a landing page section order for [product]. Audience awareness level: [cold / warm / hot]. List the 7-10 sections in optimal order. For each, write one sentence on its conversion job.
Build a section-by-section wireframe for [product] landing page. For each section, specify the headline, the supporting elements (image, video, list), and the dimensions (full-width, container, card).
My page currently has [list current sections]. Identify the 3 sections that are likely doing the most damage to conversion rate. For each, explain why and propose either a fix or removal.
Apply the PAS framework (Problem - Agitate - Solve) to [product]. Output 3 sections of copy: 60 words on the problem, 80 words agitating it, 100 words presenting the solution.
Apply the StoryBrand 7-part framework to [brand and product]. Identify each: character, problem, guide, plan, call to action, success state, failure state. Output a one-paragraph narrative the page should tell.
Design a 3-section "objection handling" block for [product]. The 3 most common objections are [list]. For each, output: the customer thought verbatim, our response in 2 sentences, the proof point that backs it.
For a [SaaS / DTC / Service] landing page targeting [audience], should the pricing section appear before or after social proof? Argue both positions. Then make a recommendation based on the specifics.
My CTA is [paste current CTA copy]. Generate 5 alternative CTA placements throughout the page (above the fold, after features, after social proof, after FAQ, sticky footer). For each, write the copy that fits that placement's context.
Design a 12-question FAQ section for [product]. Questions must be ranked by frequency and impact. Each answer maximum 40 words. Include one question that handles the price objection and one that handles the trust objection.
My landing page is currently [paste URL or description]. The conversion rate is [X%] and I want [Y%]. Identify the single structural change that would have the highest expected impact. Explain why with reference to specific page patterns.
Pair these with your CLAUDE.md or system prompt. Default to Sonnet 4.6.
Build a complete single-file HTML landing page for [product]. Sections: hero, three features, pricing, three-question FAQ, final CTA. Inline CSS. Mobile-first. WCAG AA. No external dependencies. Self-hosted system fonts only.
Convert this static HTML [paste] into a Shopify Liquid section. Add a schema block exposing every text field as editable. Add a preset so it appears in the section picker. Use scoped CSS with #section-id pattern.
Build a React functional component for a sticky header that becomes opaque on scroll, has a mobile hamburger menu, and includes a primary CTA. Use Tailwind. No external libraries. Mobile-first.
Generate the JSON-LD schemas for this landing page. Include: WebPage, Product, FAQPage, BreadcrumbList. Pin @id values to the canonical URL with hash fragments. Output as 4 separate <script> blocks.
Build an accessible accordion FAQ component in vanilla JS. Must support keyboard navigation (Tab, Enter, Space), proper aria-expanded states, and prefers-reduced-motion respect. No jQuery, no framework.
Audit this CSS [paste] for performance issues. Identify: unused selectors, render-blocking patterns, missing aspect-ratio on images, missing will-change on animated elements. Output a ranked fix list.
Build a multi-step lead capture form (3 steps) in vanilla JS. Each step validates before advancing. Final step submits to [endpoint]. Include progress indicator, back button, and error state styling.
Generate the <head> meta tags for this landing page. Include: title, description, viewport, theme-color, Open Graph (7 tags), Twitter Card (5 tags), canonical, robots. Use these specifics: [paste].
Refactor this section [paste] for Core Web Vitals. Targets: LCP under 1.5s, CLS under 0.1, INP under 200ms. Apply: fetchpriority on hero image, aspect-ratio on all images, defer non-critical JS, inline critical CSS.
Build a WordPress page template (PHP) that renders a chromeless landing page (no header, no footer, no theme styling). Include wp_head() and wp_footer() for plugin compatibility. Add a Template Name comment so it appears in the admin.
Use these with Opus 4.7 in Claude Design or in chat. Visual direction is where Opus pays back.
[Opus] Generate a visual direction document for [brand] landing page. Specify: palette (5 colors with hex), typography (display and body), spacing scale (8 values), photography style, illustration style, motion style. Each backed by a rationale.
[Opus] Propose 3 distinct visual directions for [brand] landing page. Each must be substantively different (not just color swaps). For each: one defining principle, three reference brands or design eras, two image descriptions.
My brand is [description]. Generate a complete typography system: display font choice, body font choice, weight set, size scale (8 sizes), line height, letter spacing, paragraph spacing. Justify each choice in one sentence.
My current palette is [hex codes]. Generate 5 alternative palettes that maintain the same emotional positioning but feel distinctly different. For each, name the dominant emotion and the closest reference brand.
[Opus] My landing page currently looks like [paste screenshot or describe]. Identify the 5 design choices that make it look "generic AI" and propose specific alternatives that would make it look intentional.
Design a hero section visual treatment for [product]. Specify: composition (where the eye lands first), typography hierarchy (3 levels), color usage, supporting visual (photo, illustration, video, none), and what is intentionally absent.
Generate a DESIGN.md file for [brand]. Include: brand identity, palette with hex, typography system, layout grid, spacing scale, forbidden patterns, and tone. Format as proper Markdown.
My competitor's landing page is at [URL]. Audit their visual choices and identify the 5 design conventions in their category. For each, decide whether to follow it (and look professional) or break it (and stand out). Recommend a path.
Generate an SVG illustration for the hero of [product]. Style: [editorial / technical / playful / minimal]. Dimensions: 600x600. Must use only the brand palette [hex codes]. Output as a complete SVG with viewBox.
Design the focus, hover, and active states for a primary CTA button. Specify exact color shifts, shadow changes, scale transforms, and timing. The button base style is [paste]. Apply WCAG AA contrast on every state.
Use these to ensure the page wins SERP real estate, not just visitor conversion.
Generate a meta title and meta description for this landing page. Title under 60 chars. Description under 160 chars. Both must include the primary keyword [keyword] naturally and end with an implicit call to action.
Generate 5 variations of the H1 for [product]. Each must include the target keyword [keyword] without keyword-stuffing. Rank by likely click-through rate and explain the ranking.
Generate a Product schema JSON-LD for this page. Fill in fields from [paste product details]. Include: name, description, image, brand, offers (with price, availability, priceValidUntil), aggregateRating if available, sku, gtin if available.
Generate a FAQPage JSON-LD schema that mirrors the on-page FAQ exactly. Use proper question and answer structure. 10+ questions. Wrap each question in escapable JSON. Test that the output parses.
Add a SpeakableSpecification to the WebPage schema. Target CSS classes: .speakable-summary, .speakable-answer. Explain in one sentence why this matters for voice search.
Audit the on-page SEO of this HTML [paste]. Check: title tag, meta description, H1 uniqueness, H2/H3 hierarchy, alt text on images, internal link anchor text, canonical, robots meta, hreflang if multi-language. Output ranked fix list.
Generate alt text for 10 images on this landing page. Inputs: [list image filenames and contexts]. Each alt must describe the image and serve the page's primary keyword cluster without keyword-stuffing.
Identify 10 long-tail keywords this landing page should rank for in [niche]. For each, classify: monthly search volume bucket (low/mid/high), commercial intent (info/comm/trans), and difficulty bucket. Mark uncertain numbers as [needs verification].
My current Lighthouse SEO score is [X/100]. Audit this HTML [paste] and identify every issue costing me points. Output as a ranked checklist with the specific HTML change required for each.
Generate Open Graph and Twitter Card meta tags for this page. Inputs: [page title, description, canonical URL, hero image URL, image dimensions, brand handle]. Include all required tags plus image alt text.
Use these to improve an existing page's performance.
Audit this landing page [paste HTML or URL] for CRO issues. Identify the top 5 weaknesses ranked by likely impact on conversion rate. For each: the issue, the fix, the estimated impact (high/med/low), the estimated effort.
My current conversion rate is [X%]. Industry benchmark for [category] is [Y%]. Identify the 3 most likely reasons I am underperforming. For each, propose a specific test I should run this week.
My hero is [paste]. Generate 3 variations focused on each of: clarity, urgency, specificity. For each variation, write a one-sentence hypothesis about which audience segment it serves best.
Identify the friction points in my checkout flow [paste form fields]. For each field, decide: required, optional, or remove. Justify each decision based on conversion lift versus data value.
My bounce rate from the hero is [X%]. Generate 5 hypotheses for why visitors leave before scrolling. For each, propose a measurable test I can run with no developer help.
Identify the strongest objection my landing page does not address. Then write the 60-word block that addresses it. Place it in the optimal section of the page and justify the placement.
My social proof is [paste current section]. Audit it: too generic, too few specifics, missing customer logos, no metrics, no recency signals. Output a stronger version with the same source material.
Design an exit-intent overlay for this landing page. Specify: trigger condition, content (max 30 words), single CTA, and dismissal pattern. The exit overlay must add value, not annoy.
Identify the 3 page elements I could remove with no impact on conversion rate. Justify each removal. The goal is increased clarity, not just shorter page.
Generate a 10-second elevator pitch version of this landing page. The 30-second version. The 5-minute version. Each should communicate the same offer with appropriate depth.
Most should run on Haiku 4.5 — they are volume work.
[Haiku] Generate 20 hero headline variants from this control [paste]. 10 must keep the same value prop with different language. 10 must shift the value prop angle.
[Haiku] Generate 15 CTA button copy variants. Control: [paste]. Spread across: action-led, outcome-led, urgency-led, no-friction-led, specificity-led. Three per category.
Design an A/B test for this hero [paste]. Output: hypothesis (one sentence), measurable success criterion, primary metric, secondary metrics, minimum sample size for 95% confidence, estimated runtime.
For this test result [paste], decide: did the variant win? Was the test statistically significant? Should I roll out, run longer, or kill? Show your reasoning.
Generate a 12-week A/B test roadmap for this landing page. Each week tests one specific element. Order by expected impact (highest first) and dependency. Output as a numbered list with hypotheses.
[Haiku] Generate 10 alternative subheads for the hero [paste]. Each under 20 words. Each must support the headline rather than compete with it.
My A/B test showed [variant won by X%, P value Y]. But traffic was [Z visitors per variant]. Was the test under-powered? What sample size would I need for confidence? Recommend rerun or roll out.
[Haiku] Generate 5 versions of social proof copy: testimonial style, metrics style, logo-bar style, third-party rating style, founder-story style. Each under 100 words. Leave specifics as placeholders for real data.
Design 3 hero layouts for the same copy: text-left/image-right, text-centered/no-image, full-bleed image with text overlay. Output as 3 HTML/CSS samples ready to A/B test.
Identify the 5 most common A/B test mistakes for landing pages. For each, write one sentence on how to recognize it in my data and one sentence on how to fix it.
Use these inside an existing artifact to iterate without starting over.
Tighten the hero. Reduce vertical padding by 30 percent. Cap headline at 4 words per line. Reduce subhead font size by one step on the type scale. Keep everything else identical.
Rewrite the three feature cards. Each must lead with a concrete outcome or specific proof point, not the feature name. Maximum 30 words per card. Tone: direct.
Move the pricing block above the FAQ. Add a money-back guarantee bullet under the primary CTA. Keep the FAQ unchanged.
Swap the accent color from blue (#2563eb) to a warm coral (#d97757). Update every place the accent appears. Keep all other colors and spacing identical.
Audit mobile at 375px viewport. Fix any text that wraps awkwardly, runs into the edge, or has touch targets smaller than 44x44px. Output the diff.
Audit for WCAG 2.1 AA. Add alt text to every image. Verify focus rings on every interactive element. Ensure color contrast is at least 4.5:1 for body text and 3:1 for headings.
Replace this generic feature copy [paste] with copy that leads with a concrete proof point. Use these real numbers from our data: [paste]. Do not invent any other numbers.
Add a sticky header that appears when the user scrolls past the hero. Sticky header contains: brand mark, primary CTA, and one nav link. Background: backdrop-filter blur with 90 percent opacity.
Add scroll-triggered fade-in animation to each section. Threshold: 30 percent visible. Duration: 0.5s ease-out. Respect prefers-reduced-motion (no animation if user prefers reduced motion).
Reduce total page weight. Identify which CSS rules are unused and remove them. Identify which JS handlers can be deferred. Output the diff with byte counts before and after.
Use these when something is broken. Default to Sonnet 4.6 for code debug, Opus 4.7 for hard architectural problems.
My page is showing this console error [paste error]. Identify the root cause and propose the minimum-diff fix. Do not rewrite unrelated code.
My CSS is leaking outside the section [paste CSS]. Scope it to a single root selector without breaking the existing styles. Output the corrected CSS.
My JSON-LD schema is failing validation [paste error from validator.schema.org]. Identify the specific field causing the error and output the corrected schema. Do not change unrelated fields.
My CLS score is [X]. Identify which elements are causing layout shift in this HTML [paste]. Propose specific fixes ordered by impact. Do not introduce other regressions.
My form submission is silently failing. Here is the form HTML [paste] and the network response [paste]. Diagnose the failure. Propose the fix with a test plan.
My page LCP is [X seconds] which is too slow. Lighthouse identifies [element] as the LCP. Audit the loading strategy for that element and propose specific fixes.
My Shopify Liquid section is throwing this error [paste]. Identify the specific syntax error. Output the corrected Liquid. Note any unsafe patterns I should avoid in future.
My React component is re-rendering on every keystroke when it should not. Component code [paste]. Identify the cause (likely stale closure, missing memo, or bad dependency array). Output the fix.
My A/B test is showing wildly inconsistent results day-to-day. The traffic pattern is [describe]. Diagnose whether this is real noise, instrumentation error, or sample contamination. Recommend next steps.
[Opus] My landing page converts at half the rate of my competitors despite higher quality traffic. The page is [URL]. Audit holistically: positioning, offer, copy, design, friction. Output the diagnosis and the single highest-leverage change.
Copy these prompts into a markdown file at /prompts/claude-landing-pages.md in your project. Reference them by number in conversations: "Run prompt 14 on this feature section." Pair with your Custom Skills from Module 5 to compress prompts further.
Five production-ready SKILL.md files. Copy each into its own directory (filename: SKILL.md), zip the directory, and upload via Claude.ai > Customize > Skills, or drop into .claude/skills/[skill-name]/ for Claude Code. Each skill triggers automatically when its description matches your request.
The master skill that builds complete single-file HTML landing pages following the DVA pattern. Triggers on any landing page request.
---
name: landing-page-builder
description: Build conversion-optimized single-file HTML landing pages with hero, features, pricing, FAQ, and CTA. Triggers when user asks for a landing page, sales page, marketing page, product page, lead capture page, or any single-page conversion asset.
---
# Landing Page Builder Skill
## When to use this skill
Use whenever the user asks for a landing page, sales page, marketing page, product launch page, squeeze page, opt-in page, or any single-page conversion asset.
## Output structure
Every landing page produced by this skill must have these sections in this order:
1. **Hero** — Headline (under 10 words), subhead (under 20 words), primary CTA, optional secondary CTA
2. **Trust bar** — Customer logos, certifications, or one-line proof points
3. **Three feature blocks** — Each leading with a concrete outcome, not a feature name
4. **Social proof** — One specific testimonial OR one specific result metric (placeholders OK if real data missing)
5. **Pricing or offer** — One clear offer with explicit pricing
6. **Three-question FAQ** — Real objections, real answers
7. **Final CTA** — Same primary action as the hero
## Hard rules
- Single file with inline CSS. No external dependencies.
- Mobile-first responsive: 375px / 768px / 1200px breakpoints.
- WCAG 2.1 AA compliant: focus rings, semantic HTML, alt text on every image.
- Self-hosted system fonts only. No Google Fonts. No external CDN.
- Never use AI-cliche phrases: revolutionary, game-changer, unlock, elevate, level up, supercharge, next-gen, harness, leverage.
- Never invent statistics, customer counts, certifications, or testimonial quotes.
- Mark uncertain facts as [needs verification] rather than fabricating.
## Required structured data
Every page must include these in the <head>:
- <title> under 60 characters
- <meta name="description"> under 160 characters
- Open Graph tags: og:type, og:title, og:description, og:image, og:url, og:site_name
- Twitter Card: twitter:card=summary_large_image, twitter:title, twitter:description, twitter:image
- <link rel="canonical">
- One JSON-LD schema appropriate to page type (Product, Service, Event, WebPage)
## Tone
Confident. Specific. Direct. No superlatives. No urgency theater. No fake scarcity. Lead with concrete claims, not adjectives.
## Output discipline
After generating the page, append a 3-line summary:
1. What the page is selling
2. The primary conversion goal
3. One thing you intentionally left out (with rationale)
## Anti-patterns to reject
- Hero stat cards with invented numbers
- Generic testimonials like "This changed my life!"
- Feature lists that just repeat the product name
- "As seen in" sections with no actual logos
- Countdown timers for fake urgency
Encodes your brand voice, banned phrases, palette, and typography so every copy and design request stays on-brand without re-explanation.
---
name: brand-voice
description: Apply [BRAND NAME] brand voice, banned phrases, palette, typography, and tone rules to any copy, code, or design output. Triggers on any creative or design request including copy writing, landing pages, social posts, emails, and visual design.
---
# [BRAND NAME] Brand Voice Skill
## When to use this skill
Use whenever generating copy, code, or design for [BRAND NAME]. Applies to landing pages, blog posts, social posts, emails, ads, and any branded asset.
## Brand identity
- **Name:** [BRAND NAME]
- **Positioning:** [one-sentence positioning statement]
- **Audience:** [primary audience description]
- **Tone:** [3 tone adjectives, e.g., confident, specific, warm]
## Visual system
- **Primary color:** #[hex]
- **Accent color:** #[hex]
- **Background:** #[hex]
- **Text:** #[hex]
- **Display font:** [font name], [weight]
- **Body font:** [font name], [weight]
## Banned phrases (never use)
- "Revolutionary"
- "Game-changer"
- "Unlock"
- "Elevate"
- "Level up"
- "Supercharge"
- "Harness the power of"
- "Leverage"
- "Best-in-class"
- "World-class"
- "Cutting-edge"
- [Add brand-specific banned phrases]
## Required claims (always include where relevant)
- [Certification or guarantee 1]
- [Certification or guarantee 2]
- [Differentiator 1]
## Forbidden claims (never use)
- [Any claim the brand cannot back, e.g., "the best", "fastest", "only"]
- Any statistic without a source
## Voice characteristics
- Lead with concrete outcomes, not features
- Use specific numbers when available; mark [needs verification] when uncertain
- Write in active voice
- Short sentences. Vary length.
- Address the reader directly: "you", "your"
- Avoid corporate hedging: "we believe", "we think"
## Photography and imagery
- Style: [editorial / lifestyle / product / abstract / etc.]
- Subjects: [what to show]
- Avoid: [what not to show]
- Color treatment: [warm / cool / neutral / brand-tinted]
## Quality gate
Before finalizing any output, verify:
- Zero banned phrases used
- All claims are concrete and backable
- Palette and typography match the visual system
- Tone is consistent with the 3 tone adjectives
Applies proven conversion frameworks (PAS, AIDA, StoryBrand) on demand. Triggers on copy refinement and CRO requests.
---
name: conversion-framework
description: Apply proven conversion copywriting frameworks (PAS, AIDA, StoryBrand 7-part, BAB) to landing page copy, sales pages, and CRO refinements. Triggers when user mentions conversion, CRO, sales copy, persuasion, or asks to apply a named framework.
---
# Conversion Framework Skill
## When to use this skill
Trigger whenever the user mentions:
- Conversion rate optimization (CRO)
- Sales copy
- Persuasive writing
- A named framework: PAS, AIDA, StoryBrand, BAB, FAB
## Frameworks supported
### 1. PAS (Problem - Agitate - Solve)
Best for: pain-driven categories (back pain, anxiety, money loss, time waste).
Structure:
1. **Problem (60-80 words):** Name the specific problem in the buyer's own words.
2. **Agitate (80-120 words):** Twist the knife. Make the cost of inaction concrete.
3. **Solve (100-150 words):** Present the solution. Show the mechanism. Address the strongest objection.
### 2. AIDA (Attention - Interest - Desire - Action)
Best for: considered purchases where you need to build interest before asking for action.
Structure:
1. **Attention (hero):** Stop the scroll. Headline must promise a specific outcome.
2. **Interest (next 1-2 sections):** Make them want to keep reading. Hint at the how.
3. **Desire (proof + features):** Show the outcome is real and achievable.
4. **Action (final CTA):** Single clear next step with no friction.
### 3. StoryBrand 7-Part
Best for: service businesses, SaaS, anything where the customer needs a guide.
Structure:
1. **Character:** The customer with a desire
2. **Problem:** What stands in their way (external, internal, philosophical)
3. **Guide:** The brand, positioned as the experienced helper (not hero)
4. **Plan:** 3-step path that makes the journey feel achievable
5. **Call to Action:** Direct (buy) and transitional (free resource)
6. **Success:** What life looks like when they win
7. **Failure:** What life looks like if they don't act
### 4. BAB (Before - After - Bridge)
Best for: transformation-led products (fitness, learning, financial).
Structure:
1. **Before:** Their current frustrating reality
2. **After:** The specific better state
3. **Bridge:** Your product as the path
## How to apply
1. Ask which framework if not specified (default: PAS for cold traffic, StoryBrand for warm).
2. Identify the customer's actual problem in their own language (use customer reviews if available).
3. Generate the copy structure first, then fill in specifics.
4. Verify no framework artifacts leak into the copy (no "Problem:" / "Solve:" headers).
5. Output the framework name used at the bottom for reference.
## Forbidden
- Inventing pain points the audience doesn't actually have
- Using framework jargon in the customer-facing copy
- Manipulative urgency or false scarcity
- Generic "are you tired of..." openers
Generates valid, validated JSON-LD schemas for any landing page. Covers Product, Service, FAQPage, HowTo, Article, VideoObject, BreadcrumbList, WebPage with speakable.
---
name: jsonld-generator
description: Generate validated JSON-LD structured data schemas for landing pages including Product, Service, FAQPage, HowTo, Article, VideoObject, BreadcrumbList, and WebPage with speakable. Triggers on schema, JSON-LD, structured data, rich results, or schema.org requests.
---
# JSON-LD Schema Generator Skill
## When to use this skill
Trigger whenever the user mentions: schema, JSON-LD, structured data, rich results, schema.org, or asks for any of the supported schema types.
## Schemas supported
### Product
Required fields: @context, @type, name, description, image, brand
Recommended: offers (with price, priceCurrency, availability, priceValidUntil), aggregateRating, review, sku, gtin
Pin @id to: {canonical_url}#product
### Service
Required: @context, @type, name, provider
Recommended: serviceType, areaServed, offers, hasOfferCatalog
Pin @id to: {canonical_url}#service
### FAQPage
Required: @context, @type, mainEntity (array of Question objects)
Each Question requires: @type, name, acceptedAnswer.text
Pin @id to: {canonical_url}#faq
### HowTo
Required: @context, @type, name, step (array of HowToStep)
Recommended: description, totalTime, estimatedCost, tool, supply
Pin @id to: {canonical_url}#howto
### Article
Required: @context, @type, headline, image, datePublished, author, publisher
Recommended: dateModified, mainEntityOfPage, articleSection, wordCount
Pin @id to: {canonical_url}#article
### VideoObject
Required: @context, @type, name, description, thumbnailUrl, uploadDate
Recommended: contentUrl, embedUrl, duration (ISO 8601), publisher
Pin @id to: {canonical_url}#video
### BreadcrumbList
Required: @context, @type, itemListElement (array of ListItem with position, name, item)
Pin @id to: {canonical_url}#breadcrumb
### WebPage with SpeakableSpecification
Required: @context, @type=WebPage, url, name
For voice search: speakable: { @type: SpeakableSpecification, cssSelector: [".speakable-summary", ".speakable-answer"] }
Pin @id to: {canonical_url}#webpage
## Output rules
1. Use schema.org as @context for all schemas
2. Always pin @id values with hash fragments to the canonical URL
3. Reference Organization and Person via @id (don't redefine in every schema)
4. Output each schema in a separate <script type="application/ld+json"> block
5. Validate the JSON parses before outputting (mentally walk the bracket count)
## Quality gate
Before finalizing, verify:
- Every required field is filled (no placeholder strings)
- @id values are unique within the page
- Cross-schema references via @id resolve to schemas on this or other pages
- Image URLs are absolute (not relative)
- All dates use ISO 8601 format
- No invented data (mark uncertain values as [needs verification])
## What NOT to do
- Don't duplicate Organization or WebSite if they exist elsewhere on the site (theme-level)
- Don't include schemas that have no on-page representation
- Don't include speakable spec without matching CSS classes in the HTML
- Don't fabricate aggregateRating, review counts, or similar trust signals
Generates working email service provider integrations (Klaviyo, Mailchimp, ConvertKit, Beehiiv, SendGrid) with proper field mapping and error handling.
---
name: esp-integration
description: Generate working form integrations for major email service providers (Klaviyo, Mailchimp, ConvertKit, Beehiiv, SendGrid, Resend) with proper field mapping, validation, error handling, and success states. Triggers on email signup, lead capture, opt-in form, or named ESP requests.
---
# ESP Integration Generator Skill
## When to use this skill
Trigger whenever the user mentions: email signup, newsletter form, lead capture, opt-in, list builder, or a specific ESP by name (Klaviyo, Mailchimp, ConvertKit, Beehiiv, SendGrid, Resend, Brevo, ActiveCampaign).
## ESPs supported
### Klaviyo
- Endpoint: https://manage.kmail-lists.com/ajax/subscriptions/subscribe
- Required: g (list ID), email
- Auth: public list ID (no API key on frontend)
- CORS: yes
- Pattern: POST with URL-encoded body
### Mailchimp
- Endpoint: https://[dc].api.mailchimp.com/3.0/lists/[list_id]/members
- Auth: API key required (USE SERVER-SIDE PROXY)
- CORS: server-side only
- Pattern: POST JSON, basic auth header
### ConvertKit
- Endpoint: https://api.convertkit.com/v3/forms/[form_id]/subscribe
- Auth: form-level API key (public, lower-risk)
- CORS: yes
- Pattern: POST JSON with api_key
### Beehiiv
- Endpoint: https://api.beehiiv.com/v2/publications/[pub_id]/subscriptions
- Auth: API key (USE SERVER-SIDE PROXY)
- CORS: server-side only
- Pattern: POST JSON, bearer auth
### Resend (for transactional)
- Use for thank-you emails post-signup, not for list management
- Endpoint: https://api.resend.com/emails
- Auth: API key (server-side only)
## Output structure
For every ESP integration, produce:
1. **HTML form** with semantic markup
- <label> for every input (or aria-label)
- Type-appropriate inputs (email type for email, etc.)
- Required attribute on required fields
- Honeypot field for spam (hidden, non-tab, non-screen-reader)
2. **JavaScript handler** with:
- preventDefault on submit
- Client-side validation
- Loading state (disable button, show spinner)
- Success state (replace form with thank-you message)
- Error state (display human-readable error, allow retry)
- Analytics event dispatch on success
3. **Success state** that:
- Replaces the form (don't just hide it)
- Confirms the action ("Check your inbox")
- Optional: triggers a tracking pixel or analytics event
4. **Privacy compliance**
- Consent checkbox if EU/UK traffic
- Link to privacy policy
- GDPR-compliant data handling note for server-side integrations
## Hard rules
- NEVER hardcode API keys in client-side code
- For ESPs requiring server-side auth, output a serverless function pattern (Vercel, Netlify, Cloudflare Workers)
- Always include rate-limit handling
- Always handle network errors gracefully
- Always send a confirmation event to GA4 or equivalent
## Quality gate
- Form has proper labels and ARIA
- Loading state is visible and accessible
- Error messages are human-readable (not "Error 422")
- Success state confirms the action with specifics
- No API keys exposed in network tab
For each skill: create a folder named after the skill (e.g., landing-page-builder/), paste the SKILL.md content into a file named exactly SKILL.md inside that folder, then either zip and upload via Claude.ai > Customize > Skills, or drop the unzipped folder into ~/.claude/skills/ for Claude Code. Restart your Claude Code session after dropping in new skills.
Eight tested section patterns covering the most common landing page jobs. Each template is a structure to ask Claude for by name. Use them as starting points and adapt to your offer.
Hero, three features, social proof, pricing, FAQ, final CTA. The default structure for a single offer.
Story-driven scrolling page with PAS framework, multiple proof sections, comparison, FAQ, guarantee, multiple CTAs throughout.
Hero with demo CTA, feature matrix, three-tier pricing with monthly/annual toggle, FAQ, enterprise contact path.
Single focused page: hero, one-line value prop, single form (email only or email + name), social proof, privacy reassurance.
Hero with date/time, agenda, speaker bios, audience match check, FAQ, single registration form. Calendar integration option.
Hero with phone mockup, feature cards with screenshots, App Store/Play Store badges, ratings display, FAQ, sticky download bar on mobile.
Hero with service area, services grid, before/after gallery, testimonials with location, hours and contact, booking form, map integration.
Single-column mobile-first page: avatar, bio, 5-10 link buttons, contact CTA. Loads in under 500ms. Replaces a Linktree for ~$5/year.
To invoke a template by name in any Claude conversation, use this pattern:
Build a landing page using Template 03 (SaaS Tiered Pricing) from the DVA Claude Landing Pages masterclass.
Product: [your product]
Audience: [your audience]
Three tiers: [Starter $19, Pro $49, Enterprise contact-us]
Primary CTA: [Start free trial / Book demo / Buy now]
Brand: [palette, fonts, tone]
Follow the structure exactly. Apply our brand voice skill. Output as a single HTML file with inline CSS.
Eight axes that matter when picking which Claude surface to use for a landing page job. No single surface wins on every axis. Pick the one that wins on the axes that matter most for your situation.
| Axis | Chat + Artifacts | Claude Code | Claude Design | API |
|---|---|---|---|---|
| Time to first page | Best (~5 min) | Medium (~30 min setup) | Good (~10 min) | Slowest (~1 hour code setup) |
| Multi-file projects | Poor | Best | Poor | Good (with custom code) |
| Visual exploration | Good (HTML preview) | Poor (no preview) | Best (canvas) | None |
| Cost discipline | Subscription flat fee | Subscription flat fee | Subscription flat fee | Best (per-token) |
| Repeatability | Medium (Projects help) | Best (Skills + slash commands) | Medium (DESIGN.md helps) | Best (full code control) |
| Repo / Git integration | None | Best | None | Custom |
| Brand consistency | Good (with Project context) | Best (CLAUDE.md + Skills) | Good (DESIGN.md) | Best (you control system prompt) |
| Skill level required | Anyone | Terminal-comfortable | Anyone | Developer |
Run every item before any landing page ships. If you cannot tick every box, the page is not ready. No exceptions. Print this or paste into your project's CHECKLIST.md.
The DDS Vibe Academy ships new masterclasses on AI-first development, headless commerce, and synthetic-employee architectures. Return to the hub for the full library or dive into the companion Hydrogen masterclass for headless Shopify.