skills.rest
RamonsDka
RamonsDkaCOMMUNITY
Explore all skills by this author →
GitHub

guimkt-wireframe-landing-page

Generate two-phase landing page wireframes as HTML files from a briefing and ICP.

1|1|Updated Apr 19, 2026
Search Tags:#validation#copywriting#framework#ux#wireframe#landing-page
One-click install
npx skills add https://github.com/RamonsDka/the-architect-overlay --skill guimkt-wireframe-landing-page-ramonsdka
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: guimkt-wireframe-landing-page
Source: https://github.com/RamonsDka/the-architect-overlay/tree/main/skills/guimkt-wireframe-landing-page
Command: npx skills add https://github.com/RamonsDka/the-architect-overlay --skill guimkt-wireframe-landing-page-ramonsdka

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automates the creation of structured wireframes for landing pages, accelerating the process from brief to validated design concepts.

Core Features & Use Cases

  • Wireframe-Tabela: selects the best copywriting framework (AIDA, P.A.S.T.O.R., QUEST, BAB, PAS, FAB, 4P's, SCQA, SLAP, ACCA, etc.), structures the LP into a table with sections, headlines, copy, and notes for the designer.
  • Wireframe-Sketch: converts the table into a low-fidelity HTML sketch with sketch fonts, subtle scroll animations, and alternating backgrounds for client validation.
  • Use cases: when you need to create a landing-page wireframe, define a copy framework for LP, generate a visual wireframe, or prototype a landing page quickly.

Quick Start

Feed the briefing or ICP into the skill to generate a complete wireframe-tabela HTML, then optionally request a wireframe-sketch HTML for client validation.

Frequently Asked Questions about guimkt-wireframe-landing-page

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

FAQPage Schema
How do I generate a landing page wireframe from a brief?▼

A landing page wireframe structures your LP sections, headlines, copy, and notes into an HTML table using a selected copywriting framework like AIDA or PASTOR, then converts it into a low-fidelity visual HTML sketch for client validation.

What is a wireframe-tabela and how does it help design landing pages?▼

A wireframe-tabela is an HTML table that structures your landing page into sections with headlines, copy, and designer notes based on a selected copywriting framework, providing validation-ready content before visual design begins.

Which copywriting frameworks can I use to structure a landing page?▼

You can structure a landing page using copywriting frameworks such as AIDA, PASTOR, QUEST, BAB, PAS, FAB, 4P's, SCQA, SLAP, and ACCA, with the Skill selecting the most appropriate one based on your briefing and ICP.

Can I create a visual wireframe sketch for client validation without prior design assets?▼

Yes, you can generate a wireframe-sketch as a low-fidelity HTML file featuring sketch fonts, subtle scroll animations, and alternating backgrounds directly from your briefing, requiring no prior design assets.

What do I need to provide to automate landing page wireframe creation?▼

You need to provide a project briefing and an Ideal Customer Profile (ICP) definition, which the Skill uses to select a copywriting framework and structure the hero, framework steps, form, and footer sections.

Related Skills

Explore More Marketing & Sales Skills→
guilhermemarketingguilhermemarketing
59

guimkt-wireframe-landing-page

Generate two-phase wireframe landing pages from client briefings.

Community
Advanced
Clos01Clos01
3

wireframe-sketch

Create low-fidelity hand-drawn wireframe layouts with variant tabs and annotations.

Community
Intermediate
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate
hookvibehookvibe
3

ui-ux-pro-max

Generate UI/UX design systems with color palettes and typography guidelines.

Official
Basic