Crea y publica tu landing con IA
Del brief a la web.
Sin código, sin ser diseñador, sin esperar a nadie. Solo tú, una idea y una IA dispuesta a seguirte el ritmo.
¿Hasta dónde llegarás?¿Quién soy?
Daniel Herrera.
Fundador de Digamma Studio, Co Founder & CTO de Trustcare Med, en Medellín. Llevo más de 14 años construyendo webs, apps y plataformas para marcas y startups.
Hoy construyo sistemas escalables basados en IA: productos que funcionan igual de bien con cien usuarios que con cien mil.
No vengo a convertirte en programador. Vengo a enseñarte a dirigir a quien programa.
El brief ya existe
No partimos de cero: partimos de un brief.
ArmonIA Coffee Roasters. Café de especialidad de fincas de Guarne, Antioquia.
Suscripción mensual: 2 bolsas de 340 g por $89.000 COP, con domicilio incluido.
Profesionales de 28 a 45 años que trabajan desde casa.
Tostado como máximo 72 horas antes del envío. Cancelas por WhatsApp.
Un solo botón: “Recibir mi primer café”.
Cálido y cercano. Experto, sin pretensión.
Con este brief voy a construir la landing en vivo. Con el tuyo funciona igual.
Tres bloques
Del brief a la web en tres bloques.
Fundamentos de la IA
Qué es, cómo “piensa”, qué hace bien y en qué no hay que creerle.
Te llevas: el vocabulario y el criterioAnatomía de un prompt
Cómo se pide hoy: contexto, piezas y forma de trabajar con la IA.
Te llevas: una fórmula que funcionaConstruir la landing
Qué debe tener una landing y la demo en vivo: del brief a una página publicada.
Te llevas: los prompts de la demo y un checklistNo vas a programar: vas a dirigir a una IA que programa, como diriges a una agencia.
Bloque uno
Fundamentos de la IA.
¿Qué es exactamente esto con lo que vamos a trabajar?
Lo único técnico que necesitas saber
La IA es el autocompletar de tu celular, entrenado con casi todo internet.
Escoge la palabra que suena mejor, no la que es cierta. Puede equivocarse con total seguridad.
Si antes le das tu brief, cambian las sugerencias. Sin brief, sugiere lo de siempre: el cliché.
Vocabulario 1 · Cómo funciona
Con esto entiendes cualquier herramienta de IA.
LLM
Modelo de lenguaje grande: el “cerebro”. Claude, GPT o Gemini.
Prompt
Lo que le pides a la IA. Es un brief: mientras más claro, mejor el resultado.
Token
Pedacito de texto, unas ¾ de palabra. El uso y los límites se miden así.
Contexto
Todo lo que el modelo “ve” ahora. Lo que no le das, no existe para él.
Memoria
Lo que recuerda entre conversaciones. Sin ella, cada chat empieza de cero.
Alucinación
Un dato falso dicho con total seguridad. Verifica cifras, nombres y citas.
Multimodal
Entiende y produce más que texto: imágenes, capturas, audio, PDF.
Embedding
Convertir textos en números para buscar por significado, no por palabra exacta.
Markdown
Texto con símbolos simples: # título, **negrita**, - lista. El idioma nativo de la IA.
Fine-tuning
Reentrenar un modelo con tus datos. Para una landing no hace falta.
Vocabulario 2 · La IA que actúa
Y con estas entiendes hacia dónde va.
Agente
Una IA que además de hablar, hace: planea, usa herramientas, revisa y corrige.
Herramientas
Lo que la IA puede usar: buscar en la web, leer archivos, ejecutar código.
MCP
El “USB-C” de la IA: la conecta con Drive, Notion, Gmail o tu CRM. En las apps se llaman Conectores.
Skills
Manuales que la IA carga solo cuando los necesita: “así hacemos las landings aquí”.
Razonamiento
Modelos que “piensan” antes de responder. Más lentos, mejores en tareas complejas.
Instrucciones
Reglas fijas que la IA sigue en todo un proyecto. Se escriben una vez.
RAG
La IA busca en tus documentos antes de responder y cita de dónde lo sacó.
Vibe coding
Construir software describiendo lo que quieres, sin escribir código. Lo haremos en la demo.
La diferencia que importa
El chat te dice cómo. El agente lo hace.
| Chat de IA | Agente o asistente de IA | |
|---|---|---|
| Cómo trabaja | Pregunta y respuesta, un turno a la vez | Recibe un objetivo y encadena los pasos solo |
| Quién ejecuta | Tú: copias, pegas, pruebas y vuelves a preguntar | Él: crea archivos, navega, prueba y corrige |
| Herramientas | Pocas: buscar en la web, leer adjuntos | Muchas: navegador, archivos, tus apps (MCP), skills |
| Con la landing | Te entrega el código para que tú lo armes | Arma la carpeta, la revisa en el navegador y te avisa qué falta |
| Tu rol | Operador | Director: apruebas el plan y verificas el resultado |
| Ejemplos | ChatGPT, Claude o Gemini, solo conversando | Claude Code, Codex, modo agente de ChatGPT |
Un asistente es el punto medio: un chat con instrucciones, memoria y conectores. Un GPT, un Gem o un Proyecto.
Por qué hoy es posible sin instalar nada
El punto medio: un chat que ya construye.
Tú preguntas, la IA responde con texto. Tú copias, pegas, pruebas y vuelves a preguntar.
ChatGPT, Claude o Gemini, solo texto
Tú describes el resultado. La IA crea la página, te la muestra funcionando y la corrige cuando le pides cambios.
Artifacts en Claude, Canvas en ChatGPT y Gemini
Hoy el chat ya crea y muestra la página dentro del navegador. Sin instalar nada: es lo que vamos a usar.
Qué delegar y qué no
La IA predice lo probable. Tú respondes por lo verdadero.
- Borradores, variantes y titulares
- Diseño y código de la página
- Revisar contra una lista de requisitos
- Traducir lo técnico a palabras simples
- La estrategia: qué vendes y a quién
- Precios, cifras y testimonios reales
- Elegir entre propuestas y aprobar
- Datos personales y temas legales
Regla práctica: todo lo que la IA afirme como dato, se verifica antes de publicarlo.
El mapa de herramientas hoy
Elige según lo que necesitas entregar.
| Para | Herramientas | Qué te entrega | Costo |
|---|---|---|---|
| Conversar | ChatGPT · Claude · Gemini | Textos, ideas, revisiones | Gratis o unos USD 20/mes |
| Diseñar | Claude Design · Stitch · Figma Make | Propuestas visuales de la página | Gratis con límites |
| Construir | Claude Artifacts · ChatGPT Canvas · Gemini Canvas | Un archivo index.html listo para subir | Gratis con límites |
| Publicar | Tu hosting web: el panel de archivos | Ya tienes la carpeta del proyecto: súbela y queda en tu dominio | Desde unos USD 3/mes |
Las herramientas cambian cada trimestre. Lo que se queda contigo es el criterio.
Bloque dos
Anatomía de un prompt.
¿Cómo se le pide bien a una IA en 2026?
Las piezas
Un prompt bien hecho, pieza por pieza.
Adjunto el brief de ArmonIA Coffee Roasters.Marca, oferta, audiencia, tono. Lo más importante.Es para pauta en Instagram: llegan desde el celular y deciden en segundos.Para qué sirve el resultado. Orienta todas las decisiones.Escribe 3 titulares para el inicio de la landing.Un verbo concreto y una cantidad.Tabla: titular, subtítulo y por qué funciona.Cómo lo quieres recibir.Máximo 10 palabras, porque se lee en móvil. Sin cifras inventadas.Qué evitar y por qué.Tono de referencia (no lo copies): “Café de finca, en tu puerta cada mes”.Muestra lo que te gusta.Léelo como un cliente que nunca ha oído de la marca.Solo si cambia la perspectiva.Mismo modelo, distinto pedido
La calidad de la respuesta la decide tu contexto.
Hazme una landing para una marca de café.
Adjunto el brief de ArmonIA Coffee Roasters. Es para pauta en Instagram. Escribe 3 titulares de máximo 10 palabras, orientados a beneficio, sin clichés.
“Eleva tu experiencia cafetera. Calidad premium, sin complicaciones.”
“Café de finca, tostado hace 72 horas, en tu puerta cada mes.”
No hay palabras mágicas. Lo que no está en el contexto, la IA lo rellena con lo más probable: el cliché.
Cuatro hábitos
Ya no se escribe un prompt: se dirige una conversación.
Adjunta, no resumas
Sube el brief, capturas y referencias completas. Los modelos actuales leen documentos enteros.
Que te pregunte primero
Termina con: “Antes de empezar, hazme las preguntas que necesites.” Detecta lo que le falta a tu brief.
Plan antes de hacer
Pídele un plan, revísalo y apruébalo. Luego trabaja por partes: sección por sección.
Contexto que se queda
Usa Proyectos o instrucciones personalizadas: guardas el brief una vez y no lo repites en cada chat.
Bloque tres
Construir la landing.
¿Cómo se convierte un brief en una página publicada que funcione?
Escribir para convertir
Específico vence a bonito.
“Eleva tu experiencia cafetera”
“Calidad premium, sin complicaciones”
Botón: “Saber más”
“Café de finca, tostado hace 72 horas, en tu puerta cada mes”
“Cancela con un mensaje de WhatsApp”
Botón: “Recibir mi primer café”
Fórmulas de titular
{Resultado} sin {dolor}
El {categoría} para {audiencia}
{Resultado} en {tiempo}
El botón
Verbo + lo que recibe. Nunca “Enviar” ni “Saber más”.
Huele a IA
“Eleva”, “potencia”, “revoluciona”, “sin fisuras” y cifras redondas como 99%.
Lo que debe tener toda landing
Lo que le vamos a exigir a la IA, en palabras humanas.
| Le pedimos | Qué es | Para qué sirve |
|---|---|---|
| title + meta description | El título y el resumen que aparecen en Google | Que hagan clic desde el buscador |
| un solo H1 | El titular principal de la página | Que Google entienda de qué trata |
| texto alt | Descripción de cada imagen para quien no la ve | Accesibilidad y búsqueda de imágenes |
| JSON-LD (schema) | Datos ordenados sobre tu negocio, precio y FAQ | Que las máquinas lean tu oferta |
| Open Graph | La vista previa al compartir en WhatsApp o LinkedIn | Que el enlace se vea profesional |
| sitemap y robots.txt | Índice de páginas y permisos para los robots | Que Google y las IA puedan entrar |
| Core Web Vitals | Que cargue rápido y no “salte” en pantalla | Que la gente no se vaya |
Ahora, en vivo: del brief a la web.
1 · Diseñar
Stitch o Claude Design proponen tres variantes. Elegimos una.
2 · Construir
Claude o ChatGPT convierten brief y diseño en un archivo index.html.
3 · Publicar
Subimos la carpeta al hosting y la abrimos en el celular.
Prompt · El diseño
Describe una sensación, no una plantilla.
Prompt · La construcción
El prompt maestro: brief, diseño y buscadores juntos.
Cómo pedir cambios
Pide cambios como un director, no como un cliente frustrado.
“No me gusta, hazlo más bonito”
“Arregla todo”
“Rehaz la página completa”
“En el inicio, el botón se pierde. Hazlo terracota y ponlo encima de la foto en celular.”
“Adjunto captura: en el iPhone los testimonios se cortan.”
“Revisa la página como experto SEO y dame los 5 problemas más graves.”
La fórmula: dónde está, qué pasa y qué esperas. Una captura vale más que un párrafo.
Publicar · Hosting web
Subir tu página es como subir un archivo a Drive.
Hosting + dominio
Contrata un plan básico que incluya dominio: armoniacoffee.co.
Administrador de archivos
Entra al panel del hosting (cPanel o similar) y abre la carpeta public_html.
Sube los archivos
Arrastra index.html, la carpeta img, robots y sitemap.
Activa el candado
Activa el SSL gratuito desde el panel. Abre tu dominio en el celular.
Antes de compartir la URL
Tu landing está lista si…
Tu landing en armoniacoffee.co, abierta desde cualquier celular.
- En el celular se entiende la oferta sin hacer scroll
- Hay un solo botón y funciona de punta a punta
- Leíste todo: nada de cifras ni testimonios inventados
- La IA revisó la lista de requisitos y no falta nada
- Al compartirla por WhatsApp se ve imagen y título
- Carga rápido en el celular (pagespeed.web.dev)
- Aparece el candado junto a la dirección
SEO · AEO · GEO
Ya no basta con aparecer. Hay que ser la respuesta.
Aparecer en Google
Search Engine Optimization. Que tu página salga en los resultados cuando alguien busca lo que vendes.
Ser la respuesta
Answer Engine Optimization. Que Google o un asistente tome tu texto como la respuesta directa, sin clic.
Que la IA te recomiende
Generative Engine Optimization. Que ChatGPT, Gemini o Perplexity te nombren cuando alguien pide una recomendación.
Las tres comparten la base: contenido claro, técnica limpia y reputación. Lo técnico ya lo pidió el prompt de la demo.
Qué tener en cuenta
Cinco cosas por sigla.
- Title y description con las palabras que la gente busca
- Un tema por página y un solo H1
- Texto real, no escrito dentro de imágenes
- Que cargue rápido en el celular
- Registrarla en Search Console y enviar el sitemap
- Preguntas reales de clientes como subtítulos
- La primera frase de cada respuesta, directa
- Datos concretos: precio, tiempos, lugar
- Schema (JSON-LD) de producto y preguntas frecuentes
- Precios y fechas siempre actualizados
- Permitir los robots de IA en robots.txt
- Registrarla en Bing: ChatGPT se apoya en él
- Reseñas en Google Business Profile
- Menciones en prensa, blogs y directorios
- El mismo nombre y datos en todas partes
SEO tarda semanas. GEO tarda meses. La conversión se mide desde el primer día.
Lo que hicimos hoy
Un brief. Tres bloques. Una landing en internet.
Fundamentos
La IA predice lo probable: el contexto lo es todo y los datos se verifican.
Prompt
Contexto, objetivo, tarea y límites; y cuatro hábitos: adjunta, que pregunte, plan, contexto que se queda.
Landing
Diseño, construcción en el chat, publicación en un hosting y SEO, AEO y GEO para que te encuentren.
La herramienta va a cambiar el próximo trimestre. El criterio que pusiste en el brief, no.
Tu tarea: del brief a la web esta semana.
1 · Ten tu brief listo
Los seis campos: marca, oferta, audiencia, diferencial, acción y tono. Es el insumo de todo.
2 · Usa los prompts
Cada recuadro negro tiene botón de copiar. Adjunta tu brief en lugar del de ArmonIA.
3 · Comparte tu URL
Publica tu landing y compártela con el grupo para recibir retroalimentación.
Del brief a la web
Gracias.
Daniel Herrera · Digamma Studio · Trustcare Med
¿Hasta dónde llegarás?