In short
MCP servers give Claude Code new tools: a real browser, your design files, your database, your issue tracker. You add them with a command or a .mcp.json file in your project, and Claude Code can use their tools from then on. For design work the most useful one is a browser, so Claude Code can open the page it built, take screenshots at phone and desktop width and compare them with your template. Below: how MCP setup works, a short example, and a ready-made design setup.
Updated
Where the file goes
Project servers go in .mcp.json in the root of your repo and are shared with the team; each person approves them the first time. Servers just for you are added with claude mcp add, which stores them in your own Claude Code settings.
Claude Code MCP templates: structure
mcpServers
The list of servers, each under a short name you choose.
command and args
How to start a local server, for example npx with the package name.
url
For remote servers, the address to connect to instead of a command.
env
Optional environment variables, such as API keys. Keep real keys out of the repo.
Scope
Project (.mcp.json, shared), local or user (just you). Choose with the --scope flag on claude mcp add.
A short example
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}Setting up MCP in Claude Code, step by step
Decide what Claude Code cannot do today that slows you down. For design work it is usually seeing the result: Claude Code writes the page but cannot look at it. A browser server fixes that.
Add the server. For yourself, run claude mcp add with a name and the command that starts it. For the team, add it to .mcp.json in the repo so everyone gets the same setup; each person approves it the first time.
Check it with /mcp in Claude Code, which lists connected servers and their tools. Then tell Claude Code when to use them, ideally in CLAUDE.md: after a UI change, open the page, take screenshots at phone and desktop width, and compare with the template.
Keep the list short. Every server adds tools Claude Code has to choose between, so add servers for real needs, not just because they exist.
Finally, write down which servers the project uses and why in CLAUDE.md. New teammates then know what each tool is for, and Claude Code knows when to reach for it instead of guessing.
Ready-made Claude Code MCP templates files
Complete files you can copy into your project and fill in. Each one works with the BrowserMoon design templates, so what the tool builds also looks professional.
Design MCP setup
A project .mcp.json that gives Claude Code a real browser through the Playwright MCP server, plus a CLAUDE.md section telling it to screenshot and compare pages against your template.
.mcp.json (design setup)Save this as .mcp.json in the root of your project. It adds the Playwright MCP server, which lets Claude Code open your pages in a real browser, resize them and take screenshots.
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]Using Claude Code MCP with a design template
With a browser server, Claude Code can open both your page and design/template.html, screenshot them at the same widths and fix the differences itself.
That closes the loop: template for the design, CLAUDE.md for the rules, and MCP for checking the result visually.
SaaS landing page · Analytics dashboard · Pricing section · Dark gradient hero · Account settings · AI chat interface
Best practices
- ·Start with one or two servers. Every server adds tools Claude Code has to choose between.
- ·Use a browser server for UI work so Claude Code can see what it built.
- ·Keep secrets in environment variables, not in .mcp.json.
- ·Run /mcp in Claude Code to see which servers are connected and their status.
Common mistakes and how to fix them
API keys inside .mcp.json
Use environment variables and keep secrets out of the repo.
Adding every server you find
Start with one or two you need; more servers mean more tools to choose between.
Never telling Claude Code to use them
Add a short section to CLAUDE.md saying when to use each server.
Unknown servers from random sources
Only install servers you trust; they run with your permissions.
MCP scopes in Claude Code
These files tell Claude Code how to work. A design template tells it what to build. Use both.
Claude Code templatesFrequently asked questions
What is MCP in Claude Code?
The Model Context Protocol, a standard way to give Claude Code extra tools through servers, such as a browser, a database or your design files.
How do I add an MCP server to Claude Code?
Run claude mcp add with the server's name and command, or add it to .mcp.json in your project so the whole team gets it.
Where is .mcp.json?
In the root of your project. It holds project-scoped servers that are shared through the repo.
Which MCP server helps with design?
A browser server such as Playwright MCP. It lets Claude Code open pages, resize them and take screenshots to check its work against your template.
How many MCP servers should a project use?
Usually two or three at most. Each server adds tools Claude Code must choose between, so start with the one that removes your biggest blocker, like a browser for checking pages.
Do MCP servers work in Claude Code on the web and in the IDE?
Project servers in .mcp.json travel with the repo; local servers that run a command need that command available where Claude Code runs.
What does MCP stand for?
Model Context Protocol, an open standard for connecting AI tools to other tools and data.
Can Claude Code see my website?
With a browser MCP server such as Playwright MCP it can open pages, resize the window and take screenshots.
Is there an MCP server for Figma?
Yes, Figma offers an MCP server that gives coding tools access to design data. Pair it with a code template for the closest match.
How do I remove an MCP server?
Use claude mcp remove with its name, or delete it from .mcp.json for project servers.
Claude Code templates by category
Related