Skip to main content
Contenido de la guía

Contenido de la guía

Tiempo de estudio: 16 min
#prompts#build#website#chatgpt#prompt#workflow
Intermedio16 min

Guía de prompts: cómo crear un sitio web con ChatGPT — pasos, prompts y límites

Guía práctica completa para crear sitios web con ChatGPT: prompts probados para estructura, código HTML/CSS, redacción persuasiva, diseño y análisis de ChatGPT Sites.

Publicado:

ChatGPT puede actuar como constructor de sitios web de dos maneras fundamentalmente distintas: generando en el diálogo el código completo y listo para producción (HTML, CSS y JavaScript vanilla) para alojarlo de forma autónoma, o ensamblando y publicando la página directamente a través del entorno en la nube de OpenAI, ChatGPT Sites.

El primer método funciona en cualquier plan (incluido el gratuito Free) y garantiza el 100% de propiedad sobre el código fuente. El segundo método está reservado en exclusiva a cuentas de pago y conlleva rigurosas limitaciones técnicas, geográficas y comerciales que es imprescindible evaluar con antelación.


1. Enfoques para crear sitios web con ChatGPT

La elección del enfoque determina el conjunto de herramientas de despliegue, los costes operativos y el grado de control sobre el sitio web resultante.

1.1. Generación de código en chat frente al hosting en ChatGPT Sites

  • Método 1: Generación de código en el diálogo. Usted define un brief estructurado, ChatGPT genera un archivo de código único o modular, revisa el resultado localmente en su navegador, aplica iteraciones visuales y publica los archivos en GitHub Pages, Cloudflare Pages o Netlify. Funciona en todos los planes y usted conserva la propiedad absoluta del código.
  • Método 2: ChatGPT Sites. Un entorno web integrado en ChatGPT Work que genera el diseño y lo aloja en la infraestructura de OpenAI. Disponible solo en planes de pago (excluyendo Free y Go), inaccesible en el EEE, Suiza y el Reino Unido en su fase inicial, y con prohibición expresa de transacciones comerciales.
Nota

Distinción fundamental: ChatGPT es un diálogo textual, no un lienzo visual. Los constructores no-code tradicionales (Framer, Webflow) proporcionan retroalimentación visual inmediata. En ChatGPT se gestiona todo mediante instrucciones escritas, por lo que la calidad y precisión de sus prompts determinan casi por completo el resultado final.

1.2. Selección del método óptimo según las necesidades del proyecto

  • La generación de código en chat (Método 1) es idónea para páginas de aterrizaje (landing pages), portafolios profesionales, webs corporativas locales, eventos y blogs. Los archivos estáticos son independientes de OpenAI y pueden migrarse a cualquier proveedor de hosting o CDN.
  • ChatGPT Sites (Método 2) ha sido diseñado principalmente para necesidades operativas internas: paneles analíticos (dashboards), rastreadores de proyectos, prototipos interactivos rápidos y pequeñas utilidades para equipos que ya operan dentro de los planes de ChatGPT Work.

2. Proceso paso a paso para generar un sitio web en ChatGPT

Este procedimiento constituye el estándar universal de desarrollo web asistido por IA. Funciona de manera uniforme en cuentas Free, Plus, Team, Enterprise y Pro aprovechando los puntos fuertes de los LLM: generación de código semántico limpio y redacción persuasiva a partir de especificaciones concretas.

2.1. Paso 1: Prompt de brief estructurado

Evite comenzar con solicitudes genéricas como «hazme una página web». Un brief profesional debe fijar con precisión seis pilares: el negocio, la audiencia objetiva, la acción de conversión primaria (CTA), el orden de secciones, la línea visual y las restricciones técnicas.

