Skip to content
Vibma

Prompts

Vibma includes 5 built-in MCP prompts that provide best-practice guidance to AI agents.

design_strategy

Section titled “design_strategy”

Best practices for working with Figma designs

Full prompt text
Figma design best practices:


1. Discover First: document(method:"list"), styles(method:"list"), variables(method:"list") — know what exists before creating.


2. Design Tokens — Never Hardcode Colors:
   - Use fillStyleName/strokeStyleName (paint styles) or fillVariableName/strokeVariableName (variables)
   - Use textStyleName for typography. Only use raw fillColor/fontColor for one-off values.


3. Auto-Layout First:
   - frames(method:"create", type:"auto_layout") for containers, components(method:"create", type:"component") for reusable elements.
   - A component IS a frame — create it directly with layout/fill/stroke params, then add children. No need to create a frame first and convert.
   - layoutSizingHorizontal/Vertical: "FILL" for responsive children, "HUG" to shrink-wrap.


4. Naming: descriptive names for all elements. Property=Value pattern (e.g. "Size=Small") for variant components.


5. Lint After Every Section:
   - Run lint(method:"check") after building. Always attempt to fix warnings unless you understand the specific warning and it's intentional.
   - Each warning includes a fix instruction with the exact tool call to use — follow it.
   - Use lint(method:"fix") to auto-convert frames to auto-layout.
   - Lint early and often — cheaper to fix during creation than after.

read_design_strategy

Section titled “read_design_strategy”

Best practices for reading Figma designs

Full prompt text
When reading Figma designs, follow these best practices:


1. Start with selection:
   - First use selection(method: "get") to understand the current selection
   - If no selection ask user to select single or multiple nodes

text_replacement_strategy

Section titled “text_replacement_strategy”

Systematic approach for replacing text in Figma designs

Full prompt text
# Intelligent Text Replacement Strategy


## 1. Analyze Design & Identify Structure
- Scan text nodes to understand the overall structure of the design
- Use AI pattern recognition to identify logical groupings:
  * Tables (rows, columns, headers, cells)
  * Lists (items, headers, nested lists)
  * Card groups (similar cards with recurring text fields)
  * Forms (labels, input fields, validation text)
  * Navigation (menu items, breadcrumbs)
```
text(method: "scan", items: [{nodeId: "node-id"}])
frames(method: "get", id: "node-id", depth: 1)  // optional
```


## 2. Strategic Chunking for Complex Designs
- Divide replacement tasks into logical content chunks based on design structure
- Use one of these chunking strategies that best fits the design:
  * **Structural Chunking**: Table rows/columns, list sections, card groups
  * **Spatial Chunking**: Top-to-bottom, left-to-right in screen areas
  * **Semantic Chunking**: Content related to the same topic or functionality
  * **Component-Based Chunking**: Process similar component instances together


## 3. Progressive Replacement with Verification
- Create a safe copy of the node for text replacement
- Replace text chunk by chunk with continuous progress updates
- After each chunk is processed:
  * Export that section as a small, manageable image
  * Verify text fits properly and maintain design integrity
  * Fix issues before proceeding to the next chunk


```
// Clone the node to create a safe copy
frames(method: "clone", id: "selected-node-id", x: [new-x], y: [new-y])


// Replace text chunk by chunk
text(method: "set_content", items: [
  { nodeId: "node-id-1", text: "New text 1" },
  // More nodes in this chunk...
])


// Verify chunk with small, targeted image exports
frames(method: "export", nodeId: "chunk-node-id", format: "PNG", scale: 0.5)
```


## 4. Intelligent Handling for Table Data
- For tabular content:
  * Process one row or column at a time
  * Maintain alignment and spacing between cells
  * Consider conditional formatting based on cell content
  * Preserve header/data relationships


## 5. Smart Text Adaptation
- Adaptively handle text based on container constraints:
  * Auto-detect space constraints and adjust text length
  * Apply line breaks at appropriate linguistic points
  * Maintain text hierarchy and emphasis
  * Consider font scaling for critical content that must fit


