webiscorp/designskill-open

Frontend Slides

Crea presentaciones HTML ricas en animaciones, sin dependencias, que se ejecutan completamente en el navegador.

Principios Fundamentales

1. Sin dependencias — Archivos HTML únicos con CSS/JS en línea. Sin npm, sin herramientas de compilación.
2. Mostrar, no decir — Genera vistas previas visuales, no opciones abstractas. Las personas descubren lo que quieren al verlo.
3. Diseño distintivo — Sin 'IA slop' genérica. Cada presentación debe sentirse hecha a medida.
4. Divulgación progresiva — Primero lee índices de estilo ligeros. Para plantillas audaces, usa tarjetas de vista previa pequeñas para los estilos y carga el design.md completo solo después de que el usuario elija esa plantilla.
5. Escenario fijo 16:9 (NO NEGOCIABLE) — Cada mazo usa un lienzo de diapositiva de 1920×1080 escalado como un todo al viewport. Las diapositivas deben permanecer 16:9 en cualquier pantalla, incluidos los móviles. No reorganices el contenido de la diapositiva para adaptarlo al dispositivo.

Estética de Diseño

Sueles converger hacia resultados genéricos y 'de manual'. En diseño frontend, esto crea lo que los usuarios llaman la estética 'IA slop'. Evítalo: crea frontends creativos y distintivos que sorprendan y deleiten.

Céntrate en:

• Tipografía: Elige fuentes hermosas, únicas e interesantes. Evita fuentes genéricas como Arial o Inter; opta por elecciones distintivas que eleven la estética del frontend.
• Color y Tema: Apuesta por una estética cohesionada. Usa variables CSS para la consistencia. Los colores dominantes con acentos marcados superan a las paletas tímidas y uniformemente distribuidas. Inspírate en temas de IDE y estéticas culturales.
• Movimiento: Usa animaciones para efectos y microinteracciones. Prioriza soluciones solo con CSS para HTML. Usa la librería Motion para React cuando esté disponible. Concéntrate en momentos de alto impacto: una carga de página bien orquestada con revelaciones escalonadas (animation-delay) crea más deleite que microinteracciones dispersas.
• Fondos: Crea atmósfera y profundidad en lugar de usar colores sólidos por defecto. Superpone gradientes CSS, usa patrones geométricos o añade efectos contextuales que coincidan con la estética general.

Evita las estéticas genéricas generadas por IA:

• Familias de fuentes sobreutilizadas (Inter, Roboto, Arial, fuentes del sistema)
• Esquemas de color cliché (especialmente gradientes morados sobre fondos blancos)
• Patrones de diseño y componentes predecibles
• Diseños genéricos que carecen de carácter contextual

Interpreta de forma creativa y toma decisiones inesperadas que parezcan genuinamente diseñadas para el contexto. Varía entre temas claros y oscuros, diferentes fuentes y diferentes estéticas. Todavía tiendes a converger en elecciones comunes (Space Grotesk, por ejemplo) entre generaciones. Evítalo: ¡es fundamental que pienses fuera de lo común!

Reglas del Escenario Fijo

Estas invariables se aplican a CADA diapositiva en CADA presentación:

• Cada mazo tiene un contenedor de viewport que ocupa toda la ventana del navegador.
• Cada diapositiva se crea dentro de un escenario fijo de 1920×1080.
• El escenario se escala uniformemente para ajustarse al viewport. Puede tener letterbox/pillarbox; no debe reorganizar el contenido.
• No uses puntos de interrupción responsivos para reorganizar el contenido de las diapositivas en móviles.
• Usa medidas internas fijas de diapositiva en el tamaño de diseño 1920×1080.
• La visibilidad de las diapositivas debe controlarse mediante .active / .visible usando visibility, opacity y pointer-events de viewport-base.css. No uses display: none / display: block para el cambio de diapositivas; las clases de diseño posteriores como .slide-content { display: flex; } podrían sobrescribirlas y hacer que todas las diapositivas sean visibles a la vez.
• Usa clamp() solo para la interfaz de usuario que no sea diapositiva fuera del escenario, o para vistas previas de respaldo pequeñas donde un escenario completo sea poco práctico.
• Incluye soporte para prefers-reduced-motion.
• Nunca niegues funciones CSS directamente (-clamp(), -min(), -max() se ignoran silenciosamente): usa calc(-1 * clamp(...)) en su lugar.

