Crea y publica un sitio web real con IA

Qué es esta guía y qué no es

Construí FunnelFlag.com sin saber programar.

Eso no significa que el sitio se haya creado sin código. ChatGPT escribió HTML, CSS y JavaScript. Mi trabajo fue aportar el contexto del negocio, tomar decisiones, revisar lo que generaba y seguir dirigiendo el proceso hasta que el sitio funcionara.

Esta guía muestra el proceso que volvería a usar.

Está diseñada para profesionales de marketing que ya tienen su marca definida, pero nunca han creado un sitio web desde cero.

Al terminar, tu objetivo es tener:

• Un sitio web real y adaptable a distintos dispositivos, no solo una maqueta.
• Un sitio funcional que puedas revisar y mejorar en ChatGPT mediante GPT Sites.
• Un paquete de publicación ordenado cuando estés listo para publicar.
• Una URL pública en una plataforma de alojamiento.
• Tu dominio propio conectado.
• SEO técnico básico y metadatos para redes sociales.
• Opcionalmente, un formulario funcional, alertas de envíos y correo profesional.

Requisito importante

No empieces este proceso hasta tener definidos:

• El nombre de tu marca.
• Tu público objetivo.
• Tu oferta o servicios.
• Tu posicionamiento.
• La voz de tu marca.
• La identidad visual, incluidos colores y tipografías.
• El objetivo principal de conversión.

Esta guía trata de convertir una marca existente en un sitio web funcional. No es una guía de creación de marca.

Creada para ChatGPT, adaptable a otras herramientas de IA

Este proceso está escrito específicamente para ChatGPT porque es la herramienta que usé para construir FunnelFlag.com. Puedes aplicar la misma metodología con otros asistentes de IA capaces. Las funciones, la interfaz, las herramientas de imagen, la vista previa y la ayuda para publicar pueden variar, pero el proceso central es el mismo: darle a la IA una fuente de referencia, tomar decisiones por etapas, mantener una versión de trabajo y resolver problemas a partir de lo que realmente ves.

Dos reglas que hicieron funcionar el proceso

1. Mantén una fuente de referencia.
No hagas que ChatGPT redescubra tu marca en cada conversación. Mantén un documento base en Markdown con las decisiones ya aprobadas.

2. Trabaja con puntos de control.
No pidas el sitio terminado en un solo prompt gigante. Aprueba por etapas la estrategia, la estructura, la dirección visual, los textos, el código, la publicación y la configuración técnica.

EL PROCESO EN 6 PASOS

1. Convierte tu marca en un documento base para crear el sitio.
2. Define la estructura del inicio y su ejecución visual.
3. Crea la primera versión funcional en GPT Sites.
4. Mejora cada sección sin romper las demás.
5. Revisa la calidad y el SEO, y organiza los archivos finales.
6. Publica el sitio y conecta tu dominio.

Después, si los necesitas, agrega formularios, alertas y correo profesional.

PASO 1 - CREA EL DOCUMENTO BASE DE TU SITIO WEB

Objetivo

Dale a ChatGPT suficiente contexto para tomar decisiones sobre el sitio sin obligarte a repetir la estrategia de marca cada vez.

Para FunnelFlag, trabajé con documentos que reunían el posicionamiento, la audiencia, los servicios, las reglas de redacción, la identidad visual, el sistema funcional de colores y los objetivos del sitio. Esto hizo mucho más consistentes las conversaciones posteriores sobre diseño y desarrollo.

Qué debe incluir tu documento base

Como mínimo:

• Nombre de la marca y dominio.
• Qué hace la empresa.
• Tu público objetivo.
• Problema principal que resuelve.
• Tu oferta o servicios.
• Llamado a la acción principal (CTA).
• CTA secundario, si existe.
• La voz de tu marca.
• Mensajes aprobados.
• Reglas de redacción.
• Colores institucionales con códigos HEX, RGB u otros códigos aprobados exactos.
• Tipografías.
• Logo y recursos disponibles. Idealmente, entrega el logo en SVG, con versiones positiva y negativa para fondos claros y oscuros.
• Referencias visuales o reglas de diseño.
• Secciones o páginas que ya sabes que necesitas.
• Lo que el sitio debe evitar.
• Requisitos técnicos que ya conoces.

Prompt 1 - Convierte el material de tu marca en un documento base para el sitio

Voy a crear un sitio web real para [NOMBRE DE LA MARCA] usando ChatGPT como asistente de estrategia, diseño, programación y configuración técnica.

Ya tengo definida la estrategia de marca. NO quiero que reinventes la marca.

Usa la información que te entregue como fuente de referencia y crea un documento base conciso para construir el sitio web en Markdown.