## 6. Progressive Feedback Loop
- Establish a continuous feedback loop during replacement:
  * Real-time progress updates (0-100%)
  * Small image exports after each chunk for verification
  * Issues identified early and resolved incrementally
  * Quick adjustments applied to subsequent chunks


## 7. Final Verification & Context-Aware QA
- After all chunks are processed:
  * Export the entire design at reduced scale for final verification
  * Check for cross-chunk consistency issues
  * Verify proper text flow between different sections
  * Ensure design harmony across the full composition


## 8. Chunk-Specific Export Scale Guidelines
- Scale exports appropriately based on chunk size:
  * Small chunks (1-5 elements): scale 1.0
  * Medium chunks (6-20 elements): scale 0.7
  * Large chunks (21-50 elements): scale 0.5
  * Very large chunks (50+ elements): scale 0.3
  * Full design verification: scale 0.2


## Sample Chunking Strategy for Common Design Types


### Tables
- Process by logical rows (5-10 rows per chunk)
- Alternative: Process by column for columnar analysis
- Tip: Always include header row in first chunk for reference


### Card Lists
- Group 3-5 similar cards per chunk
- Process entire cards to maintain internal consistency
- Verify text-to-image ratio within cards after each chunk


### Forms
- Group related fields (e.g., "Personal Information", "Payment Details")
- Process labels and input fields together
- Ensure validation messages and hints are updated with their fields


### Navigation & Menus
- Process hierarchical levels together (main menu, submenu)
- Respect information architecture relationships
- Verify menu fit and alignment after replacement


## Best Practices
- **Preserve Design Intent**: Always prioritize design integrity
- **Structural Consistency**: Maintain alignment, spacing, and hierarchy
- **Visual Feedback**: Verify each chunk visually before proceeding
- **Incremental Improvement**: Learn from each chunk to improve subsequent ones
- **Balance Automation & Control**: Let AI handle repetitive replacements but maintain oversight
- **Respect Content Relationships**: Keep related content consistent across chunks


Remember that text is never just text — it's a core design element that must work harmoniously with the overall composition. This chunk-based strategy allows you to methodically transform text while maintaining design integrity.

swap_overrides_instances

Section titled “swap_overrides_instances”

Guide to swap instance overrides between instances

Full prompt text
# Swap Component Instance Overrides


## Overview
Transfer content overrides from a source instance to target instances.


## Process


### 1. Identify Instances
- Use `selection(method: "get")` to identify selected instances
- Use `frames(method: "list", types: ["INSTANCE"])` to find instances on the page


### 2. Extract Source Overrides
- `instances(method: "get", id: "source-instance-id")`
- Returns mainComponentId and per-child override fields (characters, fills, fontSize, etc.)


### 3. Apply to Targets
- For text overrides: use `text(method: "set_content")` on matching child node IDs
- For style overrides: use `frames(method: "update")` with fill/stroke/text/effects styleName fields
- Match children by name path — source and target instances share the same internal structure


### 4. Verify
- `frames(method: "get", id: "target-id", depth: 1)` on target instances
- `frames(method: "export", nodeId: "target-id")` for visual verification

missing_tools

Section titled “missing_tools”

Why create or edit tools are missing and how to fix it

Full prompt text
# Missing Create / Edit Tools


If the user asks you to create or modify something in Figma but you cannot find create/edit methods on endpoint tools, the MCP server was started without the correct access tier flag.


Vibma filters available methods at startup based on CLI flags passed in the MCP config `args` array:


| Flag | Methods available |
|------|-----------------|
| _(none)_ | Read-only (get, list, check, scan, export) |
| `--create` | Read + creation methods (create, clone) |
| `--edit` | All methods (read + create + update + delete) |


Ask the user to add `--edit` (or `--create`) to their MCP config args:


```json
{
  "mcpServers": {
    "Vibma": {
      "command": "npx",
      "args": ["-y", "@ufira/vibma@latest", "--edit"]
    }
  }
}
```


After updating, the user must restart their AI tool or reload MCP servers — stdio-based servers cannot hot-reload.