Al generar, lee viewport-base.css e incluye su contenido completo en cada presentación.

Modos de Densidad de Contenido

Pregunta al usuario si esto es principalmente un mazo para leer o para hablar, luego diseña en torno a esa respuesta:

Modo de densidad	Mejor para	Comportamiento de diseño
Baja densidad / dirigido por el orador	Charlas públicas, estilo keynote, explicación en vivo	Una idea por diapositiva, tipografía grande, jerarquía visual fuerte, espacio negativo generoso, máximo 1-3 viñetas, más diapositivas si es necesario
Alta densidad / lectura primero	Informes, folletos, revisión asíncrona, documentos internos detallados	Diapositivas más autónomas, cuadrículas/tablas/anotaciones estructuradas, 4-8 viñetas o 4-6 tarjetas cuando sea legible, espacio más ajustado pero aún intencional

Los límites base aún se aplican: sin desplazamiento, sin desbordamiento, sin paneles superpuestos y sin texto por debajo del tamaño de lectura cómodo. Si el contenido excede el modo de densidad seleccionado, divídelo en más diapositivas en lugar de reducir hasta que quede apretado.

---

Fase 0: Detectar Modo

Determina lo que el usuario quiere:

• Modo A: Nueva Presentación — Crear desde cero. Ve a la Fase 1.
• Modo B: Conversión de PPT — Convertir un archivo .pptx. Ve a la Fase 4.
• Modo C: Mejora — Mejorar una presentación HTML existente. Léela, entiéndela, mejórala. Sigue las reglas de modificación del Modo C a continuación.

Modo C: Reglas de Modificación

Al mejorar presentaciones existentes, el ajuste del escenario fijo es el mayor riesgo:

1. Antes de añadir contenido: Cuenta los elementos existentes, verifica contra los límites de densidad.
2. Añadir imágenes: Ajústalas dentro del lienzo de diapositiva 1920×1080. Si la diapositiva ya tiene el máximo contenido, divídela en dos diapositivas.
3. Añadir texto: Máximo 4-6 viñetas por diapositiva. ¿Excede los límites? Divídelo en diapositivas de continuación.
4. Después de CUALQUIER modificación, verifica: que el escenario de la diapositiva siga siendo 16:9, que ningún texto desborde su tarjeta, que ningún panel se superponga y que las capturas de pantalla se vean correctamente en 1280×720 más un viewport de teléfono.
5. Reorganiza de forma proactiva: Si las modificaciones causarán desbordamiento, divide el contenido automáticamente e informa al usuario. No esperes a que te lo pidan.

Al añadir imágenes a diapositivas existentes: Mueve la imagen a una nueva diapositiva o reduce otro contenido primero. Nunca añadas imágenes sin verificar si el contenido existente ya llena el escenario de diapositiva 1920×1080.

---

Fase 1: Descubrimiento de Contenido (Nuevas Presentaciones)

Haz TODAS las preguntas juntas para que el usuario complete todo de una vez. Si el entorno actual proporciona una interfaz de preguntas estructuradas nativa, úsala; de lo contrario, pregunta en un mensaje conciso con opciones claramente numeradas:

Pregunta 1 — Propósito (encabezado: 'Propósito'): ¿Para qué es esta presentación? Opciones: Pitch deck / Enseñanza-Tutorial / Charla de conferencia / Presentación interna

Pregunta 2 — Extensión (encabezado: 'Extensión'): ¿Aproximadamente cuántas diapositivas? Opciones: Corta 5-10 / Mediana 10-20 / Larga 20+

Pregunta 3 — Contenido (encabezado: 'Contenido'): ¿Tienes el contenido listo? Opciones: Todo el contenido listo / Notas aproximadas / Solo el tema

Pregunta 4 — Densidad (encabezado: 'Densidad'): ¿Qué tan denso debe sentirse el mazo? Opciones:

• 'Baja densidad / dirigido por el orador' — Ideas grandes, menos palabras, más espacio visual
• 'Alta densidad / lectura primero' — Más detalles autónomos para lectura asíncrona

