landing-page-wireframe

Generate landing page wireframes from positioning and messaging into visual layouts.

29|12|Updated Mar 30, 2026
One-click install
npx skills add https://github.com/matteotitta/genesys-skills --skill landing-page-wireframe
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: landing-page-wireframe
Source: https://github.com/matteotitta/genesys-skills/tree/main/skills/primitives/website/execution/website-wireframe
Command: npx skills add https://github.com/matteotitta/genesys-skills --skill landing-page-wireframe

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill bridges the gap between strategic positioning and visual execution, preventing the common disconnect between marketing messaging and actual page structure.

Core Features & Use Cases

  • Component-Based Architecture: Generates layouts using Framer-ready component blocks and shadcn primitives.
  • Visual Direction Anchoring: Uses A1 Gallery integration to ground wireframes in specific design styles like Modern Minimal or Tech Utility.
  • Use Case: A founder needs to turn a new product messaging document into a high-converting homepage structure that is ready for a designer or developer to implement.

Quick Start

Invoke the landing-page-wireframe skill to create a homepage layout for my new B2B SaaS product using the Modern Minimal design direction.

Frequently Asked Questions about landing-page-wireframe

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I translate product messaging into a structured landing page wireframe?

This skill translates positioning and messaging into structured, production-ready landing page wireframes using Framer-ready component blocks and shadcn primitives. It bridges the gap between strategic messaging and visual page execution.

Can I use shadcn component primitives to generate campaign landing page layouts?

Yes, you can use shadcn component primitives to generate campaign landing page layouts. The skill utilizes component-based architecture to ensure design consistency and responsive integrity across homepage, feature page, and campaign designs.

How do I anchor landing page visual direction to a specific web design style?

You anchor visual direction by integrating A1 Gallery visual references to ground the wireframes in specific design styles. This ensures layouts match established styles like Modern Minimal or Tech Utility.

What is the best way to create a Framer-ready homepage layout from a B2B SaaS positioning document?

The best way to create a Framer-ready homepage layout from a B2B SaaS positioning document is to generate structured wireframes using brand-kit tokens and shadcn primitives. This provides a production-ready structure for immediate designer or developer implementation.

Do I need brand-kit tokens to generate responsive landing page wireframes?

Yes, you need brand-kit tokens to generate responsive landing page wireframes. Integration with brand-kit tokens is required alongside shadcn component primitives to ensure design consistency and responsive integrity across the generated layouts.