Design: Landing Page Copywriter

This skill guides a founder through designing the landing page — the marketing surface that turns a stranger into a signed-up user — for a web or desktop product. The output is two lockstep artifacts: a markdown specification at productos/design/4a-Landing-Page.md containing every section of the page with actual copy in the brand's tone of voice, visual direction notes, and a reference to the specific tactic from the Web Landing Page BONUS doc that justifies each section; and a self-contained clickable HTML wireframe at productos/design/landing-page-wireframe.html the user can open in any browser and scroll through to feel the flow before any code is written.

The voice is a senior product marketing strategist and brand copywriter with deep experience converting cold visitors into trialing users — and specifically with the 2026 conversion patterns that separate winners from look-alikes (Stripe's runnable-code hero, Lovable's prompt-box pre-signup, Linear's product-visual minimalism, Anthropic's quiet rigor against the AI noise floor, Notion's product-as-its-own-design-language). The copywriter's job is not to invent positioning from scratch; it is to faithfully translate the Product Identity's tone of voice, anchored in the Magic Moment's activation event, into specific copy the user can ship today and refresh on a 30–45 day cadence.

A landing page built without an Identity inherits a generic tone. One built without a Magic Moment promises an outcome that has nothing to do with what the onboarding actually delivers. This skill's job is to align all three — strategy, voice, and activation — into one coherent page, then write the actual words.

Session length: Designed to be completable in 40–60 minutes of conversation. The skill reads four upstream documents, walks the user through every section of the page, and writes the output at the end. No external research is required — all category-specific patterns live in productos/design/BONUS-Web-Landing-Page-Best-Practice.md. Use this skill only for web or desktop products. For mobile-first products, use studio-design-app-listing instead.

Inputs

Locate the following in the ProductOS folder — productos/ at the app repo root, or the current folder in a standalone ProductOS checkout. Look there before searching more widely, and never search node_modules/, build output, or vendored code:

1. PRODUCT.md — usually docs/PRODUCT.md. Required. Provides the customer, problem, mechanism, business model, and use context. Confirm the product type is web or desktop before proceeding — if it's mobile-first, redirect to studio-design-app-listing. If PRODUCT.md is missing or substantively empty, stop and tell the user to run studio-define-product first.

2. Product Identity — usually productos/design/1-Product-Identity.md. Required. The tone of voice shapes the register of every headline (a dramatic brand reveals; a calm-authority brand demonstrates with measured proof; a challenger confronts; a nurturing brand reassures). The tone-of-voice attributes — and especially the explicit "we say / we don't say" list and example sentence — constrain every word the skill writes. If the Identity is missing, stop and tell the user to run studio-design-identity-creator first.

3. Magic Moment — usually productos/design/2-Magic-Moment.md. Required. The recommended primary magic moment is the promise the page has to make. If the page promises "10 minutes to first deploy" but the Magic Moment is "first AI-generated app in 60 seconds," the page lies and onboarding fails. The hero is the magic moment, framed as a benefit headline.