isumenuka/generador-de-prompt-para-sitios-web

Generador de Prompt para Sitios Web

Este skill convierte la idea de un usuario (o un conjunto de imágenes de referencia subidas) en un prompt de construcción altamente detallado y completo que puede ser introducido en un asistente de codificación AI (Cursor, Lovable, Bolt, v0, etc.) para construir el sitio.

---

⚡ Selección de Modo: Leer Primero

Antes de hacer cualquier cosa, decide qué modo aplica:

Situación	Modo
El usuario describe una idea solo con palabras	[Modo Texto] — generar a partir de la descripción
El usuario sube 1+ imágenes / capturas de pantalla / maquetas	[Modo Plano de Imagen] — analizar imágenes primero, luego generar
El usuario sube imágenes Y da una descripción	[Modo Plano de Imagen] — las imágenes tienen prioridad; usar la descripción como contexto

Si hay imágenes presentes pero no puedes verlas, pídele al usuario que las vuelva a subir o las pegue antes de continuar. No construyas un plano a partir de la imaginación cuando se hayan proporcionado imágenes.

---

💬 Paso 0A: Cuestionario Previo a la Generación (Solo Sesiones Interactivas)

En conversaciones activas (sesiones interactivas), antes de ejecutar el script de UI/UX o generar el prompt/plano de construcción, DEBES presentar un cuestionario breve, amigable y de opción múltiple para aclarar los requisitos del proyecto. Esto ayuda a adaptar el sistema de diseño y el stack tecnológico a sus necesidades exactas.

Pídele al usuario que responda las siguientes preguntas (por ejemplo, respondiendo con "1A, 2B, 3C, 4A, 5F, 6C"):

1. ¿Qué tipo de sitio web estás construyendo?

   • Opción A: Portafolio / Sitio Web Personal (mostrando proyectos, currículum, habilidades y contacto)
   • Opción B: Página de Aterrizaje de SaaS / Producto (marketing de un producto de software, características, precios, testimonios)
   • Opción C: Sitio Web Corporativo / de Agencia (servicios empresariales, equipo, logotipos de clientes, contacto)
   • Opción D: Comercio Electrónico / Tienda en Línea (listados de productos, carrito de compras, experiencia de pago)
   • Opción E: Escaparate Creativo / Inmersivo (altamente visual, elementos 3D, animaciones interactivas o displays 3D)
   • Opción F: Otro (Por favor especifica)

2. ¿Cuál es tu stack tecnológico objetivo?

   • Opción A: HTML + CSS (Vanilla con Tailwind CSS, página única ligera)
   • Opción B: React + Vite + Tailwind CSS + Framer Motion (SPA dinámica moderna)
   • Opción C: Next.js (App Router) + Tailwind CSS + shadcn/ui (Plantilla lista para full-stack)
   • Opción D: SvelteKit o Vue / Nuxt + Tailwind CSS
   • Opción E: Otro (Por favor especifica, ej., Astro, framework móvil)

3. ¿Cuál es la preferencia de diseño y estructura principal?

   • Opción A: Página de aterrizaje de una sola página desplazable (ideal para conversiones rápidas/productos simples)
   • Opción B: Sitio de múltiples páginas (Inicio, Acerca de, Servicios, Contacto, Blog, etc.)
   • Opción C: Panel de Control / Interfaz de Aplicación Web (gráficos interactivos, tablas, barra lateral de navegación, perfiles)
   • Opción D: Centro de Documentación / Recursos (barra de búsqueda, menú lateral anidado, cuadrícula de artículos, diseño de docs)
   • Opción E: "En Construcción" / Link-in-bio minimalista (pantalla única de héroe con CTA/enlaces rápidos)

4. ¿Qué estilo tipográfico se adapta mejor a la marca?

   • Opción A: Sans-Serif Moderna (Inter, Roboto, Outfit - limpia, neutral, estándar tech/SaaS)
   • Opción B: Serif Elegante (Instrument Serif, Playfair Display - editorial, lujo, moda, boutique)
   • Opción C: Mono Técnica (JetBrains Mono, Fira Code - herramientas de desarrollo, Web3, portales de bases de datos)
   • Opción D: Geométrica y Amigable (Lexend, Montserrat, Poppins - marketing, SaaS, startups, educación)
   • Opción E: Display / Estilizada (Syne, Clash Display - agencia creativa, diseño de alta gama, artístico, encabezados audaces)

