Haizhucodex Design Skill

¿Qué hace Haizhucodex Design Skill?

Crea experiencias frontend pulidas con una tesis visual clara, un modelo de interacción usable, componentes accesibles, movimiento moderado y calidad de implementación verificada.

Modos Operativos

Elige un modo según la solicitud y el estado del proyecto:

• Diseño: establece jerarquía, dirección visual, tokens, componentes, estados y movimiento antes de la implementación.
• Construir: implementa un brief proporcionado, captura de pantalla, maqueta o sistema de diseño existente en el stack frontend actual.
• Rediseño: preserva el comportamiento del producto mientras mejoras la jerarquía, el branding, la capacidad de respuesta, la accesibilidad y la calidad percibida.
• Auditoría: inspecciona una interfaz existente, clasifica los problemas por impacto y corrige los de mayor valor.
• Sistema de diseño: crea o refina DESIGN.md, tokens, reglas de componentes, reglas de movimiento y patrones reutilizables.

Flujo de Trabajo Principal

1. Inspecciona el repositorio antes de editar. Identifica framework, gestor de paquetes, rutas, componentes, sistema de estilos, tokens, dependencias, comandos de compilación y convenciones del proyecto.
2. Extrae un brief de diseño compacto que contenga tipo de producto, audiencia, tarea principal, jerarquía de contenido, atributos de marca, plataforma, objetivos responsive, requisitos de accesibilidad y restricciones técnicas.
3. Selecciona una tesis visual. Define el carácter tipográfico, el comportamiento del color, la densidad del espaciado, el lenguaje de las formas, la elevación, las imágenes y la jerarquía del movimiento.
4. Dirige el trabajo a través de las cinco skills especializadas cuando estén disponibles:
   • UI UX Pro Max: patrones de UX por categoría de producto, arquitectura de la información, opciones de paleta y tipografía, convenciones de plataforma y restricciones de accesibilidad.
   • Design MD Collection: lenguaje de diseño a nivel de proyecto, tokens, reglas de componentes reutilizables y orientación sobre DESIGN.md.
   • Taste Skill: composición, diferenciación, juicio visual, restricciones anti-genéricas y dirección artística.
   • shadcn: primitivas React accesibles, APIs de componentes, formularios, superposiciones, navegación, visualización de datos y estados.
   • Impeccable: auditoría final que cubre jerarquía, tipografía, espaciado, pulido, capacidad de respuesta y accesibilidad.
5. Lee references/prompt-library.md. Selecciona solo los patrones de origen que sirvan a un objetivo específico de producto o interacción.
6. Produce un mapa de implementación que cubra las secciones de la página, componentes reutilizables, estados de contenido, comportamiento responsive, interacciones, propiedad de las animaciones, comportamiento de movimiento reducido y comandos de verificación.
7. Implementa directamente en el stack existente. Reutiliza las dependencias y convenciones actuales a menos que una nueva dependencia aporte un valor claro.
8. Verifica los estados de carga, vacío, error, deshabilitado, hover, foco, activo, seleccionado, éxito y destructivo cuando corresponda.
9. Prueba la navegación por teclado, la visibilidad del foco, la estructura semántica, el contraste, los objetivos táctiles, el diseño responsive, los errores en tiempo de ejecución y prefers-reduced-motion.
10. Ejecuta formateador, linter, verificación de tipos, pruebas y compilación de producción. Corrige los fallos introducidos por el trabajo.
11. Realiza una crítica final de estilo Impeccable y aborda los defectos restantes de mayor impacto.

Reglas de Selección de Patrones

• Usa Motion Sites para narrativas de desplazamiento, transiciones editoriales, lanzamientos, portafolios y secciones hero inmersivas.
• Usa React Bits para primitivas de animación React reutilizables, texto animado, listas, tarjetas, fondos y transiciones.
• Usa Uiverse para controles enfocados y microinteracciones como botones, entradas, alternadores, cargadores y tooltips.
• Usa Anime.js para líneas de tiempo coordinadas, secuencias SVG, animación escalonada y movimiento impulsado por estados que CSS por sí solo no puede expresar limpiamente.
• Usa Aceternity UI para composiciones premium de páginas de aterrizaje en React, exhibiciones de funciones, navegación, tarjetas y fondos atmosféricos.

No acumules efectos característicos simplemente porque estén disponibles. Cada efecto debe apoyar la jerarquía, la retroalimentación, la orientación, la narración o la comprensión.

Guardarraíles de Diseño

• Establece una idea visual dominante y aplícala de manera consistente.
• Prioriza la finalización de la tarea y la arquitectura de la información sobre la decoración.
• Evita el estilo de IA genérico con degradados excesivos, glassmorphism exagerado, tarjetas flotantes aleatorias, gráficos ornamentales, rectángulos redondeados uniformes y animación en cada elemento.
• Limita las tipografías prominentes, los colores de acento, los niveles de elevación, los radios de borde y las familias de movimiento.
• Usa HTML semántico y primitivas de componentes accesibles.
• Trata el móvil como una composición deliberada, no como un diseño de escritorio comprimido.
• Prefiere transiciones CSS para cambios de estado simples e introduce animación JavaScript solo cuando se requiera coordinación o secuenciación.
• Anima transformaciones y opacidad cuando sea posible. Evita la alteración del diseño y la animación continua innecesaria.
• Preserva el contenido legible antes de la hidratación y cuando la animación esté deshabilitada.
• Respeta las licencias externas. Utiliza APIs documentadas o métodos de instalación y no redistribuyas código fuente de terceros sin permiso.

Política de Dependencias

Antes de añadir un paquete:

1. Verifica si el proyecto ya tiene una dependencia equivalente.
2. Confirma la compatibilidad con el framework, el modelo de renderizado y la versión.
3. Explica por qué CSS o las utilidades existentes son insuficientes.
4. Instala con el gestor de paquetes del repositorio.
5. Mantén las importaciones limitadas y elimina los experimentos no utilizados.
6. Registra la dependencia y su propósito en el resumen final.

Si una skill o biblioteca nombrada no está disponible, realiza su función directamente y continúa. No bloquees la implementación rutinaria por una integración opcional.

Entregables Requeridos

Para trabajos solo de diseño, devuelve:

1. Brief de diseño.
2. Tesis visual.
3. Arquitectura de página y componentes.
4. Dirección de tokens y tipografía.
5. Plan de movimiento.
6. Requisitos de capacidad de respuesta y accesibilidad.

Para trabajos de implementación, devuelve:

1. Dirección seleccionada y fundamento.
2. Archivos modificados y decisiones clave de componentes.
3. Comportamiento de movimiento e interacción.
4. Verificación de accesibilidad y capacidad de respuesta.
5. Comandos ejecutados y resultados.
6. Dependencias añadidas.
7. Suposiciones o compensaciones restantes.