Design Systems

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.

Usa la skill shadcn para revisar el contexto del proyecto, ejecutar los comandos CLI adecuados, instalar componentes y componer interfaces con patrones documentados para base vs radix, formularios, temas y registries.

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.

ui-ux-pro-max es una skill integral para diseño UI/UX asistido por IA. Brinda orientación estructurada sobre layouts, estilos, sistemas de color, tipografía y reglas UX para proyectos web y móviles. Ideal para equipos y desarrolladores que buscan decisiones de diseño prácticas en React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, SwiftUI, React Native, Flutter y HTML/CSS. Úsala para planificar, revisar y mejorar interfaces con inteligencia de diseño curada.

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.

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.

ckm:brand es una skill de flujo de trabajo de branding para crear, actualizar y revisar guías de marca, mensajes, tono, identidad visual y sincronización de design tokens con scripts y checklists prácticos.

design-system-patterns ayuda a los equipos a diseñar bases de UI escalables con estructuras de tokens, arquitectura de temas y patrones reutilizables de API de componentes para sistemas de diseño y bibliotecas de componentes.

visual-design-foundations ayuda a los equipos a crear sistemas de UI prácticos con escalas tipográficas, tokens de color, reglas de espaciado y pautas de iconografía. Úsala para implantar una base de diseño sólida, crear guías de estilo, auditar la jerarquía visual y generar variables CSS listas para implementación a partir de restricciones de diseño claras.

La skill web-component-design ayuda a los equipos a diseñar componentes de UI reutilizables para React, Vue y Svelte, con patrones de API sólidos, guía de accesibilidad y referencias sobre las ventajas y compromisos de estilo para sistemas de diseño.

Usa la skill tailwind-design-system para crear sistemas de diseño con Tailwind CSS v4, incluyendo tokens, theming, variantes, accesibilidad y guía de migración de v3 a v4.

polish es una skill de revisión final de UI para detectar problemas de alineación, espaciado, consistencia, uso de tokens y microdetalles antes del lanzamiento. Funciona mejor con pantallas, flujos o componentes que ya cumplen su función, pero aún no se sienten del todo pulidos. Úsala para mejorar la preparación para lanzamiento, la alineación con el sistema de diseño y la calidad general sin caer en rediseños innecesarios.

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.

site-architecture ayuda a planificar o reorganizar la jerarquía de páginas de un sitio web, la navegación, los patrones de URL y el enlazado interno. Úsala para crear sitemaps, especificaciones de navegación, mapas de URL y diagramas del sitio en Mermaid o ASCII para planificación de marketing y UI/UX.

La skill normalize audita una funcionalidad de UI y la vuelve a alinear con tu sistema de diseño. Consulta las opciones de instalación de normalize, la preparación previa necesaria de frontend-design y recomendaciones prácticas de uso para páginas, rutas y componentes.

La skill extract ayuda a los equipos a detectar patrones de UI, tokens y componentes repetidos, y a planificar o ejecutar su consolidación en un sistema de diseño existente con una ruta de migración más segura.

La skill normalize audita una funcionalidad de UI y la vuelve a alinear con tu sistema de diseño. Descubre el contexto de instalación de normalize, la preparación necesaria en /frontend-design y su uso práctico en páginas, rutas y componentes.

La skill extract ayuda a los equipos a detectar patrones de UI, tokens y componentes repetidos, y a consolidarlos en un sistema de diseño existente con un plan de migración más seguro.

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 wpds para crear o revisar interfaces de WordPress con el WordPress Design System (WPDS). Te ayuda a verificar componentes, tokens, patrones y compatibilidad de paquetes usando el servidor WPDS MCP, para que tu guía de wpds se apoye en la documentación canónica y no en suposiciones. Ideal para trabajos de wpds en Design Systems en Gutenberg, WooCommerce, WordPress.com, Jetpack e इंटरfaces relacionadas.

figma-use es la skill que debes instalar antes de cada llamada a use_figma para que JavaScript se ejecute con seguridad en el contexto de un archivo de Figma. Sirve para trabajo de implementación de diseño, como crear y editar nodos, conectar variables y estilos, construir componentes y variantes, e inspeccionar la estructura del archivo de forma programática. El repositorio incluye guías de uso, casos problemáticos y patrones para reducir errores comunes de automatización en Figma.

mui es una guía especializada sobre Material UI v7 para React que cubre estilos con sx, personalización de temas, layouts responsive y los cambios clave de migración en v7. Úsala para instalar la skill, seguir los archivos principales y generar componentes MUI con los patrones actuales de @mui/material.

makepad-2.0-theme es una skill de temas para Makepad 2.0 que permite aplicar variables `theme.*`, alternar entre temas oscuro y claro y mantener consistente el estilo basado en design tokens. Usa esta guía para entender la instalación y el uso de makepad-2.0-theme en interfaces de producción y sistemas de diseño.

figma-generate-library te ayuda a crear o actualizar un sistema de diseño en Figma a partir de una base de código, con un flujo de trabajo ordenado para tokens, bibliotecas de componentes, documentación y temas claro/oscuro. Usa la skill figma-generate-library cuando necesites una guía práctica para Design Systems, no un mockup puntual. Complementa a figma-use para llamadas a la Plugin API.