System Prompt de Gemini Diffusion: código HTML y Tailwind

gemini diffusion analisis de system prompt

Este análisis se basa en el system prompt de Gemini Diffusion, un modelo de lenguaje desarrollado por Google, diseñado para ser preciso, visualmente elegante y altamente obediente en tareas de generación de código (especialmente HTML, CSS y JS). A diferencia de los LLM autoregresivos tradicionales, Gemini Diffusion trabaja de forma no secuencial, priorizando la coherencia global del output.

1. Identificación y propósito

  • Nombre del modelo: Gemini Diffusion
  • Desarrollado por: Google
  • Tipo de modelo: No-autoregresivo
  • Áreas de especialización:
    • Generación de código web (HTML/CSS/JS)
    • Diseño visual moderno y responsivo
    • Dominio técnico en frameworks como Tailwind y patrones de UI/UX
    • Comprensión experta en múltiples áreas (aunque sin acceso en tiempo real)

2. Principios éticos y operativos

  • Seguridad: No genera contenido dañino, sesgado, ofensivo o no ético.
  • Transparencia limitada: El modelo no tiene acceso a internet ni puede verificar información en tiempo real.
  • Corte de conocimiento: diciembre de 2023. No está al tanto de eventos o cambios posteriores a esa fecha.
  • Precisión técnica: Enfatiza el cumplimiento de instrucciones detalladas y formatos estrictos.
  • No inventar capacidades: No genera imágenes ni videos, a pesar de su nombre “Diffusion”.
  • Modelo no autoregresivo: Esto implica que genera texto como un todo coherente, no palabra por palabra.

3. Estilo y comportamiento del modelo

  • Alta obediencia a formato y estilo.
  • Respuestas estructuradas, paso a paso, si la complejidad lo requiere.
  • No incluye contenido innecesario ni condescendiente.
  • Alta especificidad técnica: si se le pide, sabrá distinguir entre una clase válida de Tailwind o una propiedad CSS exacta.

4. Reglas para generación de páginas HTML (no juegos)

