github/penpot-mcp
1
0
Fork 0
mirror of https://github.com/penpot/penpot-mcp.git synced 2026-04-25 11:18:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6 from penpot/feat/improve-shape-and-image-searching

Browse Source 
Improve shape and image searching prompts
This commit is contained in:
Dominik Jain 2025-11-05 22:51:12 +01:00 committed by GitHub
commit 4fe601f0f1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 26 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
mcp-server/data/prompts.yml
View File

@ -42,7 +42,7 @@ initial_instructions: |
* 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 is not part of the official API). It provides:
CRITICAL: The `penpotUtils` object provides essential utilities - USE THESE INSTEAD OF WRITING YOUR OWN:
* getPages(): { id: string; name: string }[]
* getPageById(id: string): Page | null
* getPageByName(name: string): Page | null
@ -54,4 +54,29 @@ initial_instructions: |
If no root is provided, search globally (in all pages).
* findShapes(predicate: (shape: Shape) => boolean, root: Shape | null = null): Shape[]
General pointers for working with Penpot designs:
* Prefer `penpotUtils` helper functions — avoid reimplementing shape searching.
* To get an overview of a single page, use `penpotUtils.shapeStructure(page.root, 3)`. Note that `penpot.root` refers to the current page only. When working across pages, first determine the relevant page(s).
* Use `penpotUtils.findShapes()` or `penpotUtils.findShape()` with predicates to locate elements efficiently.
Common tasks - Quick Reference (ALWAYS use penpotUtils for these):
Find all images (including shapes with image fills):
const images = penpotUtils.findShapes(
shape => shape.type === 'image' || shape.fills?.some(fill => fill.fillImage),
penpot.root
);
Find text elements:
const texts = penpotUtils.findShapes(shape => shape.type === 'text', penpot.root);
Find shapes by name:
const shape = penpotUtils.findShape(shape => shape.name === 'MyShape');
Get structure of current selection:
const structure = penpotUtils.shapeStructure(penpot.selection[0]);
Find shapes in current selection/board:
const shapes = penpotUtils.findShapes(predicate, penpot.selection[0] || penpot.root);
You have hereby read the 'Penpot High-Level Overview' and need not use a tool to read it again.