Qué hace que una landing page funcione

Antes de construir, conviene saber qué necesita una landing page de alta conversión:

• Una propuesta de valor clara - los visitantes entienden en segundos qué ofreces.
• Una llamada a la acción potente - un único CTA principal que destaque y diga exactamente qué hacer.
• Prueba social - testimonios, logos de clientes o cifras que generen confianza.
• Un diseño limpio - cada elemento apoya el objetivo de conversión.
• Carga rápida - la velocidad importa a los visitantes y al posicionamiento.

Cómo funciona Cmssy

Cmssy es un CMS headless con editor visual. Escribes los bloques como componentes React en tu propia app con @cmssy/react y @cmssy/next, y despliegas esa app tú mismo, en Vercel o donde quieras. Cmssy guarda y entrega el contenido; tu app lo renderiza. El editor visual enmarca tu sitio en marcha, así que los editores arrastran bloques y editan el texto sobre la página real.

Paso 1: Empieza con un ejemplo o conecta tu propia app

Lo más rápido es partir de un ejemplo listo para ejecutar. cmssy-io/examples contiene apps independientes que renderizan el workspace de demo público sin cuenta:

git clone https://github.com/cmssy-io/examples
cd examples/next-storefront
pnpm install
cp .env.example .env.local
pnpm dev

next-storefront ya incluye los tres bloques que necesita una landing page - hero, value-props y cta-banner -, así que puedes leer versiones terminadas de todo lo que sigue.

Para conectar tu propia app, deja que la CLI copie los archivos y la enlace con tu workspace:

npx create-next-app@latest my-site
cd my-site
npx @cmssy/cli@latest init
pnpm install
npx @cmssy/cli@latest link --token cs_...
pnpm dev

init escribe un registro de bloques en cmssy/blocks.ts, un bloque de ejemplo en blocks/hero/ y una página catch-all que renderiza todo lo que publiques con createCmssyPage de @cmssy/next/server. Cada archivo es código normal en tu repositorio. link escribe los slugs y el secreto de borrador de tu workspace en .env.local y los comprueba contra la API.

Paso 2: Define tus bloques

Un bloque es un componente React más un esquema que lee el editor. Declaras los campos editables con fields, tipas el componente con BlockProps y registras ambos con defineBlock. Sustituye el hero de ejemplo por uno con llamada a la acción.

blocks/hero/Hero.tsx:

import { fields, type BlockProps } from "@cmssy/react";

export const heroProps = {
  heading: fields.text({ label: "Heading", required: true }),
  subheading: fields.textarea({ label: "Subheading" }),
  ctaText: fields.text({ label: "Button text" }),
  ctaUrl: fields.link({ label: "Button URL" }),
};

export default function Hero({ content }: BlockProps<typeof heroProps>) {
  const { heading, subheading, ctaText, ctaUrl } = content;
  return (
    <section>
      <h1>{heading}</h1>
      {subheading ? <p>{subheading}</p> : null}
      {ctaText && ctaUrl ? <a href={ctaUrl}>{ctaText}</a> : null}
    </section>
  );
}

blocks/hero/block.ts:

import { defineBlock } from "@cmssy/react";
import Hero, { heroProps } from "./Hero";

export const heroBlock = defineBlock({
  type: "hero",
  label: "Hero",
  component: Hero,
  props: heroProps,
});

El componente recibe todo en una sola prop content, tipada a partir del esquema: heading es un string porque es obligatorio, y los demás campos pueden ser undefined. Una lista de características es un repeater, y cada elemento tiene su propio esquema.

blocks/features/Features.tsx:

import { fields, type BlockProps } from "@cmssy/react";

export const featuresProps = {
  heading: fields.text({ label: "Heading" }),
  items: fields.repeater({
    label: "Features",
    itemLabel: "Feature",
    maxItems: 6,
    itemSchema: {
      title: fields.text({ label: "Title", required: true }),
      text: fields.textarea({ label: "Text" }),
    },
  }),
};

export default function Features({ content }: BlockProps<typeof featuresProps>) {
  const items = content.items ?? [];
  return (
    <section>
      {content.heading ? <h2>{content.heading}</h2> : null}
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            <strong>{item.title}</strong>
            {item.text ? <p>{item.text}</p> : null}
          </li>
        ))}
      </ul>
    </section>
  );
}

