Agent Skills para Branding

Arquitectura de tokens, especificaciones de componentes y generación de diapositivas. Tokens de tres capas (primitivo→semántico→componente), variables CSS, escalas de espaciado/tipografía, especificaciones de componentes, creación estratégica de diapositivas. Úsalo para design tokens, diseño sistemático y presentaciones conformes con la marca.

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

• System

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

• System

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

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

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

por google-labs-code/stitch-skills

Importa contenido de Figma a una composición de HyperFrames — assets renderizados, tokens de marca, componentes, secciones de storyboard → movimiento reconstruido (los frames se leen como estados, no como diapositivas) (REST/CLI), movimiento asistido por conector cuando esté disponible, y shaders desde un conector o exportación nativa. Úsalo cuando el usuario…

por heygen-com/hyperframes

• Identity

Dirección creativa no animada para videos de HyperFrames. Úsalo para el manejo de especificaciones de diseño (frame.md / design.md), paletas, tipografía, narración, planificación de beats, visuales reactivos al audio, patrones de composición y decisiones de marca / estilo. Para patrones de movimiento atómicos y planos de escena, usa…

por heygen-com/hyperframes

Habilidad frontend anti-slop para landing pages, portafolios y rediseños. El agente lee el brief, infiere la dirección de diseño adecuada y entrega interfaces que no parecen plantillas. Sistemas de diseño reales cuando corresponda, auditoría primero en rediseños, verificación previa estricta.

por leonxlnx/taste-skill

• Brand strategy
• Identity

Mejora sitios web y aplicaciones existentes a calidad premium. Audita el diseño actual, identifica patrones genéricos de IA y aplica estándares de diseño de alto nivel sin romper la funcionalidad. Funciona con cualquier framework CSS o CSS vanilla.

por leonxlnx/taste-skill

Inteligencia de diseño UI/UX para web, móvil y escritorio. Esta skill debe usarse al diseñar, construir, revisar o corregir interfaces, incluyendo páginas, componentes, sistemas de diseño, accesibilidad, interacción, diseño responsivo, tipografía, color, gráficos e implementación de UI específica del stack.…

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

Ingeniero de élite de UX/UI y Motion con GSAP avanzado. Impone aleatorización real impulsada por Python para la variación de diseño, estructura de página AIDA estricta, tipografía editorial amplia (prohíbe saltos de 6 líneas), cuadrículas bento sin espacios, ScrollTriggers estrictos de GSAP (pinning, stacking, scrubbing), microimágenes en línea y enormes…

por leonxlnx/taste-skill

Skill de sistema de diseño semántico para Google Stitch. Genera archivos DESIGN.md aptos para agents que imponen estándares de UI premium y antigénéricos — tipografía estricta, color calibrado, diseños asimétricos, micro-movimiento perpetuo y rendimiento acelerado por hardware.

por leonxlnx/taste-skill

Úsalo cuando el usuario quiera diseñar, rediseñar, dar forma, criticar, auditar, pulir, clarificar, destilar, reforzar, optimizar, adaptar, animar, colorear, extraer o mejorar de cualquier otro modo una interfaz frontend. Abarca sitios web, landing pages, dashboards, UI de producto, shells de apps, componentes, formularios, ajustes, onboarding,…

por pbakaus/impeccable

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

• System

Extrae el sistema de diseño de cualquier sitio web a un DESIGN.md listo para agentes usando evidencia de scraping de Firecrawl. Úsala cuando el usuario quiera colores, tipografías, espaciado, componentes, patrones de maquetación u orientación de marca/UI de un sitio web para que los agentes de IA puedan crear nuevos sitios web, clonar un estilo o construir páginas inspiradas en ese…

por firecrawl/firecrawl-workflows

• Identity
• System

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

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

Diseña pantallas de calidad de producción en Penpot a partir de un brief, como un diseñador visual sénior: reutilizando el sistema de diseño existente (tokens + componentes) y ensamblando sección por sección, nunca de una sola vez. Úsalo para crear una pantalla/página/landing/dashboard a partir de una descripción. NO para traducir código existente (usa penpot-build-from-code). Disparadores: 'design a dashboard', 'create a landing page', 'design this app screen', 'build a UI from this brief', 'design a settings page', 'mock up a screen in Penpot'.

por penpot/penpot-ai-kit

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

Revisa un diseño de Penpot frente a su código implementado (un componente fuente o una historia de Storybook) y emite un informe DRIFT estructurado. Úsalo cuando un ingeniero necesite confirmar que la implementación coincide con el diseño: extrae HTML/CSS de una selección, mapea sus tokens/estructura/estados al componente de código, los compara y enumera lo que le falta a cada lado con severidad y una reconciliación. Se degrada con elegancia a una comprobación de tokens del sistema de diseño cuando no se proporciona una fuente de código. Disparadores: 'design to code review', 'does my code match the design', 'design code parity', 'compare Penpot to my component', 'check this against Storybook', 'extract HTML/CSS from this selection', 'find design drift', 'design implementation diff'.

por penpot/penpot-ai-kit