Agent Skills para Diseñadores

Genera, extiende o audita design tokens en formato DTCG con la arquitectura de 3 niveles (primitivo, semántico, componente).

por plugin87/ux-ui-agent-skills

• Visual design
• Design systems

Genera reglas personalizadas de sistema de diseño para el código base del usuario. Úsala cuando el usuario diga "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines" o quiera establecer convenciones específicas del proyecto para flujos de trabajo de Figma a código. Requiere conexión con el servidor MCP de Figma.

por openai/skills

• Visual design
• Design systems

Necesita (declarado): MCP server

Usa esta skill junto con figma-use cuando la tarea implique trasladar una página, vista o diseño de varias secciones de una aplicación a Figma. Disparadores: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code'. Esta es la skill de flujo de trabajo preferida siempre que el usuario quiera crear o actualizar una página, pantalla o vista completa en Figma a partir de código o una descripción. Descubre componentes, variables y estilos del sistema de diseño mediante search_design_system, los importa y ensambla pantallas de forma incremental sección por sección usando tokens del sistema de diseño en lugar de valores codificados.

por openai/skills

• Design systems

Audita un diseño de Penpot en busca de problemas de GOBERNANZA de sistema de diseño / tokens (distintos de la accesibilidad): colores codificados donde existe un token, espaciado fuera de la cuadrícula, tokens huérfanos/sin resolver/sin usar, valores duplicados y partes desvinculadas que deberían ser instancias de componentes. Produce un informe de severidad y sugiere cambios a tokens semánticos. Disparadores: 'audit tokens', 'find hardcoded colors', 'token governance', 'check design system consistency', 'find off-grid spacing', 'detect raw values', 'are we using tokens correctly'.

por penpot/penpot-ai-kit

• Design systems

Inteligencia de diseño UI/UX para web, móvil y escritorio. Esta skill debe usarse al diseñar, construir, revisar o corregir interfaces, incluidas páginas, componentes, sistemas de diseño, accesibilidad, interacción, diseño adaptable, tipografía, color, gráficos e implementación de UI específica del stack. Datos locales consultables: 79 estilos consultables (50 activos), 192 paletas de productos y perfiles de razonamiento, 74 combinaciones de fuentes, 119 pautas de UX, 105 iconos, 17 preajustes de GSAP, 25 tipos de gráficos y 22 stacks.

por nextlevelbuilder/ui-ux-pro-max-skill

• Visual design
• Design systems

Diseña o rediseña UI frontend, presentaciones y gráficos en el lienzo de Superdesign con múltiples modelos de IA, admitiendo sistemas de diseño, componentes reutilizables y flujos multipágina.

por superdesigndev/superdesign-skill

• Design systems

Genera un sistema de diseño de marca accesible a partir de un brief: tokens DTCG, claro y oscuro, más un único theme.css verificado para WCAG.

por plugin87/ux-ui-agent-skills

• Design systems

Necesita (declarado): Python

Lleva una idea por la escala de fidelidad (primero el contenido, luego el código) con un plan de validación en cada nivel, además de mapeo del recorrido del usuario.

por plugin87/ux-ui-agent-skills

• Prototyping
• Design systems

Usa el servidor Figma MCP para obtener contexto de diseño, capturas de pantalla, variables y recursos desde Figma, y para traducir nodos de Figma a código de producción. Actívalo cuando una tarea involucre URLs de Figma, IDs de nodos, implementación de diseño a código o configuración y solución de problemas de Figma MCP.

por openai/skills

• Visual design
• Design systems

Necesita (declarado): Node.js

> Revisa y crea interfaces frontend distintivas y de nivel producción con alta calidad de diseño y cumplimiento del sistema de diseño. Evalúa con tres pilares: insight-to-action sin fricción, artesanía de calidad y construcción confiable. USE FOR: revisiones de PR, revisiones de diseño, auditorías de accesibilidad, verificaciones de cumplimiento del sistema de diseño, diseño frontend creativo, revisión de código UI, revisiones de componentes, verificaciones de diseño responsivo, pruebas de temas y creación de UI memorable. DO NOT USE FOR: revisiones de API backend, revisiones de esquemas de base de datos, trabajo de infraestructura o DevOps, lógica de negocio pura sin UI o código no frontend.

