En los propios términos del Skill
Este skill genera interfaces web ultraminimalistas de estilo documento, inspiradas en plataformas de trabajo premium. Impone una paleta monocromática cálida con tonos de blanco roto y carbón, jerarquías tipográficas a medida que combinan serifas editoriales y sans-serifas geométricas, y layouts planos de tipo bento-grid con acentos pastel apagados.
El protocolo prohíbe estrictamente las fuentes Inter, Roboto y Open Sans, las librerías de iconos estándar como Lucide y Heroicons, las sombras pesadas por defecto de Tailwind, los degradados, los emojis y los clichés de copywriting de IA. Los componentes usan bordes de 1px solid #EAEAEA, un border radius nítido de 8-12px, un padding interno generoso y animaciones de entrada al hacer scroll con IntersectionObserver. El movimiento es invisible y sofisticado, y anima únicamente mediante transform y opacity.
Qué produce
- Código frontend en HTML, React, Tailwind o Vue que refleje de forma nativa la estética editorial, sofisticada y sin desorden
- Layouts con estructuras CSS Grid asimétricas de tipo bento-grid y un macro-whitespace generoso
Cómo funciona
- 01Establecer primero el macro-whitespace
Usar un padding vertical masivo entre secciones, concretamente py-24 o py-32 en unidades de Tailwind.
- 02Limitar el ancho del contenido
Limitar el contenido tipográfico principal a max-w-4xl o max-w-5xl para mantener proporciones editoriales.
- 03Aplicar la jerarquía tipográfica y las variables monocromáticas
Establecer de inmediato las fuentes personalizadas y las variables de color siguiendo las especificaciones de la paleta monocromática cálida.
- 04Aplicar los estándares de borde
Cada tarjeta, divisor y borde debe usar exactamente 1px solid #EAEAEA.
- 05Añadir animaciones de entrada al hacer scroll
Aplicar animaciones a todos los bloques de contenido principales usando IntersectionObserver, nunca listeners de scroll de window.
- 06Garantizar la profundidad visual
Las secciones necesitan profundidad mediante imágenes, degradados ambientales o texturas sutiles, en lugar de fondos planos y vacíos.