Figma

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 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.

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.

figma-create-new-file crea un nuevo archivo en blanco de Figma Design o un tablero de FigJam en borradores. Úsalo cuando necesites un punto de partida limpio antes de otras acciones en Figma, incluyendo use_figma. Admite design o figjam, nombre de archivo opcional y puede resolver el acceso al plan con whoami cuando hace falta.

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.

figma-code-connect-components ayuda a mapear componentes de diseño de Figma con sus componentes de código equivalentes mediante Figma Code Connect. Úsalo para alinear implementación de diseño, emparejar variantes y props, y encontrar el componente local correcto antes de crear mappings. Es ideal para flujos de trabajo de connect, map o link-to-code, no para escribir en canvas ni para generar páginas completas.

Usa figma para extraer contexto de diseño, capturas, variables y recursos desde el servidor MCP de Figma, y luego traducir los nodos de Figma en decisiones de UI listas para implementar. Este skill de figma es ideal cuando tienes una URL de Figma o un ID de nodo y necesitas un uso preciso de figma para trabajo de diseño a código, configuración o diagnóstico.

La skill industrial-brutalist-ui para diseño de UI crea interfaces mecánicas de alta densidad con rejillas de estilo suizo, contrastes tipográficos extremos, paletas utilitarias y textura analógica. Usa esta guía industrial-brutalist-ui para dashboards, sistemas editoriales y páginas de portafolio que necesitan un aspecto disciplinado de panel de control.

wwas es una skill de prompts para Requirements Planning que convierte ideas vagas en backlog items con formato Why-What-Acceptance. Usa la skill wwas para capturar el contexto de negocio, definir el cambio con claridad y redactar criterios de aceptación comprobables para trabajo listo para sprint.

Usa la skill user-stories para convertir funciones en historias listas para el backlog con los 3 C, los criterios INVEST, enlaces de diseño y criterios de aceptación verificables. Ideal para redactar historias de usuario, dividir funcionalidades en elementos del backlog y crear user-stories para planificación de requisitos con un alcance más claro y menos conjeturas.

Usa la skill job-stories para convertir ideas de funcionalidades en historias de trabajo al estilo JTBD, con la forma “When [situación], I want to [motivación], so I can [resultado].”. Ayuda a crear elementos de backlog más claros, a usar job-stories en la planificación de requisitos y a definir criterios de aceptación anclados en el contexto del usuario.

La skill enhance-prompt convierte ideas vagas de interfaz en prompts más claros y listos para Stitch, con una estructura más sólida, vocabulario de UI/UX y contexto de design system. Usa esta guía de enhance-prompt para afinar la especificidad de tus prompts, reducir las suposiciones y obtener resultados más consistentes al escribir prompts y generar interfaces.

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.

diagram-generator ayuda a crear y editar diagramas de draw.io, Mermaid y Excalidraw a partir de entrada estructurada. Admite diagramas de flujo, diagramas de secuencia, diagramas de clases, diagramas ER, mapas mentales, diagramas de arquitectura y topologías de red, y puede leer archivos .drawio, .mmd y de Excalidraw existentes para facilitar las actualizaciones.

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.

Usa el skill de network para crear diagramas de topología de red en PlantUML con iconos de dispositivos mxGraph, auto-layout, agrupación por zonas y semántica clara de enlaces. Encaja bien con diagramas de LAN, WAN, empresariales, de centros de datos, inalámbricos, de seguridad y específicos de proveedores, con ejemplos de uso de network y orientación sobre cuándo conviene usar network en lugar de uml o cloud.

La skill infographic convierte contenido estructurado en diseños de infografía pulidos con el DSL `infographic`. Úsala para tarjetas KPI, cronologías, roadmaps, flujos paso a paso, comparativas A vs B, análisis SWOT, funnels, árboles organizativos y gráficos sencillos. Encaja muy bien con infographic para UI Design y resúmenes de estilo presentación con 4-8 elementos. No es ideal para análisis de datos complejos ni diagramas técnicos.

logo-generator te ayuda a crear logos SVG profesionales e imágenes de presentación pulidas para productos, marcas y conceptos. Combina guía de patrones de diseño, más de 6 variantes de logo, exportación de SVG a PNG y generación de fondos tipo showcase. Usa la skill logo-generator cuando necesites una guía rápida y estructurada para la creación de branding, con resultados editables y vistas previas listas para presentar.

figma-designer analiza archivos de Figma o capturas de pantalla mediante Figma MCP para extraer especificaciones visuales, design tokens, componentes y un handoff a PRD listo para implementación para equipos de diseño UI.

stitch-design-taste es una skill de sistema de diseño para Google Stitch centrada en la implementación de diseño. Genera instrucciones `DESIGN.md` pensadas para agentes, con UI premium y no genérica: tipografía clara, color calibrado, layouts asimétricos, reglas de motion y patrones prohibidos. Úsala cuando quieras una guía stitch-design-taste repetible en lugar de un prompt puntual.

La skill hand-drawn-diagrams convierte indicaciones en lenguaje natural en diagramas, flujos, explicaciones, wireframes y mockups de página con estilo dibujado a mano en Excalidraw. Valida la salida y puede devolver una URL de edición junto con imágenes exportables. Es ideal para diagramar rápido cuando quieres un resultado tipo boceto, no arte vectorial pulido.

figma-implement-design convierte diseños de Figma en código de aplicación listo para producción con fidelidad visual 1:1. Úsala al implementar UI desde archivos de Figma, al reproducir un componente o pantalla específica, o al seguir una guía de figma-implement-design para Implementación de Diseño. No sirve para editar nodos del lienzo de Figma.

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.

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.