Penpot for design tools
Penpot is the open-source, self-hostable design platform, and its official MCP server lets an agent read and manipulate design files: overview the structure, inspect it, run plugin code, and export shapes. For design tools it is our third pick of four. Where it genuinely wins is independence from a proprietary cloud, if your designs live in a Penpot instance you run, an agent can work from the real file rather than a screenshot, without depending on a closed vendor.
That openness is also why it ranks where it does. Penpot's ecosystem and tooling are smaller than Figma's, so for most teams the Figma-based picks are the more direct path; Penpot is the right call specifically when self-hosting and open source are the requirement.
How Penpot fits
high_level_overview returns a structured read of the file or current page so the agent understands the layout, components, and structure before acting. penpot_api_info surfaces which plugin operations are available, and execute_code runs JavaScript against the file through the Penpot plugin, which is how the agent queries, edits, or creates design elements. export_shape renders a shape to an image, though with reduced capabilities in remote mode, and import_image brings an image in, with local-file-path import available only in local mode. The execute_code path is the flexible center: most design queries and edits route through it rather than a fixed per-operation tool.
The limits are worth stating. Several capabilities are gated by mode, export is reduced remotely and local-path image import is local-only, and working through a general code-execution tool means more setup than a purpose-built design-to-code reader. Figma is the stronger pick for the largest design ecosystem and direct file access, Framelink Figma MCP for an extraction layer tuned to turn Figma frames into code-ready context, and Canva when the job is content-and-asset design rather than product UI. Choose Penpot when an open, self-hosted design source is the deciding constraint.
Tools you would use
| Tool | What it does |
|---|---|
| high_level_overview | Return a structured high-level overview of the Penpot file or current page so the agent can understand its layout, components, and structure. |
| penpot_api_info | Surface the Penpot plugin API surface available to the agent, so it knows which operations it can run. |
| execute_code | Run JavaScript against the design file through the Penpot plugin, enabling queries, transformations, and creation of design elements. |
| export_shape | Render and export a shape from the design as an image (reduced capabilities in remote mode). |
| import_image | Import an image into the design. Importing from a local file path is available only in local mode. |
FAQ
- How does an agent read and edit a Penpot design through this server?
- high_level_overview gives it the file's structure, penpot_api_info lists the available plugin operations, and execute_code runs JavaScript against the file to query, edit, or create elements. export_shape renders shapes to images and import_image brings images in.
- Are any features limited depending on how I run it?
- Yes. export_shape has reduced capabilities in remote mode, and import_image can read a local file path only in local mode. Running a self-hosted local instance gives you the fuller capability set.
- When should I pick Figma instead?
- When you are not committed to open source or self-hosting. Figma has the larger ecosystem and direct file access, and Framelink Figma MCP is tuned for turning Figma frames into code-ready context. Penpot wins specifically when an open, self-hosted source is required.