Make Claude see and shape interfaces — Figma, screenshots, image generation, and frontend visual work.
Control Blender 3D with Claude: create scenes, model objects, and apply materials via a socket addon.
Prompt-to-3D-scene, 27k stars in. The most fun you'll have with an MCP server, and genuinely useful for mockups.
claude mcp add blender -- uvx blender-mcpStreams console output, network activity, screenshots, and Lighthouse audits from your real Chrome session.
Claude sees the page you're actually looking at, Lighthouse scores included. Frontend polish work gets faster.
claude mcp add browser-tools -- npx -y @agentdeskai/browser-tools-mcp@latestAnthropic skill for composing visual art and design layouts on a canvas, from posters to graphics.
Anthropic's own take on making Claude design rather than merely describe. Worth studying as much as using.
/plugin install example-skills@anthropic-agent-skillsFramelink's MCP server feeding Figma layout and design data to coding agents for accurate design-to-code.
One-shot design implementation instead of screenshot archaeology. The standard for Figma-to-code with Claude.
claude mcp add figma -- npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdioAnthropic skill steering Claude toward distinctive, intentional UI design instead of templated defaults.
The cure for every AI app looking like the same Tailwind starter. Install it before your next prototype.
/plugin install example-skills@anthropic-agent-skills21st.dev's UI generator: search 10,000+ React/Tailwind components and generate new ones inside your editor.
v0-quality components without leaving Claude Code. Beats hand-rolling yet another button variant.
npx @21st-dev/cli@latest initUse Hugging Face Spaces from Claude; connects to FLUX.1-schnell by default for image generation.
Free FLUX image generation via Spaces, plus whatever other model demo you point it at. Quietly excellent.
claude mcp add hfspace -- npx -y @llmindset/mcp-hfspaceGenerate Mermaid diagrams and flowcharts dynamically from conversation, with multiple transport options.
Architecture diagrams that render as you talk. Cheaper than a whiteboard and easier to version.
claude mcp add mermaid -- npx -y mcp-mermaidAntV's chart generation server: produce 25+ visualization types from data via natural language.
Publication-grade charts without writing matplotlib. The fastest data-to-visual path in the ecosystem.
claude mcp add antv-chart -- npx -y @antv/mcp-server-chartGives Claude accurate shadcn/ui v4 component source, demos, and metadata for React, Svelte, and Vue.
Claude's memory of shadcn is perpetually one version stale. This ends the invented-prop era.
claude mcp add shadcn-ui -- npx @jpisnice/shadcn-ui-mcp-serverAnthropic skill for generating cohesive visual themes — typography, palettes, and styling systems.
Consistent theming across artifacts and slides without a design system on staff. Pairs well with frontend-design.
/plugin install example-skills@anthropic-agent-skillsSearch and fetch Unsplash photos from Claude for mockups, placeholders, and design comps.
Ends the grey-placeholder-box era. Real imagery in first-draft mockups changes how clients read them.
git clone https://github.com/hellokaton/unsplash-mcp-server.git && cd unsplash-mcp-server && uv pip install .