Step 5
Step 5 — Context7 · Figma MCP
0 views
Step 5 — Context7 · Figma MCP
LLMs only know what they were trained on. Context7 brings live library docs; Figma MCP brings design files.
Context7 — library docs
claude mcp add context7 -- npx -y @upstash/context7-mcp
> Show me the Next.js 16 App Router metadata spec — use context7
Claude Code calls Context7 to fetch the current official docs.
Why this matters
LLM training is frozen. Right after a release, the model may be wrong. Context7 fills that gap with a live index.
Figma MCP — design to code
claude mcp add figma -- npx -y @figma/mcp
> Convert the LoginScreen frame in Figma file abc123 to a React component
Picks up colors, spacing, typography tokens precisely.
Combine MCPs for real power
> 1. Read the ProductCard frame in Figma
2. Confirm Tailwind v4 classes via Context7
3. Generate components/ProductCard.tsx
Three tools, one flow.
Other useful MCPs
@modelcontextprotocol/server-fetch— fetch any URL@playwright/mcp— browser automation@modelcontextprotocol/server-postgres— PostgreSQL queries@modelcontextprotocol/server-memory— persistent memorymcp-server-google-calendar— schedule lookup
Try it
Register Context7 and ask "give me React 19 Compiler safe-hook patterns — use context7". Watch for cited fresh docs.
Going deeper
Next
Final step 6 — composing into workflows.