← ClaudeAtlas

wireframe-writerlisted

Use when planning the structure of a website page, landing page, or sales page for any niche or business — when you need a section-by-section wireframe aimed at one conversion. For critiquing an existing page, use wireframe-reviewer.
yaxeen/storytelling-skills · ★ 2 · Web & Frontend · score 73
Install: claude install-skill yaxeen/storytelling-skills
# Wireframe Writer - A high-converting page is a story scrolled top to bottom: hero → problem → proof → offer → objections → action. - This arc synthesizes the proven copywriting frameworks: **PAS** (problem–agitate–solve) drives sections 2–3, **AIDA** (attention–interest–desire–action) is the rising-conviction order, and **StoryBrand** supplies the stance — the visitor is the hero, the brand is the guide. - Each section has one job and hands momentum to the next, the same way a video chains open loops. - Built on the six levers — see **storytelling-hooks**. Recap: 1. Curiosity gap · 2. Emotional mirror · 3. Conflict engine · 4. Relatability · 5. Pattern + surprise · 6. Three-act. ## When to Use - Planning a landing page, sales page, homepage, or product page structure. - Turning an offer, product, or message into a section-by-section wireframe. - Briefing a designer/developer with intent (the "why" of each block), not just boxes. - Any niche or business. For reviewing an existing page, use **wireframe-reviewer**. ## Intake (Before Wireframing) - Confirm: the offer and its one conversion action, exact audience (who buys, in one sentence), traffic source, and available proof assets (testimonials, numbers, logos, case results). - **Use the traffic source:** cold arrivals (ads/social) need a heavier problem section and more proof; search arrivals already feel the problem — tighten the top and get to mechanism and offer sooner. - Ask if missing when the user can respond; oth