From 4353f673223d405eac6ca49b8c98faff0a3c3da4 Mon Sep 17 00:00:00 2001 From: Dominik Jain Date: Wed, 14 Jan 2026 21:29:02 +0100 Subject: [PATCH] Move 'Executing Code' section to the top --- mcp-server/data/prompts.yml | 47 +++++++++++++++++++++---------------- 1 file changed, 27 insertions(+), 20 deletions(-) diff --git a/mcp-server/data/prompts.yml b/mcp-server/data/prompts.yml index dea3731..addfbea 100644 --- a/mcp-server/data/prompts.yml +++ b/mcp-server/data/prompts.yml @@ -9,6 +9,18 @@ initial_instructions: | NEVER make assumptions about missing values and don't get overly creative (e.g. don't pick your own colours and stick to non-creative defaults such as white/black if you are lacking information). + # Executing Code + + 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. + + VERY IMPORTANT: When writing code, NEVER LOG INFORMATION YOU ARE ALSO RETURNING. It would duplicate the information you receive! + + To execute code correctly, you need to understand the Penpot Plugin API. You can retrieve API documentation via + the `penpot_api_info` tool. + + This is the full list of types/interfaces in the Penpot API: $api_types + # The Structure of Penpot Designs A Penpot design ultimately consists of shapes. @@ -18,15 +30,13 @@ initial_instructions: | Each `Page` contains a tree of elements. For a given instance `page`, its root shape is `page.root`. A Page is frequently structured into boards. A `Board` is a high-level grouping element. A `Group` is a more low-level grouping element used to organize low-level shapes into a logical unit. - Actual low-level shape types are `Rectangle`, `Path`, `Text`, `Ellipse`, `Image`, `Boolean`, and `SvgRaw`. + Actual low-level shape types are `Rectangle`, `Path`, `Text`, `Ellipse`, `Image`, `Boolean`, and `SvgRaw`. + `ShapeBase` is a base type most shapes build upon. ## Core Shape Properties - * The `Shape` type is a union type. `ShapeBase` is a base type most shapes build upon. + **Type**: Any given shape contains information on the concrete type via its `type` field. - * The `Image` type is a legacy type. Images are now typically mostly embedded in a `Fill` with `fillImage` set to an - `ImageData` object, i.e. the `fills` property of of a shape (e.g. a `Rectangle`) will contain a fill where - `fillImage` is set. **Position and Dimensions**: * The location properties `x` and `y` refer to the top left corner of a shape's bounding box in the absolute (Page) coordinate system. @@ -59,7 +69,16 @@ initial_instructions: | - Absolute x/y positions are preserved (parentX/parentY will change to reflect new parent) - You may need to adjust absolute x/y after reparenting to achieve desired visual layout - ## Layout Systems + # Images + + The `Image` type is a legacy type. Images are now typically mostly embedded in a `Fill` with `fillImage` set to an + `ImageData` object, i.e. the `fills` property of of a shape (e.g. a `Rectangle`) will contain a fill where `fillImage` is set. + + # Visual Inspection of Designs + + For many tasks, it can be critical to visually inspect the design. Remember to use the `export_shape` tool for this purpose! + + # Layout Systems Boards can have layout systems that automatically control the positioning and spacing of their children: @@ -80,7 +99,7 @@ initial_instructions: | - Modify layout properties (gaps, padding) instead of trying to set child x/y positions directly - Layout systems override manual positioning of children - ## Semantic Containment vs Hierarchical Nesting + # Semantic Containment vs Hierarchical Nesting Understanding the difference between hierarchical structure and visual containment is critical: @@ -104,7 +123,7 @@ initial_instructions: | (child.y + child.height) <= (parent.y + parent.height); ``` - ## Text Elements + # Text Elements Text shapes have specific characteristics: * Text elements may have baseline alignment constraints that affect positioning @@ -112,18 +131,6 @@ initial_instructions: | * When precise spacing is needed between text elements, consider using flex layouts with `rowGap` * Text content is accessed via the `characters` property - # Executing Code - - 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. - - VERY IMPORTANT: When writing code, NEVER LOG INFORMATION YOU ARE ALSO RETURNING. It would duplicate the information you receive! - - To execute code correctly, you need to understand the Penpot Plugin API. You can retrieve API documentation via - the `penpot_api_info` tool. - - This is the full list of types/interfaces in the Penpot API: $api_types - # The `penpot` and `penpotUtils` Objects, Exploring Designs A key object to use in your code is the `penpot` object (which is of type `Penpot`):