mirror of
https://github.com/penpot/penpot-mcp.git
synced 2026-04-25 11:18:37 +00:00
31 lines
1.6 KiB
YAML
31 lines
1.6 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 Penpot design projects directly.
|
|
As a precondition, the user must connect a Penpot 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 the key tools is the execute_code tool, which allows you to run JavaScript code using the Penpot Plugin API
|
|
directly in the connected project.
|
|
|
|
When writing code, a key object is the `penpot` object (which is of type `Penpot`). It provides useful functionality:
|
|
* `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.
|
|
* Generation of CSS content for elements:
|
|
generateStyle(shapes: Shape[], options?: {
|
|
type?: "css";
|
|
withPrelude?: boolean;
|
|
includeChildren?: boolean;
|
|
}): string;
|
|
* Generation of HTML/SVG content corresponding to elements:
|
|
generateMarkup(shapes: Shape[], options?: {
|
|
type?: "html" | "svg";
|
|
}): string;
|
|
|
|
For example, to generate CSS for the currently selected elements, you can execute this:
|
|
return penpot.generateStyle(penpot.selection, { type: "css", withChildren: true });
|
|
|
|
You have hereby read the 'Penpot High-Level Overview' and need not use a tool to read it again.
|