Communitygithub.com

alty-oss/dev-design

Se utiliza para establecer una dirección visual distintiva para una nueva interfaz de usuario o un rediseño intencional.

¿Qué es dev-design?

Esta habilidad guía el proceso de dirección de arte para productos digitales, ayudando a los desarrolladores y diseñadores a definir una identidad visual coherente y fundamentada. En lugar de centrarse en cambios superficiales de paleta, propone un análisis profundo de la audiencia, el contenido y la función del producto para generar dos direcciones materiales diferentes. El flujo de trabajo sigue un proceso de dos pasos: primero, planificar colores, tipografía, concepto de diseño y un wireframe ASCII; segundo, comparar las opciones con el brief y un producto similar plausible, registrando las decisiones y las justificaciones en un archivo 'direction.md'. Está pensado para nuevas interfaces o rediseños, y soporta plataformas como Claude Code, Cursor y Codex. La habilidad enfatiza el uso de contenido real, la concentración de la expresión en un elemento memorable, y el manejo explícito de fuentes o activos faltantes mediante fallbacks intencionales.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alty-oss/dev-design/tree/HEAD/skills/art-direction

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Dirección de arte

Português (Brasil)

Lee la guía de diseño frontend incluida antes de elegir la dirección. Utiliza sus principios visuales específicos junto con el brief y las restricciones del proyecto.

Lee brief.md y las restricciones existentes. Para productos nuevos/rediseños, propón dos direcciones materialmente diferentes, cada una fundamentada en la audiencia, el contenido y la función. Compara jerarquía, composición, tipografía y énfasis, no solo cambios de paleta.

Registra la dirección elegida, la justificación y el estado/fuente de la decisión en direction.md. Si las decisiones fueron delegadas, selecciona la mejor opción y registra "delegado". De lo contrario, resuelve la decisión material antes de implementar una nueva dirección.

Sigue el proceso original de dos pasos:

  1. Planifica de 4 a 6 colores hexadecales nombrados, tipografías y roles, concepto de diseño y wireframe ASCII con alineación, y principios distintivos.
  2. Compara con el brief y un producto similar plausible. Revisa las opciones que se verían idénticas entre temas no relacionados; registra el cambio y el motivo.

La dirección explícita del usuario prevalece, incluidos los estilos mencionados como clichés por la fuente. Un proyecto con una identidad existente normalmente la reutiliza.

Usa contenido real. Concentra la expresión en un elemento memorable; apóyalo con una jerarquía disciplinada. Explica las fuentes/recursos faltantes y utiliza un fallback intencional en lugar de asumir que un servicio está disponible.

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

Skills relacionados