Crea una landing retro estilo años 80 con IA en 7 minutos
Página HTML/CSS lista con paleta neón, fuente pixelada y efecto CRT - directamente en el navegador, sin instalar programas
- 1.Abre Claude.ai, inicia sesión (registro gratuito con email). Si el servicio no está disponible en tu región, usa cualquier chatbot alternativo con generación de código - ChatGPT o Gemini sirven.
El plan gratuito de Claude da acceso al modelo base; es suficiente para generar HTML/CSS.
Claude ↗Sobre la herramienta - 2.Crea un nuevo chat y pega el prompt de abajo. Sustituye [TEMA] por el tema de tu página (por ejemplo, «portafolio de fotógrafo», «landing para una cafetería», «anuncio de podcast»), y [ZAGOLOVOK] por el titular principal de la página.
Cuanto más específica sea la descripción del tema y contenido, menos tendrás que corregir manualmente.
Claude ↗Sobre la herramientaPromptCrea un sitio web retro de una sola página en estilo arcade de los años 80. Tema: [TEMA]. Titular principal: [ZAGOLOVOK]. Incluye: sección hero con titular neón, sección about y un footer con información de contacto. Requisitos de estilo: fondo #0A0A0F, acento naranja neón #FE9901, acento turquesa ácido #00F0FF, texto blanco cálido. Usa 'Press Start 2P' de Google Fonts para titulares, monospace para el cuerpo del texto. Añade efecto de líneas de escaneo CRT con CSS, estilos de botón pixelado con sombra inset, y bordes estilo ASCII alrededor de las secciones. Devuelve un único archivo HTML autónomo con CSS inline. Incluye el enlace de Google Fonts. La página debe ser totalmente responsive.
Qué hace este promptEl prompt está en inglés para que Claude entienda mejor los requisitos de estilo. Sustituye [TEMA] por el tema de la página (por ejemplo, «personal blog about retro games»), [ZAGOLOVOK] por tu titular principal. No hace falta tocar los demás parámetros (paleta, fuentes, efectos). - 3.Espera a que se genere el código (normalmente 30 - 60 segundos). Copia todo el bloque HTML - pulsa el botón Copy en la esquina superior derecha del bloque de código.
Si el código está dividido en varios bloques, cópialos uno a uno en un solo archivo.
Claude ↗Sobre la herramienta - 4.Abre cualquier editor de texto (Bloc de notas en Windows, TextEdit en Mac en modo «Plain Text»). Pega el código. Guarda el archivo como retro.html - lo importante es la extensión .html, no .txt.
En el Bloc de notas, al guardar, selecciona «Todos los archivos» en el campo «Tipo de archivo», de lo contrario se guardará como .txt.
- 5.Haz doble clic en el archivo guardado retro.html - se abrirá en el navegador. Verás una página retro con acentos neón, efecto CRT y fuente pixelada.
El archivo funciona sin conexión, excepto la fuente Press Start 2P - se carga desde Google Fonts (necesita internet al abrir por primera vez).
- 6.Si necesitas corregir algo - vuelve al chat con Claude y escribe: «Change the background to dark purple and add a pixel-art star animation in the hero section». Claude devolverá el código actualizado. Sustituye el contenido de retro.html y guarda de nuevo.
Haz los cambios de uno en uno - así el resultado es más predecible.
Claude ↗Sobre la herramienta
- gratisClaude FreeEl plan gratuito ofrece un número limitado de mensajes al día - para generar y 1 - 2 correcciones de HTML/CSS es suficiente.
Por qué hoy
Los servicios de IA cambian rápido - las interfaces y los límites gratuitos pueden diferir de lo descrito.