text
Act as a senior web designer and front-end engineer. I need a modern one-page website for [business name], a [business type] located in [city]. Audience: [who visits the site and what specific problem they need to solve]. Primary CTA action: [call now / book a consultation / request a quote / email]. Required Sections in order: 1. Hero section with strong conversion headline, concise value proposition, and prominent CTA button. 2. Services section (3 interactive cards with icons and key benefits). 3. About section focusing on trust, credentials, and experience. 4. Social proof / Testimonials (3 authentic reviews with client names and roles). 5. Contact section with clickable phone number, email, interactive address, and working contact form. Design Style: [clean and minimal / warm and welcoming / bold and high-tech]. Color Palette: [specific hex codes, or "curate a balanced accessible palette with dark charcoal background, off-white text, and an energetic accent"]. Typography: pairing from Google Fonts suitable for headings and body copy. Technical Requirements: - A single clean index.html file with embedded internal CSS (<style>) and vanilla JavaScript (<script>). - Strictly mobile-first responsive grid layout. - Valid semantic HTML5 tags (<header>, <main>, <section>, <article>, <footer>). - Zero frameworks, zero build steps, zero external npm dependencies except Google Fonts. - Fully accessible (WCAG AA compliant contrast, aria attributes, proper heading hierarchy). - Include comprehensive SEO meta tags (title under 60 chars, description under 155 chars, Open Graph tags). Output the complete, production-ready file without abbreviations or placeholders.

Cada corchete es una decisión estratégica que solo usted puede tomar. Cuanto más específica sea la información aportada («fontanero de urgencia en Madrid, el visitante necesita asistencia en menos de 30 minutos»), más distintivo y funcional resultará el código generado.

2.2. Paso 2: Aprobación de la estructura antes de generar el código

En proyectos que superen los dos módulos de pantalla, introduzca siempre un punto de control intermedio. Corregir una estructura redactada en texto apenas requiere treinta segundos; rehacer la arquitectura tras haber generado 500 líneas de HTML implica reiniciar todo el proceso.

text
Before writing any code, propose a detailed structural outline for the webpage. List every section sequentially. For each section, provide: 1. Proposed section ID and primary headline. 2. Content components and interactive elements. 3. Psychological intent: how this specific block moves the visitor closer to taking the primary action [primary CTA]. 4. Any potential UX conflicts or gaps identified in my initial brief. Do not write HTML/CSS yet. Wait for my explicit approval or revisions before proceeding to code generation.

Revise con atención la propuesta: compruebe que los testimonios anteceden al formulario de contacto, verifique la claridad de las tarifas y asegure la progresión narrativa.

2.3. Paso 3: Generación del código y pruebas en el navegador

Tras dar su visto bueno a la estructura, ChatGPT generará el documento de código completo. Guarde la salida como index.html y ábrala en su navegador habitual.

Consejo

ChatGPT no visualiza el renderizado gráfico de la página. Usted es el motor de renderizado y el responsable de calidad. Abra las herramientas de desarrollador (F12) y examine la adaptabilidad del sitio en la vista móvil (375–390px de ancho) antes de continuar.

2.4. Paso 4: Reescritura y pulido del copywriting comercial

Los textos generados por modelos de IA en primera instancia suelen estar plagados de clichés corporativos: «¡Bienvenido a nuestro sitio web! Ofrecemos soluciones vanguardistas para transformar su negocio». Ejecute una segunda pasada dedicada que prohíba expresamente el relleno:

text
Rewrite all marketing copy for this website. Business name: [name]. Core service: [what you do] for [target audience]. Brand Voice: [direct, confident, transparent, professional without jargon]. Strict Copywriting Guidelines: 1. Hero Headline: under 10 words, focusing strictly on the visitor's tangible outcome, not internal processes. 2. Hero Subheadline: answers "What is this and who is it for?" in exactly one clear sentence. 3. Section Titles: must be descriptive and outcome-driven (e.g., "Emergency Repairs in Under 30 Minutes"), never generic (never "Our Services" or "About Us"). 4. CTA Button Text: action-oriented and specific (e.g., "Calculate Repair Cost"), never vague ("Submit", "Learn More", "Click Here"). 5. Strictly banned words and buzzwords: "solutions", "seamless", "cutting-edge", "passionate", "elevate", "game-changer", "world-class", "innovative". First, provide 3 punchy headline alternatives. Once I select the winning variant, output the finalized copy blocks for each section.

2.5. Paso 5: Refinamiento del diseño mediante reglas medibles

Los comentarios subjetivos («hazlo más vistoso o moderno») generan modificaciones erráticas en los estilos. Los prompts de diseño más eficaces especifican parámetros métricos precisos: espacios en blanco, jerarquía tipográfica, proporciones cromáticas y estándares de accesibilidad.

