Skills de agente de design

ckm:design es una skill de diseño estructurada para enrutar y producir logos, maquetas de CIP, banners, slides e iconos SVG. Incluye referencias prácticas, opciones basadas en CSV y scripts de Python para flujos de diseño repetibles, en lugar de depender solo de prompts genéricos.

La skill design-md analiza proyectos de Stitch y convierte sus pantallas en una fuente de verdad semántica en DESIGN.md para mantener la coherencia en layout, tono, color y lenguaje de componentes. Usa design-md para Design Systems cuando necesites una guía que puedas reutilizar en futuras generaciones con Stitch, no solo un resumen visual.

Usa la skill design-system para generar o auditar un sistema de UI, extraer tokens del código existente y revisar la consistencia visual en repos reales.

ui-design-system es una skill de Claude para Design Systems que ayuda a generar design tokens, escalas de color, tipografía, espaciado, reglas responsive, documentación de componentes y recursos de handoff para desarrollo, con referencias y un generador de tokens en Python para salidas en JSON, CSS, SCSS o resumen.

figma-generate-design ayuda a convertir páginas codificadas, modales, drawers, sidebars, panels y otras vistas de varias secciones en Figma usando el sistema de diseño publicado. Localiza componentes, variables, estilos y assets de librería desde Code Connect y fuentes relacionadas, y luego arma la pantalla sección por sección para Design Implementation en lugar de redibujar todo manualmente. Usa la guía de figma-generate-design cuando necesites fidelidad al código y a los tokens.

frontend-design-review es una skill de GitHub para revisar trabajos de UI frontend y crear interfaces distintivas y listas para producción desde cero. Ayuda a evaluar el cumplimiento del design system, la accesibilidad, la calidad visual y si una UI se siente genérica o diseñada con intención. Úsala para revisiones de PR, revisiones de componentes y frontend-design-review para diseño de UI.

La skill de tool-design te ayuda a diseñar herramientas orientadas a agentes con contratos claros, reducir solapamientos y mejorar la selección de herramientas. Úsala para Design Implementation, diseño de herramientas MCP, consolidación de herramientas, convenciones de nombres y depuración de llamadas incorrectas a herramientas. Encaja muy bien cuando necesitas una guía práctica de tool-design con pasos de instalación y uso, archivos fuente para revisar y restricciones concretas que hagan las descripciones de las herramientas menos ambiguas.

figma-create-design-system-rules te ayuda a generar reglas de Design System específicas para cada proyecto en trabajos de Figma a código. Úsalo para documentar convenciones de componentes, nomenclatura, tokens, ubicaciones de archivos y qué no debe codificarse de forma fija, de modo que los agentes de programación con IA mantengan la coherencia en todo tu repositorio. Requiere una conexión con un servidor Figma MCP.

design-consultation es una skill de design-consultation para convertir una idea de producto en bruto en una dirección de diseño completa. Crea una fuente única de verdad en DESIGN.md, vistas previas y guía a nivel de sistema para tipografía, color, espaciado, layout y motion. Es ideal para productos nuevos y superficies de interfaz que necesitan un punto de partida coherente.

ckm:design-system te ayuda a crear tokens en tres capas, especificaciones de componentes, variables CSS, mapeos a Tailwind y slides de marca coherente a partir de una arquitectura clara de tokens.

Usa frontend-design para crear interfaces frontend distintivas y listas para producción, con una postura visual clara. Este skill de frontend-design está pensado para landing pages, paneles, shells de aplicación y componentes donde la jerarquía, la tipografía, el movimiento y el acabado importan tanto como la implementación. Incluye orientación de instalación y uso para un trabajo de UI guiado por el diseño.

frontend-design es una skill centrada en diseño para crear interfaces frontend pulidas, con mejor contexto, jerarquía, accesibilidad y comportamiento responsive. Úsala para instalar la skill, revisar las referencias clave y aplicar orientación práctica para mejorar componentes, páginas y pantallas de aplicaciones.