Building a landing page from a codebase

You have a product. You need a landing page. The usual process: stare at the blank page, write some copy that sounds like every other SaaS page, grab a template, replace the placeholder text, argue about the CTA, ship something that's fine but forgettable.

The problem isn't execution. It's that the landing page is disconnected from the product. The copy describes what someone thinks the product does instead of what the code actually does. The feature highlights are whatever the team remembers, not a systematic extraction of what's marketable. The positioning is gut feel instead of structured analysis.

What if the landing page came from the codebase?

The /landing-page pipeline starts by auditing the actual product — scanning the code, analyzing screenshots, and building marketing strategy from evidence instead of assumptions. Then it writes the copy, designs the layout, builds the HTML, and hands you a promotion plan.

Seven agents, nine outputs, one standalone HTML page you can ship.

The seven agents

App Auditor (Report 01) — Scans the codebase for marketable intelligence. Not a technical audit — a marketing audit. What features sell? What's different from alternatives? What problems does it solve, for whom? If the doc-suite output exists, the auditor reads the business benefits, innovation themes, and features reports. If not, it extracts everything from the code directly.

Screenshot Analyst (Report 02) — Documents every uploaded product image with content description, UI element inventory, visual quality assessment, and a 4-dimension marketing value score: visual appeal, feature demonstration, emotional impact, and credibility signal. Each image gets a recommended placement on the page and a list of concerns (dummy data visible? PII showing? needs cropping?).

Strategy Architect (Report 03) — Synthesizes the app audit, screenshot inventory, and your directive into a complete marketing strategy. Audience definition (primary and secondary), positioning statement ("For [audience] who [need], [product] is a [category] that [benefit]"), messaging hierarchy (primary → supporting → proof), conversion goals, tone specification, competitive context, and the page narrative arc: hook → problem → solution → proof → action.

Design Director (Report 04) — Translates strategy into a buildable page spec. Section-by-section layout with purpose, content requirements, and visual treatment. Screenshot placement with treatment notes. CTA design: button text, visual weight, urgency signals. Color palette, typography choices (following the design system principles — distinctive, not generic), spacing rhythm, responsive strategy, and interaction design.

Copywriter (Report 05) — Writes every word. Headlines (3-8 words, work standalone), subheadlines, body copy (scannable, benefit-oriented, specific), CTA copy (completes "I want to..."), alt text for every image, meta copy (page title, description, OG tags). Organized section-by-section matching the design brief.

Page Builder (Report 00 — index.html) — Produces a standalone, self-contained HTML file. All CSS inline or in style tags. External deps from CDN only. No build step. Screenshots embedded or in assets/. Responsive. Distinctive — follows the frontend-design guidelines to avoid Bootstrap/template aesthetics. Includes smooth scroll, reveal animations, and working CTAs.

Growth Advisor (Reports 07–09) — Three post-production deliverables. The promotion plan: channel-by-channel strategy with launch sequence and content calendar. Enhancements: A/B test recommendations, analytics implementation, social proof integration, SEO checklist. Course corrections: risks, gaps, audience segments not addressed, competitive responses to anticipate, metrics to watch and thresholds for action.

The design review integration

The /frontend-design-review skill plugs into this pipeline at two points. Review Point A: after the design brief (report 04), verify the brief specifies all 11 color tokens, distinctive fonts, and a clear temperature direction before the copywriter and page builder proceed. Review Point B: after the built page (index.html), run a full five-dimension audit to catch design drift before shipping.

Usage modes

Full pipeline — Directive + screenshots + codebase path. All nine phases, all ten outputs.

Strategy only — "Just the strategy and design brief, I'll build the page." Stops after report 05.

Page only — "Here's my strategy doc and copy, just build the HTML." Skips to the page builder.

Rebuild with new directive — "Same product, but target developers instead of managers." Re-runs from strategy with the same audit and screenshots.

Recommendations only — "I already have a landing page, give me promotion and enhancement recs." Audits the existing page and runs the growth advisor.

When to run it

For any new product launch. The pipeline produces more than a page — it produces the marketing strategy, the copy deck, and the promotion plan. Even if you rebuild the page by hand, the strategy documents are worth having.

When you're tired of template pages. The page builder follows the frontend-design guidelines: no purple gradients, no Inter, no Bootstrap grid. The output has a point of view because the strategy has a point of view.

When the marketing team needs assets fast. Seven agents running in sequence is still faster than a designer, a copywriter, a strategist, and a growth marketer working in series.

---

Resources

Pipeline reference: /landing-page — 10 outputs, 7 agents, 9 reference files.

Integrates with:

• 09. Design systems that survive AI generation — design review at Review Points A and B
• /doc-suite-generator — app auditor reads existing documentation

Download: Full toolkit (252KB) — all 16 commands, all 11 skills, installs in 30 seconds.

---

Part of the Claude Skills Library.