MCP Directory
Back

Claude-Code-Frontend-Design-Toolkit

by wilwaldon · ★ 98

Everything I've found that actually makes Claude Code output better-looking frontends. Skills, plugins, MCP servers, CLAUDE.md tricks

Install

git clone https://github.com/wilwaldon/Claude-Code-Frontend-Design-Toolkit.git

Claude Desktop config

Add this to your claude_desktop_config.json:

{
  "mcpServers": {
    "claude-code-frontend-design-toolkit": {
      "command": "npx",
      "args": [
        "-y",
        "github:wilwaldon/Claude-Code-Frontend-Design-Toolkit"
      ]
    }
  }
}

From the README

Everything I've found that actually makes Claude Code output better-looking frontends. Skills, plugins, MCP servers, CLAUDE.md tricks, organized by what you're trying to do. · · If this is useful, star it so others can find it. PRs welcome — see [Contributing](#contributing). *The default Claude output looks like every other AI-generated page. Same fonts, same purple gradient, same card layout. These fix that.* The one you install first. Anthropic's own skill that tells Claude to pick an actual aesthetic direction before writing code instead of defaulting to Inter + purple gradient + ro…
Read full README on GitHub →

💡 Need a managed MCP host?

Try Claude Pro for the smoothest MCP experience, or browse our cloud-hosted servers.

Related media servers