Todas las entradas

Los mejores prompts de IA para crear una web en un solo archivo

La instrucción más útil que puedes añadir a cualquier prompt para una web es: «como un único archivo HTML autónomo, con CSS y JavaScript integrados, sin dependencias externas». Esa sola línea marca la diferencia entre un código que puedes pegar y publicar al momento y un código repartido en varios archivos que necesita compilación.

Por qué importa la forma de pedirlo

ChatGPT, Claude y Gemini pueden crear una web a partir de una simple descripción, pero a veces dan por hecho un proyecto real: archivos HTML, CSS y JavaScript separados, o una estructura tipo framework. No está mal, pero es fricción innecesaria si lo que quieres es una página que pegar en un hosting y compartir. Decirle al modelo exactamente qué forma de resultado esperas elimina esa fricción antes de que aparezca.

La fórmula del prompt

Estructura cualquier prompt para una web en tres partes:

1. Qué es la página: concreta el objetivo y el contenido, no solo el tema.
2. La restricción de formato: «como un único archivo HTML con CSS y JavaScript integrados, sin dependencias externas».
3. La dirección de estilo: colores, ambiente o una comparación («limpio y minimalista», «tema oscuro», «como una landing moderna de SaaS»).

Prompts listos para usar

Copia cualquiera en ChatGPT, Claude o Gemini y ajusta los detalles:

Portfolio: «Crea un único archivo HTML (CSS y JS integrados, sin dependencias externas) para el portfolio de una diseñadora freelance. Incluye una portada con nombre y profesión, una cuadrícula de 4 tarjetas de proyectos y una sección de contacto. Tema oscuro, tipografía sans-serif limpia.»

Landing page: «Escribe una landing page en un solo archivo HTML para una app de productividad llamada Focus. Incluye titular, tres tarjetas de funciones, una sección de precios con dos planes y un formulario de suscripción por email. Todo el CSS y JS integrado, sin dependencias externas, adaptada a móvil.»

Lista de espera: «Crea un único archivo HTML para la página de lista de espera de una startup en fase temprana. Titular, descripción en una frase, un campo de email con botón y un pequeño contador que diga «Ya se han unido más de 500 personas». Solo CSS y JS integrados.»

Página de evento: «Crea una página de evento en un solo archivo HTML para un taller de un día. Incluye fecha, lugar, una agenda breve y un botón de inscripción. Paleta de colores cálida, sin dependencias externas.»

Juego sencillo: «Crea un pequeño juego de navegador en un único archivo HTML autónomo, una versión simple de [juego]. Solo JavaScript puro y CSS integrado, controlable con las flechas, sin librerías externas.»

Tres hábitos para un resultado limpio

Añade siempre «adaptada a móvil» si la página debe funcionar en teléfonos; no se da por supuesto. Pide los cambios en mensajes posteriores en lugar de reescribir todo el prompt: los modelos manejan mejor «pon el botón en azul y añade un pie de página» que un segundo prompt gigante. Y si un modelo te devuelve varios archivos de todas formas, una línea lo arregla: «combina esto en un único archivo HTML con todo integrado».

Preguntas frecuentes

¿Cuál es la instrucción más importante en un prompt para una web?
Pedir explícitamente el resultado como un único archivo HTML autónomo, con CSS y JavaScript integrados y sin dependencias externas. Esa instrucción decide si el resultado se puede pegar directamente en un hosting.

¿Funciona igual en ChatGPT, Claude y Gemini?
Sí. Los tres asistentes de IA escriben una web completa en un solo archivo HTML si se lo pides; la estructura de prompt de esta guía funciona en todos.

¿Y si la IA divide el código en varios archivos de todas formas?
Pídele directamente que lo combine todo en un solo archivo HTML con el CSS y el JavaScript integrados. Funciona de forma fiable incluso a posteriori.

¿Puedo crear algo interactivo con estos prompts, no solo una página estática?
Sí. Un único archivo HTML puede contener toda la lógica en JavaScript, así que juegos, calculadoras y herramientas interactivas se crean igual que una landing estática.