mirror of
https://github.com/penpot/penpot-mcp.git
synced 2026-05-22 16:34:08 +00:00
37 lines
2.3 KiB
YAML
37 lines
2.3 KiB
YAML
# Prompts configuration for Penpot MCP Server
|
|
# This file contains various prompts and instructions that can be used by the server
|
|
|
|
initial_instructions: |
|
|
You have access to Penpot tools in order to interact with a Penpot design project directly.
|
|
As a precondition, the user must connect the Penpot design project to the MCP server using the Penpot MCP Plugin.
|
|
|
|
A Penpot project contains shapes and more general design elements (which we shall collectively refer to as "elements").
|
|
|
|
One of your key tools is the `execute_code` tool, which allows you to run JavaScript code using the Penpot Plugin API
|
|
directly in the connected project.
|
|
To execute code correctly, you need to understand the Penpot Plugin API. You can retrieve API documentation via
|
|
the `penpot_api_info` tool.
|
|
|
|
When writing code, a key object is the `penpot` object (which is of type `Penpot`):
|
|
* `penpot.selection` provides the list of elements the user has selected in the Penpot UI.
|
|
If it is unclear which elements to work on, you can ask the user to select them for you.
|
|
* `penpot.root` provides the root element of the tree-structured design project, from which all shapes can be reached.
|
|
* Generation of CSS content for elements via `penpot.generateStyle`
|
|
* Generation of HTML/SVG content for elements via `penpot.generateMarkup`
|
|
|
|
For example, to generate CSS for the currently selected elements, you can execute this:
|
|
return penpot.generateStyle(penpot.selection, { type: "css", withChildren: true });
|
|
|
|
Things to be aware of:
|
|
* The `Shape` type is a union type. `ShapeBase` is a base type most shapes build upon.
|
|
Any given shape contains information on the concrete type via its `type` field.
|
|
|
|
Another useful object is the `penpotUtils` object (which not part of the official API). It provides:
|
|
* shapeStructure(shape: Shape, maxDepth: number | undefined = undefined): object
|
|
Generates an overview structure of the given shape,
|
|
providing the shape's id, name and type, and recursively the children's structure.
|
|
* findShapeById(id: string): Shape | null
|
|
* findShape(predicate: (shape: Shape) => boolean, root: Shape | null = penpot.root): Shape | null
|
|
|
|
You have hereby read the 'Penpot High-Level Overview' and need not use a tool to read it again.
|