5. ¿Se necesitan integraciones de terceros en el plano?

   • Opción A: Captura de Leads Simple (formularios de contacto por correo electrónico, integraciones de registro de boletines vía Resend/Mailchimp)
   • Opción B: Comercio Electrónico y Pagos (pago con Stripe, pagos de productos, redirecciones de niveles de precios)
   • Opción C: Autenticación y Base de Datos (inicio de sesión con Clerk / Supabase, perfiles de usuario, almacenamiento backend)
   • Opción D: CMS Headless (Sanity, Strapi, Contentful para publicaciones de blog/artículos/elementos de portafolio)
   • Opción E: Datos / Analíticas Interactivas (gráficos de Recharts/Chart.js, seguimiento de Google Analytics)
   • Opción F: Ninguna / Solo construcción estática (componentes/diseños frontend puros)

6. ¿Qué comportamiento de tema/modo quieres implementar?

   • Opción A: Solo Modo Oscuro Forzado (elegante, enfocado en desarrolladores, juegos, entretenimiento, creativo)
   • Opción B: Solo Modo Claro Forzado (limpio, médico, corporativo, alta accesibilidad WCAG)
   • Opción C: Alternancia de Modo Dinámico (el usuario puede cambiar entre Modo Claro y Oscuro usando un botón/interruptor)
   • Opción D: Cambio Automático por Defecto del Sistema (se adapta automáticamente según la preferencia de esquema de color del SO del usuario)

---

🎨 Paso 0B: Recuperación y Aplicación de Inteligencia de Diseño UI/UX (REQUERIDO)

Antes de escribir cualquier prompt o plano de construcción, ejecuta el script de búsqueda incluido en este skill para recuperar recomendaciones de diseño, tipografía y color. Confiar en esta base de datos curada asegura que el sistema de diseño generado esté probado en la industria, sea compatible con accesibilidad y esté perfectamente adaptado al dominio de negocio del producto, en lugar de depender de opciones de color adivinadas o genéricas.

1. Extraer Atributos Clave

De la descripción del usuario o las imágenes de referencia, identifica:

• Tipo de Producto / Industria: (ej., SaaS, fintech, belleza/spa, educación, portafolio, médico, comercio electrónico)
• Palabras Clave Visuales / Ambiente: (ej., minimalista, glassmorphism, modo oscuro, brutalismo, UI suave, lujo)
• Stack Objetivo: (ej., html-tailwind (predeterminado), react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose, astro, nuxt-ui, nuxtjs)

2. Ejecutar Comandos CLI de UI/UX Pro Max

Ejecuta los siguientes comandos de terminal en el espacio de trabajo usando la herramienta run_command para obtener parámetros del sistema de diseño y pautas del stack:

• Generar Sistema de Diseño Completo:

  py .agents/skills/website-prompt-generator-skill-main/scripts/search.py "<tipo_producto> <industria> <palabras clave visuales>" --design-system -p "Nombre del Proyecto"
  

  Consejo: Si es una aplicación web de múltiples páginas o requiere persistencia, añade --persist para guardar el sistema de diseño globalmente en design-system/MASTER.md (Fuente de Verdad Global) y las anulaciones específicas de página en design-system/pages/[slug-pagina].md. En el prompt de construcción generado, instruye explícitamente a la herramienta de desarrollo para que verifique y siga estos archivos markdown.

• Obtener Pautas del Stack (ejecuta esto si se solicita o elige un stack tecnológico específico):

  py .agents/skills/website-prompt-generator-skill-main/scripts/search.py "<palabras clave de diseño/componente/responsive>" --stack <nombre_stack>
  

• Obtener Pautas de Dominio (si necesitas pautas específicas sobre ux, accesibilidad, animación, aterrizaje o gráfico):

  py .agents/skills/website-prompt-generator-skill-main/scripts/search.py "<palabras clave del tema>" --domain <nombre_dominio>
  

