frontend-design

Descripción general

¿Qué es frontend-design?

La skill frontend-design es un conjunto de herramientas especializado para crear interfaces frontend visualmente distintivas y de calidad para producción. A diferencia de los generadores de código genéricos, esta skill enfatiza la dirección creativa, la estética, la tipografía, el movimiento, la disposición y el acabado de la interfaz. Está diseñada para ayudarte a entregar componentes web, páginas y aplicaciones que destaquen y se sientan intencionadas, no como una salida típica de IA.

¿Quién debería usar frontend-design?

Esta skill es ideal para desarrolladores frontend, diseñadores UI/UX y equipos de producto que quieran elevar la calidad visual e interactiva de sus proyectos web. Usa frontend-design cuando necesites:

• Diseño UI creativo y de alta calidad para aplicaciones web, páginas de aterrizaje o artefactos digitales
• Orientación sobre color, tipografía, movimiento y diseños responsivos
• Evitar interfaces genéricas y poco inspiradas generadas por IA
• Asegurar accesibilidad y buenas prácticas de diseño

¿Qué problemas resuelve?

• Evita el "desorden de IA" al requerir contexto real de proyecto y marca antes de comenzar el diseño
• Proporciona sistemas de diseño accionables para color, espaciado, tipografía e interacción
• Garantiza que la accesibilidad y el diseño responsivo estén integrados desde el inicio
• Ofrece código y patrones de diseño prácticos y listos para producción

Cómo usar

Pasos de instalación

1. Agrega la skill a tu proyecto:
   Ejecuta:

   npx skills add https://github.com/pbakaus/impeccable --skill frontend-design
   

2. Revisa la documentación principal:
   • Comienza con SKILL.md para una visión general y protocolo de recopilación de contexto.
   • Consulta README.md, AGENTS.md y metadata.json para notas adicionales de configuración y uso.
3. Explora las referencias de diseño:
   La carpeta reference/ contiene guías prácticas sobre:
   • Color y contraste (reference/color-and-contrast.md)
   • Diseño de interacción (reference/interaction-design.md)
   • Diseño de movimiento (reference/motion-design.md)
   • Diseño responsivo (reference/responsive-design.md)
   • Diseño espacial (reference/spatial-design.md)
   • Tipografía (reference/typography.md)
   • Redacción UX (reference/ux-writing.md)
4. Adáptalo a tu flujo de trabajo:
   Integra los principios de diseño y ejemplos de código en tu propio repositorio y cadena de herramientas. La skill está pensada para adaptarse, no para copiarse literalmente.

Consejos clave para el flujo de trabajo

• Siempre recopila contexto del proyecto (audiencia, casos de uso, tono de marca) antes de comenzar el diseño.
• Usa los sistemas de color, espaciado y tipografía proporcionados para una UI consistente y accesible.
• Consulta las guías de movimiento e interacción para que tus interfaces se sientan pulidas e intuitivas.
• Revisa los archivos en reference/ para patrones CSS y de diseño listos para usar.

Preguntas frecuentes

¿Cuándo debería usar la skill frontend-design?

Usa frontend-design cuando necesites crear o mejorar la calidad visual e interactiva de componentes web, páginas o aplicaciones, especialmente cuando el contexto de diseño y la personalidad de marca son importantes.

¿Qué archivos debo revisar primero?

• SKILL.md para la visión general y requisitos de contexto
• reference/color-and-contrast.md para orientación sobre el sistema de color
• reference/interaction-design.md para mejores prácticas de estados y accesibilidad
• reference/motion-design.md para animación y temporización
• reference/responsive-design.md para diseños adaptativos
• reference/spatial-design.md para espaciado y rejillas

¿frontend-design genera código o solo directrices?

Proporciona ambos: fragmentos de código prácticos y listos para producción (principalmente CSS) y directrices detalladas de diseño para ayudarte a implementarlos eficazmente.

¿Es frontend-design adecuado para todos los proyectos?

Esta skill es mejor para proyectos donde la calidad del diseño, la diferenciación de marca y la accesibilidad son prioridades. Para herramientas puramente funcionales o internas donde la estética es menos importante, puede ser suficiente un enfoque más simple.

¿Dónde puedo encontrar más detalles?

Explora el árbol completo de archivos en la pestaña Archivos, incluyendo todas las referencias anidadas y scripts auxiliares, para obtener guías y ejemplos detallados.