Debe incluir:
1. Nombre de la marca y dominio
2. Descripción del negocio
3. Público objetivo
4. Problema principal y propuesta de valor
5. Oferta o servicios
6. CTA principal y secundario
7. Voz de marca y reglas de redacción
8. Identidad visual: colores, tipografías, logo y recursos
9. Objetivo del inicio
10. Secciones o páginas necesarias
11. Funcionalidades necesarias
12. Requisitos de SEO
13. Lo que el sitio debe evitar
14. Decisiones pendientes

No inventes decisiones de marca que falten. Ponlas en "Decisiones pendientes" y pregúntame por ellas después de crear el documento.

Este es el material existente de mi marca:
[PEGA O ADJUNTA LOS DOCUMENTOS DE TU MARCA]

Antes de continuar, hazme todas las preguntas necesarias para que este documento sea lo más completo y preciso posible.

Prompt 2 - Crea la lista de recursos del proyecto

Con el documento base aprobado, crea una lista de todos los recursos y la información que necesitamos antes del desarrollo.

Organiza la lista en:
- Textos
- Recursos de marca
- Imágenes o ilustraciones
- Enlaces sociales
- Dominio y alojamiento
- Formularios
- SEO
- Aspectos legales o de privacidad
- Analítica

Clasifica cada elemento como:
- Necesario antes de programar
- Se puede agregar antes de publicar
- Opcional para después

No agregues herramientas ni requisitos que no tengan un propósito claro para este sitio.

Ejemplo de FunnelFlag

La marca y el posicionamiento ya estaban definidos antes de comenzar la construcción final. El proceso se enfocó en llevar esas decisiones a una página de inicio, no en decidir desde cero qué era FunnelFlag.

PASO 2 - DEFINE EL INICIO ANTES DE PROGRAMAR

Objetivo

Decide qué debe comunicar la página, en qué orden y cómo debe verse la marca en la web antes de generar el código final.

Aquí es donde muchos proyectos web con IA fallan. Una página pulida no sirve si lo que cuenta resulta confuso.

El inicio de FunnelFlag se simplificó varias veces. Algunas de las mejores decisiones fueron eliminar: se quitaron módulos redundantes, se reordenaron secciones y se movió información detallada fuera del inicio.

Prompt 3 - Construye la narrativa del inicio

Actúa como estratega web sénior y consultor de experiencia de usuario enfocado en conversión.

Con mi documento base aprobado, crea la arquitectura de información del inicio de [NOMBRE DE LA MARCA].

El objetivo del inicio es:
[OBJETIVO PRINCIPAL DEL INICIO]

La audiencia principal es:
[PÚBLICO OBJETIVO]

El CTA principal es:
[CTA PRINCIPAL]

Para cada sección propuesta, entrega:
- Propósito
- Mensaje principal
- Enfoque recomendado para el título
- Contenido de apoyo
- CTA, si hace falta
- Por qué debe estar en esa posición

Reglas:
- No hagas que el inicio explique todo.
- Elimina secciones redundantes.
- Prioriza claridad, confianza y conversión.
- Respeta la voz de marca y las reglas visuales del documento base.
- Cuestiona mis supuestos cuando una sección no ayude a la página.
- No escribas código todavía.

Prompt 4 - Genera tres propuestas visuales

Si tu identidad de marca ya está definida, no le estás pidiendo a ChatGPT que invente tres marcas nuevas. Le estás pidiendo tres ejecuciones web de la misma marca.

Usa códigos de color exactos siempre que los tengas. Esto reduce la probabilidad de que la IA interprete un color de forma distinta entre las exploraciones visuales o las versiones posteriores.

Además, no generes las imágenes de concepto visual dentro del chat principal de tu sitio. Pídele a ese chat que cree los prompts y genera cada dirección en un chat de imágenes separado. Así mantienes enfocada la conversación principal y reduces la saturación del contexto.

Con el documento base y la arquitectura del inicio aprobados, propón 3 direcciones visuales claramente diferenciadas para el inicio de [NOMBRE DE LA MARCA].

Las 3 deben respetar la MISMA identidad de marca aprobada:
- Colores con códigos exactos: [NOMBRE DEL COLOR + CÓDIGO HEX/RGB]
- Tipografías: [TIPOGRAFÍAS]
- Reglas del logo: [REGLAS DEL LOGO]
- Personalidad de marca: [PERSONALIDAD DE MARCA]

Diferencia las propuestas mediante:
- Distribución
- Jerarquía visual
- Composición de secciones
- Uso del espacio en blanco
- Tarjetas o paneles
- Diagramas o narrativa visual
- Tratamiento de los CTA
- Tratamiento de la navegación
- Ideas de movimiento o interacción

