Agent Skills para Diseño de aplicaciones

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

• Handoff & system

Documenta un diseño de Penpot para handoff creando una capa de anotaciones limpia AL LADO del diseño (nunca encima de él): una tarjeta de contexto a la izquierda (el objetivo 'How might we', reglas de negocio, enlaces, estado, feedback deseado/no deseado), marcadores de pin numerados en la UI, tarjetas de notas de observación/recomendación correspondientes a la derecha, y tooltips opcionales — todo envuelto en un único grupo ocultable para que se pueda revelar el diseño limpio. Reutiliza un kit de componentes de anotación + tokens si existen; propone y crea uno mínimo si faltan. NO para auditar (usa penpot-audit-*) ni renombrar capas (usa penpot-rename-layers). Disparadores: 'document this design', 'annotate this screen', 'prepare this for handoff', 'add design annotations', 'explain this flow for devs', 'add observation notes', 'create a critique card', 'spec this screen for handoff'.

por penpot/penpot-ai-kit

• Handoff & system

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

• Flows
• Usability

Revisa un diseño/UI en 6 dimensiones ponderadas con las 10 heurísticas de Nielsen y una tabla de hallazgos priorizados.

por plugin87/ux-ui-agent-skills

Gestiona componentes y proyectos de shadcn — añadir, buscar, corregir, depurar, estilizar y componer UI, incluidas interfaces de chat. Proporciona contexto del proyecto, documentación de componentes y ejemplos de uso. Se aplica al trabajar con shadcn/ui, registros de componentes, presets, códigos --preset o cualquier proyecto con un archivo components.json. También se activa con "shadcn init", "create an app with --preset" o "switch to --preset".

por shadcn/ui

Skill de diseño anti-AI-slop para páginas nuevas, auditorías, rediseños y extracción de diseño desde URLs o capturas de pantalla, enfatizando la variedad estructural. Fuerte para la calidad de diseño de UI de apps y landing pages.

por nutlope/hallmark

Enseña diseño visual de alto nivel estilo agencia: tipografías, espaciado, sombras, estructuras de tarjetas y animaciones, con reglas anti-genéricas y arquetipos de layout. Fuerte para la dirección visual de UI premium.

por leonxlnx/taste-skill

• UI

Ingeniería de élite de UX/UI y motion con GSAP: impone variación de layout, estructura de página AIDA, tipografía editorial, cuadrículas bento sin espacios y animaciones de scroll. Fuerte para diseño web UI de alta gama y motion.

por leonxlnx/taste-skill

• Flows

Genera archivos de sistema de diseño DESIGN.md para Google Stitch, codificando tipografía, color, diseño, movimiento y reglas anti-patrón para una UI premium no genérica. Útil para sistemas de diseño de apps y generación de pantallas.

por leonxlnx/taste-skill

• Handoff & system

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

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

• Prototype
• Handoff & system

Necesita (declarado): MCP server

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

• Handoff & system

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

• Handoff & system

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

Flujo de trabajo de diseño a código para webs con enfoque en imágenes: genera imágenes de diseño, las analiza y luego implementa el frontend para que coincida. Admite diseño visual y prototipado para web, no para UI de apps nativas.

por leonxlnx/taste-skill

• UI

Optimiza el onboarding posterior al registro, la activación, la primera experiencia y el tiempo hasta el valor, incluyendo estados vacíos y checklists de onboarding. Relevante para el diseño del flujo de onboarding de una app.

por coreyhaines31/marketingskills

Interfaces limpias de estilo editorial. Paleta monocromática cálida, contraste tipográfico, cuadrículas bento planas, pasteles apagados. Sin degradados, sin sombras pesadas.

por leonxlnx/taste-skill

Interfaces mecánicas crudas que fusionan la impresión tipográfica suiza con la estética de terminal militar. Rejillas rígidas, contraste extremo de escala tipográfica, color utilitario, efectos de degradación analógica. Para dashboards con muchos datos, portafolios o sitios editoriales que necesiten sentirse como planos desclasificados.

por leonxlnx/taste-skill

• Flows
• Handoff & system

Convenciones de diseño estilo antfu, ampliadas. UnoCSS-first, tokens semánticos basados en clases con modo claro/oscuro dual para UIs de tooling y devtools, además de design-read, anti-slop y pulido de micro-interacciones para landing pages y superficies de producto. Úsalo al construir o refactorizar cualquier interfaz con UnoCSS.

por antfu/skills

Crea aplicaciones React de tema oscuro usando Tailwind CSS con tematización personalizada, efectos glassmorphism y animaciones de Framer Motion. Úsalo al crear dashboards, paneles de administración o interfaces con gran cantidad de datos y una estética oscura refinada.

por microsoft/skills

Guía la implementación de animaciones fluidas con sensación nativa usando la View Transition API de React: transiciones de página, elementos compartidos, cambios de ruta y reordenación de listas. Relevante para el movimiento de UI de apps y el diseño de interacción.

por vercel-labs/agent-skills

• Flows
• UI

Búsqueda curada y con criterio para elegir la librería frontend adecuada para una tarea: primitivas de UI, movimiento, gráficos, arrastrar y soltar, estado y estilos. Ayuda en las decisiones de implementación de UI de aplicaciones.

por emilkowalski/skills

• UI

Conjunto de herramientas para crear artefactos HTML elaborados y multicomponente en claude.ai usando tecnologías web frontend modernas (React, Tailwind CSS, shadcn/ui). Úsalo para artefactos complejos que requieran gestión de estado, enrutamiento o componentes de shadcn/ui - no para artefactos simples de HTML/JSX de un solo archivo.

por anthropics/skills

Construye, edita y despliega sitios web, apps y juegos full-stack vía el CLI de Higgsfield, con briefs de diseño y layouts de apps. La construcción de apps está en alcance, pero el diseño es secundario al despliegue.

por higgsfield-ai/skills

• Flows

Flujos de autenticación personalizados y apariencia de componentes: hooks (useSignIn,

por clerk/skills

CLI de automatización de navegador para agentes de IA: navegar por páginas, rellenar formularios, hacer clic, capturas de pantalla y pruebas exploratorias/QA de apps web. Admite pruebas de usabilidad y QA de apps, más que el diseño en sí.

por vercel-labs/agent-browser

• Prototype
• Usability

Kit de herramientas para interactuar y probar aplicaciones web locales usando Playwright: verificar la funcionalidad del frontend, depurar el comportamiento de la UI, capturar pantallas y ver logs. Admite pruebas de usabilidad/QA de la UI de la app.

por anthropics/skills

• UI

Guía integral de pruebas con Playwright: pruebas E2E, de componentes, de API, visuales, de accesibilidad y de seguridad, además de depuración de pruebas inestables. Apoya las pruebas de usabilidad/QA de la UI de una app.

por currents-dev/playwright-best-practices-skill

• UI

Diseña y revisa UI/UX de iOS para apps de iPhone en SwiftUI, UIKit o React Native: flujos de navegación, tipografía, formularios, diseño de teclado/safe-area y accesibilidad según Apple HIG. Orientado directamente al diseño de apps móviles.

por uizze.sh

• Flows

Da a los agentes de programación mejor gusto en UI: playbooks anti-ui-slop para construir, rediseñar, criticar y pulir interfaces web e iOS, con referencias opcionales a productos reales. Apunta directamente a la calidad del diseño de UI.

por uizze.sh

• Handoff & system