Prompt de página HTML y CSS sin framework
Una página en HTML y CSS sin frameworks: responsive, accesible y con una base tipográfica que se lee de verdad.
Actúa como maquetador que entrega HTML y CSS limpios, sin frameworks ni dependencias. PÁGINA - Qué es: [TIPO DE PÁGINA] - Secciones: [SECCIONES] - Paleta y estilo: [COLORES, ESTILO] - Contenido real: [TEXTO] - Dónde se abre: [NAVEGADOR, TAMAÑO PRINCIPAL] SALIDA 1) UN SOLO ARCHIVO — HTML con CSS embebido en `<style>`, listo para guardar y abrir. 2) ESTRUCTURA SEMÁNTICA — header, main, secciones, footer. Un solo h1. 3) RESPONSIVE — sin media queries innecesarias: usa grid y clamp. 4) ACCESIBILIDAD — contraste suficiente, foco visible, textos alternativos, formularios con label. 5) EXPLICACIÓN — tres líneas sobre las decisiones de maquetación. 6) QUÉ CAMBIAR — dónde tocar colores y tipografía, en una sola línea del CSS. REGLAS - Sin Bootstrap, Tailwind ni librerías externas. - Sin estilos en línea. - Tipografía del sistema o una fuente de Google como máximo. - Contraste mínimo de texto legible; no uses texto gris claro sobre blanco.
El HTML generado se rompe en los bordes: móvil, textos largos y estado de foco. Comprueba esos tres antes de publicar.
02 — Variables
Rellena los corchetes
Los campos resaltados son los sitios donde van tus datos. No hace falta rellenarlos todos: lo que dejes vacío lo completa el modelo con su propio criterio.
[TIPO DE PÁGINA]
[SECCIONES]
[COLORES, ESTILO]
[TEXTO]
[NAVEGADOR, TAMAÑO PRINCIPAL]
03 — Cómo se usa
Cómo usarlo, paso a paso
- 01
Pide el archivo completo en una sola respuesta: los fragmentos sueltos requieren ensamblar y se rompen.
- 02
Usa clamp() para tamaños de texto: resuelve el 90 % del responsive sin media queries.
- 03
Pide contraste comprobado: el gris sobre blanco es el error más común de las páginas generadas.
04 — Variantes
El mismo prompt, otro resultado
Un prompt no resuelve todos los casos. Estas variantes piden el mismo trabajo con otro tono, otra longitud o otro formato: elige la que encaje.
Landing
Mismo formato para una landing: hero con promesa clara, tres bloques de beneficio, prueba y formulario.
Página de error
Mismo formato para una página 404: centrada, con un enlace de vuelta claro y sin imagen pesada.
05 — Consejos
Notas que suben el resultado de nivel
- Una página generada suele verse bien y fallar en móvil. Revísala a 375 px de ancho antes de usarla.
- La accesibilidad no es extra: el contraste y el foco visible son lo primero que se ve cuando falta.
06 — Preguntas
Preguntas frecuentes sobre Programación y código
¿Funciona en todos los navegadores?
Grid y clamp están soportados en todos los navegadores actuales. Si necesitas navegadores antiguos, pide alternativas explícitas.
¿Puedo publicarla tal cual?
Puedes, pero añade metadatos, título y descripción: sin ellos no aparece bien en buscadores ni al compartir.
Siguiente
También te puede servir
Prompt para generar código que se puede mantener
Código que puedes mantener después: supuestos declarados, errores tratados, pruebas incluidas y una decisión de diseño justificada.
Intermedio ChatGPTClaudePrompt para encontrar errores en el código
Un error tiene causas ordenadas por probabilidad, no parches. El prompt exige reproducción mínima y pruebas que confirmen cada hipótesis.
Intermedio ChatGPTClaudePrompt de refactorización: sin cambiar comportamiento
Refactoriza código sin romperlo: primero se fija el comportamiento con pruebas, después se cambia por pasos que se pueden deshacer.
Avanzado ChatGPTClaudePrompt de Python listo para ejecutar
Un script de Python que funciona a la primera: entradas, rutas, errores tratados y el comando exacto para ejecutarlo.
InicialEsta página la ha preparado el equipo editorial de CopyPromt y se publicó por primera vez el 25 octubre 2026. Los prompts están escritos para funcionar en varios modelos; los nombres de marca se citan solo a modo de identificación.