wireframe-writer

Installation
SKILL.md

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; otherwise state assumptions explicitly at the top and proceed — never invent proof or numbers.
Installs
10
GitHub Stars
9
First Seen
Jul 30, 2026
wireframe-writer — yaxeen/storytelling-skills