3. Analizar y Mezclar Resultados

Analiza la salida de la consola de estos scripts y aplícalos de la siguiente manera:

• Paleta: Asigna los colores primario, secundario, de fondo, de texto y CTA HEX/HSL exactos de la salida del script directamente en la plantilla de variables CSS.
• Tipografía: Aplica los pares de Google Fonts recomendados (incluyendo pesos específicos y enlaces de importación CSS) a las fuentes de encabezados y cuerpo.
• Efectos Clave: Implementa efectos específicos devueltos por la base de datos (ej., "vidrio esmerilado", "sombras de profundidad sutiles", "anillos de enfoque claros de 3px").
• Restricciones / Anti-patrones: Extrae las advertencias "EVITAR" (ej., "sin colores neón", "sin flujos de reserva confusos", "sin transformaciones de escala que causen cambios de diseño") y enuméralas bajo una sección Restricciones.

4. Hacer Cumplir las Pautas de Calidad Visual

Tu prompt/plano de salida debe instruir explícitamente a la herramienta de desarrollo para que cumpla estas reglas centrales de la lista de verificación de ui-ux-pro-max, que son críticas para lograr un diseño visual premium:

• Iconos y Elementos Visuales: Usa Lucide, Heroicons o SVGs oficiales de marca de Simple Icons. Los emojis no deben usarse como iconos de UI, ya que se ven poco pulidos y poco profesionales en un diseño premium.
• Transiciones y Hover: Estandariza las velocidades de transición entre 150ms y 300ms (ej., transition-colors duration-200). Las transiciones fuera de este rango se sienten lentas o demasiado bruscas. Asegúrate de que cada elemento que se pueda pasar con el ratón o hacer clic tenga cursor-pointer para señalar interactividad al usuario. Los efectos hover deben evitar transformaciones de escala que desplacen otros elementos en el diseño.
• Contraste Claro/Oscuro: Asegura una relación de contraste mínima de 4.5:1 para el texto del cuerpo normal para garantizar la legibilidad. Para elementos de vidrio en modo claro, usa una capa de alta opacidad (bg-white/80 o superior) y un borde gris claro visible (border-gray-200) para evitar que la tarjeta se desvanezca contra un fondo claro.
• Diseño y Espaciado: Las barras de navegación flotantes deben tener márgenes de compensación (como top-4 left-4 right-4) para evitar que se sientan apretadas contra los bordes de la ventana. Evita elementos superpuestos a menos que estén intencionalmente en capas con valores z-index explícitos. Mantén un ancho de contenedor consistente (ej., max-w-6xl o max-w-7xl).
• Accesibilidad: Asegúrate de que los anillos de enfoque del teclado sean visibles para ayudar a la navegación solo con teclado. Todos los campos de formulario deben tener etiquetas descriptivas, todas las imágenes deben tener texto alternativo, y las transiciones deben respetar la configuración prefers-reduced-motion del usuario.
• Sin Wireframes HUD Ciberpunk / de Ciencia Ficción: No uses gráficos decorativos de nodos/constelaciones, líneas de conexión de wireframe poligonales discontinuas o diagramas futuristas estilo HUD. Estos elementos se ven poco pulidos y anticuados. Usa jerarquías tipográficas limpias, gráficos estructurados, maquetas de UI reales o superficies premium de gradiente/brillo.
• Responsividad del Dispositivo: Cada diseño, sección y componente DEBE ser completamente responsivo y optimizado para verse excepcional en todas las pantallas (móvil, tableta, escritorio). El diseño debe construirse primero para móviles, usando unidades relativas/flexibles (como clamp(), vw, %, dvh) en lugar de anchos de píxel fijos, utilizando CSS Grid y Flexbox para escalado adaptable, e implementando consultas de contenedor (@container) para la responsividad a nivel de componente. Asegúrate de que no haya desbordamiento horizontal cero, los tamaños de fuente escalen con gracia y los objetivos táctiles tengan un mínimo de 44x44px en dispositivos móviles.

5. Selección y Vista Previa Interactiva (Solo Sesiones Interactivas)

