# Landing Page Design > Sistema completo para landing pages de alta conversión: preguntas de intake, estructura, layout, copy de conversión, SEO y reglas visuales estrictas de tipografía, spacing, radios, fondos, iconos y motion. Fuente: https://skillsagentes.com/skills/elayadesign/ai-design-skills/landing-page-design Markdown: https://skillsagentes.com/skills/elayadesign/ai-design-skills/landing-page-design.md Repositorio: https://github.com/elayadesign/ai-design-skills Autor: elayadesign Licencia: MIT Actualizado: hace 21 días Coste de contexto: 164 tok instalada, 4.1k tok al activarse, 4.1k tok con todos los archivos del bundle Bundle: 1 archivo, 16 KB Permisos que pide: ninguno declarado ## Instalación Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina. ```bash # Claude Code npx -y skills add elayadesign/ai-design-skills --skill landing-page-design --agent claude-code # Cursor npx -y skills add elayadesign/ai-design-skills --skill landing-page-design --agent cursor # Codex npx -y skills add elayadesign/ai-design-skills --skill landing-page-design --agent codex # Gemini CLI npx -y skills add elayadesign/ai-design-skills --skill landing-page-design --agent gemini # Windsurf npx -y skills add elayadesign/ai-design-skills --skill landing-page-design --agent windsurf # Cline npx -y skills add elayadesign/ai-design-skills --skill landing-page-design --agent cline ``` ## Qué hace - Antes de diseñar, reúne propósito, audiencia, objeciones y assets de prueba en una sola tanda de preguntas, y sigue con supuestos razonables si el usuario no responde - Define la estructura de la página (hero, beneficios, cómo funciona, prueba social, FAQ, CTA final) y elige uno de 4 tipos de layout según la fuente de tráfico y la intención de búsqueda - Impone un sistema visual no negociable: solo 4 tipografías permitidas, escala tipográfica de Tailwind, tabla fija de spacing, fórmula de radio anidado y solo 6 colores de fondo en modo oscuro - Exige contenido realista: prohíbe Lorem Ipsum, nombres placeholder, clichés de IA y números redondos falsos - Especifica coreografía de motion con cubic-bezier personalizado, reveals por scroll con IntersectionObserver, y una sección obligatoria de tagline con palabras que se activan una a una ## Cuándo usarla - El usuario construye, edita, estiliza o revisa cualquier landing page, sitio de marketing, UI web, sección o componente, aunque no mencione diseño ni sistema de diseño - Antes de elegir secciones, headlines, CTAs, fuentes, tamaños, spacing, radios, colores de fondo o transiciones ## Qué la activa - "Créame una landing page para mi producto SaaS" - "Rediseña la sección hero de mi sitio de marketing" - "Revisa el spacing y la tipografía de este componente" ## Archivos - SKILL.md — 16 KB ## SKILL.md Reproducido tal cual desde elayadesign/ai-design-skills bajo MIT. Esta sección es el documento original y está en inglés. # Landing Page Design A landing page is not a homepage. A homepage serves multiple intents. A landing page wins one intent: **one offer → one audience → one primary action.** This skill has two halves. **Part A** decides what the page says and how it is structured. **Part B** is the non negotiable visual system. Work through A before touching B. ## Scope Apply to all web UI work: landing pages, marketing sites, components, dashboards, prototypes, and design reviews. When a rule here conflicts with a framework default, this file wins. When the user's explicit prompt conflicts with a rule, the user wins. **Companion skill.** For upgrading an *existing* site rather than building a new one, use `redesign-existing-projects` ([github.com/elayadesign/redesign-skill](https://github.com/elayadesign/redesign-skill)). It diagnoses generic patterns and defers to this file for every concrete value. --- # PART A — Strategy and structure ## A1. Intake Gather these before designing or writing. Ask only for what is missing, and ask in one batch rather than one question at a time. **Purpose** - What is the ONE primary action? (trial, demo, buy, waitlist, download) - What is the offer, exactly what do they get? - What counts as a conversion? (click, signup, purchase) **Audience and context** - Who is the ICP? - What problem are they trying to solve? - Top three objections, meaning why they do not convert today - Traffic source: ads, search, social, email - What do visitors already know when they land? **Proof and assets** - Proof points: logos, testimonials, numbers, case studies - Screenshots, demo video, product GIFs - Guarantees, refund terms, cancellation terms **Constraints** - Brand voice: casual or professional - Design direction: minimal editorial, playful 3D, glass UI - Mobile priority? If the user cannot answer, make a reasonable assumption, state it in one line, and continue. Do not stall the build. ## A2. Page structure **Above the fold (required)** 1. Headline, outcome plus audience 2. Subheadline, clarifies how and adds specificity 3. Primary CTA, clear verb plus what they get 4. One proof signal, logo strip, stat, or short testimonial 5. Hero visual, product screenshot or video, or a strong illustration **Mid page (the argument)** 6. Problem to solution, one section 7. Benefits, three to five, outcome driven 8. How it works, three steps 9. Social proof, testimonials or a case study **Bottom (objection handling)** 10. FAQ, six to twelve questions 11. Risk reversal, trial, cancel anytime, guarantee 12. Final CTA, identical to the top Include the mandatory tagline reveal section from B11 somewhere in the mid page argument, typically right after the hero or after benefits. ## A3. Layout selection Pick one and say why. | Type | Use when | |---|---| | **A. Classic hero plus sections** | The product is understandable from a hero screenshot. Most common. | | **B. Long form story** | You need to educate and overcome skepticism. | | **C. Minimal conversion page** | High intent traffic (email to known users), or a short offer like a download or waitlist. | | **D. Comparison page** | Search intent includes alternatives ("X vs Y", "best for"). Usually paired with SEO pages. | ## A4. Conversion rules **Match message to source.** If traffic comes from ads, mirror the ad headline in the hero and keep the same promise and visual tone. **Make the next step obvious.** One primary CTA. Never place competing CTAs above the fold. **Write benefit first.** Features are what it does. Benefits are what that means for them. **Be specific.** - ❌ "Save time and streamline" - ✅ "Cut your weekly reporting from 4 hours to 15 minutes" **Reduce risk.** Pick at least one: free trial, free plan, no credit card, cancel anytime, money back guarantee. **Treat objections as a section, not a footnote.** Move the FAQ earlier for high friction offers. Put proof directly beside the claim it supports. ## A5. Copywriting **Headline formulas** - "{Outcome} without {pain}" - "The {category} for {audience}" - "Ship {result} in {time}" **Subheadline.** One or two sentences. Clarify what it is and who it is for. **CTA.** Verb plus what they get. Never "Learn more" or "Submit". Use "Start free trial", "Book a demo", "Get the checklist". **Benefit bullets.** Bold benefit, then the proof or detail. Example: **Faster iteration** — generate three layout variants in one click. Note: the copy rules in B1 still apply. No hyphens inside sentences, no orphaned words. ## A6. Build order Work section by section, in this order: 1. Hero 2. Benefits 3. How it works 4. Proof 5. FAQ 6. Final CTA Never rebuild the whole page on each iteration. Section by section keeps control and keeps diffs reviewable. ## A7. SEO and AEO **Do not index** ad only campaign pages or highly time bound offers. Use `noindex` or keep them behind a non indexed path. **Do index** evergreen offers and pages where search intent matches the promise. Add a clear title and meta description, internal links from the homepage and feature pages, and the FAQ in plain question and answer form for AEO. Add FAQ schema if appropriate. ## A8. Pitfalls - Too many CTAs above the fold - Vague value prop: "streamline", "optimize" - A large feature list with no outcomes - Proof buried at the bottom - Mobile layout that breaks readability - No clear next step --- # PART B — Visual system Every visual value must resolve through these rules instead of being invented ad hoc. ## B1. Typography ### Fonts **Use:** Geist, Manrope, Geist Mono, Poppins. **Never use:** Inter, Roboto, Arial, Open Sans, Helvetica. **Never use italic fonts** anywhere in the interface. **One typeface per site.** Do not pair two fonts unless the prompt explicitly asks for it. Geist Mono is allowed alongside a primary font only for code, data, or numeric UI where a monospace is functionally required. **Never use ultra bold weights** (900 / black). Cap at semibold or bold. ### Copy rules **No hyphens in text.** Do not use `-` inside body copy, headings, or labels. Rewrite the phrase instead. **No orphaned words.** A single word must never sit alone on the last line. Apply `text-wrap: balance` for headings and `text-wrap: pretty` for body copy. ### Type scale Always resolve font sizes to Tailwind's default type scale. Never leave arbitrary values in place, including `text-[19px]`, `font-size: 22px`, or `1.4rem`. If an existing size does not land exactly on a step, snap it to the **closest step below**, taking both the size and its paired line height. | Class | Size | Line height | |---|---|---| | `text-xs` | 12px (0.75rem) | 16px | | `text-sm` | 14px (0.875rem) | 20px | | `text-base` | 16px (1rem) | 24px | | `text-lg` | 18px (1.125rem) | 28px | | `text-xl` | 20px (1.25rem) | 28px | | `text-2xl` | 24px (1.5rem) | 32px | | `text-3xl` | 30px (1.875rem) | 36px | | `text-4xl` | 36px (2.25rem) | 40px | | `text-5xl` | 48px (3rem) | 1 | | `text-6xl` | 60px (3.75rem) | 1 | | `text-7xl` | 72px (4.5rem) | 1 | | `text-8xl` | 96px (6rem) | 1 | | `text-9xl` | 128px (8rem) | 1 | Do not combine scale snapping with independently set custom line heights elsewhere in an audit. Tracking and line height may only be adjusted **within** the value the matched step already provides, so the two rules never fight each other. ### Button type - Main buttons: `text-base` (16px), semibold. - Smaller header buttons: `text-sm` (14px), semibold. ## B2. Spacing Only these values. Nothing between them, nothing outside them. | Token | Value | |---|---| | Spacing-0 | 0 | | Spacing-25 | 2px | | Spacing-50 | 4px | | Spacing-75 | 8px | | Spacing-100 | 12px | | Spacing-200 | 16px | | Spacing-300 | 24px | | Spacing-400 | 32px | | Spacing-500 | 40px | | Spacing-600 | 48px | | Spacing-700 | 64px | | Spacing-800 | 80px | | Spacing-900 | 96px | **Main buttons:** 8px vertical padding, 12px horizontal padding. ## B3. Corner radius Only use Tailwind's radius values. **Nested radius formula.** When a shape sits inside another shape and the gap between them is **less than 32px**: ``` inner radius = outer radius − gap ``` Apply this only when the result is **greater than 2**. Below that, leave the inner shape square or unchanged. Example: an outer card at `rounded-2xl` (16px) with 8px of internal padding gives an inner element an 8px radius (`rounded-lg`). ## B4. Borders and backgrounds - **Never apply a border to only one side of a card.** Borders go all the way around or not at all. - **Never use gradients in backgrounds.** Backgrounds are flat. ### Dark mode background colors Use only these: `#000000` · `#181818` · `#1F1F1F` · `#272727` · `#313131` · `#131209` ## B5. Hero section ### Heading color - **Dark theme:** left to right gradient on the heading text, `#FFFFFF` → `#9B9B9B`. - **Light theme:** left to right gradient on the heading text, `#000000` → `#666666`. This is the one place gradients are used, and only on text, never on the background. ### Layout - Heading and subheading both get a **max width of 680px**. - Read the heading copy and insert line breaks at **meaningful** points. - Never break a line in a way that cuts a phrase awkwardly or makes the sentence harder to read. Break where the thought breaks. ## B6. Icons **Use:** Phosphor, Solar, or Iconamoon. **Never use:** Material Icons, Material Symbols. ## B7. Motion choreography (fluid dynamics) Never use default transitions. All motion simulates real world mass and spring physics through custom cubic beziers. ``` transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)] ``` ### Fluid island nav **Closed state.** The navbar is a floating glass pill detached from the top: `mt-6`, `mx-auto`, `w-max`, `rounded-full`. **Hamburger morph.** On click, the hamburger lines fluidly rotate and translate into a perfect X using `rotate-45` and `-rotate-45` with absolute positioning. They must never simply disappear. **Modal expansion.** The menu opens as a screen filling overlay with a heavy glass effect: `backdrop-blur-3xl bg-black/80` or `bg-white/80`. **Staggered mask reveal.** Nav links inside the expanded state fade in and slide up from an invisible box, `translate-y-12 opacity-0` resolving to `translate-y-0 opacity-100`, staggered per item with `delay-100`, `delay-150`, `delay-200`, and so on. ### Scroll interpolation Elements never appear statically on load. As they enter the viewport they execute a gentle, heavy fade up: ``` translate-y-16 blur-md opacity-0 → translate-y-0 blur-0 opacity-100 ``` over 800ms or longer. For JavaScript driven reveals use `IntersectionObserver` or Framer Motion's `whileInView`. **Never use `window.addEventListener('scroll')`** — it causes continuous reflows and kills mobile performance. --- ## B8. Content realism Never ship filler. These are the tells that a page was generated rather than made. - **No Lorem Ipsum.** Write real draft copy. - **No "John Doe".** Use diverse, realistic names. - **No placeholder brands** like "Acme Corp", "Nexus", or "SmartFlow". Invent contextual, believable names. - **No round fake numbers** like `99.99%`, `50%`, `$100.00`. Use organic data: `47.2%`, `$99.00`, `+1 (312) 847-1928`. - **No AI cliches.** Never "Elevate", "Seamless", "Unleash", "Next Gen", "Game changer", "Delve", "Tapestry", or "In the world of". - **Sentence case headers**, not Title Case On Everything. - **Active voice.** "We could not save your changes", not "Mistakes were made". - **No exclamation marks in success messages**, and no "Oops!" in errors. Be direct: "Connection failed. Please try again." - **Unique avatars** per person, and varied blog post dates. ## B9. States Every interactive element ships with its full state set: - **Hover** — background shift, slight scale, or translate - **Active** — `scale(0.98)` or `translateY(1px)` for physical feedback - **Focus** — a visible focus ring. Accessibility requirement, not optional. - **Loading** — skeleton loaders shaped like the real layout, not circular spinners - **Empty** — a composed "getting started" view, never a blank panel - **Error** — inline and specific. Never `window.alert()`. No dead links. A button pointing at `#` is either linked or visually disabled. The current page must be indicated in the navigation. ## B10. Ship requirements Things that get forgotten and make a page feel unfinished: - Privacy policy and terms links in the footer - A custom, branded 404 - Client side form validation for email format and required fields - A skip to content link for keyboard users - Cookie consent where the jurisdiction requires it - A branded favicon - ``, meta description, `og:image`, and social sharing tags - Alt text on every meaningful image - Semantic HTML: `<nav>`, `<main>`, `<article>`, `<aside>`, `<section>` - A way back from every page ## B11. Tagline reveal section (mandatory) Every landing page includes one large type section stating the core benefit or tagline, separate from the hero. It sits further down the page as its own moment, not stacked directly under the hero. **Copy** - Minimum two lines of text. - A benefit statement or tagline, written in the voice of A5, not a generic section heading. **Typography** - Size `text-4xl` to `text-6xl` depending on line count, following the B1 type scale. - Max width capped like the hero, so lines break at meaningful points per B5. **Animation** - Text starts in a subtle, muted tone, roughly 25 to 35% opacity of the theme's base text color. - As the section scrolls into view, each word transitions individually from that muted tone to the full text color, in reading order. - Words activate one at a time as they cross a trigger line, not the entire block flipping at once. The transition uses the custom easing curve from B7, never a linear fade. - Implement with `IntersectionObserver` per word, or a single scroll listener throttled through `requestAnimationFrame`. Never an unthrottled `window.addEventListener('scroll')`, per B7. --- # Output format When generating a landing page from scratch, return these in order before writing code: 1. **Page outline** — sections and their order 2. **Hero copy** — headline, subheadline, CTA, proof line 3. **Benefits** — three to five outcome driven bullets 4. **How it works** — three steps 5. **FAQ** — six to twelve questions and answers 6. **SEO / AEO** — index or noindex recommendation, plus title and meta if indexed 7. **Layout recommendation** — A, B, C, or D, and why Then build section by section per A6. --- # Quick checklist **Strategy** - [ ] One offer, one audience, one primary action - [ ] No competing CTAs above the fold - [ ] Specific numbers instead of vague verbs - [ ] At least one risk reversal - [ ] Proof sits next to the claim it supports - [ ] Layout type chosen deliberately **Visual** - [ ] Single approved typeface, no italics, no ultra bold - [ ] No hyphens in copy, no orphaned words - [ ] Every font size lands on a Tailwind scale step - [ ] Every spacing value comes from the spacing table - [ ] Nested radii follow the formula - [ ] No single sided card borders, no background gradients - [ ] Hero heading and subheading capped at 680px with meaningful line breaks - [ ] Icons from Phosphor, Solar, or Iconamoon - [ ] Every transition uses a custom cubic bezier, scroll reveals use IntersectionObserver - [ ] Tagline reveal section present, minimum two lines, words activate one at a time on scroll **Content and ship** - [ ] No Lorem Ipsum, no placeholder brands, no AI cliches, no round fake numbers - [ ] Hover, active, focus, loading, empty, and error states all present - [ ] No dead links, current nav item indicated - [ ] 404, legal links, form validation, favicon, meta tags, alt text ## Dónde encaja - Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual. - Creador: [elayadesign](https://skillsagentes.com/creators/elayadesign.md) — 1 skills en el directorio - [Todas las skills](https://skillsagentes.com/skills.md) - [Ranking de instalaciones](https://skillsagentes.com/ranking.md) ## Skills relacionadas - [Frontend Design](https://skillsagentes.com/skills/anthropics/skills/frontend-design.md): Guía para un diseño visual distintivo e intencionado al construir o rehacer una UI. Ayuda con la dirección estética, la tipografía y las decisiones que no se leen como valores por defecto. - [Canvas Design](https://skillsagentes.com/skills/anthropics/skills/canvas-design.md): Crea arte visual en documentos .png y .pdf partiendo de una filosofía de diseño. Úsalo cuando pidan un póster, una pieza de arte, un diseño u otra pieza estática. - [Theme Factory](https://skillsagentes.com/skills/anthropics/skills/theme-factory.md): Kit para dar estilo a artefactos con un tema: diapositivas, documentos, informes o landing pages. Trae 10 temas predefinidos de colores y fuentes, y puede generar uno nuevo sobre la marcha. - [Slack Gif Creator](https://skillsagentes.com/skills/anthropics/skills/slack-gif-creator.md): Conocimiento y utilidades para crear GIFs animados optimizados para Slack: restricciones, herramientas de validación y conceptos de animación. Úsalo cuando pidan un GIF animado para Slack. - [Brand Guidelines](https://skillsagentes.com/skills/anthropics/skills/brand-guidelines.md): Aplica los colores y la tipografía oficiales de la marca Anthropic a cualquier artefacto que pueda beneficiarse de su look-and-feel. Úsalo cuando apliquen colores de marca o estándares de diseño. --- Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)