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)
- Clasifica la solicitud en una de las cinco áreas siguientes.
- Lee el
INDEX.mdde esa área. Enumera todos los libros de jugadas en el área con su descripción de activación completa. - 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.
- 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
| Área | Lé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 esui-craft(verboauditde tastemaker /better-interface). - 'Revisa esta interfaz' (sin cambios) →
ui-craft(better-interfaceproporciona 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 aweb-build+ui-craftcomo 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, noui-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ón | Autor | Libros de jugadas |
|---|---|---|
| MengTo/Skills | Meng To | 178 |
| Owl-Listener/designer-skills | MC Dean | 111 |
| emilkowalski/skills | Emil Kowalski | 15 |
| jakubkrehel/skills | Jakub Krehel | 14 |
| ConardLi/garden-skills | ConardLi | 6 |
| codeswithroh/tastemaker | codeswithroh | 2 |
| elayadesign/ai-design-skills | Elaya | 2 |
Mantén la atribución intacta al citar el contenido de un libro de jugadas en el trabajo dirigido al cliente.