ツール

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.

Lets agents model, lay out scenes, tweak materials and run Python in Blender, and import Poly Haven, Sketchfab and AI-generated 3D assets. Requires uv and the companion Blender add-on.

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.

Develops a design philosophy first, then draws posters, illustrations and other static visuals in code, exporting PNG or PDF. Emphasizes original work rather than copying existing artists. Official Anthropic skill.

Makes GIFs that follow Slack's recommended size, frame rate, color and length for emoji (128x128) and message GIFs (480x480), with animation tips and tools to assemble and validate them. Built on Python and Pillow. Official Anthropic skill.

Creates generative art such as flow fields and particle systems with p5.js and seeded randomness: first writes an algorithmic design philosophy, then outputs an interactive HTML viewer with tunable parameters. Official Anthropic skill.

Ten built-in color and font themes to apply to slides, documents, reports and HTML landing pages, or generate a new theme on demand. Official Anthropic skill.

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.

Generates or edits images: photos, illustrations, textures, game sprites, product mockups and transparent assets. A built-in Codex system skill using the image_gen tool, no install needed; with approval it can use a bundled CLI script that needs OPENAI_API_KEY. By OpenAI.

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.

Open-source local design workbench and Claude Design alternative: builds web and mobile prototypes, slides, images and motion videos from a DESIGN.md system, exporting HTML, PDF, PPTX or MP4. MCP lets Claude Code and Codex use it. Needs the macOS or Windows app; Linux from source.

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.

HeyGen's official HyperFrames skill set: lets agents write deterministic MP4 videos in HTML, CSS and animation, with workflows for promo videos, explainers, captions and beat-synced music. Needs Node.js 22+ and FFmpeg.

Write videos in HTML, CSS and frame-seekable animations, preview them from the CLI and render deterministic MP4s. Comes with agent skills for product launch videos, captions and talking-head re-edits. Maintained by HeyGen; needs Node.js 22+ and FFmpeg.

Official MCP for the open-source design tool Penpot: through the Penpot plugin API, agents can query, modify and generate designs, supporting design-to-code and code-to-design. Run npx -y @penpot/mcp@latest first and load the MCP plugin in Penpot to connect.

Generates self-contained HTML+SVG diagrams in an editorial style: architecture, flowcharts, sequence, swimlane, Gantt and dozens more types. Can match brand colors from a website and redraw imported Mermaid, draw.io and Excalidraw sources.

Conversion rate optimization skill from the marketingskills collection: give it a homepage, landing page, pricing page or form and it diagnoses value proposition, headlines, CTAs, trust signals and friction, returning quick wins, high-impact changes, A/B test ideas and alternative copy.

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.

Color rules for daisyUI 5: explains semantic names such as primary, base-100 and error with their -content foregrounds, says to prefer them over fixed Tailwind colors and never add dark: to them, and shows how to enable, create and override themes. Part of the official daisyUI skill.

Accessibility review plugin with an audit command, a UI validation subagent, and WCAG 2.2 and screen reader testing skills. Before design reviews or launch, the agent checks contrast, keyboard use and screen reader support and suggests fixes. For Claude Code; automated checks need Node.js.