Agent Skills para Diseño web

Genera imágenes de referencia de diseño web premium por sección con variedad de composición, paleta consistente y dirección de arte orientada a conversión para landing pages y composiciones de producto.

por leonxlnx/taste-skill

Guía para crear diseños profesionales de UI/UX en Penpot mediante herramientas MCP, abarcando sistemas de diseño, componentes, dashboards, formularios, navegación, landing pages y accesibilidad.

por github/awesome-copilot

• User experience
• Accessibility

Diseña e implementa microinteracciones, motion design, transiciones, estados de carga y patrones de feedback al usuario con orientación sobre tiempos y easing.

por wshobson/agents

• User experience
• Accessibility
• Interaction design

Skill experta en arquitectura de la información para planificar la jerarquía de páginas de un sitio web, la navegación, la estructura de URL y el enlazado interno, con plantillas por tipo de sitio y guía de diseño de jerarquías.

por coreyhaines31/marketingskills

• Information architecture

Implementa interfaces conformes con WCAG 2.2 con patrones ARIA, navegación por teclado, gestión de foco, soporte para lectores de pantalla y prácticas de diseño inclusivo.

por wshobson/agents

• Accessibility

Diseña, implementa y audita interfaces accesibles según WCAG 2.2 AA en web, iOS y Android, cubriendo roles ARIA, gestión del foco, contraste, tamaño de objetivos y lectores de pantalla.

por affaan-m/ecc

• Accessibility

Realiza auditorías de accesibilidad WCAG 2.2 con pruebas automatizadas, verificación manual, principios POUR, clasificaciones de severidad y orientación de remediación.

por wshobson/agents

• Accessibility

Guía práctica para seleccionar, combinar e implementar tipografías web, abarcando legibilidad, tipografía responsive, carga de fuentes, jerarquía y rendimiento.

por wondelai/skills

• Visual design

Construye interfaces de usuario accesibles con componentes shadcn/ui, estilos utilitarios de Tailwind CSS, diseños responsivos, tematización, modo oscuro y tokens de sistema de diseño.

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

• Visual design
• Responsive layout

Traduce al web el diseño de interfaz fluida y los principios de movimiento físico de Apple, abarcando UI basada en gestos, springs, interacciones de arrastrar/deslizar/hoja, materiales, tipografía y movimiento reducido.

por emilkowalski/skills

Define la capa estructural de un producto o sitio antes de que comience el diseño visual. Cubre navegación, jerarquía de contenido, estructura de páginas, patrones de URL y flujos de usuario. Úsalo cuando el usuario quiera planificar la estructura del sitio, definir la navegación, mapear flujos de usuario, organizar contenido o mencione "IA" o "información…

por julianoczkowski/designer-skills

• Information architecture
• Visual design

Esta skill permite la inspección visual de sitios web que se ejecutan local o remotamente para identificar y corregir problemas de diseño. Se activa con solicitudes como "review website design", "check the UI", "fix the layout", "find design problems". Detecta problemas de diseño responsivo, accesibilidad, consistencia visual y…

por github/awesome-copilot

• Responsive layout
• Accessibility

Construye o rediseña artefactos visuales pulidos renderizados en el navegador con HTML/CSS/JavaScript/React: páginas, dashboards, prototipos, presentaciones, animaciones, mockups de UI y visualizaciones de datos. Úsalo para creación visual front-end, exploración de sistemas de diseño, crítica de diseño o aceptación explícita en navegador /…

por conardli/garden-skills

• Accessibility
• Interaction design

Enseña a la IA a diseñar como una agencia de alto nivel. Define las fuentes, el espaciado, las sombras, las estructuras de tarjetas y las animaciones exactas que hacen que un sitio web se sienta costoso. Bloquea todos los valores predeterminados comunes que hacen que los diseños de IA parezcan baratos o genéricos.

por leonxlnx/taste-skill

• Visual design

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

• Visual design

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

• Accessibility

> 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

• Responsive layout
• Accessibility

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

