suryxnshsingh/design-engineer

design-engineer: qué skill de diseño para cada trabajo

Todas las skills especializadas bajo ~/.claude/skills/ son punteros ligeros a repositorios upstream en vivo. Ninguna contiene una copia. Cada una te indica cómo obtener la última versión antes de actuar. El descargador compartido es:

bash ~/.claude/skills/design-engineer/scripts/upstream.sh <nombre>   # clona o actualiza, imprime PATH=<directorio>

Nombres: impeccable ui-ux-pro-max blender-mcp img2threejs video-shotcraft hyperframes penpot remotion lemo-opuscar diagram-design. Añade --no-update cuando estés sin conexión.

Tabla de enrutamiento

El usuario quiere	Skill	Por qué esta
Dirección de estilo, paleta, tipografías, sistema de diseño completo para un nuevo producto o página	ui-ux-pro-max	Busca en 79 estilos / 192 tipos de producto y emite un sistema
Mejorar, revisar, pulir, des-basurar, hacer más audaz/sutil una UI existente	impeccable	24 comandos de steer/review/finish + detector de 62 reglas
Detectar basura de IA antes de enviar cualquier cambio de UI	impeccable detect	Determinista, sin LLM
Arquitectura, flujo, secuencia, ER, Gantt, organigrama, cualquier diagrama	diagram-design	Un archivo HTML+SVG con marca, 45 tipos
Gráficos dentro de la UI de un producto (no un diagrama independiente)	dataviz (integrado) luego impeccable	dataviz para el sistema de gráficos, impeccable para la UI circundante
Video promocional de un sitio o app real	video-shotcraft	Captura páginas reales, tarjetas de tomas, render Remotion
Video desde HTML/CSS, tokens de marca desde Figma, invertir un video existente, presentación de diapositivas	hyperframes	HTML a MP4, 450 bloques, sub-skill /figma
Video en React, o un repositorio Remotion existente	remotion	Skills oficiales de Remotion
Cortometraje narrado / explicativo en estilo pictórico o documental, sin material de archivo	lemo-opuscar	Más de 60 estilos de film solo con código + banda sonora + TTS
Imagen de referencia a modelo Three.js solo con código	img2threejs	Procedural, listo para animación
Modelado 3D real, escenas, materiales, renders, importación de assets	blender-mcp	Controla Blender en vivo vía MCP
Leer o editar un archivo de diseño de Penpot	penpot	MCP oficial de Penpot
Leer un archivo de Figma para trabajo de UI (tokens, frames, componentes)	Figma MCP oficial (claude mcp add figma -t http https://mcp.figma.com/mcp)	No cubierto por este conjunto; el sub-skill figma de HyperFrames es solo para video
Traer assets de marca de Figma a un video	sub-skill figma de hyperframes	Lee Figma solo para construir movimiento en HyperFrames

Reglas de decisión

1. UI existente vs nueva UI. Existente: comienza con impeccable critique sobre un objetivo concreto. Nueva sin sistema de diseño: ui-ux-pro-max primero, persiste en DESIGN.md, construye, luego impeccable para revisar. Nunca omitas el paso de revisión en UI publicada.
2. Video: elige según el material fuente.
   • Páginas de producto reales → video-shotcraft.
   • Skills HTML/CSS, assets de marca o Figma → hyperframes.
   • Equipo que programa en React / el repositorio ya usa Remotion → remotion.
   • Película narrativa o temática, dibujada en código → lemo-opuscar. No mezcles dos frameworks de video en un mismo proyecto a menos que estés migrando (HyperFrames tiene remotion-to-hyperframes).
3. 3D: código o DCC. La salida debe ser un activo web construido en código → img2threejs. Cualquier cosa que necesite una herramienta de modelado real, renders o assets descargados → blender-mcp. Ambos necesitan que el usuario confirme la configuración del host (instalador o complemento de Blender); di qué deben hacer.
4. Los diagramas no son gráficos. Un diagrama de un sistema → diagram-design. Un gráfico de datos en una app → dataviz. Un gráfico en un video → el bloque de gráficos de la skill de video.
5. Archivos de diseño. Penpot → penpot. Figma para UI → Figma MCP oficial; Figma para un video → sub-skill figma de hyperframes. Extrae los tokens una vez y escríbelos en DESIGN.md para que todas las demás skills los reutilicen.
6. Skills respaldadas por MCP (blender-mcp, penpot) necesitan una app host en ejecución. Primero verifica claude mcp list; si está ausente, proporciona al usuario los pasos de instalación y conexión y detente hasta que confirmen.

Cadenas comunes

• Nueva landing page: ui-ux-pro-max (sistema) → construir → impeccable detect + critique → polish.
• Kit de lanzamiento: tokens de ui-ux-pro-max → sitio → video-shotcraft promo → diagram-design arquitectura para documentación, todo con los mismos tokens.
• Entrega de diseño: tokens/frames de penpot → DESIGN.md → construir → impeccable audit.
• Película explicativa con diagramas: imágenes fijas de diagram-design → hyperframes o lemo-opuscar para movimiento.
• Objeto 3D heroico: img2threejs desde una foto de producto → incrustar → impeccable overdrive para interacción.

Antes de comenzar cualquier tarea de diseño

1. Elige la skill de la tabla. Si dos aplican, sigue las reglas de decisión; si aún no está claro, haz una pregunta.
2. Obtén la última versión con upstream.sh <nombre> y lee el archivo de entrada que la skill nombra. Lee solo lo que necesita el paso actual.
3. Busca archivos existentes como DESIGN.md, PRODUCT.md, .diagram-design o un archivo de tokens en el proyecto y reutilízalos.
4. Di qué skill elegiste y por qué en una línea, luego realiza el trabajo.

Mantenimiento

• upstream.sh mantiene un clon superficial por skill en ~/.cache/design-skills/. Borra esa carpeta para reiniciar.
• Para añadir una skill: agrega un caso a scripts/upstream.sh, escribe un puntero SKILL.md y añade una fila arriba.
• Cuando el upstream envíe un plugin o una ruta npx skills add, prefiere eso dentro de proyectos reales; la skill puntero es la alternativa siempre disponible.