por microsoft/skills

• Visual design
• Design systems

Traduce el código de una página, vista o componente de una aplicación existente a una pantalla de Penpot vinculada al sistema de diseño existente: mapea estilos de código a tokens semánticos y reutiliza componentes de la biblioteca en lugar de formas sin procesar. Úsalo cuando el usuario tenga código/markup real y quiera reconstruirlo en Penpot, sección por sección, dentro del sistema. Disparadores: 'build this in Penpot from code', 'turn this React/HTML/CSS into a Penpot screen', 'recreate this view in Penpot', 'port this page to Penpot', 'translate this component to Penpot bound to our tokens', 'code to Penpot'.

por penpot/penpot-ai-kit

• Research & discovery
• Design systems

Extrae un archivo de documentación de diseño DESIGN.md desde un archivo Penpot: una especificación markdown portátil (frontmatter YAML con mapas de tokens de colores/tipografía/redondeo/espaciado/componentes + secciones en prosa: Overview, Colors, Typography, Layout, Shapes, Components, Do's & Don'ts, Iteration Guide, Known Gaps) en el formato design-md, basada en los tokens reales del archivo, los recursos de la biblioteca y los estilos de componentes muestreados — nunca inventados. Solo lectura en el lienzo; escribe un archivo markdown local. Disparadores: 'generate DESIGN.md', 'create a design.md', 'document the design system as markdown', 'export design guidelines', 'extract design documentation', 'design system spec file', 'make a style guide file from this design'.

por penpot/penpot-ai-kit

• Visual design
• Design systems

Diseña pantallas de UI para apps móviles mediante la API de Sleek, creando proyectos, describiendo pantallas en lenguaje natural y recibiendo pantallas renderizadas para HTML, React Native o SwiftUI.

por designed-by-ai/skills

Necesita (declarado): API key · Paid account

Skill de frontend anti-slop para landing pages, portafolios y rediseños: lee el brief, infiere la dirección de diseño y entrega interfaces no basadas en plantillas con sistemas de diseño reales y rediseños que empiezan por una auditoría.

por leonxlnx/taste-skill

• Visual design
• Design systems

Genera archivos DESIGN.md aptos para agentes para Google Stitch, aplicando estándares de UI premium anti-genéricos: tipografía estricta, color calibrado, diseños asimétricos y micro-motion.

por leonxlnx/taste-skill

• Visual design
• Design systems

Codifica la filosofía de Emil Kowalski sobre el pulido de UI, el diseño de componentes, las decisiones de animación y los detalles invisibles que hacen que el software se sienta excelente, con un formato de revisión obligatorio.

por emilkowalski/skills

El enfoque de Apple para el diseño de interfaces y el movimiento físico fluido, adaptado a la web: UI basada en gestos, animaciones con springs, interacciones de arrastrar/deslizar/hojas, materiales, tipografía y movimiento reducido.

por emilkowalski/skills

• Visual design

Analiza proyectos de Stitch y sintetiza un sistema de diseño semántico en archivos DESIGN.md

por google-labs-code/stitch-skills

• Research & discovery
• Design systems

Skill de diseño unificado que abarca identidad de marca, design tokens, estilos de UI, generación de logotipos, programas de identidad corporativa, presentaciones, banners, fotos para redes e iconos.

por nextlevelbuilder/ui-ux-pro-max-skill

• Define the problem
• Design systems

Genera archivos DESIGN.md aptos para agentes para Google Stitch, aplicando estándares de UI premium anti-genéricos: tipografía estricta, color calibrado, diseños asimétricos y micro-motion.

por google-labs-code/stitch-skills

• Visual design
• Design systems

Construye y mantiene un sistema de diseño dentro de una app Expo: tema reutilizable de tokens de diseño (color, espaciado, tipografía, radio, sombra, movimiento), convenciones de componentes y auditorías de desviación.

por expo/skills

• Visual design
• Design systems

Meta-skill que genera nuevas skills de lenguaje de diseño a partir de una marca o referencia.

por dominikmartn/hue

• Visual design
• Design systems

