Communitygithub.com

purebilliontech/design-pro

Enruta trabajos de diseño y front-end al libro de jugadas experto adecuado desde una biblioteca empaquetada de 328. Utilízalo para cualquier trabajo de UI, diseño visual, interacción, animación, tipografía, color, accesibilidad, maquetación o copywriting; para landing pages y builds de diseño-ingeniería; para investigación de usuarios, personas, mapas de viaje, pruebas de usabilidad, sistemas de diseño, tokens, crítica y entrega; para Three.js y escenas 3D, reels de motion, presentaciones en video e ilustración SVG; y para arquitectura de juegos, combate y VFX. También úsalo cuando te pidan revisar, criticar o mejorar una interfaz existente, o cuando la solicitud sea 'haz que esto se vea mejor', 'esto parece generado por IA', 'dale buen gusto' o 'qué skill cubre X'.

¿Qué es design-pro?

Design Pro es un enrutador inteligente que actúa como capa de orquestación sobre una biblioteca empaquetada de 328 libros de jugadas de diseño. Su propósito principal es dirigir cualquier solicitud de diseño o front-end al libro de jugadas especializado correcto, evitando el resultado genérico que produciría un enrutamiento pasivo. Para tareas de construcción, mejora o diseño de interfaces de usuario (Path A), sigue un pipeline orquestado obligatorio que incorpora un motor antigénero, asegurando resultados distintivos y de alta calidad. Para otras tareas como crítica, investigación, animación, juegos o ilustración (Path B), utiliza un tablero de conmutación que clasifica la solicitud en cinco áreas: ui-craft (82 playbooks), web-build (121), process (63), motion-3d (36) y games (26). Cada área tiene su propio índice que lista los playbooks con descripciones completas de activación, permitiendo leer solo los relevantes. El skill está diseñado para agentes de IA como Claude, Cursor o Codex, y proporciona pautas específicas para casos comunes como 'haz que se vea mejor', 'revisa esta interfaz' o construcción de landing pages. Los playbooks provienen de siete colecciones de código abierto con licencia MIT, incluyendo contribuciones de Meng To, MC Dean, Emil Kowalski, entre otros, manteniendo la atribución de cada fuente.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/purebilliontech/design-pro/tree/main/skills/design-pro

Preguntar en tu IA favorita

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

Documentación

Design Pro

Una capa de enrutamiento sobre 328 libros de jugadas de diseño de siete colecciones publicadas, con un pipeline orquestado para builds de UI sobre ella. Cada libro de jugadas es un archivo de referencia autocontenido. Lee solo los que la tarea requiera — nunca cargues la biblioteca completa.

Primera bifurcación: ¿es un build de UI?

Antes de clasificar, decide en cuál de los dos caminos se encuentra la solicitud. Acertar en esto es lo que separa un resultado distintivo de uno genérico.

Camino A — Construir / diseñar / mejorar una superficie de UI (una página, pantalla, componente, landing page, sitio de marketing, vista de app o dashboard — y realmente producirás o cambiarás algo):

→ Lee references/process/orchestrate.md y síguelo. Es el pipeline obligatorio. Impulsa el motor antigénero empaquetado (tastemaker) como columna vertebral, enruta las otras áreas a su servicio y aplica un filtro final contra la 'slop'. No entregues un build de UI directamente a un solo libro de jugadas — ese es el camino del panel de conmutación pasivo que produce 'cualquier IA podría haber construido esto'.

Camino B — todo lo demás (crítica sin cambios, investigación y estrategia, una escena pura de Three.js / shader, un reel de motion, un sistema de juego, una ilustración SVG, 'qué skill cubre X'):

→ Usa el tablero de conmutación a continuación.

Tablero de conmutación (Camino B)

  1. Clasifica la solicitud en una de las cinco áreas siguientes.
  2. Lee el INDEX.md de esa área. Enumera todos los libros de jugadas en el área con su descripción de activación completa.
  3. Lee el o los dos libros de jugadas que coincidan. Síguelos tal como están escritos — ellos son la experiencia; este archivo es solo el tablero de conmutación.
  4. Si nada coincide, dímelo y procede con tu propio criterio en lugar de forzar una mala adaptación.

