Suite Premium de Diseño UI y Estética Visual
Un marco de trabajo de diseño dedicado a crear interfaces web personalizadas, distintivas y accesibles, eliminando al mismo tiempo los clichés genéricos generados por IA.
Al estilizar, diseñar o auditar componentes de UI, localiza el tema correspondiente en references/<categoria>/<tema>/SKILL.md.
Catálogo y Navegación Rápida
1. Anti-IA Genérica y Artesanía Visual (references/anti-slop-and-craft/)
| Tema | Subruta | Descripción |
|---|
| no-ai-design-slop | anti-slop-and-craft/no-ai-design-slop | Barrera de calidad pasiva que evita los valores predeterminados genéricos de IA: degradados púrpura, tarjetas flotantes centradas y diseños repetitivos. |
| audit-ai-design-slop | anti-slop-and-craft/audit-ai-design-slop | Auditoría de diagnóstico que identifica defectos visuales de IA, elementos inconsistentes y planes de limpieza basados en eliminación primero. |
| build-awwwards-quality-sites | anti-slop-and-craft/build-awwwards-quality-sites | Artesanía de nivel Awwwards: dirección artística sólida, tipografía editorial, animación GSAP e imágenes auténticas. |
| ui-ux-pro-max | anti-slop-and-craft/ui-ux-pro-max | Manual de diseño frontend profesional: escala tipográfica, espacio en blanco intencional y microinteracciones. |
| design-first-ui-prompting | anti-slop-and-craft/design-first-ui-prompting | Indicaciones de diseño estético y de interacción basadas en especificaciones antes de escribir código frontend. |
2. Estilos, Tokens y Marcas (references/styling-and-tokens/)
| Tema | Subruta | Descripción |
|---|
| brand-guidelines | styling-and-tokens/brand-guidelines | Aplicación de reglas tipográficas, voz y tono, uso del logotipo, cumplimiento de color y estándares de espaciado. |
| theme-factory | styling-and-tokens/theme-factory | Generador de temas visuales seleccionados, tokens de diseño, combinaciones de fuentes y variables CSS. |
| tailwindcss | styling-and-tokens/tailwindcss | Recetas de componentes de Tailwind CSS, cuadrículas de diseño, utilidades tipográficas y patrones responsivos. |
| unsplash-asset-images | styling-and-tokens/unsplash-asset-images | Obtención de activos fotográficos auténticos de alta calidad, retratos y fondos. |
3. Superficies y Arquetipos de Página (references/surfaces-and-pages/)
| Tema | Subruta | Descripción |
|---|
| glass-dark-ui | surfaces-and-pages/glass-dark-ui | Paneles de glassmorfismo esmerilado en modo oscuro, bordes degradados con pseudoelementos y contraste legible. |
| skeuomorphic-ui | surfaces-and-pages/skeuomorphic-ui | Estilo físico táctil: degradados en capas, sombras interiores/exteriores apiladas y detalles en relieve. |
| framed-grid-layout | surfaces-and-pages/framed-grid-layout | Límites de cuadrícula de precisión tipo pelo, soportes de esquina en forma de L y secciones editoriales estructuradas. |
| landing-page | surfaces-and-pages/landing-page | Estructura de página de aterrizaje SaaS de alta conversión con oferta única, arco narrativo y redacción publicitaria. |
| pricing-page | surfaces-and-pages/pricing-page | Tablas de precios de alta conversión, matrices de comparación de planes, listas de verificación de características y preguntas frecuentes. |