Visuals

Design apps that generate real interfaces, and MCP servers that hand your tools to a coding agent. Picked for craft, not hype.

Prompt to interface. Each one generates real UI you can ship or hand off.

Plug design tools into Claude Code and other agents. Commands are from each maker's docs.

  • Figma01

    Figma MCP server

    Brings frames, variables and components from Figma into your coding agent.

    claude mcp add --transport http figma https://mcp.figma.com/mcp
    Read the docs
  • Webflow02

    Webflow MCP server

    Lets agents read and edit Webflow sites, CMS content and the Designer.

    claude mcp add --transport http webflow https://mcp.webflow.com/mcp
    Read the docs
  • Arc03

    Arc MCP

    Search, read and install Arc's animated React components from your agent.

    claude mcp add --transport http arc https://uiarc.dev/api/mcp
    Read the docs
  • shadcn04

    shadcn MCP

    Browse and install components from any shadcn registry in natural language.

    pnpm dlx shadcn@latest mcp init --client claude
    Read the docs
  • 21st.dev05

    Magic MCP

    Generate UI components from a prompt, drawn from the 21st.dev library.

    npx @21st-dev/cli@latest init --client claude
    Read the docs
  • Storybook06

    Storybook MCP

    Gives agents your component stories and docs, so generated UI matches your system.

    npx storybook add @storybook/addon-mcp
    Read the docs
  • Canva07

    Canva Dev MCP

    Canva Apps SDK docs and tooling, inside your agent.

    claude mcp add canva-dev -- npx -y @canva/cli@latest mcp
    Read the docs