No preguntes sobre edición en línea durante la Fase 1. Los usuarios no deberían tener que elegir un comportamiento de edición antes de ver un borrador. La edición en línea es una funcionalidad posterior al borrador: inclúyela por defecto a menos que el usuario solicite explícitamente un archivo bloqueado/solo exportación.

Recuerda la elección de densidad del usuario. Afecta el número de diapositivas, la escala tipográfica, la cantidad de texto por diapositiva, la densidad del diseño y si favorecer diapositivas cinematográficas para el orador o diapositivas de lectura autónomas.

Si el usuario tiene contenido, pídele que lo comparta.

Paso 1.2: Evaluación de Imágenes (si se proporcionan imágenes)

Si el usuario seleccionó 'Sin imágenes' → salta a la Fase 2.

Si el usuario proporciona una carpeta de imágenes:

1. Escanea — Lista todos los archivos de imagen (.png, .jpg, .svg, .webp, etc.).
2. Inspecciona cada imagen — Usa la capacidad de comprensión de imágenes disponible del agente. Si la lectura de imágenes no está disponible, usa nombres de archivo/metadatos y pide al usuario que aclare solo cuando sea necesario.
3. Evalúa — Para cada una: qué muestra, USABLE o NO USABLE (con motivo), qué concepto representa, colores dominantes.
4. Co-diseña el esquema — Las imágenes seleccionadas informan la estructura de las diapositivas junto con el texto. Esto NO es 'planificar diapositivas y luego añadir imágenes': diseña en torno a ambos desde el principio (p. ej., 3 capturas de pantalla → 3 diapositivas de funciones, 1 logotipo → diapositiva de título/cierre).
5. Confirma el esquema usando el mismo mecanismo de preguntas estructuradas cuando esté disponible: '¿Este esquema de diapositivas y la selección de imágenes se ven bien?' Opciones: Se ve bien / Ajustar imágenes / Ajustar esquema

Logotipo en las vistas previas: Si se identificó un logotipo utilizable, incrústalo (base64) en cada vista previa de estilo en la Fase 2: el usuario verá su marca estilizada de tres formas diferentes.

---

Fase 2: Descubrimiento de Estilo

Esta es la fase de 'mostrar, no decir'. La mayoría de las personas no pueden articular preferencias de diseño con palabras.

Paso 2.0: Generar 3 Vistas Previas de Estilo Directamente

Basándote en el propósito, la audiencia, el ambiente y la densidad del contenido, genera 3 vistas previas HTML de una sola diapositiva que muestren tipografía, colores, animación y la estética general.

No preguntes al usuario si quiere opciones o un selector de ajustes preestablecidos. La experiencia de descubrimiento predeterminada es siempre la comparación visual.

Si el usuario ya dio un 'vibe', úsalo. Si no lo hizo, infiere el ambiente probable de la ocasión, la audiencia, el contenido y las apuestas. Mantén las opciones lo suficientemente diversas para que el usuario pueda reaccionar visualmente en lugar de tener que articular su gusto de antemano.

Si el usuario menciona explícitamente un ajuste preestablecido o una plantilla audaz, respeta eso como una opción y genera los espacios de vista previa restantes a su alrededor.

Lee STYLE_PRESETS.md para conocer los candidatos de ajustes preestablecidos seguros. Si existe bold-template-pack/selection-index.json, lee también ese índice compacto, pero aún no leas ningún archivo design.md.

Ambiente	Ajustes preestablecidos sugeridos
Impresionado/Confiado	Bold Signal, Electric Studio, Dark Botanical
Emocionado/Energizado	Creative Voltage, Neon Cyber, Split Pastel
Tranquilo/Enfocado	Notebook Tabs, Paper & Ink, Swiss Modern
Inspirado/Conmovido	Dark Botanical, Vintage Editorial, Pastel Geometry

Reglas de mezcla de vistas previas:

