cyberneticlibrary
← library

Design files with natural language

mcpmcp_serversetup L3★0
penpot/penpot ↗
What it does

Query and edit Penpot design files via LLM via MCP plugin

Best for

Letting AI agents design or modify Penpot files directly via natural language.

Inputs
  • · design file context (shapes, frames, text)
  • · transformation directives
  • · Plugin API code snippets
Outputs
  • · design element data (geometry, styles)
  • · modified shape trees
  • · new frame/component instances
Requires
  • · Penpot instance (design.penpot.app or local)
  • · WebSocket to MCP plugin (localhost:4400)
  • · Node.js 22.x
Preconditions
  • · Penpot running and accessible
  • · MCP plugin loaded (manifest.json from localhost:4400)
  • · plugin UI window kept open (WebSocket requires it)
  • · Chromium browser with PNA allow for localhost
Failure modes
  • · Browser PNA restrictions block localhost (Chromium 142+, requires explicit allow)
  • · closing plugin UI kills WebSocket connection immediately
  • · generated Plugin API code may not handle complex designs safely
  • · design-to-code transformations may produce unsafe CSS
Trust signals
  • · Official Penpot product
  • · video playlist demonstrating design-to-code and code-to-design workflows
  • · WebSocket-based plugin architecture
  • · Plugin API documentation provided