Connecting MCPs
Goal — Understand MCPs and connect two that earn their place — Figma and Context7.
By the end — The Figma and Context7 MCPs connected at user level, anchoring both ends of the design-to-code seam.
1Understand what an MCP is
An MCP connects Claude Code to an outside service, giving it new abilities beyond your files — like reading a Figma design or fetching live documentation. A skill is a move you author; an MCP is a service you plug in.
Explain what an MCP is and how it differs from a skill.2Keep MCPs minimal
Most people need very few. Two are worth it for a design engineer, and both belong at user level because you use them across projects.
3Connect the Figma MCP
The Figma MCP lets Claude read your designs — variables, tokens, screenshots — and bring them into code. This is what makes the design-to-code seam reach all the way back to Figma.
claude mcp add --scope user figma -- npx -y figma-developer-mcpHelp me connect the Figma MCP at user level and explain what it lets you do.4Connect the Context7 MCP
Context7 fetches current documentation for libraries and frameworks, so Claude is not relying on older knowledge when it writes code.
claude mcp add --scope user context7 -- npx -y @upstash/context7-mcpHelp me connect the Context7 MCP at user level and explain when it helps.5Understand the payoff together
Figma feeds real design decisions in; Context7 keeps the code current. The seam you built in Phase 7 now has both ends anchored.
With Figma and Context7 connected, how does my design-to-code workflow improve?Recap — You learned what an MCP is, connected Figma and Context7 at user level, and anchored both ends of the design-to-code seam — real designs in, current docs alongside.