blocks/features/block.ts es la misma llamada a defineBlock que la del hero, con type: "features" y component: Features. Escribe el bloque CTA igual - un título, un texto, el texto del botón y un fields.link - o copia cta-banner de next-storefront, que es exactamente eso. Después añade los tres al registro.

cmssy/blocks.ts:

import { heroBlock } from "@/blocks/hero/block";
import { featuresBlock } from "@/blocks/features/block";
import { ctaBlock } from "@/blocks/cta/block";

export const blocks = [heroBlock, featuresBlock, ctaBlock];

Ese array es la única lista de bloques que tu sitio sabe renderizar. El servidor renderiza a partir de ella y el editor lee de ella el esquema de cada bloque, así que los bloques aparecen en el selector con los campos que declaraste. El marcado y los estilos son tuyos, así que los bloques encajan exactamente con tu sistema de diseño.

Paso 3: Crea la página en Cmssy

En el admin de Cmssy, crea una página nueva con un nombre y un slug, por ejemplo /launch. El slug es la ruta que renderizará tu app. La página empieza vacía: a continuación la llenas con tus bloques.

Paso 4: Monta la página en el editor visual

Abre la página en el editor. Mientras desarrollas, apunta el Dev host del editor a http://localhost:3000; para el sitio desplegado, configura la Preview URL del workspace. El editor enmarca tu app en marcha, así que ves tus componentes reales. Arrastra los bloques Hero, Features y CTA a la página en ese orden y haz clic en cualquier bloque para editarlo: los campos que declaraste aparecen como controles de formulario. Escribe un titular, añade tres o cuatro beneficios y define el texto y el enlace del botón.

Paso 5: Añade prueba social

La gente confía en la gente. Si tienes un bloque de testimonios, logos o cifras (next-storefront incluye stats-band), colócalo justo después del hero para ganar credibilidad antes de pedir la conversión.

Paso 6: Deja que un agente de IA escriba (opcional)

El admin tiene un asistente integrado (Cmd + K) que funciona con una clave de modelo que aportas tú, y las mismas herramientas están disponibles para Claude y otros clientes MCP a través del servidor MCP. Ambos están en todos los planes. Con la página abierta en el editor, el asistente puede generarla, traducirla o editar los bloques que tienes delante; también escribe el título y la descripción SEO. Solo edita contenido, nunca tu código, y los cambios en el lienzo quedan sin guardar hasta que guardas. Publicar es uno de los pasos que esperan tu confirmación.

Paso 7: Configura el SEO

Cada página tiene un título SEO y una meta descripción por idioma, más una lista de palabras clave:

• Título SEO - incluye tu palabra clave principal y no pases de 60 caracteres.
• Meta descripción - resume la página en unos 155 caracteres, con una llamada a la acción.
• Palabras clave - los términos que busca tu audiencia.

La API de entrega los devuelve con la página, y tu app los coloca en los metadatos de Next.js en generateMetadata. El ejemplo next-storefront lo hace en services/seo.ts.

Paso 8: Publica

Haz clic en Publicar. El contenido sale en vivo por la API de entrega, y tu app lo renderiza en el slug que configuraste, en tu propio dominio y hosting. Apunta un webhook content.changed a la ruta /api/revalidate de tu app (la CLI la escribe por ti) y cada publicación aparece sin volver a desplegar.

Buenas prácticas para landing pages

• Un objetivo por página - cada landing page debe tener un único objetivo de conversión.
• Primero el móvil - prueba en pantallas pequeñas antes que nada.
• Prueba titulares - pequeños cambios en el titular pueden mover la conversión de forma notable.
• Vigila el tiempo de carga - comprime imágenes y quita los scripts que la página no necesita.
• Urgencia, pero honesta - un plazo real ayuda; una cuenta atrás falsa cuesta confianza.

Próximos pasos

• Clona cmssy-io/examples y lee los bloques terminados de next-storefront.
• Sigue la guía de instalación para conectar tu propia app.
• Lee cómo se definen los bloques, con todos los tipos de campo.
• Configura el asistente de IA o el servidor MCP.