Audita un diseño de Penpot según WCAG 2.1/2.2 AA (opcionalmente AAA) y genera un informe estructurado de severidad: contraste de color, tamaños táctiles/de objetivo, alternativas de texto, jerarquía de encabezados y orden de teclado/enfoque. Propone correcciones — no las aplica automáticamente. También actúa como Evaluator en el ciclo de brief a pantalla. Disparadores: 'check accessibility', 'accessibility audit', 'WCAG check', 'contrast audit', 'a11y review', 'check color contrast', 'is this accessible'.

por penpot/penpot-ai-kit

• Accessibility

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

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

Traduce diseños de Figma a código de aplicación listo para producción con fidelidad visual 1:1. Úsalo al implementar código de UI a partir de archivos de Figma, cuando el usuario mencione "implementar diseño", "generar código", "implementar componente", proporcione URLs de Figma o pida crear componentes que coincidan con las especificaciones de Figma. Para escrituras en el lienzo de Figma mediante `use_figma`, usa `figma-use`.

por openai/skills

Necesita (declarado): Node.js

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

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

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

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

• Accessibility

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

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

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

Domina los patrones de componentes de React, Vue y Svelte, incluyendo CSS-in-JS, estrategias de composición y arquitectura de componentes reutilizables. Úsalo al crear librerías de componentes de UI, diseñar APIs de componentes o implementar sistemas de diseño frontend.

por wshobson/agents

Skill de diseño unificada que cubre identidad de marca, tokens de diseño, estilizado de UI, generación de logos, mockups de CIP, presentaciones, banners, iconos y fotos para redes sociales.

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

Extrae primitivas de diseño (colores, fuentes, espaciado, radio, sombras) de un sitio web público y genera archivos de tokens iniciales para el sistema de diseño de un proyecto.

por arvindrk/extract-design-system

Skill de CRO de onboarding y activación que abarca la experiencia de primer uso, los estados vacíos, las listas de verificación y la optimización del tiempo hasta el valor para flujos de usuario posteriores al registro.

por coreyhaines31/marketingskills

Audita sitios web y landing pages en busca de problemas de conversión y diseña pruebas A/B basadas en evidencia, cubriendo mapeo del embudo, activos de persuasión y manejo de objeciones.

por wondelai/skills

• User experience

Habilidad de optimización del rendimiento web basada en evidencia que cubre Core Web Vitals, ruta crítica de renderizado, carga de recursos y presupuestos de rendimiento con flujos de medición.

por addyosmani/web-quality-skills

妙搭（Spark/Miaoda）应用开发与托管：应用创建、本地全栈开发、云端生成迭代、创意设计（UI mockup / 可交互原型 / 线框图 / 落地页 / 仪表盘 / 幻灯片 deck / 视觉探索）、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV 查询、环境变量管理、应用协作者与协作权限设置、应用角色与成员管理、自动化触发器（定时/记录变更/Webhook/飞书审批）。当用户要开发/新建一个系统·工具·平台·应用，或要本地开发 / 云端开发 / 修改 / 部署 / 发布 / 上线 / 拿可分享链接，或用 HTML 做页面·网站·部署到妙搭，或要设计 / design / mockup / prototype / wireframe / 做 PPT / deck / 视觉探索，或提到妙搭/Spark/Miaoda（应用运行时域名形如 *.aiforce.cloud）、应用数据库、应用文件存储、开放 API Key、可见范围、应用协作者/开发权限、应用角色/角色成员、线上日志、接口请求量、错误量、延迟、访问量、环境变量、给妙搭应用配自动化任务/定时触发/审批通过后自动触发时使用。不负责普通云盘文件上传（lark-drive）、飞书文档编辑（lark-doc）、原生幻灯片创建（lark-slides）。

por larksuite/cli

• User experience
• Interaction design

Glosario de búsqueda inversa que asigna descripciones vagas de efectos de movimiento web a sus términos precisos de animación, para nombrar efectos en lugar de diseñarlos o construirlos.

por emilkowalski/skills

Flujos de trabajo de Firecrawl enfocados en resultados que producen artefactos estructurados de datos web, incluyendo informes de investigación, auditorías SEO, informes de QA y sistemas de diseño de sitios web.

por firecrawl/firecrawl-workflows

Manuales anti-ui-slop para crear, rediseñar, criticar y pulir interfaces web e iOS, con flujos de trabajo de layout, jerarquía y detalle, además de referencias opcionales a productos reales.

por uizze.sh

• Visual design