Hace poco armé un prompt para crear la página de inicio de un sitio demo: un club de tecnología universitario ficticio, con una dirección visual tipo «panel de misión» inspirada en el espacio. Lo comparto completo para que lo uses como plantilla y lo adaptes a tu propio proyecto en WordPress Studio.
¿Por qué WordPress Studio?
WordPress Studio te permite tener un sitio WordPress en tu computadora, sin tocar un sitio en producción. Eso lo vuelve ideal para probar prompts: si algo no sale como esperabas, no rompés nada. Por eso el prompt incluye restricciones pensadas para ese contexto: no instalar plugins, no modificar los estilos globales del tema y no publicar el sitio.
Cómo está armado
El prompt sigue una estructura que podés reutilizar para cualquier landing page:
- Objetivo: qué página crear y que quede como página de inicio.
- Contenido: el texto exacto de cada sección, para que la IA no tenga que inventar nada.
- Diseño: los bloques nativos permitidos, tamaños, espaciados y la paleta con sus códigos de color.
- Imágenes: usar solo la Biblioteca de medios y qué hacer si está vacía.
- Restricciones: lo que no debe hacer.
- Cierre: revisar la vista móvil y entregar un resumen de bloques, colores e imágenes pendientes.
Cómo adaptarlo
- Cambiá el nombre del club y los textos por los de tu proyecto. Escribilos completos: cuanto menos tenga que suponer la IA, mejor el resultado.
- Reemplazá los códigos de color por tu propia paleta y revisá que el texto se lea bien sobre cada fondo.
- Sumá o quitá secciones, manteniendo para cada una su etiqueta, título y contenido.
- Subí tus imágenes a la Biblioteca de medios antes de usar el prompt.
- No borres las restricciones ni el pedido de revisión final: son los que te permiten saber qué hizo la IA y qué quedó pendiente.
El prompt
Creá una landing page para un sitio demo de un club de tecnología universitario. El club es ficticio, pero el contenido debe sentirse real.
Importante: el objetivo principal es que la página use la dirección visual y la paleta indicadas abajo. Aplicá los colores y estilos directamente en la configuración de cada bloque (fondo, texto, bordes, botones y enlaces), aunque se vea distinta al estilo por defecto del tema.
Página:
- Nombre de la página: "Inicio"
- Configurala como página de inicio del sitio.
Contenido (usalo tal como está):
1. Hero
- Etiqueta superior: "COMUNIDAD ESTUDIANTIL · DESDE 2024"
- Título: "Club Código Abierto"
- Subtítulo: "Una comunidad de estudiantes que aprende tecnología construyendo proyectos reales, en equipo y sin miedo a equivocarse."
- Botón principal: "Unite al club" (enlace a la sección Preguntas frecuentes)
- Botón secundario: "Ver próximos eventos" (enlace a la sección Próximos eventos)
2. Quiénes somos
- Etiqueta: "01 — QUIÉNES SOMOS"
- Título: "Aprendemos haciendo"
- Párrafo: "Somos estudiantes de distintas carreras que nos reunimos cada semana para programar, diseñar y compartir lo que sabemos. No importa si estás empezando o si ya tenés experiencia: acá todos enseñamos y todos aprendemos."
- Tres tarjetas de actividades:
- "Sesiones de estudio": "Repasamos juntos temas de desarrollo web, bases de datos y herramientas que no siempre se ven en clase."
- "Revisión de código": "Compartimos nuestro código y recibimos comentarios para escribir proyectos más claros y mantenibles."
- "Proyectos en equipo": "Formamos equipos pequeños para construir soluciones a problemas reales de nuestra universidad y comunidad."
3. Próximos eventos
- Etiqueta: "02 — PRÓXIMOS EVENTOS"
- Título: "Próximos eventos"
- Tres tarjetas de eventos, cada una con fecha, nombre y descripción:
- "14 NOV": "Taller: tu primer sitio con WordPress" — "Creamos un sitio desde cero y aprendemos a editarlo con bloques."
- "28 NOV": "Noche de revisión de código" — "Traé tu proyecto y recibí retroalimentación del grupo."
- "05 DIC": "Mini hackatón de fin de año" — "Una tarde para construir en equipo una idea pequeña y presentarla."
4. Preguntas frecuentes
- Etiqueta: "03 — PREGUNTAS FRECUENTES"
- Título: "Preguntas frecuentes"
- Usá el bloque Detalles para cada pregunta:
- "¿Necesito saber programar?" — "No. Muchas personas llegan sin experiencia y aprenden en las sesiones."
- "¿Tiene algún costo?" — "No. Participar en el club es gratuito."
- "¿Puedo unirme si no estudio una carrera de tecnología?" — "Sí. Los equipos con personas de diseño, negocios y comunicación hacen mejores proyectos."
- "¿Cómo me uno?" — "Llegá a la próxima sesión y conversá con el equipo organizador."
Diseño (dirección visual: "panel de misión", inspirado en una estética espacial):
- Usá solo bloques nativos de WordPress (portada, grupo, encabezado, párrafo, columnas, botones, imagen, separador, detalles) para que todo quede editable desde el editor.
- Hero: título muy grande (al menos el doble del tamaño de un H1 normal), alineado a la izquierda, con interlineado ajustado. La etiqueta superior va en mayúsculas, tamaño pequeño, con espaciado entre letras y color #FF9A1F.
- Etiquetas de sección ("01 — ...", "02 — ...", "03 — ..."): mayúsculas, tamaño pequeño, espaciado entre letras, color #FF9A1F, ubicadas encima de cada título.
- Tarjetas de actividades y eventos: bloque Grupo con fondo #0D1020, borde de 1 px en #2347C5, esquinas redondeadas de 16 px y relleno interno generoso.
- En las tarjetas de eventos, mostrá la fecha grande y en negrita, en color #FF9A1F, como si fuera un contador.
- Separá las secciones con una línea fina en #2347C5, no con bloques de color sólido.
- Paleta:
- Fondo de las secciones: #03030A
- Fondo de tarjetas: #0D1020
- Texto principal: #ECEBF7
- Texto secundario: #A9B3C6
- Botón principal: degradado de #2347C5 a #132A8C, con texto #FFFFFF
- Botón secundario: borde y texto #FF9A1F, fondo transparente
- Acento: #FF9A1F
- Espaciado generoso entre secciones y buen contraste del texto sobre cada fondo.
Imágenes:
- Usá las imágenes que estén en la Biblioteca de medios del sitio. No descargues ni generes imágenes nuevas.
- Si no hay imágenes disponibles, dejá los bloques de imagen vacíos en cada lugar indicado, con un texto alternativo que describa qué imagen va ahí.
- Hero: imagen de estudiantes trabajando en equipo como fondo del bloque Portada, con una capa #03030A al 70 % de opacidad para que el texto se lea bien.
- Quiénes somos: una imagen al lado del párrafo, en dos columnas que se apilen en móvil.
- Próximos eventos: una imagen pequeña arriba de cada tarjeta de evento.
- Aplicá a todas las imágenes el filtro duotono con los colores #03030A y #2347C5.
- Agregá un texto alternativo descriptivo a cada imagen.
Restricciones:
- No agregues formularios.
- No instales ni actives plugins.
- No modifiques los estilos globales del tema.
- No publiques ni envíes el sitio a producción.
Al terminar:
- Revisá la página en vista móvil y corregí espaciados, tamaños de texto o columnas que no se apilen bien.
- Decime qué bloques usaste, qué colores aplicaste en cada sección y qué imágenes quedaron pendientes.