What it does
The Penpot MCP server connects Claude to your Penpot design files and projects, making design specifications readable and actionable as code. It enables bidirectional workflows between design and code by exposing design files, tokens, and project metadata through the Model Context Protocol. The server works with Penpot's open API to let Claude query design systems, extract tokens, analyze design files (expressed in open standards like SVG, CSS, and HTML), and assist in automating design-to-code pipelines.
Who it's for
Product engineers and design system maintainers using Penpot who want Claude to understand, analyze, or help generate code from their designs. Teams practicing co-design workflows where design tokens and specifications need to stay in sync with code, or where design-driven development benefits from AI assistance in translation and automation.
Common use cases
- Query design tokens from a Penpot project to keep code stylesheets synchronized with design truth
- Extract SVG or CSS specifications from design files for code generation or documentation
- Analyze design system consistency across multiple files and components
- Automate design-to-code workflows by having Claude interpret design specs and generate boilerplate
- Generate responsive HTML/CSS from design layouts using design tokens as source data
Setup pitfalls
secrets_found: 1— this server requires API credentials (likely a Penpot API token). Store credentials in.envand never commit them.- Filesystem write access — ensure the MCP server process has appropriate read/write permissions to design file directories; overly broad permissions are a security risk.
- Network connectivity — the server makes calls to Penpot (cloud instance or self-hosted). Firewall rules and authentication token expiry can silently break connections.
- Penpot API version drift — self-hosted Penpot instances may lag behind the cloud API. Verify your Penpot version matches the MCP server's API expectations.