Landing Page Wireframe Generator
Generates a section-by-section landing page wireframe — layout, copy placeholders, and component notes — from a product description.
Landing Page Wireframe Generator is a free AI skill for ui & web building. Generates a section-by-section landing page wireframe — layout, copy placeholders, and component notes — from a product description. It works with Claude, ChatGPT, Cursor and is ready to use out of the box.
About this skill
Landing Page Wireframe Generator turns a product or offer description into a complete landing page wireframe: section-by-section layout (hero, social proof, features, pricing, FAQ, footer CTA), what content and components belong in each section, and copy placeholders showing the type of message each section should carry. It's built for founders and designers who need a structural starting point before writing final copy or opening a design tool.
What it does
Given a product/offer description and primary conversion goal, the skill outputs a full landing page wireframe: ordered sections, layout notes (e.g. two-column, centered, grid), the component types needed per section, and short copy placeholders indicating the message intent for that section.
What is included
- Full section-by-section page structure
- Layout notes per section (column structure, component types)
- Copy placeholder guidance per section
- Conversion-focused section ordering
- Adaptable structure by primary conversion goal (signup, purchase, demo request)
How to use it
1. Download the SKILL.md file 2. Upload it into a new Claude conversation 3. Describe your product/offer and the primary conversion goal 4. Receive a complete landing page wireframe outline
Examples
A landing page for a $15/mo habit-tracking app. Goal: free trial signups.
LANDING PAGE WIREFRAME 1. HERO — centered, single column Layout: Headline, subheadline, CTA button above the fold, app screenshot below Copy placeholder: 'Build habits that actually stick' / CTA: 'Start your free trial' 2. SOCIAL PROOF — horizontal logo/stat strip Layout: 3-4 stats or testimonial snippets in a row Copy placeholder: '10,000+ habits tracked daily' 3. FEATURES — 3-column grid Layout: Icon + heading + one-line description per feature, 3 features Copy placeholder: Feature names tied to core value props (streaks, reminders, insights) 4. HOW IT WORKS — 3-step horizontal flow Layout: Numbered steps with simple icon per step 5. PRICING — single centered card Layout: Price, feature list, CTA button Copy placeholder: '$15/mo — cancel anytime' 6. FAQ — accordion, single column Layout: 5-6 expandable Q&A items addressing signup objections 7. FOOTER CTA — centered, full width Layout: Final headline + CTA button repeated for last-chance conversion
FAQ
What is this skill for?
How do I install it?
Does it produce actual visual mockups or code?
Can it write the final copy for each section too?
How is this different from a generic landing page template?
Does the section order change based on my conversion goal?
Related Skills
Landing Page Copy & Layout Generator
Produces complete section-by-section landing page copy and layout structure — hero, benefits, social proof, FAQ, CTA — from a one-line product description.
AI Landing Page Hero Visual Architect
Design landing-page hero visuals with product relevance, focal hierarchy, responsive crops, UI integration, performance, accessibility, and generation prompts.
Creator Link in Bio Conversion Architect
Design creator link-in-bio pages with hierarchy, trust, offers, lead capture, mobile usability, analytics, accessibility, and conversion paths.
Related Prompts
Landing Page Conversion Audit
Audits a landing page's copy and structure section by section against proven conversion principles, flagging specific friction points and suggesting fixes.