Penpot MCP: Inspecting a Live Design File Without n8n
Photo by Berciu Emanuel on Unsplash
Claude Code now talks directly to Penpot via MCP — pulling tokens, frame structure, and component trees from a live file without routing through n8n.
Phase 5b opened with a question: does the bidirectional Penpot connection need n8n in the middle, or can Claude Code talk to Penpot directly? Answer: directly, via MCP.
The Penpot MCP server exposes the file API as tools Claude Code can call in an interactive session. I pointed it at the client design file and ran inspection queries — token values, frame hierarchy, component tree — without writing a single workflow node.
- penpot-mcp (MCP server)
- mcp config entry in claude_desktop_config.json
Setup was two parts: run the MCP server with the Penpot API token in env, then register it in Claude’s MCP config. The server handles auth and translates tool calls into Penpot REST requests.
What came back from the inspection:
- Design tokens (color, spacing, typography) as raw values — no plugin, no export step.
- Frame structure with IDs, names, and parent relationships.
- Component tree showing which frames reference shared components.
This track runs parallel to the n8n workflows planned for Phase 5b. MCP is the interactive inspection layer; n8n will handle scheduled sync and write-back once the token and component sync workflows are built.
What this unblocks: With live file inspection working, building the “Penpot Token Sync” workflow has a confirmed data shape to target. The MCP session output doubles as a spec for what the n8n workflow needs to read and write.