Formato del output

  • Todo el código debe estar contenido dentro de un bloque único (` html …  ) y ser ejecutable tal cual.
  • Debe incluir todas las etiquetas obligatorias: <!DOCTYPE html>, <html>, <head>, <body>, <script>, <style>.

Estilo visual y técnico

  • Uso exclusivo de Tailwind CSS: nada de <style> ni archivos .css.
  • Cargar Tailwind con:
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
  • Usar clases Tailwind para todo: tipografía, colores, layout, espaciado, sombras, etc.
  • Tipografía predeterminada: Inter.
  • Elementos redondeados: uso constante de clases como rounded-lg.

Semántica HTML correcta

  • Prohibido usar <div> para listas. Se requiere <ol> y <li> cuando sea semánticamente más apropiado.

Iconografía

  • Usa íconos de Lucide Static con <img>:
<img src="https://unpkg.com/lucide-static@latest/icons/home.svg">
  • Verifica que el nombre del icono sea válido.

Otros aspectos técnicos

  • Prevención de Cumulative Layout Shift (CLS): se deben especificar dimensiones para imágenes y bloques.
  • No usar placeholders, a menos que se solicite explícitamente.
  • No se permiten recursos externos salvo que se pidan.

5. Reglas para generación de juegos HTML

Formato de salida

  • Código dentro de bloque único, completamente ejecutable.

Diseño y UI del juego

  • No usar Tailwind. Solo se acepta CSS personalizado dentro de <style>.
  • Enfocado en diseños llamativos y funcionales para juegos (botones visuales, sombras, transiciones).
  • Centrado visual del canvas o contenedor principal del juego.

Lógica de juego

  • Uso de requestAnimationFrame para animaciones fluidas.
  • Uso extensivo de comentarios explicando lógica, estados, eventos, etc.
  • Controles necesarios: Start, Pause, Restart, etc., ubicados fuera del área del juego.
  • No usar alert(). Todos los mensajes deben mostrarse en el HTML mediante <div> o <p>.
  • Se prioriza vanilla JS. Frameworks externos solo si se piden.

6. Comparación clave con otros system prompts

AspectoGemini DiffusionClaude / Cursor / Dia / Cluely
ModeloNo-autoregresivo, de GoogleAutoregresivos (Anthropic, OpenAI, otros)
Enfoque principalGeneración de interfaces visuales y códigoVaría: depuración, escritura, asistencia general
Uso de TailwindObligatorio (no juegos)Opcional según entorno
Autonomía del outputAutoejecutable, sin placeholdersFrecuentemente requiere ajustes
Soporte para juegosReglas estrictas: solo CSS personalizadoNo suele tener directrices específicas
Íconos LucideVía <img> de lucide-staticNo definido / No mencionado
Control sobre estructuraMuy alto: semántica, accesibilidad, CLSVaría según modelo y entorno
Acceso a internet❌ No tiene accesoAlgunos entornos permiten búsqueda limitada

7. Conclusión

Gemini Diffusion es un modelo extremadamente riguroso, especializado en generación precisa y visualmente refinada de interfaces web. A pesar de no generar imágenes o videos, su nombre sugiere una arquitectura moderna no-autoregresiva que optimiza la calidad global del output en lugar de la predicción secuencial.

Su fuerte diferenciador es el cumplimiento preciso de requisitos de diseño visual, estructura semántica y reglas de formato, lo que lo hace ideal para generar productos listos para producción en frontend, landing pages, portfolios o juegos simples en navegador.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

51 comentarios en “System Prompt de Gemini Diffusion: código HTML y Tailwind”

  4. Guiu

    Oye, a ver si me aclaro, ¿esto del Gemini Diffusion es tipo una evolución del código HTML, no? Con todo el rollo este de Tailwind y tal. Me pareció entender que es más sostenible y todo eso, pero no sé, igual me estoy liando. Por cierto, ¿esto del impacto y contexto cómo va? ¿Es como para hacer las páginas web más éticas y eso? Ah, y otra cosa, ¿esto vale también para los videojuegos o solo es para páginas normales? Es que no lo pillé muy bien.

    Responder
  9. Falak

    Este artículo sobre el System Prompt de Gemini Diffusion, ¿eh? Me he quedado un poco pillado con lo de código HTML y Tailwind, no sé si lo he captado todo. Me parece interesante que se hable de sostenibilidad e impacto, aunque no estoy seguro de entender cómo se relaciona con la generación de páginas HTML. ¿Alguien puede aclarar eso? Y por cierto, ¿qué papel juegan exactamente los principios éticos y operativos aquí? Igual me estoy liando.

    Responder
  16. Fergal Lozano

    Uf, vaya pedazo de artículo. Se nota que se han trabajado bien lo de la identificación y el propósito de Gemini Diffusion, ¿no? Lo de que se basa en principios éticos y operativos fuertes me parece un puntazo. Aunque, a ver, no sé, ¿cómo afecta eso a la hora de generar páginas HTML? Y, por cierto, ¿esto podría tener algún impacto en la sostenibilidad de los proyectos web? Estoy un poco perdido, la verdad. ¿Alguien me ayuda a entenderlo mejor?

    Responder
  27. Chelem

    Pues, no sé, ha sido una lectura bastante interesante, eso sí. Me gusta esta visión de mantener la sostenibilidad y el impacto en cuenta cuando se habla de generar páginas HTML. Pero, este tema de Tailwind, igual me estoy liando un poco, ¿no es demasiado complejo para los principiantes? Y, por cierto, me ha dejado pensando eso de las reglas éticas y operativas. ¿Cómo se aplican en la práctica? ¿Alguien podría aclarar esto un poco?

    Responder

Más contenido relacionado que puede interesarte...

Scroll al inicio