text
Refine the CSS styling of this webpage without altering the approved copy or section hierarchy: 1. Layout & Whitespace: - Section vertical padding: minimum 96px top/bottom on desktop (>1024px), 48px on mobile (<768px). - Maximum content container width: 1200px centered with automatic margins and 24px horizontal gutter. 2. Color Palette & Restraint: - Strict 60-30-10 palette rule: 60% dominant background, 30% structural neutral, 10% high-contrast brand accent [hex code]. - Eliminate unnecessary background card borders; replace with subtle 1px border (#e5e7eb or rgba(255,255,255,0.08)) or soft shadow. 3. Typography Scale: - Base body text: 18px with 1.65 line-height for optimal readability. - Distinct heading hierarchy with negative letter-spacing (-0.02em) on H1 and H2. 4. UI Hierarchy: - Exactly ONE primary button style across the page. Secondary CTAs must be ghost buttons or text links with clear hover underlines. 5. Accessibility: - Validate all color pairs against WCAG AA standards (minimum 4.5:1 contrast for normal text). Return the full, updated index.html document.

2.6. Paso 6: Preparación para el lanzamiento, SEO técnico y hosting

Una vez fijados el diseño visual y los textos, concluya los ajustes técnicos previos a la publicación:

text
The webpage design and copy are finalized. Prepare the code for production deployment: 1. SEO Optimization: - Write a compelling Meta Title (50-60 characters) containing the primary keyword "[keyword]". - Write a Meta Description (140-155 characters) with clear value proposition and call to action. - Add Open Graph meta tags (og:title, og:description, og:type, og:image placeholder). - Add Twitter Card meta tags. - Ensure every <img> element has a descriptive, keyword-rich alt attribute. 2. Code Hygiene: - Strip all internal console.log statements, unused CSS classes, and development comments. - Ensure smooth scroll behavior (scroll-behavior: smooth). 3. Deployment Guide: - Provide concise, step-by-step instructions for deploying this single file to [GitHub Pages / Netlify / Cloudflare Pages] with a custom domain, assuming zero prior server administration experience.

Publicar un único archivo estático index.html en GitHub Pages, Netlify o Cloudflare Pages es totalmente gratuito, toma menos de 3 minutos y suministra un certificado SSL automático (HTTPS).


3. Capacidades y proceso de lanzamiento en ChatGPT Sites

ChatGPT Sites es un entorno de alojamiento en la nube integrado por OpenAI dentro de ChatGPT Work para acelerar el prototipado y distribución de aplicaciones web ligeras.

3.1. Disponibilidad según planes y restricciones geográficas

  • Suscripciones admitidas: El servicio se ofrece a usuarios de cuentas de pago (Pro, Pro Lite, Enterprise, Edu, Team y Plus). Las cuentas gratuitas (Free) y el plan Go no tienen acceso a Sites.
  • Limitaciones territoriales: Durante la fase beta, el servicio permanece inhabilitado para usuarios del Espacio Económico Europeo (EEE), Suiza y el Reino Unido debido a exigencias normativas de protección de datos.
  • Control corporativo: En los entornos Enterprise, la capacidad de publicar sitios web en la red pública depende de las autorizaciones concedidas por los administradores.

3.2. Proceso de despliegue paso a paso en ChatGPT Work

  1. Acceda a ChatGPT en su navegador o aplicación de escritorio e ingrese en el espacio de trabajo Work o active el modo Codex (Sites no está disponible en la vista de chat estándar).
  2. Introduzca su petición utilizando explícitamente la palabra website o la mención @Sites. Detalle la finalidad de la página, los elementos interactivos requeridos y adjunte archivos o bases de datos si procede.
  3. Obtenga el enlace de vista previa interactiva segura alojada en los servidores de OpenAI.
  4. Aplique modificaciones mediante prompts en el chat mientras observa la actualización del sitio en vivo.
  5. Guarde la versión definitiva y seleccione los permisos de visibilidad: privado (solo el autor), equipo (espacio de trabajo) o acceso web público.
  6. Vincule su dominio personalizado agregando los registros CNAME y TXT proporcionados en el panel de su proveedor de DNS.

4. Restricciones técnicas y normativas de ChatGPT Sites

Pese a la comodidad de publicar con un solo clic, ChatGPT Sites impone límites estructurales estrictos que impiden su adopción en proyectos de comercio electrónico o desarrollo a gran escala.

4.1. Matriz exhaustiva de restricciones de la plataforma

A continuación se detalla la matriz de restricciones técnicas y regulatorias de la plataforma:

Matriz de restricciones de la plataforma ChatGPT Sites — ilustración 1 ЗбільшитиMatriz de restricciones de la plataforma ChatGPT Sites — ilustración 1Matriz de restricciones de la plataforma ChatGPT Sites — ilustración 1
Parámetro de restricciónEspecificación del sistemaImpacto operativo real
Comercio prohibidoProhibición absoluta de operaciones monetariasSites no puede procesar cobros ni almacenar datos de tarjetas bancarias. Sin tiendas ni reservas de pago.
Entorno de ejecución limitadoBase Cloudflare D1 y almacenamiento R2Incompatibilidad con servidores Node.js personalizados, PostgreSQL, tareas en segundo plano o frameworks pesados.
Bloqueo territorialAusencia de habilitación en ciertas jurisdiccionesEl servicio se encuentra bloqueado para usuarios y creadores del EEE, Suiza y el Reino Unido.
Planes requeridosExclusivo para suscripciones de pagoLas cuentas Free y Go carecen de acceso a la infraestructura de alojamiento en la nube de Sites.
Límites de consumoCompartidos con las cuotas de OpenAI CodexAl alcanzar el tope de uso, la edición se interrumpe temporalmente; las webs con alto tráfico se suspenden.
Cada despliegue es producciónInexistencia de entorno de pruebas (staging)Cualquier cambio publicado impacta de inmediato en la dirección web pública accesible por los usuarios.
Política de contenidosSupervisión rigurosa de OpenAI SafetyQueda prohibido alojar datos médicos, formularios financieros o contenidos dirigidos a menores de 13 años.
Residencia de datosInfraestructura internacional compartidaLos sitios desplegados y sus registros no gozan de garantías soberanas de localización de datos.

5. Errores comunes de desarrollo y pautas de optimización

El análisis de proyectos web asistidos por IA demuestra que el 90% de los fallos se originan en errores metodológicos durante la interacción con el modelo.

5.1. Intentar incluir todo el sitio web en un único prompt gigantesco

Exigir en una sola instrucción el diseño, los textos persuasivos, scripts de cálculo y optimización SEO satura la capacidad del modelo, que opta por acortar secciones o incluir comentarios comodín como <!-- Add more items here -->. Divida el flujo de trabajo en etapas secuenciales: brief → esquema → código HTML/CSS → textos → diseño visual → SEO final.

5.2. Omitir las pruebas de visualización en pantallas móviles

ChatGPT razona sobre el código en abstracto y no detecta colisiones visuales entre elementos en pantallas pequeñas (por ejemplo, encabezados fijos que tapan el titular principal). Valide siempre el diseño en emulación móvil tras cada iteración importante.

5.3. Pegar fragmentos aislados en lugar del archivo de código completo

Al producirse un error, es habitual que el usuario comparta únicamente 10 líneas del bloque desalineado. Al carecer de la jerarquía de selectores CSS globales y de los contenedores padre, ChatGPT suele sugerir parches que estropean otros elementos. Facilite siempre el archivo completo:

text
Something is visually broken: [describe symptom, e.g., the mobile hamburger menu overlaps the hero headline on screens narrower than 480px]. Here is my complete current index.html file: [paste full file content] Identify the root cause, explain the fix in one sentence, and return the complete corrected index.html file. Do not change any unrelated code or styling.

5.4. Publicar textos generados por IA sin verificación ni edición

Los borradores textuales iniciales de la IA son gramaticalmente correctos pero superficiales. Haga esta comprobación básica: sustituya su nombre de marca por el de un competidor. Si el mensaje sigue teniendo sentido para ambos, se trata de texto de relleno que debe ser reescrito con las pautas del paso 4.

5.5. Omitir por completo las metaetiquetas y el SEO fundamental

Una web carente de etiquetas Open Graph, descripción meta y textos alternativos (alt) en las imágenes quedará excluida de los resultados de búsqueda orgánica y ofrecerá vistas previas rotas en aplicaciones de mensajería. Defina los parámetros de SEO desde el primer intercambio de prompts.


6. Comparativa: ChatGPT frente a constructores web con IA dedicados

ChatGPT destaca en la generación de código y redacción, pero existen diferencias determinantes al contrastar el diálogo textual con plataformas visuales especializadas.

6.1. Matriz comparativa de capacidades principales

Criterio de evaluaciónCódigo en chat con ChatGPT (Método 1)Plataforma ChatGPT Sites (Método 2)Constructores web con IA (Framer, Webflow, Wix Studio)
Lienzo visual (WYSIWYG)Inexistente (trabajo mediante código)Previsualización en nube básicaEditor visual drag-and-drop interactivo completo
Velocidad de despliegue5–10 min (configuración manual de hosting)Instantáneo en 1 clicInstantáneo en 1 clic
Soporte de e-commerceRequiere integración de API externaEstrictamente prohibidoNativo (pasarelas de pago, inventario, pedidos)
Propiedad del código y portabilidad100% independiente (archivos en su poder)Cerrado a la nube de OpenAIExportación disponible en planes de pago
Coste de utilizaciónGratuito (funciona en plan Free)Requiere suscripción Plus / Work / ProDe 15 $ a 40 $ al mes

6.2. Criterios de elección de herramienta según el objetivo de negocio

  • Seleccione la generación de código en chat con ChatGPT cuando requiera una página estática rápida, sin costes de suscripción, ultraligera y bajo su total control.
  • Elija ChatGPT Sites para publicar de forma inmediata herramientas operativas internas, paneles corporativos o prototipos para compañeros dentro del entorno de OpenAI.
  • Opte por constructores web dedicados si el sitio será gestionado por equipos de marketing sin conocimientos de código, o si precisa blogs dinámicos con CMS, pasarelas de pago con tarjeta o animaciones complejas.

7. Arquitectura del flujo de trabajo y toma de decisiones

Para determinar la ruta de ejecución más eficiente sin malgastar tiempo ni presupuesto, utilice el árbol de decisiones siguiente:

7.1. Diagrama de selección del pipeline de desarrollo

mermaid
flowchart TD Start["Objetivo: crear un sitio web con IA"] --> Q1{"¿Requiere pasarela de pago o CMS dinámico?"} Q1 -- "Sí (tienda online / blog)" --> Dedicated["Constructor web con IA dedicado\n(Framer, Webflow, Shopify)"] Q1 -- "No (landing page / panel)" --> Q2{"¿Precisa publicación instantánea sin gestionar hosting propio?"} Q2 -- "Sí (prototipo de equipo)" --> Q3{"¿Dispone de plan de pago y región admitida?"} Q3 -- "Sí" --> Sites["ChatGPT Sites\n(Despliegue en la nube de OpenAI)"] Q3 -- "No (EEE / Plan Free)" --> ChatCode["Generación HTML/CSS en chat de ChatGPT\n+ Despliegue en GitHub Pages / Netlify"] Q2 -- "No (web pública con dominio propio)" --> ChatCode

Esta estructura previene fricciones técnicas y orienta la inversión de recursos hacia la tecnología más adecuada para su modelo de negocio.


8. Preguntas frecuentes (FAQ)

8.1. Respuestas prácticas a dudas esenciales

Nota

¿Es ChatGPT un constructor web en sentido estricto?
No de la forma convencional con editor visual arrastrar y soltar. ChatGPT es un modelo de lenguaje que escribe código a partir de un brief. El servicio ChatGPT Sites añade funciones de alojamiento, pero todo el control sigue basándose en instrucciones textuales.

Consejo

¿Qué prompt genera los mejores resultados en el primer intento?
El brief estructurado del paso 2.1 ofrece la mayor fidelidad al acotar con precisión el modelo de negocio, el perfil del usuario, la acción de conversión requerida, la lista de secciones, la identidad estética y las restricciones técnicas (un solo archivo index.html sin librerías externas).

Importante

¿Es posible crear y publicar una web con ChatGPT de forma gratuita?
Sí. Puede generar el archivo index.html completo en el plan gratuito de ChatGPT y alojarlo sin coste alguno y de forma indefinida en servicios como GitHub Pages o Cloudflare Pages. El plan de pago solo se exige para usar el hosting en la nube de ChatGPT Sites.

Atención

¿Por qué no es posible montar una tienda online en ChatGPT Sites?
Las directrices de seguridad de OpenAI prohíben explícitamente el procesamiento de pagos bancarios y la captura de datos de tarjetas en ChatGPT Sites. Para comercio electrónico debe utilizar código autónomo conectado a pasarelas externas o recurrir a plataformas especializadas como Shopify.

Esta guía es completamente gratuita. Si te ahorró una noche, puedes apoyar el crecimiento del proyecto.
Apoyar al autor