Para cada dirección, entrega:
1. Nombre
2. Idea visual central
3. Comportamiento de la distribución del inicio
4. Cómo usa el sistema de marca existente
5. Códigos de color exactos y sus funciones
6. Fortalezas
7. Riesgos
8. Adecuación al público objetivo
9. Un prompt completo para generar una imagen en una conversación SEPARADA de imágenes de ChatGPT y visualizar esa dirección

Importante:
- No generes imágenes en esta conversación.
- Entrega únicamente los 3 prompts de generación de imágenes. Crearé cada propuesta en un chat separado y traeré aquí la imagen ganadora.
- No escribas código final todavía.

Consejo de trabajo: crea los tres conceptos visuales en chats separados, compáralos lado a lado y vuelve al chat principal con la imagen ganadora. Si te gustaron elementos de otras propuestas, guarda también esas imágenes. Puedes usarlas como referencias en el Prompt 5 sin convertirlas en la dirección principal.

Prompt 5 - Convierte la dirección elegida en reglas de diseño

Sube la imagen de la propuesta ganadora al chat principal del sitio. Si quieres tomar elementos específicos de otras propuestas, puedes subir también esas imágenes e indicar exactamente qué quieres conservar. Este es el momento de hacer los ajustes visuales finales antes de implementar.

Elegí la dirección visual [NOMBRE DE LA DIRECCIÓN].

Adjunto la imagen ganadora. Trátala como referencia visual principal.

Referencias opcionales:
[ADJUNTA OTRAS PROPUESTAS SI HACE FALTA]

Elementos que quiero tomar o ajustar antes de implementar:
[ENUMERA ELEMENTOS DE OTRAS PROPUESTAS O CAMBIOS SOLICITADOS, O ESCRIBE NINGUNO]

Primero revisa la propuesta ganadora y los ajustes solicitados. Dime si generan conflictos con la identidad de marca aprobada, la usabilidad, la jerarquía o la consistencia.

Después consolida la dirección final en un sistema visual web práctico que pueda aplicarse de forma consistente en GPT Sites y después en HTML/CSS al preparar el sitio para publicarlo.

Documenta:
- Funciones de cada color con sus códigos aprobados exactos
- Funciones y jerarquía de las tipografías
- Principios de espaciado
- Comportamiento de la cuadrícula y el ancho máximo
- Estilos de botones
- Estilos de tarjetas y paneles
- Reglas de bordes y radios
- Reglas de iconografía
- Ritmo de fondos entre secciones
- Principios de adaptación a dispositivos
- Reglas de movimiento
- Consideraciones de accesibilidad
- Elementos que NO deben incorporarse

Mantén cada decisión alineada con mi identidad de marca y la dirección visual ganadora adjunta.

Al final, crea una sección breve de "Reglas de implementación" que pueda pegar en futuros prompts de construcción.

Ejemplo de FunnelFlag

El inicio primero necesitaba explicar el sistema propio de banderas antes de mostrar sus beneficios. Más adelante se eliminó un gráfico de la sección principal porque, aunque se veía interesante, los visitantes todavía no tenían suficiente contexto para entenderlo.

Ese tipo de decisión explica por qué conviene resolver la narrativa antes de programar.

PASO 3 - CREA LA PRIMERA VERSIÓN FUNCIONAL EN GPT SITES

Objetivo

Convierte la estructura y el sistema visual aprobados en un sitio real que puedas revisar y mejorar dentro de ChatGPT.

Para este proceso, usa GPT Sites como versión de trabajo durante los ajustes. Tu punto de partida es la dirección visual aprobada, no un archivo HTML. Lleva la imagen ganadora al chat principal y úsala junto con el documento base y el sistema visual aprobados para crear la primera versión funcional.

No generes un nuevo HTML descargable después de cada ajuste. Construye la primera versión en GPT Sites, mantenla como sitio de trabajo y mejórala allí. El HTML, CSS, JavaScript y los recursos para publicar se empaquetan después, cuando el sitio esté suficientemente aprobado.

No agregues un entorno de desarrollo solo porque esté de moda. Si el sitio es una página de marketing sencilla, la complejidad adicional puede crear más problemas que un principiante tendrá que resolver.

Prompt 6 - Crea la primera versión completa en GPT Sites

Ahora crea en GPT Sites la primera versión funcional del inicio aprobado para [NOMBRE DE LA MARCA].

Soy profesional de marketing y no tengo experiencia programando. Quiero que GPT Sites sea la versión de trabajo que mejoremos desde ahora.

Referencia visual:
[ADJUNTA LA IMAGEN DE LA DIRECCIÓN VISUAL GANADORA APROBADA]

Ajustes iniciales que ya sé que quiero:
[ENUMERA LOS AJUSTES FINALES O ELEMENTOS QUE QUIERES INCORPORAR ANTES DE LA PRIMERA VERSIÓN EN GPT SITES, O ESCRIBE NINGUNO]