Guía para un diseño visual distintivo e intencional al construir una nueva UI o remodelar una existente. Ayuda con la dirección estética, la tipografía y a tomar decisiones que no se lean como valores predeterminados de plantilla.

por anthropics/skills

• Define the problem
• Visual design

Enseña diseño visual de agencias de alto nivel: fuentes exactas, espaciado, sombras, estructuras de tarjetas y animaciones que hacen que un sitio web parezca caro, bloqueando los valores predeterminados genéricos.

por leonxlnx/taste-skill

• Visual design

Ingeniería de élite de UX/UI y movimiento con GSAP: aleatorización de diseño impulsada por Python, estructura de página AIDA, tipografía editorial amplia, cuadrículas bento sin espacios y ScrollTriggers de GSAP estrictos.

por leonxlnx/taste-skill

• Visual design

Conecta componentes de diseño de Figma con componentes de código usando las herramientas de mapeo de Code Connect. Úsalo cuando el usuario diga "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", o quiera establecer mapeos entre diseños de Figma e implementaciones de código. Para escrituras en el lienzo mediante `use_figma`, usa `figma-use`.

por openai/skills

Necesita (declarado): Node.js

Crea sistemas de diseño escalables con Tailwind CSS v4, tokens de diseño, bibliotecas de componentes y patrones responsivos. Úsalo al crear bibliotecas de componentes, implementar sistemas de diseño o estandarizar patrones de UI.

por wshobson/agents

• Design systems

Crea UIs accesibles con componentes shadcn/ui, estilos utilitarios de Tailwind CSS y diseños visuales basados en canvas, incluyendo sistemas de diseño, layouts responsivos y modo oscuro.

por nextlevelbuilder/ui-ux-pro-max-skill

• Visual design
• Design systems

Revisa el código de UI para el cumplimiento de las Web Interface Guidelines. Úsalo cuando te pidan "review my UI", "check accessibility", "audit design", "review UX" o "check my site against best practices".

por vercel-labs/agent-skills

Skill de diseño a código de sitios web con enfoque en imágenes: genera imágenes de diseño, las analiza en profundidad y luego implementa el sitio web para que coincida, evitando la acumulación genérica de tarjetas y la jerarquía débil.

por leonxlnx/taste-skill

• Visual design

Extrae primitivas de diseño de un sitio web público y genera archivos de tokens iniciales para tu proyecto.

por arvindrk/extract-design-system

• Design systems

Extrae el sistema de diseño de un sitio web a un DESIGN.md listo para agentes usando evidencia de scraping de Firecrawl: colores, fuentes, espaciado, componentes, patrones de layout y guía de marca.

por firecrawl/firecrawl-workflows

• Research & discovery
• Visual design
• Design systems

Genera imágenes de referencia de diseño web premium, una por sección, con variedad de composición, un eje conceptual narrativo y una paleta consistente para landing pages y sitios de marketing.

por leonxlnx/taste-skill

• Visual design

Genera conceptos y flujos de pantallas premium de apps móviles para iOS, Android y multiplataforma, con jerarquía limpia, paletas controladas y marcos de mockup de teléfono.

por leonxlnx/taste-skill

• Prototyping

Transforma ideas vagas de UI en prompts pulidos y optimizados para Stitch. Mejora la especificidad, añade palabras clave de UI/UX, inyecta contexto del sistema de diseño y estructura la salida para obtener mejores resultados de generación.

por google-labs-code/stitch-skills

• Visual design
• Design systems

Convierte diseños de Stitch en componentes modulares de Vite y React, o sincroniza componentes React existentes para alinearlos con los últimos diseños de Stitch, con validación basada en AST.

por google-labs-code/stitch-skills

• Research & discovery
• Visual design
• Design systems

Optimización de conversión de landing pages con reglas de diseño, diseño de la sección hero, psicología del CTA, fórmula above-the-fold, ubicación de prueba social y diseño móvil.

por 101-skills/superpowers

Convierte código frontend (React, Angular, Vue) en un Stitch Design encadenando extracción de HTML estático, extracción del sistema de diseño y carga de archivos.

por google-labs-code/stitch-skills

• Design systems