• Genera 3 vistas previas por defecto: 1 ajuste preestablecido seguro de STYLE_PRESETS.md, al menos 1 plantilla audaz de bold-template-pack/selection-index.json y 1 comodín.
• El comodín puede ser una segunda plantilla audaz o un diseño personalizado autogenerado. Elige lo que cree el contraste más fuerte y útil para la ocasión, audiencia, ambiente y contenido del usuario.
• No fuerces que cada opción expresiva provenga de la biblioteca de plantillas. Si el resumen tiene una oportunidad de diseño más nítida y específica que las plantillas disponibles, usa la ranura de comodín para diseñar libremente.
• Para mazos conservadores o de alto riesgo, haz que el ajuste preestablecido seguro sea especialmente sobrio; elige una plantilla audaz tranquila y de alta formalidad; haz que el comodín sea otra plantilla sobria o un diseño personalizado que se sienta autoritario en lugar de decorativo.
• Para mazos expresivos, mantén el ajuste preestablecido seguro como respaldo legible; elige una plantilla audaz fuerte; haz que el comodín sea aventurero, específico del contexto y claramente diferente de las otras dos vistas previas.
• Si las coincidencias de plantillas audaces se sienten débiles, usa el comodín como diseño personalizado o recurre a otro ajuste preestablecido seguro en lugar de forzar una plantilla.

Reglas de diseño de comodín personalizado:

• Sigue la sección de Estética de Diseño anterior: sin 'IA slop' genérica, sin elecciones de fuente/color/diseño predeterminadas, sin clichés de gradiente morado sobre blanco, sin apariencia de panel/cuadro de mando genérico.
• Coincide con la ocasión, audiencia, ambiente/vibe y densidad de contenido declarados por el usuario. El diseño personalizado debe sentirse creado para este mazo, no meramente 'elegante'.
• Haz una tesis visual deliberada: tipografía distintiva, una paleta comprometida, un sistema de diseño reconocible y un dispositivo atmosférico o gráfico fuerte.
• Mantenlo factible para un mazo completo. La vista previa debe implicar un sistema de diseño que pueda expandirse a diapositivas de sección, contenido, cita, comparación y cierre.
• Usa las reglas de escenario fijo 1920×1080 y pasa las mismas comprobaciones de autenticidad de vista previa que cualquier otra opción.
• Nunca renderices etiquetas como 'personalizado', 'comodín', 'generado por IA' o de proceso de diseño en la propia diapositiva.

Reglas de selección de plantillas audaces:

• Coincide el propósito y el estado de ánimo del usuario con mood, tone, best_for, avoid_for, formality, density y scheme.
• Trata los ejemplos de best_for como señales suaves, no filtros estrictos de industria.
• Mantén las tres vistas previas genuinamente diferentes entre sí.
• Después de elegir los candidatos de plantillas audaces, lee solo los archivos preview.md de esos candidatos de las rutas preview_md en el índice de selección.
• Usa preview.md solo para vistas previas de la diapositiva de título. No leas los archivos design.md completos hasta que el usuario elija la plantilla final.
• No leas ni copies template.html a menos que el design.md final seleccionado carezca de un detalle de implementación crítico.

Reglas de autenticidad de las vistas previas (NO NEGOCIABLE):

• Cada vista previa de estilo debe parecer una primera diapositiva real del mazo del usuario, no una tarjeta de diagnóstico.
• Nunca renderices texto de flujo de trabajo interno en una diapositiva: ningún preview, generated from, preview.md, template, preset, style option, Option A/B/C, nombres de archivo, rutas o etiquetas de documentos fuente.
• Nunca renderices nombres de plantillas o slugs en la diapositiva misma. Los nombres de plantillas/estilos pertenecen solo al mensaje para el usuario.
• Nunca renderices notas de requisitos del usuario como contenido de diapositiva, como 'nítido y provocativo', 'opción segura', 'opción audaz', 'para compartir internamente' o 'audiencia: ...', a menos que el usuario quiera explícitamente que esa frase exacta aparezca en el mazo.
• Si la diapositiva necesita adornos, usa solo adornos reales del mazo: el título del mazo, el título de la sección, la fecha, el autor, la empresa, el número de página o una frase de contenido genuino del material del usuario.
• Antes de abrir las vistas previas, inspecciona el texto visible y revisa si aparece algún metadato interno.

Guarda las vistas previas en .frontend-slides/slide-previews/ (style-a.html, style-b.html, style-c.html). Cada previsualización debe ser un archivo HTML único y autónomo que muestre la diapositiva de título con la estética propuesta.