Requisitos:
- Sigue el documento base aprobado
- Sigue la arquitectura del inicio aprobada
- Sigue el sistema visual web aprobado y la referencia ganadora
- Conserva los colores de marca exactamente según sus códigos
- Usa HTML semántico
- Adapta la página a computador, tableta y celular
- Usa etiquetas accesibles y un comportamiento de teclado adecuado
- Evita dependencias innecesarias
- No uses secciones provisionales que no se hayan aprobado
- No inventes colores, fuentes, mensajes, servicios ni CTA nuevos
- Mantén las referencias a recursos explícitas y fáciles de reemplazar
- Incorpora los ajustes iniciales antes de pedirme que revise el sitio

Regla importante de trabajo:
- Crea o actualiza el sitio en GPT Sites.
- No generes continuamente nuevas versiones HTML descargables durante los ajustes.
- Desde ahora, trata la versión de GPT Sites de este chat como el sitio de trabajo actual.
- Usa la imagen ganadora adjunta como referencia visual principal para esta primera versión.
- A partir del Prompt 7, trabaja sobre la versión de GPT Sites ya creada en este chat. No me pidas un archivo HTML durante los ajustes habituales.

Después de crear el sitio, dame una lista breve de revisión visual.
No pases todavía a la publicación.

Cómo revisarlo si no sabes programar

No necesitas evaluar primero el código. Evalúa el sitio web.

Revisa:

• ¿La sección principal se entiende de inmediato?
• ¿El CTA principal es evidente?
• ¿Hay alguna sección repetitiva?
• ¿La página se siente como tu marca?
• ¿La jerarquía visual tiene sentido?
• ¿Hay partes que solo entiendes porque ya conoces el negocio?
• ¿La página sigue funcionando en una ventana estrecha?
• ¿Los botones, enlaces e interacciones funcionan correctamente?
• ¿Hay exactamente un H1 en la página?
• ¿Ese H1 es el título que quieres que los buscadores y usuarios reconozcan como el encabezado principal?
• ¿Los H2 representan las secciones principales de forma lógica?
• ¿Los H3 y H4 están dentro de las secciones correctas, en lugar de usarse solo por su tamaño visual?
• ¿La estructura de encabezados tiene sentido como esquema incluso sin el diseño?

Toma capturas de lo que se vea mal. Las capturas suelen ser una forma mucho más sencilla de comunicar problemas visuales que intentar describir el CSS.

PASO 4 - MEJORA EL SITIO SIN ROMPERLO

Objetivo

Haz cambios en incrementos controlados.

Esta fue una de las partes más importantes de crear FunnelFlag.com. El sitio se ajustó módulo por módulo, en lugar de generarlo desde cero cada vez.

Volver a generar una página completa por un cambio pequeño puede crear problemas nuevos en secciones ya aprobadas.

Prompt 7 - Cambia solo una sección

Trabaja sobre la versión actual de GPT Sites ya creada en este chat. No me pidas un archivo HTML.

Cambiaremos ÚNICAMENTE esta sección:
[NOMBRE DE LA SECCIÓN]

Problema actual:
[DESCRIBE EL PROBLEMA]

Resultado solicitado:
[DESCRIBE LO QUE QUIERES]

Restricciones:
- No rediseñes otras secciones
- No cambies textos aprobados fuera de esta sección
- No cambies colores globales, tipografías, espaciado, navegación, pie de página ni interacciones salvo que sea indispensable para esta solicitud
- Conserva todas las funcionalidades existentes
- Reutiliza el sistema de diseño actual
- Haz el cambio directamente en la versión de trabajo existente en GPT Sites

Primero dime brevemente qué cambiarás y qué riesgos identificas.
Después haz el cambio.
Finalmente dime exactamente qué debo verificar visualmente.

Prompt 8 - Usa una captura para diagnosticar un problema visual

Adjunto una captura del problema visual.

Trabaja sobre la versión actual de GPT Sites ya creada en este chat. No me pidas un HTML salvo que identifiques una razón técnica específica por la que el sitio actual no sea suficiente para diagnosticar el problema.

No sé programar.

Diagnostica la causa y corrígela con el menor cambio posible.

Problema que veo:
[DESCRIBE LO QUE SE VE MAL]

Reglas:
- No rediseñes la página
- No cambies componentes que no estén relacionados
- Conserva la adaptación a distintos dispositivos
- Explica la causa en español sencillo
- Corrige el sitio de trabajo existente
- Dime qué cambió y qué debo probar visualmente después

Prompt 9 - Crea un documento de continuidad antes de pasar a un nuevo chat

Las conversaciones largas sobre un sitio se vuelven difíciles de manejar. Cuando un chat se vuelva lento, pierda contexto o quieras empezar una conversación nueva, crea un archivo de continuidad.