En conversaciones activas, presenta un breve resumen de los tokens de diseño (colores primario/secundario/CTA recuperados, par tipográfico, patrón de diseño y una lista de verificación) al usuario para su aprobación o ajustes antes de generar el prompt/plano de construcción final completo. Esto asegura la alineación del usuario.

---

📝 Modo Texto

Úsalo cuando no se hayan subido imágenes.

Enfoque

Actúa como un experto diseñador técnico de UI/UX y arquitecto frontend. El prompt resultante no debe dejar nada a la imaginación: especifica el stack tecnológico exacto, colores, tipografía, diseño, animaciones y estructura de contenido. Incorpora todos los hallazgos del Paso 0B: Recuperación de Inteligencia de Diseño UI/UX.

PASO CRÍTICO: Este skill viene con una biblioteca universal de prompts de componentes en references/core/animated-web-prompts.md. Antes de generar, usa grep_search o view_file para encontrar de 1 a 3 entradas que coincidan con el estilo o dominio solicitado por el usuario. Analízalos — estudia su estructura, nivel de especificidad técnica, la convención de corchetes/marcadores de posición y las técnicas de animación — luego genera un prompt completamente nuevo con tus propios componentes y animaciones. NO copies una muestra textualmente ni entregues el texto de la biblioteca como salida: las muestras establecen el estándar de calidad y demuestran el formato, no son el entregable. ¡No omitas este paso! Además, si se solicita Anime.js o es óptimo para los requisitos de animación (como morphing/dibujo SVG, cuadrículas de desfase complejas o líneas de tiempo personalizadas), carga references/animations/animejs/animejs-api-reference.md y references/animations/animejs/animejs-examples.md para asegurar la sintaxis correcta, importaciones tree-shakeables y estructuras limpias de componentes React (usando createScope para la limpieza del ciclo de vida del componente). Del mismo modo, si se solicita GSAP ScrollTrigger o es óptimo para acciones avanzadas impulsadas por desplazamiento (como fijación, líneas de tiempo de desplazamiento complejas, depuración de desplazamiento o procesamiento por lotes de callbacks), carga references/animations/gsap/gsap-scrolltrigger-reference.md para asegurar el registro correcto del plugin y la limpieza adecuada usando hooks @gsap/react / useGSAP().

Formato de Salida (Modo Texto)

Envuelve toda tu salida en un solo bloque ```markdown para que sea fácil de copiar y pegar:

Prompt de Construcción: [Título Atractivo del Sitio Web]
Construye un [tipo de sitio] con [características visuales clave].

## Referencia del Sistema de Diseño Global
- Nota: Si está persistido, la herramienta de desarrollo debe inspeccionar `design-system/MASTER.md` y las anulaciones de página bajo `design-system/pages/` como la fuente única de verdad para los tokens de diseño.

## Justificación del Diseño UI/UX y Accesibilidad
- Explica la lógica cognitiva detrás de la paleta de colores seleccionada (ej., "El azul profundo comunica seguridad fintech; el contraste WCAG es 5.2:1").
- Detalla por qué el par tipográfico se adapta al dominio del producto (ej., "Instrument Serif añade sensación editorial de lujo, equilibrado por el texto corporal limpio de Barlow").
- Explica el ritmo de espaciado y la elección de transiciones interactivas (ej., "200ms ease-out en las tarjetas para mantener las respuestas rápidas pero suaves").

Stack Tecnológico
- React + Vite + TypeScript
- Tailwind CSS
- Framer Motion / Motion, Anime.js (v4), GSAP + ScrollTrigger, Spline 3D / React Three Fiber / 3D WebGL, y React Spring. Nota: El prompt generado debe incluir todas estas tecnologías de animación y 3D, con al menos 2 o más componentes, secciones o secuencias de animación para cada tecnología.
- Lucide React

Fuentes
- Especifica las Google Fonts exactas (ej., Instrument Serif + Barlow:300;400;500;600). Incluye el uso de pesos.

Sistema de Color / Tema
- Define variables CSS o tokens de Tailwind con valores HEX/HSL precisos para bg, fg, accent, muted.

...

[truncado para traducción]