# Agent Skills de Diseño y UI

> Sistemas de diseño, trabajo con componentes y acabado visual.

Fuente: https://skillsagentes.com/categorias/diseno-ui
Markdown: https://skillsagentes.com/categorias/diseno-ui.md

269 skills en esta categoría; aquí van las 96 primeras.

## Skills

- [Brand Guidelines](https://skillsagentes.com/skills/anthropics/skills/brand-guidelines.md): Aplica los colores y la tipografía oficiales de la marca Anthropic a cualquier artefacto que pueda beneficiarse de su look-and-feel. Úsalo cuando apliquen colores de marca o estándares de diseño.
- [Frontend Design](https://skillsagentes.com/skills/anthropics/skills/frontend-design.md): Guía para un diseño visual distintivo e intencional al crear o rediseñar una UI: ayuda con dirección estética, tipografía y decisiones que no parezcan defaults templados.
- [Theme Factory](https://skillsagentes.com/skills/anthropics/skills/theme-factory.md): Kit para dar estilo a artefactos con un tema: diapositivas, documentos, informes o landing pages. Trae 10 temas predefinidos de colores y fuentes, y puede generar uno nuevo sobre la marcha.
- [Slack Gif Creator](https://skillsagentes.com/skills/anthropics/skills/slack-gif-creator.md): Conocimiento y utilidades para crear GIFs animados optimizados para Slack: restricciones, herramientas de validación y conceptos de animación. Úsalo cuando pidan un GIF animado para Slack.
- [Canvas Design](https://skillsagentes.com/skills/anthropics/skills/canvas-design.md): Crea arte visual en documentos .png y .pdf partiendo de una filosofía de diseño. Úsalo cuando pidan un póster, una pieza de arte, un diseño u otra pieza estática.
- [Algorithmic Art](https://skillsagentes.com/skills/anthropics/skills/algorithmic-art.md): Crea arte algorítmico con p5.js, aleatoriedad con semilla y exploración interactiva de parámetros. Úsalo cuando pidan arte por código, arte generativo, flow fields o sistemas de partículas.
- [Frontend Design](https://skillsagentes.com/skills/anthropics/claude-code/frontend-design.md): Guía para un diseño visual distintivo e intencional al crear o rediseñar una UI: dirección estética, tipografía y decisiones que no parezcan defaults templados.
- [Design Review](https://skillsagentes.com/skills/garrytan/gstack/design-review.md): Ojo de diseñador para QA: detecta inconsistencias visuales, problemas de espaciado y jerarquía, patrones de "AI slop" e interacciones lentas — y luego los corrige.
- [Plan Design Review](https://skillsagentes.com/skills/garrytan/gstack/plan-design-review.md): Revisión de planes con ojo de diseñador — interactiva, al estilo de las revisiones de CEO e Ingeniería. (gstack)
- [Design Shotgun](https://skillsagentes.com/skills/garrytan/gstack/design-shotgun.md): Genera múltiples variantes de diseño con IA, abre un panel de comparación, recoge feedback estructurado e itera (gstack).
- [Design Html](https://skillsagentes.com/skills/garrytan/gstack/design-html.md): Finalización de diseño: genera HTML/CSS de calidad de producción nativo de Pretext, con texto que realmente reordena y layouts dinámicos. (gstack)
- [Diagram](https://skillsagentes.com/skills/garrytan/gstack/diagram.md): Convierte una descripción en inglés (o fuente mermaid) en un trío de diagrama: la fuente, un `.excalidraw` editable en excalidraw.com, y SVG + PNG renderizados. (gstack)
- [Design Consultation](https://skillsagentes.com/skills/garrytan/gstack/design-consultation.md): Consultoría de diseño: entiende tu producto, investiga el panorama, propone un sistema de diseño completo y genera vistas previas de tipografía y color.
- [Slides](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/slides.md): Crea presentaciones HTML estratégicas con Chart.js, design tokens, layouts responsivos, fórmulas de copywriting y estrategias contextuales de diapositivas.
- [Design](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/design.md): Skill de diseño integral: identidad de marca, tokens de diseño, estilos UI, generación de logos (55 estilos, Gemini, Atlas Cloud o MuAPI), CIP, presentaciones HTML, banners, iconos y fotos sociales.
- [Ui Styling](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/ui-styling.md): Crea interfaces bellas y accesibles con componentes shadcn/ui (sobre Radix UI + Tailwind), estilos utility-first de Tailwind CSS y diseños visuales basados en canvas.
- [Design System](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/design-system.md): Arquitectura de tokens en tres capas (primitivo→semántico→componente), variables CSS, escalas de espaciado/tipografía, specs de componentes y generación estratégica de slides con marca.
- [Banner Design](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/banner-design.md): Diseña banners para redes sociales, anuncios, heroes de sitios web, activos creativos e impresión, con múltiples opciones de dirección de arte y visuales generados o suministrados.
- [Ui Ux Pro Max](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/ui-ux-pro-max.md): Inteligencia de diseño UI/UX para web, móvil y escritorio: úsala al diseñar, construir, revisar o corregir interfaces, componentes, accesibilidad, interacción, layout y tipografía.
- [Brand](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/brand.md): Voz de marca, identidad visual, frameworks de mensajería y gestión de assets para contenido de marca, tono, materiales de marketing y cumplimiento de estilo.
- [Shadcn](https://skillsagentes.com/skills/shadcn-ui/ui/shadcn.md): Gestiona componentes y proyectos shadcn: añadir, buscar, corregir, depurar, estilizar y componer UI, incluyendo interfaces de chat, con docs y ejemplos del proyecto.
- [Shadcn](https://skillsagentes.com/skills/shadcn/ui/shadcn.md): Gestiona componentes y proyectos shadcn: añadir, buscar, corregir, depurar, estilizar y componer UI, incluyendo interfaces de chat, con contexto del proyecto y documentación.
- [Minimalist Ui](https://skillsagentes.com/skills/leonxlnx/taste-skill/minimalist-ui.md): Interfaces de estilo editorial minimalista: paleta monocromática cálida, contraste tipográfico, bento grids planos y pasteles apagados, sin gradientes ni sombras pesadas.
- [Imagegen Frontend Web](https://skillsagentes.com/skills/leonxlnx/taste-skill/imagegen-frontend-web.md): Skill de dirección de imagen frontend de alta gama para generar referencias de diseño web premium: una imagen horizontal por sección, con variedad de composición, fondos, CTAs y escalas de hero, y una paleta consistente en todo el sitio.
- [Industrial Brutalist Ui](https://skillsagentes.com/skills/leonxlnx/taste-skill/industrial-brutalist-ui.md): Interfaces crudas que fusionan tipografía suiza impresa con estética de terminal militar: cuadrículas rígidas, tipografía extrema y degradación analógica, para dashboards, portfolios o sitios editoriales tipo plano desclasificado.
- [Design Taste Frontend V1](https://skillsagentes.com/skills/leonxlnx/taste-skill/design-taste-frontend-v1.md): La skill v1 original de taste, conservada para proyectos que dependen de su comportamiento exacto; el default actual es `design-taste-frontend` (v2 experimental), una reescritura sustancial.
- [Image To Code](https://skillsagentes.com/skills/leonxlnx/taste-skill/image-to-code.md): Skill de imagen-a-código para sitios web: genera imágenes de diseño por sección, las analiza a fondo y luego implementa el frontend fiel a ellas, evitando UI genérica y clichés de IA.
- [Imagegen Frontend Mobile](https://skillsagentes.com/skills/leonxlnx/taste-skill/imagegen-frontend-mobile.md): Skill de generación de imágenes para conceptos premium de pantallas de apps móviles (iOS, Android, cross-platform), con mockups de teléfono, jerarquía limpia y consistencia multi-pantalla. Solo genera imágenes, no código.'
- [High End Visual Design](https://skillsagentes.com/skills/leonxlnx/taste-skill/high-end-visual-design.md): Enseña a la IA a diseñar como una agencia de alta gama: define fuentes, espaciados, sombras, estructura de tarjetas y animaciones exactas, bloqueando los defaults que hacen ver un diseño de IA barato o genérico.
- [Brandkit](https://skillsagentes.com/skills/leonxlnx/taste-skill/brandkit.md): Skill de generación de imágenes premium para brand-kits: boards de guías de marca, sistemas de logo, decks de identidad y presentaciones de mundo visual de alta gama.
- [Gpt Taste](https://skillsagentes.com/skills/leonxlnx/taste-skill/gpt-taste.md): Ingeniero de UX/UI y motion GSAP de élite: impone aleatoriedad real tipo Python, estructura AIDA estricta, tipografía editorial ancha, bento grids sin huecos, ScrollTriggers avanzados y espaciado masivo entre secciones.
- [Design Taste Frontend](https://skillsagentes.com/skills/leonxlnx/taste-skill/design-taste-frontend.md): Skill anti-slop para frontend: landing pages, portafolios y rediseños. El agente lee el brief, infiere la dirección de diseño correcta y evita interfaces que parezcan plantillas genéricas.
- [Redesign Existing Projects](https://skillsagentes.com/skills/leonxlnx/taste-skill/redesign-existing-projects.md): Mejora sitios y apps existentes a calidad premium: audita el diseño actual, detecta patrones genéricos de IA y aplica estándares de alto nivel sin romper la funcionalidad. Funciona con cualquier framework CSS o CSS vanilla.
- [Stitch Design Taste](https://skillsagentes.com/skills/leonxlnx/taste-skill/stitch-design-taste.md): Skill de sistema de diseño semántico para Google Stitch. Genera DESIGN.md que imponen estándares de UI premium anti-genéricos: tipografía, color, layouts asimétricos, micro-movimiento perpetuo y rendimiento.
- [Web Design Guidelines](https://skillsagentes.com/skills/bytedance/deer-flow/web-design-guidelines.md): Revisa código de interfaz según las Web Interface Guidelines de Vercel: descarga las reglas más recientes y compara el código frente a ellas. Úsalo para revisar UI, accesibilidad, diseño o UX.
- [Frontend Design](https://skillsagentes.com/skills/bytedance/deer-flow/frontend-design.md): Crea interfaces frontend distintivas y de calidad de producción: webs, landing pages, dashboards, componentes React o layouts HTML/CSS. Genera código creativo y pulido que evita la estética genérica de IA.
- [Music Generation](https://skillsagentes.com/skills/bytedance/deer-flow/music-generation.md): Se usa cuando el usuario pide generar, crear, componer o producir música o canciones: música de fondo, temas, jingles o pistas instrumentales, a partir de un prompt de estilo/ánimo.
- [Image Generation](https://skillsagentes.com/skills/bytedance/deer-flow/image-generation.md): Se usa cuando el usuario pide generar, crear, imaginar o visualizar imágenes: personajes, escenas, productos o cualquier contenido visual. Admite prompts estructurados e imágenes de referencia.
- [Impeccable](https://skillsagentes.com/skills/pbakaus/impeccable/impeccable.md): Úsalo cuando quieras diseñar, rediseñar, criticar, auditar, pulir, clarificar, destilar, endurecer, optimizar, adaptar, animar, colorear o mejorar de otro modo una interfaz frontend. No es para tareas solo de backend o sin interfaz.
- [Archify](https://skillsagentes.com/skills/tt-a1i/archify/archify.md): Crea diagramas de arquitectura, workflow, secuencia, flujo de datos y ciclo de vida como HTML explorable con SVG inline, temas, movimiento opcional y exportación PNG/JPEG/WebP/SVG/WebM.
- [Tailwind Design System](https://skillsagentes.com/skills/calesthio/openmontage/tailwind-design-system.md): Construye sistemas de diseño escalables con Tailwind CSS v4, tokens de diseño, librerías de componentes y patrones responsivos. Úsalo al crear librerías de componentes o estandarizar la interfaz.
- [Character Rigging](https://skillsagentes.com/skills/calesthio/openmontage/character-rigging.md): Construye rigs 2D de personaje guiados por datos para animación local: partes, pivotes, capas, restricciones, vistas y paquetes de rig reutilizables.
- [Threejs Geometry](https://skillsagentes.com/skills/calesthio/openmontage/threejs-geometry.md): Creación de geometría en Three.js: formas integradas, BufferGeometry, geometría a medida e instancing. Úsalo al crear formas 3D, trabajar con vértices o optimizar con renderizado instanciado.
- [Lyria](https://skillsagentes.com/skills/calesthio/openmontage/lyria.md): Genera y valida música con Google Lyria 3 a través de la API de Gemini Interactions. Úsalo antes de llamar a google_music, al diseñar prompts de Lyria 3 o al preparar música de duración exacta.
- [Pose Library Design](https://skillsagentes.com/skills/calesthio/openmontage/pose-library-design.md): Diseña librerías reutilizables de poses 2D de personaje, ciclos de acción y estados de expresión para animación guiada por datos.
- [Visual Style](https://skillsagentes.com/skills/calesthio/openmontage/visual-style.md): Crea, extrae y aplica sistemas de diseño visual portables mediante archivos visual-style.md, con conectores para vídeos de HeyGen, diapositivas HTML, Figma y paper.design, y una galería de estilos.
- [Threejs Loaders](https://skillsagentes.com/skills/calesthio/openmontage/threejs-loaders.md): Carga de activos en Three.js: GLTF, texturas, imágenes, modelos y patrones asíncronos. Úsalo al cargar modelos 3D, texturas o entornos HDR, y al gestionar el progreso de carga.
- [Threejs Materials](https://skillsagentes.com/skills/calesthio/openmontage/threejs-materials.md): Materiales de Three.js: PBR, basic, phong, materiales de shader y propiedades de material. Úsalo al dar estilo a mallas, trabajar con texturas o crear shaders propios.
- [Threejs Lighting](https://skillsagentes.com/skills/calesthio/openmontage/threejs-lighting.md): Iluminación en Three.js: tipos de luz, sombras e iluminación de entorno. Úsalo al añadir luces, configurar sombras, montar IBL u optimizar el rendimiento de la iluminación.
- [Threejs Interaction](https://skillsagentes.com/skills/calesthio/openmontage/threejs-interaction.md): Interacción en Three.js: raycasting, controles, entrada de ratón y táctil, y selección de objetos. Úsalo al gestionar entrada del usuario, detectar clics o añadir controles de cámara.
- [Sound Effects](https://skillsagentes.com/skills/calesthio/openmontage/sound-effects.md): Genera efectos de sonido a partir de descripciones en texto con ElevenLabs. Úsalo para efectos, texturas de audio, ambientes, impactos cinematográficos o sonidos de interfaz.
- [Threejs World Generation](https://skillsagentes.com/skills/calesthio/openmontage/threejs-world-generation.md): Construye mundos Three.js deterministas, editables y de punto de vista libre desde texto o briefs. Úsalo para terreno cinematográfico, regiones semánticas, biomas procedurales, hitos y vuelos de cámara.
- [Music](https://skillsagentes.com/skills/calesthio/openmontage/music.md): Genera música con la API Music de ElevenLabs. Úsalo para pistas instrumentales, canciones con letra, música de fondo o jingles, con planes de composición para control granular.
- [Gsap Utils](https://skillsagentes.com/skills/calesthio/openmontage/gsap-utils.md): Skill oficial de GSAP para gsap.utils: clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap y pipe.
- [3d Asset Generation](https://skillsagentes.com/skills/calesthio/openmontage/3d-asset-generation.md): Genera, reconstruye, inspecciona y enruta activos 3D de producción para mundos de OpenMontage con Atlas Cloud, fal.ai, catálogos con licencia y Blender.
- [Comfyui](https://skillsagentes.com/skills/calesthio/openmontage/comfyui.md): Úsalo al trabajar con workflows de ComfyUI en OpenMontage: comfyui_image/video/music, workflows propios, selección de output_node, modelos que faltan, LoRAs, poca VRAM e importación de workflows de la comunidad.
- [Threejs Shaders](https://skillsagentes.com/skills/calesthio/openmontage/threejs-shaders.md): Shaders en Three.js: GLSL, ShaderMaterial, uniforms y efectos propios. Úsalo al crear efectos visuales a medida, modificar vértices o escribir fragment shaders.
- [Threejs Animation](https://skillsagentes.com/skills/calesthio/openmontage/threejs-animation.md): Animación en Three.js: keyframes, animación esquelética, morph targets y mezcla de animaciones. Úsalo al animar objetos, reproducir animaciones GLTF o crear movimiento procedural.
- [Acestep](https://skillsagentes.com/skills/calesthio/openmontage/acestep.md): Generación musical con ACE-Step 1.5: música de fondo, pistas con voz, versiones y extracción de stems para producción de vídeo.
- [Flux Best Practices](https://skillsagentes.com/skills/calesthio/openmontage/flux-best-practices.md): Guía completa para los modelos de generación de imagen BFL FLUX: prompting, T2I, I2I, JSON estructurado, colores hex, tipografía, edición multi-referencia y buenas prácticas por modelo.
- [Text To Speech](https://skillsagentes.com/skills/calesthio/openmontage/text-to-speech.md): Genera audio de voz a partir de texto con el modelo Starfish TTS de HeyGen: selección de voz, control de velocidad y tono, y listado de voces por idioma o género.
- [Gsap Frameworks](https://skillsagentes.com/skills/calesthio/openmontage/gsap-frameworks.md): Skill oficial de GSAP para Vue, Svelte y otros frameworks no-React: ciclo de vida, acotado de selectores y limpieza al desmontar. Para React, usa gsap-react.
- [Fish Audio Tts](https://skillsagentes.com/skills/calesthio/openmontage/fish-audio-tts.md): Genera narración expresiva y multilingüe con fish.audio (modelos S1 / S2) y reutiliza voces clonadas mediante reference_id.
- [Gsap Performance](https://skillsagentes.com/skills/calesthio/openmontage/gsap-performance.md): Skill oficial de GSAP para rendimiento: preferir transforms, evitar layout thrashing, will-change y batching. Úsalo al optimizar animaciones, reducir jank o buscar 60 fps.
- [Elevenlabs](https://skillsagentes.com/skills/calesthio/openmontage/elevenlabs.md): Genera voces en off, efectos de sonido y música con las APIs de ElevenLabs. Úsalo para crear audio de vídeos, podcasts o juegos, incluida la clonación de voz.
- [Canvas Procedural Animation](https://skillsagentes.com/skills/calesthio/openmontage/canvas-procedural-animation.md): Usa p5.js/canvas para efectos procedurales locales de personaje: partículas, clima, squash y stretch, ciclos de caminar y movimiento ambiental.
- [Web Design Guidelines](https://skillsagentes.com/skills/calesthio/openmontage/web-design-guidelines.md): Revisa código de interfaz según las Web Interface Guidelines. Úsalo cuando pidan "revisa mi UI", "comprueba la accesibilidad", "audita el diseño" o "revisa la UX".
- [Doubao Tts](https://skillsagentes.com/skills/calesthio/openmontage/doubao-tts.md): Genera narración en mandarín y multilingüe con Volcengine Doubao Speech 2.0. Úsalo para voces en off en chino o cuando la narración necesite marcas de tiempo por carácter.
- [Gsap React](https://skillsagentes.com/skills/calesthio/openmontage/gsap-react.md): Skill oficial de GSAP para React: hook useGSAP, refs, gsap.context() y limpieza. Úsalo para animación en React o Next.js, o al preguntar por GSAP con React o la limpieza al desmontar.
- [Lottie Bodymovin](https://skillsagentes.com/skills/calesthio/openmontage/lottie-bodymovin.md): Úsalo al implementar los 12 principios de animación de Disney con animaciones Lottie exportadas desde After Effects.
- [Framer Motion](https://skillsagentes.com/skills/calesthio/openmontage/framer-motion.md): Úsalo al implementar los 12 principios de animación de Disney con Framer Motion en aplicaciones React.
- [Gsap Core](https://skillsagentes.com/skills/calesthio/openmontage/gsap-core.md): Skill oficial de GSAP para la API central: gsap.to(), from(), fromTo(), easing, duración, stagger, defaults y gsap.matchMedia() para animación responsiva y reduced-motion.
- [Gsap Scrolltrigger](https://skillsagentes.com/skills/calesthio/openmontage/gsap-scrolltrigger.md): Skill oficial de GSAP para ScrollTrigger: animaciones ligadas al scroll, pinning, scrub y triggers. Úsalo para animación de scroll, parallax o secciones fijadas.
- [Gsap Timeline](https://skillsagentes.com/skills/calesthio/openmontage/gsap-timeline.md): Skill oficial de GSAP para timelines: gsap.timeline(), parámetro de posición, anidado y control de reproducción. Úsalo al secuenciar animaciones o coreografiar keyframes.
- [Threejs Textures](https://skillsagentes.com/skills/calesthio/openmontage/threejs-textures.md): Texturas en Three.js: tipos de textura, mapeo UV, mapas de entorno y ajustes. Úsalo al trabajar con imágenes, coordenadas UV, cubemaps, entornos HDR u optimización de texturas.
- [Threejs Postprocessing](https://skillsagentes.com/skills/calesthio/openmontage/threejs-postprocessing.md): Post-procesado en Three.js: EffectComposer, bloom, profundidad de campo y efectos de pantalla. Úsalo al añadir efectos visuales, gradación de color, desenfoque o brillo.
- [Azure Text To Speech](https://skillsagentes.com/skills/calesthio/openmontage/azure-text-to-speech.md): Genera narración con voces neuronales usando Azure AI Speech (text-to-speech REST). Proveedor TTS en la nube opcional, preferido cuando AZURE_SPEECH_KEY está configurada.
- [Gsap Plugins](https://skillsagentes.com/skills/calesthio/openmontage/gsap-plugins.md): Skill oficial de GSAP para plugins: registro, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, plugins de SVG y física, CustomEase y GSDevTools.
- [Threejs Fundamentals](https://skillsagentes.com/skills/calesthio/openmontage/threejs-fundamentals.md): Fundamentos de Three.js: montaje de escena, cámaras, renderer, jerarquía de Object3D y sistemas de coordenadas. Úsalo al montar escenas 3D o trabajar con transformaciones.
- [Site Architecture](https://skillsagentes.com/skills/coreyhaines31/marketingskills/site-architecture.md): Para planificar, mapear o reestructurar la jerarquía de páginas de un sitio, la navegación, la estructura de URLs o el enlazado interno.
- [Image](https://skillsagentes.com/skills/coreyhaines31/marketingskills/image.md): Para crear, generar, editar u optimizar imágenes de marketing: heroes de blog, gráficos sociales, mockups de producto, banners de perfil o assets de marca.
- [Cut The Curve](https://skillsagentes.com/skills/heygen-com/hyperframes/cut-the-curve.md): El catálogo de técnicas: cinco SEAMS con velocidad emparejada más las dos técnicas dentro de escena (waterfall entry y nudge curve), con sus parámetros de blur, escala Z y ritmo de cascada.
- [Oversized Cursor](https://skillsagentes.com/skills/heygen-com/hyperframes/oversized-cursor.md): Técnica de estilo propio de HyperFrames: un cursor macOS de tamaño exagerado que entra desde fuera de cuadro, apunta con la punta, hace click para ignitar la siguiente acción y sale físicamente.
- [Scientific Schematics](https://skillsagentes.com/skills/k-dense-ai/scientific-agent-skills/scientific-schematics.md): Crea diagramas científicos de calidad de publicación con la IA Nano Banana 2 y refinamiento iterativo inteligente. Gemini 3.6 Flash revisa la calidad y solo regenera si está por debajo del umbral de tu tipo de documento.
- [Generate Image](https://skillsagentes.com/skills/k-dense-ai/scientific-agent-skills/generate-image.md): Genera o edita imágenes con modelos de IA (Gemini, Seedream, Recraft, GPT-Image, Riverflow) vía la API de imágenes de OpenRouter: fotos, ilustraciones, arte conceptual, logos y edición o composición desde imágenes de referencia.
- [Infographics](https://skillsagentes.com/skills/k-dense-ai/scientific-agent-skills/infographics.md): Crea infografías profesionales con Nano Banana Pro AI y refinamiento iterativo inteligente. Usa Gemini 3.6 Flash para revisar la calidad e integra investigación con Perplexity Sonar. Soporta 10 tipos, 8 estilos y paletas para daltonismo.
- [Brand Landingpage](https://skillsagentes.com/skills/wshobson/agents/brand-landingpage.md): Diseñador de landing pages centrado en marca: hace una entrevista de identidad visual y luego genera e itera la página con Stitch, entregando HTML listo para desplegar.
- [Web Component Design](https://skillsagentes.com/skills/wshobson/agents/web-component-design.md): Domina patrones de componentes en React, Vue y Svelte: CSS-in-JS, estrategias de composición y arquitectura de componentes reutilizables para design systems.
- [Visual Design Foundations](https://skillsagentes.com/skills/wshobson/agents/visual-design-foundations.md): Aplica principios de tipografía, teoría del color, sistemas de espaciado e iconografía para crear diseños visuales coherentes, útil al definir design tokens, guías de estilo o mejorar la jerarquía visual.
- [Mobile Ios Design](https://skillsagentes.com/skills/wshobson/agents/mobile-ios-design.md): Domina las Human Interface Guidelines de iOS y los patrones de SwiftUI para construir apps nativas. Úsalo al diseñar interfaces iOS, implementar vistas SwiftUI o seguir los principios de diseño de Apple.
- [Visual Edit Precision](https://skillsagentes.com/skills/wshobson/agents/visual-edit-precision.md): Úsalo al hacer cambios de UI/frontend guiados por contexto visual: selecciones de elementos, anotaciones o capturas de pantalla junto con la solicitud de cambio.
- [Mobile Android Design](https://skillsagentes.com/skills/wshobson/agents/mobile-android-design.md): Domina Material Design 3 (Material You) y Jetpack Compose para construir apps Android nativas, modernas y adaptativas, integradas con el ecosistema Android.
- [Design System Patterns](https://skillsagentes.com/skills/wshobson/agents/design-system-patterns.md): Construye sistemas de diseño escalables con tokens de diseño, infraestructura de theming y patrones de arquitectura de componentes.
- [Responsive Design](https://skillsagentes.com/skills/wshobson/agents/responsive-design.md): Implementa layouts responsivos modernos usando container queries, tipografía fluida, CSS Grid y estrategias de breakpoints mobile-first.
- [React Native Design](https://skillsagentes.com/skills/wshobson/agents/react-native-design.md): Domina estilos, navegación y animaciones con Reanimated en React Native para desarrollo móvil multiplataforma con experiencia nativa.
- [Tailwind Design System](https://skillsagentes.com/skills/wshobson/agents/tailwind-design-system.md): Construye sistemas de diseño escalables con Tailwind CSS v4, tokens de diseño, librerías de componentes y patrones responsivos.

## Servidores MCP de Diseño y UI

- [Penpot](https://skillsagentes.com/mcp/penpot.md): Conecta agentes de IA con Penpot, la plataforma de diseño open source, para que puedan leer y trabajar sobre archivos de diseño reales.
- [Blender Model Context Protocol](https://skillsagentes.com/mcp/blender-model-context-protocol.md): Conecta un LLM como Claude con Blender para crear, modificar e inspeccionar escenas 3D mediante un servidor de sockets y ejecución de código Python.
- [Figma Context](https://skillsagentes.com/mcp/figma-context.md): Conecta agentes de código como Cursor con archivos de Figma para que implementen diseños UI a partir de datos reales de layout, no capturas de pantalla.
- [Cursor Talk to Figma](https://skillsagentes.com/mcp/cursor-talk-to-figma.md): Conecta agentes de IA como Cursor con Figma vía WebSocket para leer y modificar diseños, textos, componentes y prototipos de forma programática.
- [Magic](https://skillsagentes.com/mcp/magic.md): Conecta tu editor (Cursor, Claude Code, Windsurf, VS Code) al 21st MCP para buscar componentes React/Tailwind y generar UI con IA desde el propio editor.
- [Canvas UI](https://skillsagentes.com/mcp/canvas-ui.md): Deja que Cursor, Claude Code o VS Code busquen e instalen componentes canvas y WebGL del registro @canvas-ui desde el propio editor.
- [Mobbin](https://skillsagentes.com/mcp/mobbin.md): Conecta agentes de IA a la librería de Mobbin con más de 600.000 capturas reales de apps para diseñar interfaces basadas en patrones probados. (oficial)

---

[Todas las categorías](https://skillsagentes.com/categorias.md) · [Todas las skills](https://skillsagentes.com/skills.md)

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)