Crea un documento de continuidad en Markdown para el proyecto web actual, de modo que pueda seguir en una nueva conversación de ChatGPT sin perder decisiones.

Incluye solo información vigente y aprobada.

Documenta:
- Objetivo del proyecto
- Estado actual del sitio
- Estructura del inicio aprobada
- Textos aprobados
- Reglas visuales aprobadas
- Estructura actual de archivos
- Funcionalidades que ya operan
- Cambios hechos durante este chat
- Problemas ya resueltos
- Problemas conocidos pendientes
- Estado del alojamiento y dominio
- Estado de formularios y SEO
- Lo que el siguiente chat no debe cambiar sin aprobación
- Próximo paso recomendado

No incluyas alternativas descartadas como si siguieran vigentes.

Ejemplo de FunnelFlag

Durante los ajustes se rompieron iconos sociales, hubo que reemplazar un SVG de Instagram y se eliminaron secciones que al principio parecían útiles. Trabajar de forma controlada permitió resolver esos problemas sin reconstruir todo lo demás.

PASO 5 - CONTROL DE CALIDAD, SEO Y PAQUETE FINAL

Objetivo

Antes de publicar en tu dominio, revisa la coherencia técnica del sitio y reúne todos los archivos necesarios.

Prompt 10 - Haz una revisión completa antes de publicar

Actúa como especialista sénior en control de calidad de interfaces web.

Revisa los archivos finales adjuntos del sitio de [NOMBRE DE LA MARCA].

No quiero un rediseño. Quiero una auditoría para saber si está listo para publicarse.

Revisa:
- Enlaces rotos
- Recursos faltantes
- Adaptación a computador
- Adaptación a tableta
- Adaptación a celular
- Comportamiento de navegación
- Botones y CTA
- Formularios, si existen
- Semántica HTML
- Accesibilidad básica
- Uso con teclado
- Texto alternativo de imágenes
- Riesgos de rendimiento
- Dependencias externas que puedan fallar
- Problemas de consola o JavaScript identificables en el código
- CSS duplicado o en conflicto
- Icono del sitio, logo o recursos sociales faltantes

Organiza los hallazgos en 3 grupos:
1. Hay que corregir antes de publicar
2. Conviene mejorar
3. Está bien para la primera versión

No cambies nada hasta que apruebe las correcciones.

Prompt 11 - Agrega SEO técnico y metadatos para redes

Prepara el SEO técnico básico y los metadatos para compartir este sitio en redes sin cambiar el diseño visible.

Datos del proyecto:
Marca: [NOMBRE DE LA MARCA]
Dominio: [DOMINIO]
Descripción del negocio: [DESCRIPCIÓN DEL NEGOCIO]
Mercado principal: [MERCADO]
Datos del fundador o la organización, si aplican: [DATOS]
URL del logo o ruta prevista: [RUTA DEL LOGO]
Perfiles sociales: [URLS SOCIALES]

Agrega o valida:
- Título de página
- Descripción meta
- URL canónica
- Metadatos Open Graph
- Referencia a la imagen para compartir en redes
- Metadatos X/Twitter
- Datos estructurados schema.org adecuados
- Jerarquía semántica de encabezados
- Condiciones básicas de indexación

No inventes datos del negocio.
No agregues tipos de schema que no estén respaldados por la información entregada.

Explica en español sencillo qué se agregó y qué elementos todavía requieren una URL o un recurso real de mi parte.

Prompt 12 - Prepara el sitio para publicarlo

Prepara el sitio final como un paquete ordenado para publicarlo en un servicio de alojamiento estático.

El alojamiento que planeo usar es:
[NETLIFY / VERCEL / GITHUB PAGES / CLOUDFLARE PAGES / OTRO]

Crea u organiza el proyecto para que la carpeta de publicación contenga solo lo necesario para el sitio público.

Requisitos:
- `index.html` en el nivel superior correcto
- Todos los archivos CSS/JS que necesite la página
- Todas las imágenes y SVG locales
- Imagen para compartir en redes
- Recursos de logo e icono del sitio, si existen
- Cualquier página de confirmación que requieran los formularios
- Ninguna ruta local rota
- Ningún archivo exclusivo de desarrollo, salvo que el alojamiento lo requiera

Después entrega:
1. Árbol final de archivos
2. Lo que debo subir
3. Lo que NO debo subir
4. Una lista de verificación de cinco minutos antes de publicar

Ejemplo de FunnelFlag

El paquete final de FunnelFlag incluía el inicio, la página de confirmación, el logo, los iconos sociales, la imagen de Open Graph y los archivos de apoyo. También se agregaron metadatos y datos estructurados antes de publicar.

PASO 6 - PUBLICA Y CONECTA TU DOMINIO

Qué usé

