@withmata/blueprints 0.3.4 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/skills/audit/SKILL.md +4 -4
- package/.claude/skills/blueprint-catalog/SKILL.md +17 -7
- package/.claude/skills/copywrite/SKILL.md +187 -0
- package/.claude/skills/copywrite-landing/SKILL.md +489 -0
- package/.claude/skills/design-system/SKILL.md +970 -0
- package/.claude/skills/new-project/SKILL.md +168 -112
- package/.claude/skills/scaffold-auth/SKILL.md +9 -9
- package/.claude/skills/scaffold-db/SKILL.md +14 -14
- package/.claude/skills/scaffold-env/SKILL.md +4 -4
- package/.claude/skills/scaffold-foundation/SKILL.md +15 -15
- package/.claude/skills/scaffold-tailwind/SKILL.md +17 -3
- package/.claude/skills/scaffold-ui/SKILL.md +155 -36
- package/ENGINEERING.md +2 -2
- package/blueprints/discovery/design-system/BLUEPRINT.md +1479 -0
- package/blueprints/discovery/marketing-copywriting/BLUEPRINT.md +664 -0
- package/blueprints/features/auth-better-auth/BLUEPRINT.md +20 -22
- package/blueprints/features/db-drizzle-postgres/BLUEPRINT.md +12 -12
- package/blueprints/features/db-drizzle-postgres/files/db/src/example-entity.ts +1 -1
- package/blueprints/features/db-drizzle-postgres/files/db/src/scripts/seed.ts +1 -1
- package/blueprints/features/env-t3/BLUEPRINT.md +1 -1
- package/blueprints/features/tailwind-v4/BLUEPRINT.md +9 -2
- package/blueprints/features/tailwind-v4/files/tailwind-config/shared-styles.css +80 -1
- package/blueprints/features/ui-shared-components/BLUEPRINT.md +411 -78
- package/blueprints/features/ui-shared-components/files/ui/components/ui/alert-dialog.tsx +192 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/avatar.tsx +71 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/badge.tsx +52 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/breadcrumb.tsx +122 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/button.tsx +56 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/card-select.tsx +72 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/card.tsx +100 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/collapsible.tsx +34 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/combobox.tsx +301 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/dropdown-menu.tsx +264 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/empty-state.tsx +43 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/entity-select.tsx +110 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/field.tsx +237 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/form-field.tsx +217 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/input-group.tsx +161 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/input.tsx +20 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/label.tsx +20 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/org-switcher.tsx +114 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/page-header.tsx +45 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/pagination.tsx +52 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/pill-select.tsx +151 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/popover.tsx +41 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/search-input.tsx +49 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/select.tsx +205 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/selected-entity-card.tsx +47 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/separator.tsx +25 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/sidebar.tsx +389 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/status-filter.tsx +43 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/tag-input.tsx +131 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/textarea.tsx +18 -0
- package/blueprints/features/ui-shared-components/files/ui/components/ui/user-menu.tsx +149 -0
- package/blueprints/features/ui-shared-components/files/ui/components.json +11 -8
- package/blueprints/features/ui-shared-components/files/ui/package.json +20 -11
- package/blueprints/foundation/monorepo-turbo/BLUEPRINT.md +19 -20
- package/blueprints/foundation/monorepo-turbo/files/root/package.json +1 -1
- package/dist/index.js +241 -100
- package/package.json +1 -1
- package/blueprints/features/tailwind-v4/files/tailwind-config/package.json +0 -20
- package/blueprints/foundation/monorepo-turbo/files/root/pnpm-workspace.yaml +0 -5
|
@@ -0,0 +1,489 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: copywrite-landing
|
|
3
|
+
description: Write high-converting landing page copy with CRO frameworks, traffic source matching, and psychology-backed annotations
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Write Landing Page Copy
|
|
7
|
+
|
|
8
|
+
Write high-converting copy for landing pages and homepages — the highest-stakes conversion pages. This is a deeper, more rigorous version of `/copywrite`, tailored specifically for pages where every word directly impacts revenue. It applies CRO frameworks, traffic source matching, objection mapping, and awareness-level calibration to produce copy that converts.
|
|
9
|
+
|
|
10
|
+
This skill covers landing pages and homepages. For other marketing pages (pricing, about, features, careers, changelog), redirect to `/copywrite`.
|
|
11
|
+
|
|
12
|
+
## Step 1: Read the Blueprint
|
|
13
|
+
|
|
14
|
+
Read the full copywriting blueprint:
|
|
15
|
+
|
|
16
|
+
```
|
|
17
|
+
~/.withmata/blueprints/blueprints/discovery/marketing-copywriting/BLUEPRINT.md
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
If not found, run `npx @withmata/blueprints` to install.
|
|
21
|
+
|
|
22
|
+
The BLUEPRINT.md contains the complete methodology: page-type section sequences, copywriting frameworks, psychology principles, and the Seven Sweeps editing process. Follow it precisely.
|
|
23
|
+
|
|
24
|
+
## Step 2: Read Context
|
|
25
|
+
|
|
26
|
+
Check if `.project-context.md` exists in the target project root. If it contains a `## Product Discovery` section, read the product docs:
|
|
27
|
+
|
|
28
|
+
- `docs/product/product-thesis.md` — for pillars, positioning, value prop
|
|
29
|
+
- `docs/product/product-brief.md` — for competitive landscape, differentiation
|
|
30
|
+
- `docs/product/users/archetype-*.md` — for customer language, pain points, desires, "In Their Voice" quotes
|
|
31
|
+
|
|
32
|
+
Map discovery findings to copywriting context:
|
|
33
|
+
|
|
34
|
+
- Product thesis pillars become the key benefits to emphasize
|
|
35
|
+
- Archetype "Their World" + "The Problem in Their Words" become problem/pain section content
|
|
36
|
+
- Archetype "What They Care About Most" drives benefit prioritization
|
|
37
|
+
- Competitive landscape informs differentiation claims, objection handling, and "why us vs. alternatives" sections
|
|
38
|
+
- "In Their Voice" quotes supply customer language to weave into copy
|
|
39
|
+
|
|
40
|
+
If no product docs exist, note what context is missing. Gather it conversationally in Step 3.
|
|
41
|
+
|
|
42
|
+
## Step 3: Understand the Landing Page
|
|
43
|
+
|
|
44
|
+
Ask these questions. Skip any already answered by product docs. Present pre-filled answers from discovery and confirm before moving on.
|
|
45
|
+
|
|
46
|
+
### Standard Context Questions
|
|
47
|
+
|
|
48
|
+
1. **"What page are you writing?"** — This skill handles two types:
|
|
49
|
+
- **Landing page** — single message, single CTA, one conversion action. Built for a specific campaign, traffic source, or audience segment.
|
|
50
|
+
- **Homepage** — serves multiple audiences, multiple paths. The "front door" of the product.
|
|
51
|
+
|
|
52
|
+
2. **"Who's the audience for THIS specific page?"** — Pre-fill from archetypes if available. For landing pages, this should be one specific segment, not "everyone."
|
|
53
|
+
|
|
54
|
+
3. **"What tone fits?"** — casual/conversational, professional but friendly, technical/precise, playful/bold. Derive from product docs if brand voice is defined.
|
|
55
|
+
|
|
56
|
+
4. **"Any specific content that MUST be included?"** — e.g., a launch date, a specific feature, a partnership announcement, regulatory disclaimers.
|
|
57
|
+
|
|
58
|
+
### Landing-Page-Specific Questions
|
|
59
|
+
|
|
60
|
+
5. **"Where is traffic coming from?"** — This determines headline matching.
|
|
61
|
+
- **Paid ads (Google, Meta, LinkedIn)** — headline must match ad copy closely
|
|
62
|
+
- **Organic search** — headline should include the keyword/intent
|
|
63
|
+
- **Email campaigns** — headline should match the email subject/promise
|
|
64
|
+
- **Social media** — headline should match the hook
|
|
65
|
+
- **Product Hunt / launch** — headline should match the tagline
|
|
66
|
+
- **Direct / word of mouth** — broadest value proposition
|
|
67
|
+
- **Multiple sources** — identify the primary source; note secondary sources for variation headlines
|
|
68
|
+
|
|
69
|
+
*Why this matters: Message match between the traffic source and the landing page headline is one of the highest-impact CRO factors. When the visitor sees what they expected, bounce rate drops dramatically. When there's a disconnect, they leave in seconds.*
|
|
70
|
+
|
|
71
|
+
6. **"What's the SINGLE conversion action?"** — One page, one goal.
|
|
72
|
+
- Start free trial
|
|
73
|
+
- Book a demo
|
|
74
|
+
- Join waitlist
|
|
75
|
+
- Download resource
|
|
76
|
+
- Create account
|
|
77
|
+
- Contact sales
|
|
78
|
+
|
|
79
|
+
*Why one: Every additional CTA reduces conversion on the primary action. Hick's Law — more choices, slower decisions, more abandonment. The entire page builds ONE argument toward ONE decision.*
|
|
80
|
+
|
|
81
|
+
7. **"What's the visitor's awareness level?"** — Eugene Schwartz's five levels of awareness:
|
|
82
|
+
- **Unaware** — doesn't know they have the problem. Lead with the problem, not the solution. The page must create recognition before it can offer resolution.
|
|
83
|
+
- **Problem-aware** — knows the problem, doesn't know solutions exist. Lead with empathy and pain amplification, then reveal the solution as the natural next step.
|
|
84
|
+
- **Solution-aware** — knows solutions exist, evaluating options. Lead with differentiation. Why THIS solution over alternatives they're already considering?
|
|
85
|
+
- **Product-aware** — knows YOUR product, needs a reason to act now. Lead with proof, urgency, and risk reversal. They don't need education, they need confidence.
|
|
86
|
+
- **Most-aware** — ready to buy, needs the right offer. Lead with the CTA and the deal. Get out of the way.
|
|
87
|
+
|
|
88
|
+
*Why this matters: The awareness level determines how much education the page needs to do before asking for action. An unaware visitor needs the full 9-section sequence. A most-aware visitor might just need hero + social proof + CTA. Writing a long educational page for someone ready to buy wastes their attention. Writing a short CTA-focused page for someone who doesn't know the problem exists will bounce them immediately.*
|
|
89
|
+
|
|
90
|
+
8. **"What are the top 3 objections a visitor would have?"** — Pre-fill from competitive landscape if available. Common objections:
|
|
91
|
+
- "Is this worth the price?"
|
|
92
|
+
- "Will this work for my specific situation?"
|
|
93
|
+
- "Is it hard to set up / switch from what I use now?"
|
|
94
|
+
- "Can I trust this company?"
|
|
95
|
+
- "What if I don't like it?"
|
|
96
|
+
- "Is this really different from [competitor]?"
|
|
97
|
+
- "Do I need this right now?"
|
|
98
|
+
|
|
99
|
+
Probe: "Think about what would make someone hesitate right before clicking the CTA. What stops them?"
|
|
100
|
+
|
|
101
|
+
9. **"Is there a specific offer?"** — free trial length, discount, bonus, guarantee, limited-time deal. If no offer exists, note this as a CRO gap to flag later.
|
|
102
|
+
|
|
103
|
+
If product docs exist, present a summary of what you pulled and ask: "Here's what I'm working from — [summarize context]. Anything to adjust or add?"
|
|
104
|
+
|
|
105
|
+
## Step 4: Build the Objection Map
|
|
106
|
+
|
|
107
|
+
Before writing any copy, create an explicit objection map. This is the strategic backbone of the page — every objection must be addressed before the visitor reaches the final CTA.
|
|
108
|
+
|
|
109
|
+
```
|
|
110
|
+
## Objection Map
|
|
111
|
+
|
|
112
|
+
| Objection | Where Addressed | How |
|
|
113
|
+
|-----------|----------------|-----|
|
|
114
|
+
| "Is it worth the price?" | Pricing section + ROI testimonial | Show value vs. cost, comparison to alternatives, "pays for itself in X" framing |
|
|
115
|
+
| "Will it work for me?" | How It Works + Use cases | Show 3 scenarios matching their industry/role, specificity builds confidence |
|
|
116
|
+
| "Is it hard to switch?" | How It Works step 1 | "Import your data in one click" — reduce perceived effort to near zero |
|
|
117
|
+
| "Can I trust them?" | Social proof + Testimonials | Logos, review scores, attributed quotes with name + role + photo |
|
|
118
|
+
| "What if I don't like it?" | Near final CTA | "30-day money-back guarantee, no questions asked" — risk reversal |
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
Present this to the user: "Here's how I plan to address each objection throughout the page. Any objections missing? Any that feel more important than I've ranked them?"
|
|
122
|
+
|
|
123
|
+
Wait for confirmation before proceeding.
|
|
124
|
+
|
|
125
|
+
## Step 5: Generate Page Structure
|
|
126
|
+
|
|
127
|
+
Use the 9-section landing page sequence as the default framework, adapted to the visitor's awareness level. The awareness level determines which sections are included and how much weight each carries.
|
|
128
|
+
|
|
129
|
+
### For Unaware / Problem-Aware Visitors (Full Sequence)
|
|
130
|
+
|
|
131
|
+
These visitors need the most education. The page must create recognition of the problem before introducing the solution.
|
|
132
|
+
|
|
133
|
+
1. **Hero** — headline matched to traffic source + primary CTA
|
|
134
|
+
*Unaware: headline names the problem. Problem-aware: headline empathizes with the pain.*
|
|
135
|
+
2. **Social Proof Bar** — logos, user count, review scores
|
|
136
|
+
*Brief credibility before asking them to invest attention in reading further.*
|
|
137
|
+
3. **Problem / Pain** — recognition of their situation, consequences of inaction
|
|
138
|
+
*The visitor must feel "this is about ME" before they'll consider a solution.*
|
|
139
|
+
4. **Solution / Benefits** — 3 key outcomes (not features), bridged with "which means..."
|
|
140
|
+
*Transition from pain to possibility. Each benefit answers "so what?" for a specific pain point.*
|
|
141
|
+
5. **How It Works** — 3-step process, reduced to maximum simplicity
|
|
142
|
+
*Lowers perceived effort. Three steps feels achievable. Seven feels like a project.*
|
|
143
|
+
6. **Testimonials** — 2-3 attributed quotes with name, role, company
|
|
144
|
+
*Social proof placed after claims, so proof follows promise.*
|
|
145
|
+
7. **Pricing** (if applicable) or **Feature Deep-Dive**
|
|
146
|
+
*Only after value is established. Never lead with price for unaware visitors.*
|
|
147
|
+
8. **FAQ / Objections** — from the objection map, the remaining concerns not yet addressed
|
|
148
|
+
*Systematic objection cleanup before the final ask.*
|
|
149
|
+
9. **Final CTA** — recap value proposition + urgency + risk reversal
|
|
150
|
+
*The last push: remind them what they get, why now, and why it's safe.*
|
|
151
|
+
|
|
152
|
+
### For Solution-Aware Visitors (Differentiation Focus)
|
|
153
|
+
|
|
154
|
+
These visitors know solutions exist and are comparing. The page must answer "why THIS one?"
|
|
155
|
+
|
|
156
|
+
1. **Hero** — differentiation headline + primary CTA
|
|
157
|
+
2. **Social Proof** — heavy, quantified ("10,000+ teams", "4.9/5 on G2")
|
|
158
|
+
3. **"Why [Product] vs. Alternatives"** — direct comparison, honest positioning
|
|
159
|
+
4. **Key Differentiating Features** — what you do that others don't or can't
|
|
160
|
+
5. **How It Works** — emphasize ease of switching
|
|
161
|
+
6. **Testimonials** — focus on switching stories ("We moved from X to Y and...")
|
|
162
|
+
7. **Pricing** — with clear recommendation, comparison to alternatives
|
|
163
|
+
8. **FAQ** — competitive and buying-specific objections
|
|
164
|
+
9. **Final CTA** — risk reversal prominent
|
|
165
|
+
|
|
166
|
+
### For Product-Aware / Most-Aware Visitors (Conversion Focus)
|
|
167
|
+
|
|
168
|
+
These visitors know the product. They need a reason to act NOW, not more education.
|
|
169
|
+
|
|
170
|
+
1. **Hero** — offer-focused headline + prominent, high-contrast CTA
|
|
171
|
+
2. **Social Proof** — heavy and quantified (logos, numbers, review scores, awards)
|
|
172
|
+
3. **Key Benefits Recap** — brief, 3 bullet points maximum
|
|
173
|
+
4. **Testimonials** — results-focused ("We increased X by Y%")
|
|
174
|
+
5. **Pricing** — with recommendation, highlight the offer
|
|
175
|
+
6. **FAQ** — buying-specific objections only (billing, cancellation, support)
|
|
176
|
+
7. **Final CTA** — urgency + risk reversal + the deal
|
|
177
|
+
|
|
178
|
+
Present the structure with reasoning for each section's placement and confirm before writing:
|
|
179
|
+
|
|
180
|
+
```
|
|
181
|
+
Here's the structure I recommend for your [page type] targeting [awareness level] visitors from [traffic source]:
|
|
182
|
+
|
|
183
|
+
1. **Hero** — [what this section will accomplish]
|
|
184
|
+
*Why first: [psychology reasoning]*
|
|
185
|
+
|
|
186
|
+
2. **[Section 2]** — [purpose]
|
|
187
|
+
*Why here: [reasoning]*
|
|
188
|
+
|
|
189
|
+
... etc
|
|
190
|
+
|
|
191
|
+
Mobile note: [how the structure adapts on small screens]
|
|
192
|
+
|
|
193
|
+
Does this structure feel right, or should we adjust before I write the copy?
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
Wait for confirmation. Do not proceed to writing until the user approves or adjusts the structure.
|
|
197
|
+
|
|
198
|
+
## Step 6: Apply Above-the-Fold Formula
|
|
199
|
+
|
|
200
|
+
The hero section must communicate value within 5 seconds. This is non-negotiable — research shows that visitors form a first impression in 50 milliseconds and decide to stay or leave within 5 seconds. The hero uses 5 elements to win those seconds:
|
|
201
|
+
|
|
202
|
+
1. **Headline** (6-12 words) — states the outcome directly, matched to the traffic source
|
|
203
|
+
*Psychology: Processing fluency. Short, clear statements are perceived as more truthful and more important. Match the traffic source language for message congruence — the visitor should feel "I'm in the right place" instantly.*
|
|
204
|
+
|
|
205
|
+
2. **Subheadline** (15-25 words) — expands with methodology, proof, or specificity
|
|
206
|
+
*Psychology: The headline hooks, the subheadline justifies the hook. It answers the implicit "how?" or "really?" that follows a strong headline.*
|
|
207
|
+
|
|
208
|
+
3. **Hero visual** (described, not created) — show the outcome, not a product screenshot
|
|
209
|
+
*Psychology: Picture superiority effect. Images of the OUTCOME (happy customer, completed dashboard, results graph) outperform product screenshots because visitors buy the result, not the tool.*
|
|
210
|
+
|
|
211
|
+
4. **Primary CTA** — action verb + value, high contrast, visually prominent
|
|
212
|
+
*Psychology: Action-oriented buttons ("Start Free Trial" vs. "Submit") convert higher because they describe what the visitor GETS, not what they DO. High contrast ensures the eye finds it without searching.*
|
|
213
|
+
|
|
214
|
+
5. **Social proof nugget** — one line of credibility: "Trusted by 10,000+ teams" or a logo strip
|
|
215
|
+
*Psychology: Social proof reduces cognitive load. The visitor doesn't need to evaluate the product alone — others have already validated it.*
|
|
216
|
+
|
|
217
|
+
For each element, generate the primary recommendation plus 2 variations:
|
|
218
|
+
|
|
219
|
+
```
|
|
220
|
+
### Headline
|
|
221
|
+
|
|
222
|
+
**Primary (recommended):**
|
|
223
|
+
> [headline text]
|
|
224
|
+
*Framework: [which formula — e.g., Outcome + Timeframe, Problem Agitate Solve]. Traffic source match: [how this echoes the ad/email/search query]. Psychology: [why this works for this awareness level].*
|
|
225
|
+
|
|
226
|
+
**Alternative A** — [angle description]:
|
|
227
|
+
> [headline text]
|
|
228
|
+
*Best when: [context where this variation wins — e.g., "when visitors are more solution-aware", "when the traffic source emphasizes speed"]*
|
|
229
|
+
|
|
230
|
+
**Alternative B** — [angle description]:
|
|
231
|
+
> [headline text]
|
|
232
|
+
*Best when: [context]*
|
|
233
|
+
```
|
|
234
|
+
|
|
235
|
+
**Mobile-first note for hero:** On mobile, the hero must work without the image. Headline + CTA should be visible without scrolling. The social proof nugget should be a single line, not a logo grid.
|
|
236
|
+
|
|
237
|
+
## Step 7: Write Copy Section by Section
|
|
238
|
+
|
|
239
|
+
For each section in the approved structure, generate:
|
|
240
|
+
|
|
241
|
+
- The actual copy text (headlines, body, CTAs, micro-copy)
|
|
242
|
+
- An annotation explaining the framework/psychology behind the choices
|
|
243
|
+
- For key elements (headlines, CTAs, problem/pain opening, final CTA): 2-3 variations with rationale
|
|
244
|
+
|
|
245
|
+
**Annotation format for every section:**
|
|
246
|
+
|
|
247
|
+
```
|
|
248
|
+
*Why this works: [Name the specific framework or psychology principle]. [Explain in 1-2 sentences why this technique is effective for this audience/product]. [Note any product-specific reasoning from the discovery docs].*
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
**Variation format for key elements:**
|
|
252
|
+
|
|
253
|
+
```
|
|
254
|
+
**Primary (recommended):**
|
|
255
|
+
> [copy text]
|
|
256
|
+
*Why: [reasoning]*
|
|
257
|
+
|
|
258
|
+
**Alternative A** — [angle description]:
|
|
259
|
+
> [copy text]
|
|
260
|
+
*Best when: [context]*
|
|
261
|
+
|
|
262
|
+
**Alternative B** — [angle description]:
|
|
263
|
+
> [copy text]
|
|
264
|
+
*Best when: [context]*
|
|
265
|
+
```
|
|
266
|
+
|
|
267
|
+
Generate 2-3 meaningfully different angles, not slight word swaps. Each variation should represent a different strategic choice.
|
|
268
|
+
|
|
269
|
+
### Landing-Page-Specific Writing Principles
|
|
270
|
+
|
|
271
|
+
Apply these throughout every section:
|
|
272
|
+
|
|
273
|
+
- **Traffic source matching** — the headline must echo the ad, email, or social hook that brought the visitor here. If the user provided their ad copy or email subject lines, the headline MUST use the same core language. A disconnect between what was promised and what the page says is the #1 conversion killer.
|
|
274
|
+
|
|
275
|
+
- **Awareness-level calibration** — the amount of education in each section matches the visitor's awareness level. Unaware visitors need problem sections with vivid "day in the life" pain descriptions. Product-aware visitors need proof and urgency, not education. Never over-explain to someone ready to buy. Never under-explain to someone who doesn't know the problem exists.
|
|
276
|
+
|
|
277
|
+
- **Objection weaving** — objections from the map are addressed in the natural flow of the page, not just quarantined in the FAQ section. The best objection handling feels like a natural part of the argument. Example: "Import your existing data in one click" in the How It Works section addresses "Is it hard to switch?" without making it feel defensive.
|
|
278
|
+
|
|
279
|
+
- **Mobile-first notes** — for each section, include a brief note on mobile considerations:
|
|
280
|
+
- Full-width CTAs on mobile (no side-by-side buttons)
|
|
281
|
+
- Sticky CTA bar on scroll for long pages
|
|
282
|
+
- Content priority: what gets cut or reordered on small screens
|
|
283
|
+
- Minimum 16px font for body text
|
|
284
|
+
- Minimum 48x48px tap targets for all interactive elements
|
|
285
|
+
- Horizontal scroll for logo bars instead of grid
|
|
286
|
+
|
|
287
|
+
- **Social proof placement** — note where to place trust signals relative to claims and CTAs:
|
|
288
|
+
- Place social proof immediately after any claim that might trigger skepticism
|
|
289
|
+
- Place trust badges (security, guarantee) near forms and CTAs
|
|
290
|
+
- Place testimonials after the section whose claim they validate
|
|
291
|
+
- Never cluster all social proof in one section — distribute it throughout the page
|
|
292
|
+
|
|
293
|
+
Use customer language from archetypes when available. Bridge every feature to a benefit with "which means..."
|
|
294
|
+
|
|
295
|
+
## Step 8: CRO Analysis Pass
|
|
296
|
+
|
|
297
|
+
Run the 7-dimension CRO framework against the generated copy. This is a quality gate — do not skip it. Score each dimension and provide specific, actionable recommendations for any "needs work" items.
|
|
298
|
+
|
|
299
|
+
### 1. Value Proposition Clarity
|
|
300
|
+
|
|
301
|
+
**Score:** clear / needs work
|
|
302
|
+
|
|
303
|
+
Can a first-time visitor understand the offering within 5 seconds of seeing the hero? Test: read only the headline + subheadline. Does a stranger know (a) what the product does, (b) who it's for, and (c) why it matters?
|
|
304
|
+
|
|
305
|
+
*If needs work: rewrite the headline to be more specific. "Automate your invoicing" beats "The future of business." Specificity is clarity.*
|
|
306
|
+
|
|
307
|
+
### 2. Headline Effectiveness
|
|
308
|
+
|
|
309
|
+
**Score:** strong / needs work
|
|
310
|
+
|
|
311
|
+
Does the headline use a proven formula (Outcome + Timeframe, Problem Agitate Solve, Social Proof Lead, Curiosity Gap)? Is it specific enough to feel real, not generic? Does it match the traffic source?
|
|
312
|
+
|
|
313
|
+
*If needs work: identify which formula is the best fit and rewrite. Check message match against the stated traffic source.*
|
|
314
|
+
|
|
315
|
+
### 3. CTA Placement and Hierarchy
|
|
316
|
+
|
|
317
|
+
**Score:** strong / needs work
|
|
318
|
+
|
|
319
|
+
Is the primary CTA visible without scrolling? Is it repeated at least 2-3 times on the page? Is there a clear visual hierarchy — one primary CTA, optional secondary? Are CTAs placed after value-building sections, not in isolation?
|
|
320
|
+
|
|
321
|
+
*If needs work: add CTA repetitions, adjust placement, ensure the primary CTA has the highest visual contrast on the page.*
|
|
322
|
+
|
|
323
|
+
### 4. Visual Hierarchy and Scannability
|
|
324
|
+
|
|
325
|
+
**Score:** strong / needs work
|
|
326
|
+
|
|
327
|
+
Can scanners (who read only headlines, bold text, and CTAs) get the main message without reading body text? Do section headlines tell a story when read in sequence? Is there enough white space between sections?
|
|
328
|
+
|
|
329
|
+
*If needs work: rewrite section headlines to be scannable value statements, not labels. "How It Works" becomes "Start Converting in 3 Steps."*
|
|
330
|
+
|
|
331
|
+
### 5. Trust Signals and Social Proof
|
|
332
|
+
|
|
333
|
+
**Score:** strong / needs work
|
|
334
|
+
|
|
335
|
+
Are trust signals placed near CTAs and near claims? Are they specific and attributed? ("10,000+ teams" beats "Trusted by thousands." A named testimonial beats "Our customers love us.") Is there social proof above the fold?
|
|
336
|
+
|
|
337
|
+
*If needs work: add proof nugget to hero, add attributed testimonial placeholders near key claims, add trust badges near forms.*
|
|
338
|
+
|
|
339
|
+
### 6. Objection Handling
|
|
340
|
+
|
|
341
|
+
**Score:** strong / needs work
|
|
342
|
+
|
|
343
|
+
Are all objections from the objection map addressed before the final CTA? Are they addressed naturally within the flow (not just in FAQ)? Is risk reversal (guarantee, free trial, easy cancellation) placed near the final CTA?
|
|
344
|
+
|
|
345
|
+
*If needs work: map unaddressed objections to specific sections, add risk reversal near the final CTA.*
|
|
346
|
+
|
|
347
|
+
### 7. Friction Points
|
|
348
|
+
|
|
349
|
+
**Score:** strong / needs work
|
|
350
|
+
|
|
351
|
+
Is there any unnecessary complexity? Multiple CTAs competing for attention? Jargon that the target audience wouldn't understand? Long paragraphs without scannable formatting? Forms with too many fields? Navigation links that leak the visitor off-page?
|
|
352
|
+
|
|
353
|
+
*If needs work: simplify. Remove competing CTAs, break up long paragraphs, reduce form fields (max 2 for landing pages: name + email), remove or minimize navigation.*
|
|
354
|
+
|
|
355
|
+
Output the full analysis with scores, findings, and specific recommendations. Fix what can be fixed inline in the copy. Flag what requires user input or design decisions.
|
|
356
|
+
|
|
357
|
+
## Step 9: Quality Pass — Seven Sweeps
|
|
358
|
+
|
|
359
|
+
Run the Seven Sweeps copy editing framework against the generated copy:
|
|
360
|
+
|
|
361
|
+
1. **Clarity** — flag anything not immediately understandable on first read
|
|
362
|
+
2. **Voice & Tone** — flag any inconsistencies with the chosen tone
|
|
363
|
+
3. **"So What?"** — flag features presented without benefits, claims without stakes
|
|
364
|
+
4. **"Prove It"** — flag unsupported claims (suggest where to add testimonials, stats, or specifics; never fabricate them)
|
|
365
|
+
5. **Specificity** — flag vague language ("many", "better", "fast"), suggest concrete alternatives with numbers or comparisons
|
|
366
|
+
6. **Heightened Emotion** — flag purely informational sections near decision points that should carry emotional weight
|
|
367
|
+
7. **Zero Risk** — flag missing risk reversals near CTAs (guarantee, free trial, easy cancellation, money-back)
|
|
368
|
+
|
|
369
|
+
Include the sweep results in the output document under "## Copy Editing Notes". Fix what can be fixed inline; call out what needs user input (e.g., real testimonials, actual stats, customer logos).
|
|
370
|
+
|
|
371
|
+
## Step 10: Output
|
|
372
|
+
|
|
373
|
+
Create `docs/pages/landing/` in the target project if it does not exist. Write the page copy to `docs/pages/landing/{page-name}.md` using this structure:
|
|
374
|
+
|
|
375
|
+
```markdown
|
|
376
|
+
# {Page Name} — Landing Page Copy
|
|
377
|
+
|
|
378
|
+
## Context
|
|
379
|
+
- **Page type:** Landing page / Homepage
|
|
380
|
+
- **Primary goal:** [single conversion action]
|
|
381
|
+
- **Target audience:** [from product docs or conversation]
|
|
382
|
+
- **Traffic source:** [where visitors come from]
|
|
383
|
+
- **Visitor awareness level:** [unaware / problem-aware / solution-aware / product-aware / most-aware]
|
|
384
|
+
- **Tone:** [chosen tone]
|
|
385
|
+
- **Product discovery:** [Yes — linked to docs/product/ | No — gathered conversationally]
|
|
386
|
+
|
|
387
|
+
## Objection Map
|
|
388
|
+
|
|
389
|
+
| Objection | Where Addressed | How |
|
|
390
|
+
|-----------|----------------|-----|
|
|
391
|
+
| [objection] | [section] | [technique] |
|
|
392
|
+
| ... | ... | ... |
|
|
393
|
+
|
|
394
|
+
## Page Structure Sketch
|
|
395
|
+
[Section-by-section layout with mobile-first notes.
|
|
396
|
+
Describe the visual flow: hero occupies full viewport, social proof bar is a horizontal scroll on mobile, problem section uses alternating text/image layout, etc.
|
|
397
|
+
Include spacing, visual weight, and content hierarchy notes that a developer would need to build this page.]
|
|
398
|
+
|
|
399
|
+
## Above the Fold
|
|
400
|
+
[The 5 elements (headline, subheadline, hero visual description, primary CTA, social proof nugget) with full annotations and variations for headline, subheadline, and CTA.]
|
|
401
|
+
|
|
402
|
+
## Copy by Section
|
|
403
|
+
|
|
404
|
+
### 1. Hero
|
|
405
|
+
[Headlines with variations, subheadline with variations, CTA text with variations, supporting micro-copy.
|
|
406
|
+
Each with full annotations.
|
|
407
|
+
Mobile-first notes for this section.
|
|
408
|
+
Social proof placement notes.]
|
|
409
|
+
|
|
410
|
+
### 2. [Section 2]
|
|
411
|
+
[Copy + annotations + mobile notes + social proof notes where relevant]
|
|
412
|
+
|
|
413
|
+
... [all sections from the approved structure]
|
|
414
|
+
|
|
415
|
+
## CRO Analysis
|
|
416
|
+
[7-dimension analysis with scores and specific recommendations.
|
|
417
|
+
For each "needs work" item, include the specific fix applied or the specific action the user needs to take.]
|
|
418
|
+
|
|
419
|
+
## Copy Editing Notes
|
|
420
|
+
[Seven Sweeps results — what was flagged, what was improved inline, what needs user input.]
|
|
421
|
+
|
|
422
|
+
## Social Proof Placement Guide
|
|
423
|
+
[Where to place which type of social proof throughout the page:
|
|
424
|
+
- Company logos — below hero in a horizontal strip, grayscale with color on hover
|
|
425
|
+
- User/team count — hero section or social proof bar, specific number not rounded
|
|
426
|
+
- Star rating — near CTA, sourced from a real review platform (G2, Capterra, etc.)
|
|
427
|
+
- Testimonials — dedicated section + inline near the claims they validate
|
|
428
|
+
- Case study snippets — after How It Works or Benefits section
|
|
429
|
+
- Trust badges (security, compliance) — near forms, pricing, and footer
|
|
430
|
+
- Media mentions ("As seen in...") — below hero or in social proof bar]
|
|
431
|
+
|
|
432
|
+
## Mobile Considerations
|
|
433
|
+
[Section-by-section mobile adaptation notes:
|
|
434
|
+
- Hero: headline + CTA visible above fold without image; image loads below
|
|
435
|
+
- CTA: full width, sticky bar on scroll after hero passes out of viewport
|
|
436
|
+
- Social proof bar: horizontal scroll, not grid
|
|
437
|
+
- Forms: single column, max 2 fields, large tap targets
|
|
438
|
+
- Body fonts: minimum 16px, line height 1.5
|
|
439
|
+
- Tap targets: minimum 48x48px with adequate spacing
|
|
440
|
+
- Testimonials: carousel or stack, not grid
|
|
441
|
+
- Navigation: minimal or hidden; do not provide escape routes from the conversion path]
|
|
442
|
+
|
|
443
|
+
## Meta Content
|
|
444
|
+
- **Page title:** [SEO-optimized, 60 chars max]
|
|
445
|
+
- **Meta description:** [155 chars max, includes value prop and implicit CTA]
|
|
446
|
+
- **OG title:** [for social sharing, can be more provocative than page title]
|
|
447
|
+
- **OG description:** [for social sharing, 2 sentences max]
|
|
448
|
+
```
|
|
449
|
+
|
|
450
|
+
Update `.project-context.md` under `## Installed Blueprints`. If a `### marketing-copywriting` entry already exists, update `pages_created` to include the new page. Otherwise append:
|
|
451
|
+
|
|
452
|
+
```yaml
|
|
453
|
+
### marketing-copywriting
|
|
454
|
+
blueprint: marketing-copywriting
|
|
455
|
+
pages_created:
|
|
456
|
+
- docs/pages/landing/{page-name}.md
|
|
457
|
+
```
|
|
458
|
+
|
|
459
|
+
## Step 11: Summary
|
|
460
|
+
|
|
461
|
+
Tell the user:
|
|
462
|
+
|
|
463
|
+
- What page was created and where the file lives
|
|
464
|
+
- Key copywriting decisions and the reasoning behind them
|
|
465
|
+
- **Top 3 CRO findings** — the three most impactful improvements from the CRO analysis, with the reasoning behind each
|
|
466
|
+
- **What real data would strengthen the page most** — the specific gaps that only the user can fill:
|
|
467
|
+
- Real testimonials with attribution (name, role, company, photo)
|
|
468
|
+
- Specific metrics ("increased conversion by X%", "saved Y hours/week")
|
|
469
|
+
- Customer logos for the social proof bar
|
|
470
|
+
- Actual pricing and offer details
|
|
471
|
+
- Screenshots or visuals of the product outcome
|
|
472
|
+
- **A/B test ideas** — suggest 2-3 experiments to run once the page is live:
|
|
473
|
+
- "Test headline A vs. B — they target different awareness levels"
|
|
474
|
+
- "Test short page (4 sections) vs. full page (9 sections) for your paid traffic"
|
|
475
|
+
- "Test 'Start Free Trial' vs. 'See It In Action' as the primary CTA"
|
|
476
|
+
- Suggested next steps ("Run `/copywrite` for your pricing page", "Add real testimonials to strengthen the social proof sections", "Set up analytics to measure CTA click-through rate per section")
|
|
477
|
+
|
|
478
|
+
## Important Rules
|
|
479
|
+
|
|
480
|
+
- **Never fabricate testimonials, stats, or customer quotes.** Use placeholder format: `[Testimonial: Customer name, role — what they'd say about {specific benefit}]`. The user fills these in with real data. Fabricated social proof destroys trust permanently.
|
|
481
|
+
- **Always explain WHY.** Every section, every headline choice, every CTA, every structural decision — annotate with the framework and psychology behind it. The user is learning marketing through these outputs. The annotations are as valuable as the copy itself.
|
|
482
|
+
- **Use customer language when available.** If archetypes have "In Their Voice" quotes, weave that language into the copy. It converts because it feels like the visitor wrote it themselves. Mirror neurons fire when people see their own words reflected back.
|
|
483
|
+
- **Don't over-sell.** Honest, specific claims convert better than sensational ones. If the product can't back a claim, don't make it. Credibility is a conversion asset.
|
|
484
|
+
- **Variations are for comparison, not volume.** Each variation should represent a different strategic choice (different awareness level, different emotional angle, different framework), not a slight word swap.
|
|
485
|
+
- **Message match is critical.** If the user knows their ad copy, email subject lines, or social hooks, the headline MUST echo them. A disconnect between the traffic source promise and the landing page headline is the #1 conversion killer. Ask for the source copy if the user hasn't provided it.
|
|
486
|
+
- **One page, one goal.** Resist the urge to add secondary CTAs, navigation links, "also check out..." sections, or footer links to other pages. Every element on the page should build toward the single conversion action. If an element doesn't advance the argument, cut it.
|
|
487
|
+
- **Awareness level determines page length.** Unaware visitors need the full 9 sections. Product-aware visitors might need 4. Don't write a long educational page for someone who's ready to buy — you'll talk them out of it. Don't write a short CTA-focused page for someone who doesn't know the problem exists — you'll confuse them.
|
|
488
|
+
- **Form optimization matters.** If the conversion action involves a form: max 2 fields for landing pages (name + email), single column layout, inline validation, action-oriented submit button text ("Get Early Access" not "Submit"). Every additional field reduces conversion by approximately 11%. If more fields are truly needed, use multi-step forms with a progress indicator.
|
|
489
|
+
- **For non-landing pages, redirect to `/copywrite`.** If the user asks for a pricing page, about page, features page, or any other marketing page that isn't a landing page or homepage, suggest: "That page would be better served by `/copywrite`, which has section sequences optimized for [page type]. Want to use that instead?"
|