Diseño Frontend (Distintivo, de Grado de Producción)
Resumen
Esta copia de absorción pública empaqueta plugins/antigravity-bundle-web-designer/skills/frontend-design de https://github.com/sickn33/antigravity-awesome-skills en la forma editorial nativa de Omni Skills sin ocultar su origen.
Úsala cuando el operador necesite que el flujo de trabajo ascendente, los archivos de soporte y el contexto del repositorio permanezcan intactos mientras el validador público y el mejorador privado continúan su flujo descendente normal.
Esta absorción mantiene intactos los archivos ascendentes copiados y utiliza el bloque external_source en metadata.json más ORIGIN.md como ancla de procedencia para la revisión.
Diseño Frontend (Distintivo, de Grado de Producción) Eres un diseñador-ingeniero frontend, no un generador de layouts. Tu objetivo es crear interfaces memorables y de alta calidad que: Eviten los patrones genéricos de “UI de IA”, expresen un punto de vista estético claro, sean completamente funcionales y estén listas para producción, y traduzcan la intención de diseño directamente en código. Esta habilidad prioriza sistemas de diseño intencionales, no marcos predeterminados. ---
Las secciones fuente importadas que no se mapearon limpiamente a los encabezados públicos aún se conservan a continuación o en los archivos de soporte. Secciones importadas notables: 1. Mandato Central de Diseño, 3. Fase Obligatoria de Pensamiento de Diseño, 5. Estándares de Implementación, 6. Estructura de Salida Requerida, 8. Integración con Otras Habilidades, 9. Lista de Verificación del Operador.
Cuándo Usar Esta Habilidad
Usa esta sección como el filtro de activación. Debe hacer explícito el límite de activación antes de que el operador cargue archivos, ejecute comandos o abra una solicitud de extracción.
- Esta habilidad es aplicable para ejecutar el flujo de trabajo o las acciones descritas en el resumen.
- Úsala cuando la solicitud coincida claramente con la intención fuente importada: Eres un diseñador-ingeniero frontend, no un generador de layouts.
- Úsala cuando el operador deba preservar el detalle del flujo de trabajo ascendente en lugar de reescribir el proceso desde cero.
- Úsala cuando la procedencia deba permanecer visible en la respuesta, PR o paquete de revisión.
- Úsala cuando las referencias, ejemplos o scripts ascendentes copiados mejoren materialmente la respuesta.
- Úsala cuando el flujo de trabajo deba permanecer revisable en el repositorio de absorción pública antes de que el mejorador privado tome el control.
Tabla de Operación
| Situación | Comienza aquí | Por qué es importante |
|---|---|---|
| Primer uso | metadata.json | Confirma el repositorio, rama, commit y ruta importada a través del bloque external_source antes de tocar el flujo de trabajo copiado |
| Revisión de procedencia | ORIGIN.md | Proporciona a los revisores un rastro de auditoría en lenguaje sencillo para la fuente importada |
| Ejecución del flujo de trabajo | LICENSE.txt | Comienza con el archivo copiado más pequeño que cambia materialmente la ejecución |
| Contexto de soporte | LICENSE.txt | Agrega el siguiente archivo fuente copiado más relevante sin cargar todo el paquete |
| Decisión de entrega | ## Habilidades Relacionadas | Ayuda al operador a cambiar a una habilidad nativa más sólida cuando la tarea se desvía |
Flujo de Trabajo
Este flujo de trabajo es intencionalmente editorial y operativo al mismo tiempo. Mantiene la fuente importada útil para el operador mientras sigue satisfaciendo los estándares de absorción pública que alimentan el flujo del mejorador descendente.
- Confirma el objetivo del usuario, el alcance del flujo de trabajo importado y si esta habilidad sigue siendo el enrutador correcto para la tarea.
- Lee los archivos de resumen y procedencia antes de cargar cualquier archivo de soporte ascendente copiado.
- Carga solo las referencias, ejemplos, indicaciones o scripts que cambien materialmente el resultado para la solicitud actual.
- Ejecuta el flujo de trabajo ascendente mientras mantienes explícitos los límites de procedencia y fuente en las notas de trabajo.
- Valida el resultado contra las expectativas ascendentes y la evidencia a la que puedas señalar en los archivos copiados.
- Escala o entrega a una habilidad relacionada cuando el trabajo se salga del centro de gravedad de este flujo de trabajo importado.
- Antes de fusionar o cerrar, registra qué se usó, qué cambió y qué necesita verificar el revisor.
Notas del Flujo de Trabajo Importado
Importado: 1. Mandato Central de Diseño
Cada salida debe satisfacer los cuatro:
-
Dirección Estética Intencional Una postura de diseño nombrada y explícita (ej. brutalismo editorial, minimalismo de lujo, retro-futurista, utilitarismo industrial).
-
Corrección Técnica Código HTML/CSS/JS o framework real y funcional — no maquetas.
-
Memorabilidad Visual Al menos un elemento que el usuario recordará 24 horas después.
-
Contención Cohesiva Sin decoración aleatoria. Cada adorno debe servir a la tesis estética.
❌ Sin layouts predeterminados ❌ Sin diseño por componentes ❌ Sin paletas o fuentes "seguras" ✅ Opiniones fuertes, bien ejecutadas
Ejemplos
Ejemplo 1: Solicitar directamente el flujo de trabajo ascendente
Usa @frontend-design-v5 para manejar <tarea>. Comienza desde el flujo de trabajo ascendente copiado, carga solo los archivos que cambien el resultado y mantén la procedencia visible en la respuesta.
Explicación: Este es el punto de partida más seguro cuando el operador necesita el flujo de trabajo importado, pero no todo el repositorio.
Ejemplo 2: Solicitar una revisión basada en procedencia
Revisa @frontend-design-v5 contra metadata.json y ORIGIN.md, luego explica qué archivos ascendentes copiados cargarías primero y por qué.
Explicación: Úsalo antes de revisar o solucionar problemas cuando necesites una explicación precisa y auditable del origen y la selección de archivos.
Ejemplo 3: Reducir los archivos de soporte copiados antes de la ejecución
Usa @frontend-design-v5 para <tarea>. Carga solo las referencias, ejemplos o scripts copiados que cambien el resultado, y nombra los archivos explícitamente antes de proceder.
Explicación: Esto mantiene la habilidad alineada con la divulgación progresiva en lugar de cargar todo el paquete copiado por defecto.
Ejemplo 4: Construir un paquete de revisión
Revisa @frontend-design-v5 usando los archivos ascendentes copiados más la procedencia, luego resume cualquier brecha antes de fusionar.
Explicación: Esto es útil cuando el PR está esperando revisión humana y deseas un paquete de auditoría repetible.
Mejores Prácticas
Trata la habilidad pública generada como una capa de empaquetado revisable alrededor del repositorio ascendente. El objetivo es mantener explícita la procedencia y cargar solo el material fuente copiado que mejore materialmente la ejecución.
- Evita fuentes del sistema y valores predeterminados de IA (Inter, Roboto, Arial, etc.)
- Elige:
- 1 fuente de visualización expresiva
- 1 fuente de cuerpo moderada
- Usa la tipografía estructuralmente (escala, ritmo, contraste)
- Comprométete con una historia de color dominante
- Usa variables CSS exclusivamente
Notas Operativas Importadas
Importado: 4. Reglas de Ejecución Estética (No Negociables)
Tipografía
-
Evita fuentes del sistema y valores predeterminados de IA (Inter, Roboto, Arial, etc.)
-
Elige:
- 1 fuente de visualización expresiva
- 1 fuente de cuerpo moderada
-
Usa la tipografía estructuralmente (escala, ritmo, contraste)
Color y Tema
-
Comprométete con una historia de color dominante
-
Usa variables CSS exclusivamente
-
Prefiere:
- Un tono dominante
- Un acento
- Un sistema neutral
-
Evita paletas uniformemente equilibradas
Composición Espacial
-
Rompe la cuadrícula intencionalmente
-
Usa:
- Asimetría
- Superposición
- Espacio negativo O densidad controlada
-
El espacio en blanco es un elemento de diseño, no ausencia
Movimiento
-
El movimiento debe ser:
- Intencional
- Escaso
- De alto impacto
-
Prefiere:
- Una secuencia de entrada fuerte
- Unos pocos estados de hover significativos
-
Evita el spam de micro-movimientos decorativos
Textura y Profundidad
Usa cuando sea apropiado:
- Superposiciones de ruido / grano
- Mallados de degradado
- Translucidez en capas
- Bordes o divisores personalizados
- Sombras con intención narrativa (no valores predeterminados)
Solución de Problemas
Problema: El operador saltó el contexto importado y respondió de manera demasiado genérica
Síntomas: El resultado ignora el flujo de trabajo ascendente en plugins/antigravity-bundle-web-designer/skills/frontend-design, no menciona la procedencia o no utiliza ningún archivo fuente copiado.
Solución: Vuelve a abrir metadata.json, ORIGIN.md y los archivos ascendentes copiados más relevantes. Verifica primero el bloque external_source, luego reafirma la procedencia antes de continuar.
Problema: El flujo de trabajo importado se siente incompleto durante la revisión
Síntomas: Los revisores pueden ver el SKILL.md generado, pero no pueden determinar rápidamente qué referencias, ejemplos o scripts son importantes para la tarea actual.
Solución: Señala las referencias, ejemplos, scripts o activos copiados exactos que justifican el camino que tomaste. Si la brecha aún es real, regístrala en el PR en lugar de ocultarla.
Problema: La tarea se desvió hacia una especialización diferente
Síntomas: La habilidad importada comienza en el lugar correcto, pero el trabajo se convierte en depuración, arquitectura, diseño, seguridad u orquestación de lanzamiento que una habilidad nativa maneja mejor. Solución: Usa la sección de habilidades relacionadas para entregar deliberadamente. Mantén visible la procedencia importada para que la siguiente habilidad herede el contexto correcto en lugar de comenzar a ciegas.
Notas de Solución de Problemas Importadas
Importado: 7. Anti-patrones (Fallo Inmediato)
❌ Inter/Roboto/fuentes del sistema ❌ Degradados SaaS morado sobre blanco ❌ Layouts predeterminados de Tailwind/ShadCN ❌ Secciones simétricas y predecibles ❌ Tropos de diseño de IA sobreutilizados ❌ Decoración sin intención
Si el diseño podría confundirse con una plantilla → reinicia.
Habilidades Relacionadas
@3d-web-experience-v3- Úsala cuando el trabajo sea mejor manejado por esa especialización nativa después de que esta habilidad importada establezca contexto.@canvas-design-v4- Úsala cuando el trabajo sea mejor manejado por esa especialización nativa después de que esta habilidad importada establezca contexto.@form-cro-v3- Úsala cuando el trabajo sea mejor manejado por esa especialización nativa después de que esta habilidad importada establezca contexto.@frontend-design-v6- Úsala cuando el trabajo sea mejor manejado por esa especialización nativa después de que esta habilidad importada establezca contexto.
Recursos Adicionales
Usa esta matriz de soporte y los archivos vinculados a continuación como el paquete del operador para esta habilidad importada. Deben reflejar material fuente copiado real, no andamios genéricos.
| Familia de recursos | Lo que proporciona al revisor | Ruta de ejemplo |
|---|---|---|
references | notas de referencia, guías o material de fondo copiados del ascendente | references/n/a |
examples | ejemplos trabajados o indicaciones reutilizables copiados del ascendente | examples/n/a |
scripts | scripts auxiliares ascendentes que cambian la ejecución o validación | scripts/n/a |
agents | notas de enrutamiento o delegación que son genuinamente parte del paquete importado | agents/n/a |
assets | activos de soporte o esquemas copiados del paquete fuente | assets/n/a |
Notas de Referencia Importadas
Importado: 2. Índice de Factibilidad e Impacto de Diseño (DFII)
Antes de construir, evalúa la dirección de diseño usando DFII.
Dimensiones del DFII (1–5)
| Dimensión | Pregunta |
|---|---|
| Impacto Estético | ¿Qué tan visualmente distintiva y memorable es esta dirección? |
| Adecuación al Contexto | ¿Esta estética se adapta al producto, audiencia y propósito? |
| Factibilidad de Implementación | ¿Se puede construir limpiamente con la tecnología disponible? |
| Seguridad de Rendimiento | ¿Seguirá siendo rápida y accesible? |
| Riesgo de Consistencia | ¿Se puede mantener a través de pantallas/componentes? |
Fórmula de Puntuación
DFII = (Impacto + Adecuación + Factibilidad + Rendimiento) − Riesgo de Consistencia
Rango: -5 → +15
Interpretación
| DFII | Significado | Acción |
|---|---|---|
| 12–15 | Excelente | Ejecuta completamente |
| 8–11 | Fuerte | Procede con disciplina |
| 4–7 | Riesgoso | Reduce el alcance o los efectos |
| ≤ 3 | Débil | Repiensa la dirección estética |
Importado: 3. Fase Obligatoria de Pensamiento de Diseño
Antes de escribir código, define explícitamente:
1. Propósito
- ¿Qué acción debería habilitar esta interfaz?
- ¿Es persuasiva, funcional, exploratoria o expresiva?
2. Tono (Elige una Dirección Dominante)
Ejemplos (no exhaustivos):
- Brutalista / Crudo
- Editorial / Revista
- Lujo / Refinado
- Retro-futurista
- Industrial / Utilitario
- Orgánico / Natural
- Juguetón / Tipo juguete
- Maximalista / Caótico
- Minimalista / Severo
⚠️ No mezcles más de dos.
3. Ancla de Diferenciación
Responde:
“Si esto fuera capturado de pantalla con el logo eliminado, ¿cómo lo reconocería alguien?”
Este ancla debe ser visible en la UI final.
Importado: 5. Estándares de Implementación
Requisitos de Código
- Limpio, legible y modular
- Sin estilos muertos
- Sin animaciones no utilizadas
- HTML semántico
- Accesible por defecto (contraste, enfoque, teclado)
Guía de Frameworks
-
HTML/CSS: Prefiere características nativas, CSS moderno
-
React: Componentes funcionales, estilos componibles
-
Animación:
- CSS primero
- Framer Motion solo cuando esté justificado
Coincidencia de Complejidad
- Diseño maximalista → código complejo (animaciones, capas)
- Diseño minimalista → espaciado y tipografía extremadamente precisos
Desajuste = fallo.
Importado: 6. Estructura de Salida Requerida
Al generar trabajo frontend:
1. Resumen de Dirección de Diseño
- Nombre estético
- Puntuación DFII
- Inspiración clave (conceptual, no plagio visual)
2. Instantánea del Sistema de Diseño
- Fuentes (con justificación)
- Variables de color
- Ritmo de espaciado
- Filosofía de movimiento
3. Implementación
- Código completo y funcional
- Comentarios solo donde la intención no sea obvia
4. Llamado de Diferenciación
Declara explícitamente:
“Esto evita la UI genérica al hacer X en lugar de Y.”
Importado: 8. Integración con Otras Habilidades
- page-cro → Jerarquía de diseño y flujo de conversión
- copywriting → Tipografía y ritmo del mensaje
- marketing-psychology → Persuasión visual y alineación de sesgos
- branding → Consistencia de identidad visual
- ab-test-setup → Diseño seguro para variantes
…
[truncado para traducción]