ArtificialIntelligence.io

Claude Skills · 12 in this category

Design

Make Claude see and shape interfaces — Figma, screenshots, image generation, and frontend visual work.

← All skillsDocumentsMarketingEngineeringResearchProductivityOperations

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-mcp

browser-tools-mcp

AgentDesk

Streams 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@latest

canvas-design

Anthropic

Anthropic 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-skills

figma-context-mcp

Graham Lipsman

Framelink'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 --stdio

frontend-design

Anthropic

Anthropic 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-skills

magic-mcp

21st.dev

21st.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 init

mcp-hfspace

evalstate

Use 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-hfspace

mcp-mermaid

hustcc

Generate 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-mermaid

mcp-server-chart

AntV

AntV'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-chart

shadcn-ui-mcp-server

Janardhan Pisnice

Gives 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-server

theme-factory

Anthropic

Anthropic 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-skills

unsplash-mcp-server

hellokaton

Search 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 .