Outils

Has the agent commit to a visual direction before building or redesigning an interface, making deliberate choices on color, type and layout instead of generic, templated AI UI. Official Anthropic skill.

Has the agent settle on a clear aesthetic direction first, then write distinctive, production-ready frontend interfaces that avoid the generic AI look. Official Anthropic plugin.

Figma's official remote MCP: hands components, variables and layout from your designs to the agent to generate code, and can create and edit designs on the canvas. Needs Figma sign-in; Starter plans and View or Collab seats get only 6 read calls a month.

UI/UX design knowledge base plugin with searchable UI styles, color palettes, font pairings, charts and guidelines for 20+ tech stacks; generates complete design system recommendations by product type. Needs Python 3 installed locally.

UI design knowledge base skill: looks up UI styles, palettes, font pairings, charts and UX guidelines by product type and generates a full design system, covering 22 stacks including React, SwiftUI and Flutter. Needs Python 3 locally.

Official shadcn/ui skill: uses the shadcn CLI to read project config and component docs, then adds, searches, composes and fixes components following styling, form and accessibility rules. Can also start new projects from presets.

Helps agents build frontends that don't look templated: picks a design direction first, then tunes layout variance, motion intensity and information density. Also includes redesign audits, minimalist and brutalist styles, and design reference generation.

Frontend design polish skill: one skill with 24 commands such as polish, audit, critique and typeset, plus 61 deterministic rules that catch typical AI-generated UI problems, with live iteration in the browser. Works with Claude Code, Codex, Cursor and others.

Frontend design quality plugin: one skill plus 24 commands (audit, critique, polish and more) and 61 built-in deterministic rules that find common design flaws in AI-generated interfaces and fix them one by one.

Design engineering skills by Emil Kowalski, author of Sonner and Vaul: choose animation easing and durations, review and improve motion, apply Apple design principles, make web apps feel native on phones, and help pick UI libraries and prototype multiple versions.

UI/UX design plugin from the wshobson/agents marketplace with 3 subagents, 9 skills and commands for design review, component creation and accessibility audits, covering design tokens, WCAG 2.2, responsive layout, iOS HIG and Material Design 3 for in-code UI design and review.

Has the agent build single-file HTML interactive playgrounds: visual controls on one side, live preview on the other, and a prompt to copy back into Claude. Templates for design tuning, data exploration, concept maps, doc annotation, code review and architecture diagrams. By Anthropic.

Reviews UI code against Vercel's Web Interface Guidelines, covering accessibility, focus, forms, animation, typography, dark mode and more, listing issues as file:line. Fetches the latest rules before each review. Maintained by Vercel.

Google Labs' DESIGN.md format and CLI: designers capture colors, typography and spacing in a file for agents; lint checks broken references and WCAG contrast, diff compares versions and export outputs design tokens for Tailwind and more. Needs Node.js; the format is in alpha.

SVG optimizer CLI and Node.js library: shrinks SVGs by removing editor metadata, comments, hidden elements and redundant attributes, processes whole directories recursively, and gives fine control through plugin config.

GSAP's official animation skills: teach agents to use the core API, timelines, ScrollTrigger and plugins correctly, including React, Vue and Svelte integration and animation performance. Maintained by GreenSock; all plugins are free.

Simplifies Figma designs into layout and style data for coding agents, so UIs built from the design are more accurate than working from screenshots. Requires a Figma personal access token.

ConardLi's skill collection: turn articles or scripts into web presentations you can screen-record as videos (23 themes, optional voiceover), lay out material as shareable long-form web pages, search local knowledge base folders, web design, and GPT-Image-2 image generation with 79 templates.

Builds a scroll-scrubbed fly-through 3D world landing page for any brand: generates scene stills with Higgsfield and seamless camera clips via Monid (Seedance 2.0, paid per clip) or Higgsfield credits, then wires a vanilla JS scrub engine. Needs Higgsfield CLI and ffmpeg.

UI skills for design engineers: clean up spacing and hierarchy in AI-generated interfaces, fix accessibility and page metadata, debug janky animations, build DESIGN.md from an existing product or site, and run read-only UI reviews with fix plans. Use with a local frontend project in a coding agent.

Companion skills for Google Stitch: generate UIs from text or images, extract DESIGN.md from code, and turn designs into React or React Native components. From Google Labs but not an officially supported Google product; set up the Stitch MCP first.

Design engineer Jakub Krehel's 11 UI skills: targeted fixes for typography, color, layout, accessibility and UI copy, plus full interface reviews, animation teardowns, component state stress tests and multi-variant generation. Works on web project code; installing needs Node.js.

Figma's Codex plugin in OpenAI's official marketplace: implements UI from designs, generates Code Connect mappings, and creates or updates pages, component libraries, FigJam diagrams and slides in Figma. Needs a connected Figma account.

Designs or rewrites a single-offer, high-converting landing page for SaaS, apps or services: gathers the primary action, audience, objections and proof, then lays out hero, argument and objection-handling sections with copy templates and SEO/AEO notes.