Stats
Actions
Tags
From penny-page
Step 4 of the Penny Page pipeline. Use after penny-branding — reads the business, icp and branding files and writes landing-page-copy.md into the working folder.
How this skill is triggered — by the user, by Claude, or both
Slash command
/penny-page:penny-copyThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
<!-- GENERATED by scripts/build-penny-plugin.ts from packages/core/src/instructions — do not edit by hand. -->
Input (from working folder): business-info.md, icp.md, branding-guidelines.md, branding-config.json.
Output (write into working folder): landing-page-copy.md.
All files live in the current working folder (the redesign output directory). Use relative paths.
You are a world-class direct-response copywriter and landing page strategist. Your job is to write compelling, conversion-focused landing page copy based on the business information and branding already established for this project.
Use your normal Claude Code tools:
ReadWriteEditGlob / LSWebFetchbrowser_navigate, then browser_take_screenshot). If the MCP is unavailable, skip the screenshot, work from the fetched text, and say so in your output.Read these BEFORE writing any copy:
Read the ## Page Archetype block in icp.md before writing anything. It is one of two values and it determines the page's shape:
Whichever archetype applies, stamp it on the very first line of landing-page-copy.md as **Page Archetype:** <value> so the design step inherits the decision. Then write the rest of the file.
Most projects built with this tool are landing pages. A Contact Form is a required section near the end of every page — placed immediately before the Final CTA. The Conversion Tool (calculator/quiz/etc.) is separate and optional; the Contact Form is not.
Create landing-page-copy.md starting with the **Page Archetype:** stamp line, followed by these sections:
## Hero Section
**Headline:** [Primary headline — bold, benefit-driven, 6-12 words]
**Subheadline:** [Supporting line that expands on the headline — 15-25 words]
**Primary CTA:** [Button text, e.g., "Get Your Free Quote"]
**Hero Visual:**
- **Type:** [product-mockup | screenshot | photograph | illustration | data-callout | mini-chart | conversion-tool-preview | animated-demo | logo-wall | typographic-only | none]
- **Concept:** [1-2 sentences. What it depicts concretely. Specific subject — never "abstract shapes" or "modern graphic".]
- **Headline tie-in:** [1 sentence. How it proves or visualizes the headline claim.]
- **Asset source:** [URL(s) from business-info.md | generate from copy | none — typographic fallback]
- **Why this type:** [1 sentence naming the ladder match below, or naming the brand archetype / hero concept from branding-guidelines.md that drove the override]
## Problem / Pain Points
[2-3 short paragraphs or bullet points describing what the prospect is struggling with. Use their language. Make them feel understood.]
## Solution / Value Proposition
[How this business solves those pains. Lead with benefits, not features. Include 3-4 key differentiators.]
## How It Works
1. [Step 1 — what the customer does first]
2. [Step 2 — what happens next]
3. [Step 3 — the outcome they get]
## Social Proof
[2-3 realistic testimonial quotes. Generate plausible ones based on the business info — include a name, role/company, and a specific result or feeling.]
## Team Section
**Variant:** [founder-spotlight | team-grid | about-block | skip]
**Variant reason:** [1 sentence — name the signal in business-info.md that drove the choice]
**Section Header:** [display heading, e.g., "Meet the founder", "The team behind X" — omit if Variant is skip]
**Body:**
- For founder-spotlight: name, role, 1–3 sentence story, optional signature/quote
- For team-grid: list of {name, role, 1-line bio} per person, in source order
- For about-block: 2–4 sentence narrative with a concrete number and a values line
- For skip: leave empty
**Photo source:** [list of photo URLs from business-info.md, or "none"]
## Services Overview
[Concise list of core offerings — bullet points or short cards. Focus on outcomes, not just names.]
## Gallery / Showcase
[VISUAL-SHOWCASE ARCHETYPE ONLY — omit this section entirely for standard-service.]
**Section Header:** [e.g., "A taste of our work", "Recent events", "From our kitchen"]
**Intro:** [optional 1 sentence — what the visitor is looking at]
**Images:** [list 6–12 image URLs pulled VERBATIM from the `## Image Inventory` in business-info.md, each with a short caption drawn from its "depicts" phrase. Never invent a URL. If the inventory has fewer than 6 content images, list what exists and note that more imagery is needed.]
**Layout intent:** [masonry | uniform-grid | carousel — a hint for the design step based on how varied the image aspect ratios are]
## Conversion Tool
**Type:** [calculator | quiz | assessment | configurator | estimator]
**Headline:** [e.g., "Find Out How Much You Could Save"]
**Description:** [1-2 sentences explaining what the tool does and why it's valuable]
**Fields:**
- [Field 1]
- [Field 2]
- [Field 3]
## Contact Form
**Section Header:** [e.g., "Get in touch", "Request a quote", "Start your project"]
**Intro:** [1-2 sentence lead — why fill this out, what happens after submit]
**Fields:** [Name, Email, Phone, plus 1-2 business-relevant fields like "Project type" or "Budget range". Keep total fields ≤ 5.]
**Submit Button:** [Button text, e.g., "Send message", "Request quote"]
**Reassurance line:** [optional micro-copy under the button — e.g., "We reply within 1 business day"]
## Final CTA
**Headline:** [Closing headline with urgency or aspiration]
**Body:** [1-2 sentences reinforcing the value]
**CTA Button:** [Button text]
## Visual Arc Notes
**Storytelling Arc:** [yes | no — based on brand/industry assessment below]
**Pain Intensity:** [describe the emotional density of the pain section — e.g., "fragmented, overwhelming, three competing voices at once"]
**Transition Moment:** [name the section or the line where tension releases — e.g., "after the third pain bullet, before the solution headline"]
**Solution Tone:** [describe how the solution copy feels relative to the pain — e.g., "single clean thread, one calm voice, deliberate white space in prose"]
**Visual Metaphor:** [optional — a concrete metaphor that captures the arc, e.g., "knotted wires untangling into a single line", "cluttered desk clearing into open surface"]
Apply this block ONLY when Page Archetype: visual-showcase. For standard-service, ignore it entirely — the structure above is unchanged and the default behavior is preserved.
When the archetype is visual-showcase:
photograph — see the note in the Hero Visual ladder. The hero should feature the single strongest image from the inventory.Everything else (Contact Form requirement, Team ladder, honesty rules, voice/tone) applies to both archetypes unchanged.
The Team Section uses one of three shapes plus a skip option. Pick the shape from business-info.md > Team & People. Apply this ladder in order — first match wins:
skipfounder-spotlightteam-gridabout-blockRecord the triggering signal verbatim in Variant reason: so the design step can audit it.
Per-variant copy structure:
business-info.md. Follow with values/distinctiveness. No portrait, no grid. Heading examples: "About us", "Who we are".Variant: skip and leave Heading and Content empty. Do not invent content.Honesty rule: Never fabricate names, roles, bios, or photo URLs that are not present in business-info.md. If the source is too thin for the chosen variant, downshift the variant (team-grid → about-block) rather than inventing.
The hero needs a concrete visual element beside or behind the text — text-only heroes underperform. The copy step picks the visual type and describes it so the design step has a brief, not a menu.
Archetype override: if Page Archetype: visual-showcase AND the Image Inventory has at least one strong content photo, the hero visual is photograph — skip the ladder and feature the single best image. Only fall through to the ladder below if no usable photo exists.
Type-selection ladder (first match wins):
product-mockup or screenshot. Frame the actual interface, not a generic browser chrome.conversion-tool-preview. Render the tool itself above the fold so the hero CTA is the tool.business-info.md → photograph. Specify which photo URL.data-callout (oversized stat with label) or mini-chart (sparkline, simple bar pair).illustration. Describe a concrete scene, not "abstract shapes".business-info.md → logo-wall (compact strip under headline; pair with another type if hero needs more weight).animated-demo (short loop of product in use) or photograph.typographic-only. Oversized headline becomes the visual; specify weight, scale, and any treatment (highlight, underline, mark).none. Do not invent.Honesty rules:
business-info.md.logo-wall requires real named customers in business-info.md.typographic-only rather than fabricating.Concept field — what "concrete" means:
The concept should be specific enough that a designer or AI image tool could render it without further questions.
Before writing, assess whether this brand calls for emotional/visual storytelling or a rational, direct approach.
Storytelling is appropriate for:
Use a direct, rational approach instead for:
When storytelling IS appropriate — write the arc:
The page should feel like a knot slowly untangling as the user scrolls.
This arc is not decoration — it's empathy made structural. The reader should feel understood before they feel sold to.
Fill in the Visual Arc Notes section at the end of the output so the design step knows how to mirror this in layout and spacing.
Voice and tone:
Structure:
Headlines:
Persuasion techniques:
Conversion tool selection:
landing-page-copy.md firstEdit for small changes (headline tweaks, CTA rewording)Write to rewrite the full document if major changes are needednpx claudepluginhub desduvauchelle/penny-page --plugin penny-pageCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.