Usé Netlify porque permite alojar un sitio estático y publicarlo arrastrando y soltando archivos. La documentación de Netlify describe cómo subir una carpeta de proyecto con archivos como HTML desde su interfaz de publicación.

Para FunnelFlag, ya había comprado el dominio en GoDaddy. El sitio se alojó en Netlify y el dominio se conectó después.

Otras opciones de alojamiento

No tienes que copiar exactamente mis herramientas.

Puedes comprar un dominio en muchos registradores. GoDaddy fue el que usé para FunnelFlag. Si tu dominio está en otro lugar, las pantallas serán diferentes, pero los conceptos de DNS son los mismos.

Prompt 13 - Obtén instrucciones de publicación clic a clic

Tengo un paquete completo de sitio web estático y quiero publicarlo en [PLATAFORMA DE ALOJAMIENTO].

Nunca he publicado un sitio web.

Mi situación actual:
- Archivos del sitio: [DESCRIBE LOS ARCHIVOS O ADJUNTA EL ZIP]
- Dominio: [DOMINIO]
- Registrador del dominio: [REGISTRADOR]
- Cuenta de alojamiento: [YA CREADA / SIN CREAR]

Guíame para publicarlo paso a paso.

Importante:
- Dame solo UNA acción a la vez
- Dime exactamente qué botón o menú buscar
- Espera a que confirme lo que veo antes de dar el siguiente paso
- No supongas que conozco alojamiento, DNS, servidores de nombres, SSL, redirecciones ni Git
- Si mi pantalla difiere de lo que esperas, pide una captura en lugar de adivinar
- No me pidas cambiar el DNS hasta que la versión temporal alojada funcione correctamente

Prompt 14 - Conecta tu dominio propio de forma segura

Mi sitio temporal alojado funciona correctamente.

Ahora ayúdame a conectar mi dominio propio.

Dominio: [DOMINIO]
Registrador: [REGISTRADOR DEL DOMINIO]
Plataforma de alojamiento: [ALOJAMIENTO]
Versión principal deseada: [DOMINIO.COM / WWW.DOMINIO.COM]

No tengo experiencia con DNS.

Antes de pedirme cambios:
1. Explica qué servicio controla actualmente mi DNS
2. Explica qué cambiará
3. Explica qué NO debe eliminarse
4. Identifica los registros DNS del correo que podrían verse afectados

Después guíame UN paso a la vez.
Espera mi confirmación después de cada paso.
Si algo en mi pantalla no coincide con tus instrucciones, pide una captura.

El prompt más útil de esta guía para resolver problemas

Cuando algo falle, no pidas una explicación gigante. Haz que ChatGPT te ayude a diagnosticarlo paso a paso.

Algo no funciona en mi sitio web y no conozco la terminología técnica.

Resultado esperado:
[LO QUE DEBERÍA PASAR]

Resultado actual:
[LO QUE PASA]

Adjunto una captura y los archivos actuales, si corresponden.

Por favor:
1. Diagnostica la causa más probable
2. Explícala en español sencillo
3. No me des cinco posibles soluciones a la vez
4. Dame el PRIMER paso más seguro para probar
5. Espera mi resultado antes de continuar
6. No me pidas cambiar configuraciones que no estén relacionadas

Ejemplo de FunnelFlag

Publicar tuvo sus dificultades. Hubo que configurar DNS y servidores de nombres, resolver recursos que dejaron de cargar y, más adelante, un formulario que no se detectaba correctamente. Lo útil fue poder mostrarle a ChatGPT lo que veía y resolver cada problema paso a paso.

OPCIONAL - AGREGA UN FORMULARIO QUE CAPTURE PROSPECTOS

Un formulario visual no es automáticamente un sistema funcional para captar prospectos.

El primer formulario de FunnelFlag usaba una acción mailto: . Eso podía abrir la aplicación de correo del visitante, pero no guardaba un prospecto de forma confiable. Después se convirtió a Netlify Forms, lo que permitió que la plataforma de alojamiento registrara los envíos.

Si alojas tu sitio en otra plataforma, Formspree es una alternativa diseñada para recibir envíos de formularios HTML estándar sin crear tu propio sistema de procesamiento en el servidor.

Prompt 15 - Agrega un formulario funcional de captación

Quiero convertir el formulario existente de mi sitio en uno que realmente capture prospectos.

Plataforma de alojamiento: [ALOJAMIENTO]
Servicio de formularios preferido: [NETLIFY FORMS / FORMSPREE / OTRO]

Campos que necesito:
[ENUMERA LOS CAMPOS]

Después del envío quiero:
[MENSAJE O PÁGINA DE CONFIRMACIÓN]

