# ARCHIVO DE TRABAJO PARA CREAR TU SITIO WEB CON IA ## Complemento operativo de la guía para crear sitios web con IA **Propósito:** Usa este archivo mientras construyes. No es una segunda copia de la guía. Súbelo al proyecto principal de tu sitio con IA y úsalo como referencia operativa. Completa los campos antes de cada fase, adjunta los archivos o capturas solicitados y avanza por los puntos de control en orden. Este proceso se creó para ChatGPT porque fue la herramienta utilizada para construir FunnelFlag.com. Puedes adaptarlo a otros asistentes de IA capaces. Los nombres de las interfaces y las funciones de construcción pueden variar. --- # 1. PANEL DE CONTROL DEL PROYECTO Complétalo antes de empezar. ```text NOMBRE DE LA MARCA: [NOMBRE DE LA MARCA] DOMINIO: [DOMINIO] PÚBLICO OBJETIVO: [PÚBLICO OBJETIVO] DESCRIPCIÓN DEL NEGOCIO: [QUÉ HACE EL NEGOCIO] PROBLEMA PRINCIPAL: [PROBLEMA QUE RESUELVES] OFERTA PRINCIPAL: [OFERTA O SERVICIOS] OBJETIVO PRINCIPAL DEL SITIO: [OBJETIVO PRINCIPAL] CTA PRINCIPAL: [CTA PRINCIPAL] CTA SECUNDARIO: [CTA SECUNDARIO O NINGUNO] VOZ DE MARCA: [VOZ DE MARCA] COLORES APROBADOS CON CÓDIGOS: [NOMBRE DEL COLOR + HEX/RGB] TIPOGRAFÍAS: [TIPOGRAFÍAS] RECURSOS DEL LOGO: [SVG POSITIVO / SVG NEGATIVO / OTRO] ENLACES SOCIALES PRINCIPALES: [ENLACES SOCIALES] ALOJAMIENTO PREFERIDO: [NETLIFY / OTRO / POR DEFINIR] REGISTRADOR DEL DOMINIO: [REGISTRADOR] SERVICIO DE FORMULARIOS: [NETLIFY FORMS / FORMSPREE / OTRO / NINGUNO] PROVEEDOR DE CORREO PROFESIONAL: [PROVEEDOR / NINGUNO] ``` ## Archivos que debes tener listos - Estrategia de marca o documento base de marca. - Textos del sitio o mensajes aprobados, si existen. - Logo en SVG siempre que sea posible. - Versión positiva del logo para fondos claros. - Versión negativa del logo para fondos oscuros. - Códigos exactos de los colores institucionales. - Reglas de tipografía. - URL de los perfiles sociales. - Páginas o requisitos legales existentes, si aplican. - Fotografías, ilustraciones, diagramas o referencias visuales aprobadas. --- # 2. REGLAS DE TRABAJO PARA LA IA Pega esto una vez al comenzar el proyecto principal de tu sitio. ```text 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 de trabajo: 1. Mis documentos aprobados 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, mensajes o estructura 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. No generes todos los conceptos en la conversación principal. 6. Una vez creado el sitio en GPT Sites, trata esa versión como el sitio de trabajo actual. 7. Conserva las secciones aprobadas y cambia solo lo que pida, salvo que identifiques un conflicto que deba revisar primero. 8. Explica los conceptos técnicos en español sencillo. 9. Para publicación, DNS, formularios o correo, guíame un paso a la vez y espera confirmación. 10. Nunca inventes configuraciones de cuenta, valores DNS, credenciales ni datos del negocio. 11. Si necesitas ver mi pantalla, el sitio actual o un error, pide una captura. 12. En los puntos de control importantes, ayúdame a crear un documento de continuidad actualizado en Markdown. 13. No expongas secretos, contraseñas, claves privadas, códigos de recuperación ni datos de clientes en código público. 14. No pases a la siguiente fase hasta que apruebe el punto de control actual. Variables del proyecto: Marca: [NOMBRE DE LA MARCA] Dominio: [DOMINIO] Audiencia: [PÚBLICO OBJETIVO] Objetivo principal del sitio: [OBJETIVO PRINCIPAL] CTA principal: [CTA PRINCIPAL] Alojamiento preferido: [ALOJAMIENTO O POR DEFINIR] Adjunto los documentos de referencia. Primero 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. ``` --- # 3. FASE 1: DOCUMENTO BASE DEL SITIO WEB ## Información de entrada Adjunta o pega el material aprobado de tu marca. ## Prompt 1: Convierte la marca en un documento base para el sitio ```text Voy a crear un sitio web real para [NOMBRE DE LA MARCA] usando IA 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 con códigos exactos, 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". 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 ```text 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 construir - Se puede agregar antes de publicar - Opcional para después Para los recursos del logo, verifica si tengo: - Versión SVG positiva - Versión SVG negativa - Versión de icono o isotipo para el icono del sitio o aplicaciones compactas No agregues herramientas ni requisitos que no tengan un propósito claro para este sitio. ``` ## Punto de control 1 No continúes hasta que: - [ ] El documento base del sitio esté aprobado. - [ ] Se resuelvan las decisiones pendientes que bloquean la construcción. - [ ] Los códigos de color exactos estén documentados. - [ ] Las tipografías estén documentadas. - [ ] Los logos estén listos, idealmente en SVG positivo y negativo. - [ ] El objetivo principal y el CTA del sitio estén claros. --- # 4. FASE 2: NARRATIVA DEL INICIO ## Prompt 3: Construye la arquitectura del inicio ```text 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. ``` ## Punto de control 2 - [ ] La sección principal tiene una función clara. - [ ] El CTA principal es evidente. - [ ] Cada sección tiene una razón para existir. - [ ] Se eliminaron las secciones redundantes. - [ ] La narrativa funciona para alguien que no conoce el negocio. --- # 5. FASE 3: DIRECCIONES VISUALES Ejecuta el siguiente prompt en el chat principal del sitio. Genera las imágenes en chats separados. ## Prompt 4: Crea tres prompts de dirección visual ```text 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 con IA 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. ``` ## Acción 1. Abre tres chats de imágenes separados. 2. Genera una dirección por chat. 3. Compara los resultados lado a lado. 4. Elige la dirección más sólida. 5. Guarda referencias secundarias útiles de las otras propuestas. 6. Vuelve al chat principal del sitio. Adjunta la imagen ganadora para el siguiente prompt. Adjunta otros conceptos solo si quieres tomar algo específico de ellos. ## Prompt 5: Consolida la dirección ganadora ```text 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. ``` ## Punto de control 3 - [ ] Hay una dirección aprobada. - [ ] Los colores exactos están fijados por código. - [ ] Las funciones de las tipografías están definidas. - [ ] El tratamiento del logo está claro. - [ ] Los elementos tomados de otras propuestas están documentados explícitamente. - [ ] Se guardaron las reglas finales de implementación. --- # 6. FASE 4: CREA EL SITIO FUNCIONAL EN GPT SITES Tu punto de partida es la dirección visual aprobada, no un archivo HTML. ## Prompt 6: Crea la primera versión funcional ```text 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. ``` ## Primera lista de revisión - [ ] La sección principal comunica rápidamente el negocio. - [ ] El CTA principal es evidente. - [ ] El sitio coincide visualmente con la dirección aprobada. - [ ] No se incorporaron colores ni fuentes sin aprobar. - [ ] Ninguna sección resulta redundante. - [ ] Funciona en computador. - [ ] Funciona en tableta. - [ ] Funciona en celular. - [ ] Los botones e interacciones funcionan correctamente. - [ ] Hay exactamente un H1. - [ ] El H1 es el encabezado principal previsto. - [ ] Los H2 representan lógicamente las secciones principales. - [ ] Los H3 y H4 están anidados de forma lógica y no se usan solo por su tamaño. - [ ] La jerarquía de encabezados tiene sentido como esquema sin el diseño. --- # 7. FASE 5: MEJORA SIN ROMPER EL TRABAJO APROBADO Desde aquí, el sitio ya existe en GPT Sites. No subas ni vuelvas a generar HTML para revisiones habituales. ## Prompt 7: Cambia solo una sección ```text Continuamos desde la versión actual de GPT Sites ya creada en este chat. No reconstruyas la página desde cero. No me pidas que suba un HTML. No modifiques secciones aprobadas salvo que el cambio solicitado lo requiera. Sección que cambiaremos: [NOMBRE DE LA SECCIÓN] Qué está mal: [PROBLEMA] Qué quiero en su lugar: [CAMBIO SOLICITADO] Antes de cambiar: 1. Dime si el cambio genera algún conflicto con el resto de la página. 2. Si no lo genera, actualiza solo esta sección en GPT Sites. 3. Conserva las reglas aprobadas de marca, distribución, adaptación a dispositivos y accesibilidad. 4. Muéstrame qué cambió y qué dejaste intacto intencionalmente. ``` ## Prompt 8: Diagnostica un problema visual con una captura ```text Continuamos desde la versión actual de GPT Sites de este chat. Adjunto una captura de un problema visual. Resultado esperado: [LO QUE QUIERO VER] Resultado actual: [LO QUE VEO] Por favor: 1. Identifica la causa visual o estructural más probable 2. Explícala en español sencillo 3. Propón la corrección segura más pequeña 4. Actualiza solo el área afectada en GPT Sites 5. Conserva el resto de la página aprobada 6. Dime qué debo verificar después del cambio ``` Usa el siguiente prompt cuando la conversación sea larga o quieras continuar en otro chat. ## Prompt 9: Crea un documento de continuidad antes de cambiar de chat ```text Crea un documento de continuidad en Markdown para el proyecto web actual, de modo que pueda seguir en una nueva conversación con IA sin perder decisiones. Incluye: - Estructura actual aprobada del inicio - Textos actuales aprobados - Sistema visual y códigos de color exactos - Reglas de tipografía - Reglas de logo y recursos - Sistema actual de CTA - Estado actual en GPT Sites - Secciones ya aprobadas que no deben cambiarse - Problemas pendientes - Decisiones técnicas ya tomadas - Decisiones de SEO ya tomadas - Decisiones de publicación ya tomadas - Archivos o capturas que debo llevar al nuevo chat - El próximo paso exacto No reescribas ni reinterpretes decisiones aprobadas. Registra el estado actual con precisión. ``` ## Punto de control 4 - [ ] Todas las secciones están aprobadas visualmente. - [ ] Se revisó por separado la versión móvil. - [ ] La jerarquía de encabezados es correcta. - [ ] No quedan interacciones rotas. - [ ] Se guardó el último documento de continuidad. --- # 8. FASE 6: CONTROL DE CALIDAD, SEO Y PAQUETE FINAL ## Prompt 10: Revisión completa antes de publicar ```text La versión actual de GPT Sites está aprobada visualmente. Haz una revisión completa de calidad antes de preparar el sitio para publicarlo. Revisa: - Consistencia de marca - Consistencia de los textos - Adaptación a computador - Adaptación a tableta - Adaptación a celular - Navegación - Botones y enlaces - Formularios, si existen - Imágenes y SVG - Accesibilidad básica - Estructura semántica - Jerarquía de encabezados - Exactamente un H1 previsto - Anidación lógica de H2, H3 y H4 - Riesgos evidentes de errores 404 - Riesgos de rendimiento - Dependencias externas - Contenido provisional Entrega: 1. Problemas críticos que deben corregirse antes de publicar 2. Mejoras recomendadas 3. Mejoras opcionales que pueden esperar No hagas cambios opcionales hasta que los apruebe. ``` ## Prompt 11: SEO técnico y metadatos para redes ```text Prepara el sitio aprobado para SEO técnico y para compartir en redes. Información del negocio: Marca: [NOMBRE DE LA MARCA] Dominio: [DOMINIO] Mercado principal: [MERCADO] Descripción del negocio: [DESCRIPCIÓN DEL NEGOCIO] Datos públicos del fundador o la organización: [DATOS PÚBLICOS] Perfiles sociales: [URLS SOCIALES] Para cada página indexable, revisa o crea: - Título SEO - Descripción meta - URL canónica - H1 - Jerarquía de encabezados - Título Open Graph - Descripción Open Graph - Imagen Open Graph - Metadatos X/Twitter, si corresponden - Datos estructurados solo cuando haya información real que los respalde - Enlaces internos - Estado de indexación Reglas: - No inventes premios, direcciones, entidades legales, reseñas ni datos del negocio. - No agregues tipos de schema que la página no respalde realmente. - Mantén títulos y descripciones legibles para personas, sin saturarlos de palabras clave. Muéstrame los metadatos SEO propuestos antes de aplicarlos. ``` ## Prompt 12: Prepara el paquete de publicación ```text La versión de GPT Sites está aprobada y lista para publicar. Crea el paquete final de archivos estáticos para [NOMBRE DE LA MARCA]. Requisitos: - Conserva el diseño y el comportamiento aprobados de GPT Sites - Incluye HTML, CSS, JavaScript y recursos locales necesarios - Usa rutas relativas o desde la raíz claras y adecuadas para el sitio - Incluye los recursos del icono del sitio - Incluye las imágenes sociales que requieren los metadatos - Incluye robots.txt si corresponde - Incluye sitemap.xml para las páginas indexables - Incluye las páginas de confirmación o error que requieran los formularios - No incluyas archivos experimentales sin usar - No expongas credenciales ni secretos Antes de entregar el paquete final: 1. Enumera todos los archivos incluidos 2. Explica en español sencillo qué hace cada archivo 3. Haz una revisión final de enlaces y rutas de recursos 4. Confirma que el inicio tiene el H1 y la jerarquía previstos 5. Confirma que todas las páginas indexables tienen sus metadatos previstos Después entrega el paquete final de publicación. ``` --- # 9. FASE 7: PUBLICA FunnelFlag se construyó usando Netlify. Puedes elegir otra plataforma de alojamiento estático si admite los requisitos de tu sitio. ## Prompt 13: Publica paso a paso ```text Estoy listo para publicar mi sitio web estático. Plataforma de alojamiento: [ALOJAMIENTO] Método que quiero usar: [ZIP O CARPETA MANUAL / GIT / POR DEFINIR] No tengo experiencia con alojamiento. Guíame para publicar paso a paso. Reglas: - Dame solo el siguiente paso - 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 el dominio propio ```text 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. ``` ## Prompt universal para resolver problemas ```text 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 ``` --- # 10. OPCIONAL: FORMULARIO FUNCIONAL DE CAPTACIÓN Omite esta sección si tu sitio no necesita formulario. ## Prompt 15: Agrega un formulario real de captación de prospectos ```text 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 prospectos ```text 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 ``` --- # 11. OPCIONAL: CORREO PROFESIONAL Y DNS Omite esta sección si todavía no necesitas correo profesional. ## Prompt 17: Configura el correo profesional de forma segura ```text 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. ``` --- # 12. LISTA FINAL ANTES DE PUBLICAR ## Contenido y conversión - [ ] El nombre de la marca es correcto en todas partes. - [ ] La sección principal explica rápidamente la oferta. - [ ] El CTA principal es evidente. - [ ] La página no repite innecesariamente el mismo argumento. - [ ] Cada botón y enlace tiene un destino intencional. - [ ] Los enlaces sociales, de correo y contacto son correctos. ## Control visual - [ ] Versión de computador revisada. - [ ] Versión de tableta revisada. - [ ] Versión de celular revisada. - [ ] No hay texto cortado. - [ ] No hay desbordamiento horizontal. - [ ] Las imágenes y los SVG cargan. - [ ] El logo funciona sobre los fondos claros y oscuros donde se usa. - [ ] El icono del sitio se muestra correctamente. ## Estructura y accesibilidad - [ ] Hay exactamente un H1 previsto por página. - [ ] Los H2 representan las secciones principales. - [ ] Los H3 y H4 están anidados de forma lógica. - [ ] Los niveles de encabezado no se eligen solo por su tamaño visual. - [ ] Los campos de formulario tienen etiquetas, si corresponde. - [ ] La navegación con teclado es adecuada. - [ ] Los enlaces y botones se distinguen. ## Control técnico - [ ] El dominio funciona. - [ ] HTTPS funciona. - [ ] La versión preferida del dominio es consistente. - [ ] No hay errores 404 evidentes. - [ ] Todos los recursos locales cargan. - [ ] 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 - [ ] Cada página indexable tiene un título SEO único. - [ ] Cada página indexable tiene descripción meta. - [ ] La URL canónica es correcta. - [ ] El H1 previsto es correcto. - [ ] La jerarquía de encabezados es correcta. - [ ] Los metadatos Open Graph están presentes. - [ ] La imagen social funciona. - [ ] Los datos estructurados usan solo información real y respaldada. - [ ] Los enlaces internos apuntan a páginas importantes. - [ ] sitemap.xml incluye las páginas indexables. - [ ] robots.txt no bloquea el sitio por accidente. ## Seguridad y negocio - [ ] No hay contraseñas ni claves privadas en archivos públicos. - [ ] No hay datos privados de clientes en el código. - [ ] Los datos que recoge el formulario son adecuados para el negocio. - [ ] Las páginas legales o de privacidad necesarias están disponibles. --- # 13. PLANTILLA DE CONTINUIDAD DEL PROYECTO Úsala después de publicar o cuando lleves el trabajo a otro chat. ```text # CONTINUIDAD DEL SITIO DE [NOMBRE DE LA MARCA] ## URL pública actual [URL] ## Alojamiento [ALOJAMIENTO] ## Registrador del dominio [REGISTRADOR] ## Proveedor de DNS [PROVEEDOR DNS] ## Páginas aprobadas actuales [LISTA] ## CTA principal [CTA] ## Colores de marca [COLOR + CÓDIGO] ## Tipografías [TIPOGRAFÍAS] ## Recursos del logo [ARCHIVOS] ## Formularios [SERVICIO DE FORMULARIOS / NINGUNO] ## Correo profesional [PROVEEDOR / NINGUNO] ## Configuración SEO [TÍTULO / META / CANÓNICA / SITEMAP / ROBOTS / SCHEMA] ## Analítica [CONFIGURACIÓN / NINGUNA] ## Problemas conocidos [LISTA O NINGUNO] ## Páginas o mejoras futuras [LISTA] ## Archivos necesarios para continuar [LISTA] ## Próximo paso [SIGUIENTE PASO] ``` --- # 14. EL PROCESO CENTRAL EN UNA LÍNEA **Marca ya definida -> Documento base del sitio -> Arquitectura del inicio -> Chats separados para conceptos visuales -> Dirección ganadora -> Versión funcional en GPT Sites -> Ajustes por sección -> Control de calidad y SEO -> Paquete de publicación -> Alojamiento -> Dominio -> Formularios y correo opcionales -> Pruebas finales** La regla de todo el proceso es sencilla: **Primero decide. Después construye. Luego prueba. Publica al final.**