Diseña dashboards de KPI efectivos con selección de métricas, mejores prácticas de visualización, selección de gráficos y patrones de monitoreo en tiempo real.

por wshobson/agents

Crea logotipos SVG profesionales a partir de descripciones y especificaciones de diseño, generando múltiples variaciones con diferentes diseños, estilos y conceptos.

por rknall/claude-skills

Crea diagramas de arquitectura de marca, estado actual de TI, diagramas de flujo, de secuencia, de máquina de estados, ER/modelo de datos, de línea de tiempo, de carriles, de cuadrantes, de radar/araña, de gráfico polar (piruleta polar/radial), de bucle/volante, anidados, de árbol, organigramas, de pila de capas, de Venn, de pirámide/embudo, de treemap, de barras, de cascada, de líneas, de Gantt y de dispersión, de alto nivel, de proceso, medallion, de flujo de datos, de integración DP, de matriz de seguridad DP, Sankey, de espina de pescado, mapas de Wardley, kanban, de recorrido del usuario, de despliegue, de grafo de dependencias, de clases UML, de mapa de historias o de esquema de base de datos como HTML/SVG/PNG independientes. Redibuja fuentes .drawio/.drawio.png/.drawio.svg, Mermaid .mmd o Excalidraw .excalidraw con el tamaño/nivel de detalle elegido; incorpora tokens de marca desde un sitio web; añade patrones semánticos, llamadas, movimiento accesible o estilo bocetado/dibujado a mano.

por cathrynlavery/diagram-design

• Design systems

Crea arte visual atractivo en documentos .png y .pdf usando filosofía de diseño. Debes usar esta skill cuando el usuario pida crear un póster, una obra de arte, un diseño u otra pieza estática. Crea diseños visuales originales, sin copiar nunca el trabajo de artistas existentes para evitar violaciones de derechos de autor.

por anthropics/skills

• Visual design

Kit de herramientas para dar estilo a artefactos con un tema. Estos artefactos pueden ser diapositivas, documentos, informes, landing pages HTML, etc. Hay 10 temas predefinidos con colores/tipografías que puedes aplicar a cualquier artefacto creado, o puedes generar un tema nuevo sobre la marcha.

por anthropics/skills

Convierte ideas en diseños y especificaciones completamente formados mediante diálogo colaborativo, clasificando las solicitudes como spike, acotadas o arquitectónicas antes de la implementación.

por obra/superpowers

Glosario de búsqueda inversa que convierte una descripción vaga de una animación web o efecto de movimiento en su término exacto ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Úsalo cuando el usuario pregunte "what's it called when…", o describa un efecto de movimiento sin saber su nombre y quiera la palabra correcta para promptear a una IA o a un diseñador. Para nombrar un efecto, no para diseñarlo ni construirlo.

por emilkowalski/skills

Añade vistas previas de widgets interactivos a un proyecto de Flutter usando el sistema previews.dart, para un diseño coherente y pruebas interactivas de componentes de UI.

por flutter/agent-plugins

Diseña banners para redes sociales, anuncios, héroes de sitios web e impresión con múltiples opciones de dirección de arte, reglas de zona segura y composición HTML/CSS.

por nextlevelbuilder/ui-ux-pro-max-skill

• Visual design

Consultoría de diseño de visualización de informes de Power BI: selección de gráficos, diseño de layout, patrones específicos por audiencia y accesibilidad para informes eficaces.

por github/awesome-copilot

Aplica los colores de marca y la tipografía oficiales de Anthropic a cualquier tipo de artefacto que pueda beneficiarse de tener el look-and-feel de Anthropic. Úsalo cuando apliquen colores de marca o guías de estilo, formato visual o estándares de diseño de la empresa.

por anthropics/skills

• Visual design

Da a los agentes de programación mejor criterio de UI con manuales anti-ui-slop para web e iOS: selección de diseño, jerarquía visual, pulido y flujos de revisión de diseño.

por uizze.sh

• Research & discovery
• Visual design
• Design systems

Diseña y revisa la UI/UX de iOS para apps de iPhone en SwiftUI, UIKit o React Native: navegación, tipografía, formularios, diseño de teclado y área segura, y accesibilidad según las Apple HIG.

por uizze.sh

• Visual design
• Design systems