Requisitos:
- Conserva el diseño visual actual
- Usa etiquetas accesibles
- Agrega la validación obligatoria que corresponda
- Agrega una protección razonable contra spam compatible con el servicio elegido
- No expongas secretos ni claves API en el código del navegador
- Guarda los envíos con el servicio elegido

Primero explica la integración en español sencillo.
Después haz los cambios mínimos necesarios en el código.
Finalmente dame un procedimiento exacto para confirmar que un envío real quedó guardado.

Prompt 16 - Agrega notificaciones de envíos

Mi formulario ya guarda correctamente los envíos en [SERVICIO DE FORMULARIOS].

Ahora quiero recibir una notificación cuando un nuevo prospecto envíe el formulario.

Destino de la notificación:
[CORREO / SLACK / OTRO DESTINO COMPATIBLE]

Guíame en la configuración usando la interfaz actual de la plataforma.
No cambies el código del formulario que funciona salvo que la función de notificación realmente lo requiera.

Después dame una lista de pruebas para confirmar:
1. El prospecto queda guardado
2. La confirmación funciona
3. La notificación llega
4. La notificación contiene los campos que necesito

Ejemplo de FunnelFlag

El formulario de FunnelFlag captura Nombre, Correo corporativoy Desafío actual, y luego envía al visitante a una página de confirmación. Durante la configuración, Netlify no detectó el formulario al principio y la ruta de confirmación devolvía un error 404. Volver a publicar después de activar la detección de formularios permitió que Netlify lo reconociera correctamente.

OPCIONAL - CORREO PROFESIONAL Y DNS

Puede que no lo necesites en la primera versión.

Si quieres una dirección como hola@tudominio.com, necesitas un proveedor de correo. Tu alojamiento web y tu correo no tienen que ser de la misma empresa.

Aquí importa el DNS. Los registros del sitio y del correo pueden coexistir, pero borrar o reemplazar los registros equivocados puede hacer que alguno deje de funcionar.

Para FunnelFlag, el dominio se registró en GoDaddy mientras el DNS se administraba desde Netlify. Por eso, los registros del correo tuvieron que agregarse donde realmente se controlaba el DNS activo.

Prompt 17 - Configura el correo profesional sin romper el sitio

Mi sitio ya está publicado y quiero configurar correo profesional para mi dominio.

Dominio: [DOMINIO]
Registrador: [REGISTRADOR]
Proveedor de DNS, si lo conozco: [PROVEEDOR DNS / NO LO SÉ]
Alojamiento web: [ALOJAMIENTO]
Proveedor de correo: [PROVEEDOR DE CORREO]
Correo deseado: [DIRECCIÓN DE CORREO]

No tengo experiencia con DNS.

Antes de cambiar algo:
1. Ayúdame a identificar qué servicio controla actualmente el DNS
2. Revisa los registros que pide el proveedor de correo
3. Separa los registros del sitio de los del correo
4. Adviérteme sobre lo que podría romper el sitio
5. Revisa si hay registros SPF duplicados o registros en conflicto

Después guíame un cambio a la vez y espera confirmación en cada paso.

No inventes valores DNS. Usa únicamente los valores exactos entregados por mi proveedor de correo.

Regla de seguridad

Nunca pegues contraseñas, claves API privadas, códigos de recuperación, datos de clientes ni otros secretos en un prompt o directamente en HTML público.

TU LISTA FINAL ANTES DE PUBLICAR

Antes de dar el sitio por terminado, verifica manualmente lo siguiente.

Contenido y conversión

• El nombre de la marca es correcto en todas partes.
• La sección principal explica rápidamente lo que haces.
• El CTA principal es evidente.
• La página no repite el mismo argumento en varias secciones.
• Cada botón tiene un destino intencional.
• Los enlaces de teléfono, correo y redes son correctos.

Control visual

• Se ve bien en computador.
• Se ve bien en tableta.
• Se ve bien en celular.
• No hay texto cortado.
• Ninguna sección se desborda horizontalmente.
• Las imágenes y los SVG cargan.
• Hay una tipografía alternativa adecuada si falla una fuente externa.

Control técnico

• El dominio funciona.
• HTTPS funciona.
• La versión preferida del dominio es consistente.
• No hay errores 404 evidentes.
• Los formularios se envían correctamente, si existen.
• Las páginas de confirmación funcionan, si existen.
• Las notificaciones funcionan, si existen.

SEO básico

• Título de página único.
• Descripción meta.
• URL canónica.
• H1 y jerarquía de encabezados correctos.
• Imagen de Open Graph.
• Metadatos para redes sociales.
• Datos estructurados respaldados por información real del negocio.
• Los buscadores no están bloqueados por accidente.

Negocio y cumplimiento

• Estás conforme con los datos que recopila tu formulario.
• Las páginas legales y de privacidad adecuadas para tu negocio y jurisdicción están disponibles cuando se requieren.
• No hay claves privadas ni credenciales expuestas en los archivos públicos.