Leer dos libros de jugadas de diferentes áreas es normal y correcto. Leer seis es una señal de que la solicitud necesita dividirse en etapas.

Las cinco áreas

ÁreaLéelo cuando el trabajo trate sobreÍndice
ui-craft (82)Pulido, tipografía, sistemas de color, accesibilidad, maquetación, copy de interfaz, patrones de interacción, animación y sensación de movimiento, crítica visual. La capa de '¿esto se ve y se siente correcto?'.references/ui-craft/INDEX.md
web-build (121)Landing pages, sitios de marketing, ingeniería de diseño, narración con scroll y GSAP, convertir referencias o grabaciones de pantalla en prompts, captura de páginas, generación de artículos e imágenes. La capa de 'construye la página'.references/web-build/INDEX.md
process (63)Investigación de usuarios, entrevistas, personas, JTBD, mapas de viaje, encuestas, pruebas de usabilidad, gobernanza de sistemas de diseño, tokens, operaciones de diseño, especificaciones de entrega, trabajo con stakeholders y negociación. La capa de 'cómo se decide el trabajo'.references/process/INDEX.md
motion-3d (36)Escenas de Three.js, materiales, iluminación, agua, rayos de dios, recorridos virtuales, reels de motion, presentaciones de video web y estilos de ilustración SVG escritos a mano.references/motion-3d/INDEX.md
games (26)Arquitectura de juegos, bucles de juego, sistemas de combate, VFX de habilidades, QA de jugabilidad.references/games/INDEX.md

Pistas de enrutamiento

Estas son las llamadas que son fáciles de equivocar:

  • 'Haz que se vea mejor' / 'esto parece generado por IA' — si realmente cambiarás la UI, eso es Camino A → references/process/orchestrate.md. Si es solo crítica, eso es ui-craft (verbo audit de tastemaker / better-interface).
  • 'Revisa esta interfaz' (sin cambios) → ui-craft (better-interface proporciona un informe clasificado a través de los seis lentes).
  • Construir una nueva página de marketing → Camino A → references/process/orchestrate.md. No enrutes directamente a web-build + ui-craft como dos motores separados; el orquestador ejecuta un motor, fundamentado y con compuertas.
  • Una animación se siente incorrecta pero no puedes decir por qué → ui-craft, los libros de jugadas de animación. La suavidad y la duración suelen ser la causa.
  • '¿Deberíamos construir esto siquiera?' → process, no ui-craft. La investigación y la estrategia preceden a la artesanía.
  • Un diseño estático que necesita convertirse en video → motion-3d.
  • Cualquier cosa con un archivo de Figma como entrada → web-build (build-design).

Archivos de soporte

Algunos libros de jugadas incluyen scripts y material de referencia junto a ellos, en una carpeta hermana llamada <playbook>.files/. Cuando un libro de jugadas se refiera a sus propias referencias o scripts, búscalos allí. Los activos de demostración (videos, capturas de pantalla, texturas) no se incluyeron — si un libro de jugadas apunta a uno, trátalo como ilustrativo y continúa.

Procedencia

Cada libro de jugadas lleva un encabezado que nombra su repositorio fuente y autor. Las siete colecciones tienen licencia MIT y se incluyen sin modificaciones aparte de ese encabezado:

ColecciónAutorLibros de jugadas
MengTo/SkillsMeng To178
Owl-Listener/designer-skillsMC Dean111
emilkowalski/skillsEmil Kowalski15
jakubkrehel/skillsJakub Krehel14
ConardLi/garden-skillsConardLi6
codeswithroh/tastemakercodeswithroh2
elayadesign/ai-design-skillsElaya2

Mantén la atribución intacta al citar el contenido de un libro de jugadas en el trabajo dirigido al cliente.

Skills relacionados