Crea una web que vende desde cero, sin programar

El brief: lo más importante (sin esto no se construye)

Esto es lo PRIMERO. Antes de colores, antes de plantillas, antes de tocar nada. Es lo mismo que hago con un cliente el primer día: sentarse y cerrar el brief. Construir una web sin brief es como pedirle a un arquitecto que levante tu casa sin decirle cuántas habitaciones quieres ni para qué la usas. Responde estos bloques con calma:

Lo que NO puede faltar: define ya si tu web es ecommerce o de captación de leads. Esa única decisión condiciona todo lo demás (estructura, herramientas, código). No la dejes para después.

Dónde la construyes: WordPress + tu hosting

Olvídate de constructores cerrados que te atan. Mi recomendación es WordPress: es flexible, lo montas tú sin saber programar (no-code) y, lo más importante para este método, te deja pegar código — que es justo lo que Claude te va a generar.

WordPress necesita una “casa” donde vivir: un hosting. Y aquí no hay debate, el hosting por excelencia para empezar es Hostinger: barato, rápido y con WordPress en 1 clic.

El camino es directo:

• 1. Contratas dominio + hosting en Hostinger (muchas veces el dominio va incluido el primer año).
• 2. Instalas WordPress en 1 clic desde su panel.
• 3. Ya tienes tu web vacía lista para llenarla con el código del paso 4 y 5.

Ajusta según tu caso: si es ecommerce, activas el plugin WooCommerce (la tienda de WordPress) para tener catálogo y carrito. Si es captación de leads, no necesitas tienda: te basta con la web y un buen formulario.

La estructura que convierte (según tu caso)

Una home sin orden es como una conversación sin hilo: el visitante se pierde y se va. El cerebro de quien entra quiere las cosas en este orden. Esta es la estructura base de una home que vende, de arriba abajo:

• 1. Hero — una promesa clara (qué consigue) + para quién es. Lo primero que se ve, sin scroll.
• 2. El problema — nombra el dolor de tu cliente para que sienta “esto es para mí”.
• 3. Prueba real — casos, logos, testimonios o resultados de verdad. Nada de prueba social inventada: una mentira aquí te cuesta la confianza entera.
• 4. Oferta / servicios — qué ofreces y cómo ayuda, en beneficios claros.
• 5. CTA repetido — el mismo botón varias veces a lo largo de la página.

Ahora la diferencia que lo cambia todo, según lo que decidiste en el brief:

• Si es ecommerce — además del hero, lo importante es el catálogo visible, fichas de producto claras (foto buena, beneficio, precio, botón de comprar), carrito fácil y señales de confianza (envíos, devoluciones, pagos seguros). El cliente tiene que poder comprar en 3 clics.
• Si es captación de leads — un solo CTA mandando, formulario corto (cuantos menos campos, más leads) y, si puedes, un lead magnet (regalo a cambio del email). No distraigas con mil botones: aquí la única misión es que dejen sus datos.

El método: deja que Claude te genere el CÓDIGO

Aquí está el truco que casi nadie usa. En vez de pelearte con plantillas que nunca quedan como quieres, le pides a Claude que te escriba el código de la página y tú simplemente lo pegas. No programas: copias y pegas. Dentro de WordPress es así de fácil:

• 1. Entra al panel de WordPress: tu dominio + /wp-admin (ej. tuweb.com/wp-admin).
• 2. En el menú izquierdo: Páginas → Añadir nueva.
• 3. Dentro de la página, añade un bloque “HTML personalizado” (pulsas el “+”, buscas “HTML”). En el editor Gutenberg de WordPress también vale un widget HTML.
• 4. Pega el código que te dé Claude dentro de ese bloque.
• 5. Pulsa Publicar. Listo: esa página ya está online.

Regla mental: una página = un código. Repites el proceso para Inicio, Servicios, Contacto y Blog. En el paso 5 tienes el prompt que te las entrega todas.

El prompt: que Claude te entregue el código

Un truco que dispara la calidad del diseño: instala la skill gratuita frontend-design de Anthropic. Hace que Claude maquete con criterio profesional (buenas tipografías, composición cuidada) y no con “cara de plantilla genérica”.

Se instala una sola vez: descárgala y colócala en tu carpeta de skills de Claude (.claude/skills/frontend-design/).

Después pega este prompt (rellena los huecos [ ]) y Claude, apoyándose en la skill, te entrega el código de cada página:

Usa la skill frontend-design. Actúa como diseñador y desarrollador web senior: webs que convierten, copy claro (sin tecnicismos) y HTML + CSS limpio y responsive.

Te paso mi brief, el tipo de web y mi marca. Entrégame el código HTML de cada página, UNA POR UNA y por separado, lista para pegar como bloque "HTML personalizado" en WordPress, con el CSS aislado en un id contenedor (p. ej. #miweb) para no chocar con el tema.

BRIEF: [PEGA TU BRIEF]
TIPO DE WEB: [ECOMMERCE o LEADS]
MARCA: [COLORES (principal + acento), TIPOGRAFÍAS, LOGO, REFERENCIAS]
ESTRUCTURA (home que convierte): hero (promesa + para quién + CTA) · el problema · prueba real (no inventes datos: deja [PENDIENTE]) · oferta/servicios (beneficios) · CTA repetido.

Entrégame, en este orden: 1) INICIO  2) SERVICIOS (o catálogo si es ecommerce)  3) CONTACTO (formulario corto)  4) BLOG (portada con espacio para artículos). Empieza por INICIO.