LAS HERRAMIENTAS UTILIZADAS PARA FUNNELFLAG

Este fue el camino real de FunnelFlag.com, expresado como el proceso repetible de esta guía:

Marca ya definida
→ Documentos base del sitio y reglas visuales
→ Estructura del inicio y exploración visual
→ Conceptos visuales generados en chats de imágenes separados
→ Propuesta ganadora llevada al chat principal del proyecto
→ Versión funcional en GPT Sites
→ Ajustes módulo por módulo
→ SEO técnico y datos estructurados
→ Paquete final de archivos estáticos para publicar
→ Alojamiento en Netlify
→ Dominio de GoDaddy conectado por DNS
→ Netlify Forms
→ Página de confirmación
→ Registros DNS del correo profesional
→ Pruebas finales

Lo importante es mantener el proceso bajo control, más allá de los proveedores que elijas.

Primero decide. Después construye. Luego prueba. Publica al final.

PROMPT MAESTRO - INICIA UN NUEVO CHAT PARA CREAR TU SITIO

Si mañana empezara otro sitio, este sería el prompt con el que iniciaría la implementación después de tener la marca completamente definida:

Vamos a crear y publicar un sitio web real para [NOMBRE DE LA MARCA].

Soy profesional de marketing sin experiencia en programación ni desarrollo web. Tomaré las decisiones de negocio, marca, textos y diseño. Necesito que actúes como estratega web sénior, revisor de experiencia de usuario, desarrollador de interfaces, apoyo de control de calidad y guía técnico.

Reglas importantes:
1. Los documentos adjuntos de marca y sitio son la fuente de referencia.
2. No reinventes decisiones de marca aprobadas.
3. Cuestiona decisiones débiles de experiencia de usuario o comunicación en lugar de darme siempre la razón.
4. No construyas el sitio hasta que la estructura del inicio y la ejecución visual estén aprobadas.
5. Cuando hagan falta imágenes de conceptos visuales, crea prompts para chats de imágenes separados en lugar de generar todos los conceptos en la conversación principal.
6. Una vez creado el sitio en GPT Sites, conserva las secciones aprobadas y cambia solo lo que solicite.
7. Explica los conceptos técnicos en español sencillo.
8. Para publicación o DNS, guíame paso a paso y espera confirmación.
9. Nunca inventes configuraciones de cuenta, valores DNS, credenciales ni datos del negocio.
10. Si necesitas ver mi pantalla o un error, pide una captura.
11. En los puntos de control importantes, ayúdame a crear un documento de continuidad actualizado en Markdown.

Proyecto:
Marca: [NOMBRE DE LA MARCA]
Dominio: [DOMINIO]
Audiencia: [PÚBLICO OBJETIVO]
Objetivo principal del sitio: [OBJETIVO]
CTA principal: [CTA]
Alojamiento preferido: [ALOJAMIENTO O POR DEFINIR]

Adjunto ahora los documentos de referencia vigentes.

Primero revísalos y dime:
- Qué ya está decidido
- Qué falta antes de definir la arquitectura
- Cuál recomiendas como próximo paso

No empieces a programar todavía.

REFLEXIÓN FINAL

La mayor lección de crear FunnelFlag.com no fue que la IA puede generar HTML.

Fue que puedes dirigir un proyecto técnico sin fingir que tienes experiencia técnica.

Sigues necesitando criterio. Debes saber qué tiene que lograr el sitio, revisar los resultados, detectar lo que no tiene sentido y tomar decisiones.

Pero no necesitas saber escribir cada línea de código, configurar cada registro ni diagnosticar cada error antes de empezar.

Si construyes un sitio con este proceso, envíame el enlace. Quiero ver lo que publiques.

David de FunnelFlag
FunnelFlag.com

Referencias de herramientas

El proceso de FunnelFlag descrito aquí se basa en los documentos de continuidad y los registros reales de construcción del sitio. Las herramientas alternativas se contrastaron con documentación oficial vigente en agosto de 2026.

• Netlify: publicación de sitios estáticos arrastrando archivos y detección integrada de formularios.
• Vercel Drop: publicación de archivos, carpetas o ZIP desde el navegador sin requerir Git en este proceso.
• GitHub Pages: alojamiento estático de HTML, CSS y JavaScript desde un repositorio de GitHub.
• Cloudflare Pages: publicación de HTML estático, habitualmente mediante Git.
• Formspree: servicio que recibe envíos de formularios HTML estándar sin código de servidor propio.

Las interfaces y los límites de los planes pueden cambiar. Cuando llegues a un paso específico de una plataforma, pídele a ChatGPT que use su documentación actual y tu pantalla, en lugar de depender de un tutorial antiguo.