How to write high-quality MCP prompts for Figma

The advantage of integrating Cline + MCP + Figma lies in the AI's autonomous operation. Once initiated, the system works independently in the background, freeing you to focus on other critical tasks like preparing design revision briefs, conducting research, or coding while the AI executes your design requirements in Figma.

Examples of What Cline + MCP + Figma Is Great At:

• Great at designing UI based on a design guideline from an .md link

• Great at performing UX/UI audits, analyses, or reviews, and suggesting improvements (optionally based on an aesthetics guide)

• Converting full designs to dark mode

• Designing full components by spec with aesthetic instructions

• Improving existing module designs

• Creating alternative designs for existing components; e.g., "Show me 3 variations of this."

• Converting websites from desktop to mobile formats

• Making widespread changes, such as changing all fonts to Helvetica, etc.

• Converting UI to accommodate new devices (e.g., Mobile -> iPad -> macOS)

• Changing overall aesthetics for complete existing designs; e.g., "Convert this to Google aesthetics," or brand guide, etc.

• Creating multiple variations of the same design for various device sizes, great for app-store screenshots

• Recreating a layout based on an image of a layout

The action flow:

1. Let the AI spec up the rough design based on requirements

2. The AI improves the design

3. The AI applies a predefined aesthetic or brand guide

4. Some more AI tweaks and some final human edits

The steps for each action

1. Start with a design brief.

   • Explain at a high level how this will look

   • Drill down into design details for each component, but keep it brief; we want the AI to add creativity

   • Add any overall instructions like aesthetics best practices, etc.

2. Use ChatGPT/Claude to improve the high-level brief.

3. Paste into Cline so it can process the prompt and control Figma (toggle plan first, then act).

Why Designing the Prompt Well Matters

• The quality of your prompt directly influences the quality of the AI's output—well-crafted prompts significantly increase your chances of receiving excellent results.

• The art lies in finding the right balance: provide clear direction while intentionally leaving some aspects open-ended, allowing the AI to apply your desired aesthetic principles while exercising its own creativity.

• This approach often leads to discovering unexpected ideas and solutions you might not have considered otherwise. So try varying how you instruct on a macro and micro level. Human-in-the-loop FTW 🚀

Asset Management

• You can ask Cline to download .svg assets to your download folder if you provide it with SVG URLs. From there, you can place these in Figma for Cline to operate on later.

• Implement strategic naming conventions for SVGs to ensure precise placement—when targeting specific frames (such as placing an icon in a "fast" frame), instruct ChatGPT to align file names accordingly (e.g., "fast.svg") to enable accurate automated positioning by Cline + MCP

Safeguards and AI Guardrails

• Exercise caution when using the undo function after completing a task—it reverts all changes made during that task, and the ability to redo these changes may be limited

• Implement regular version checkpoints by saving your Figma file between significant tasks: File > Save to Version History (Mac: ⌘ Command + ⌥ Option + S, Windows: Ctrl + Alt + S)

• If there is a mistake, toggle into plan mode in Cline and continue in the chat. Explain the mistake and propose a remedy to correct it. Toggle to act mode if you agree with the plan.

Prompt Design Tips

• For complex situations, use the Claude Desktop App with Claude 3.7 Sonnet or OpenAI O1 or O3 models

• Begin every prompt with the command "Use Figma. Connect on channel '428rhf4'" to establish the proper connection

• Enhance context by referencing selected Figma elements with "In Figma. Use the current selection."

• Incorporate weblinks to inspirational images, which will be analysed and integrated into the AI's understanding

• Structure your request with the hierarchical organization by nesting sub-goals using indented ordered or unordered lists

• Leverage baseline prompt instructions in Cline settings for consistent results (reference example for Senior UX/UI Design Specialist: https://gist.githubusercontent.com/eonist/fc3ae41d70d38af42db462015fece5a2/raw/Shadcn_UI_Aesthetic_Principles.md) Cline will then download the instructions in the VSCode terminal

Example of UI/UX Analysis / Review / Audit

Add this in plan mode first, then toggle to act.

- We will do a UX/UI Audit / Analysis / Review.
- Based on aesthetics guide https://gist.githubusercontent.com/eonist/fc3ae41d70d38af42db462015fece5a2/raw/Shadcn_UI_Aesthetic_Principles.md
- Please play the role described here: "Senior UX/UI Design Specialist" https://gist.githubusercontent.com/eonist/81a138cdb88941478e30bf9890de6918/raw/Senior_UX_UI_Design_Specialist.md
- The task is to create a written report with improvements to the design presented in Figma based on your findings. We will use this report later to make design refactorings.
- Make sure you connect with Figma via TalkToFigma MCP on channel: 84hfsdj so you can look at the current design

Recreating a Layout Based on an Image

• Drag and drop an image to pplx.ai, Claude Desktop, or ChatGPT, or preferably use the image function in Cline and prompt it with:

• Prompt: Can you describe this picture in detail—its elements, layout, and aesthetics? Add as much detail as possible because we will recreate it in Figma.

• This will return a detailed brief that we can use in Cline to recreate a layout. Use the plan mode first. Prompt: With that brief, make a plan to design this in Figma, make sure you reference this image while your working, so that it matches more or less. Then select the inspiration image to include in the new prompt. Cline will then do a final check and add any missing bits to the plan. Now, toggle to act mode to execute the instructions in Figma.

Here is a more elaborate description prompt:

**Could you provide a comprehensive, detailed description of this UX/UI interface? Please include:**

- **Overall Layout:**  
  - Structure (e.g., header, sidebar, main content, footer)  
  - Grid system or alignment used  
  - Spacing and padding between elements

- **UI Elements:**  
  - List and describe all components (buttons, input fields, dropdowns, icons, images, cards, etc.)  
  - For each, specify size, shape, color, and placement  
  - Note any groupings or hierarchies

- **Typography:**  
  - Fonts used (family, size, weight, color)  
  - Hierarchy (headings, subheadings, body text, captions)  
  - Alignment and spacing

- **Color Scheme:**  
  - Primary, secondary, and accent colors  
  - Background colors and gradients  
  - Color usage for states (active, hover, disabled, etc.)

- **Imagery and Icons:**  
  - Style (flat, outline, filled, etc.)  
  - Size and placement  
  - Any special effects (shadows, borders, etc.)

- **Interactions and States:**  
  - Describe hover, active, selected, and disabled states for interactive elements  
  - Indicate any animations or transitions

- **Aesthetic and Visual Style:**  
  - Overall tone (modern, minimalist, playful, corporate, etc.)  
  - Use of white space  
  - Consistency and visual rhythm

- **Other Notable Details:**  
  - Any microinteractions, tooltips, or overlays  
  - Accessibility considerations (contrast, font size, etc.)

*Please be as specific and thorough as possible, as this description will be used to accurately recreate the interface in Figma.*

Gotchas

• Plan mode can't download stuff (supposedly), so just make sure that in plan mode, you include what the act mode needs to download.

• Work in isolation. A great flow is to create a Figma file named "playground" and reset its content for each task. This reduces the need to parse existing Figma content. This way, you spend fewer tokens.

• If Cline is unable to connect for any reason, copy and paste the MCP configuration along with the MCP channel ID into Cline. This should restore connectivity. Make sure the server is active and toggled “on” in the Cline configuration. Also, ensure that the Figma plugin is connected to the Figma file you are working on.

• Sonnet 3.7 is the best model for refactoring and mocking up UI. However, using OpenAI’s cheaper GPT-4.1 Mini or Nano for smaller tasks-such as quick, simple bulk work like changing strokes. This helps reduce costs.

• Careful about using GPT 4.5. It is way to expensive for this. Use o3 Mini instead of GPT 4.1.

• Sonnet 3.7 is faster at night in Europe. after 2-3 AM and is slowest during working hours. This makes a huge difference, as you can complete designs 3-4x faster at night. Night owls FTW 🦉

• If Cline fails to connect to Figma during design analysis in Plan mode and requests switching to Act mode, respond with: 'NO - maintain connection to Figma channel "xxxxxx" and analyse the current design immediately.' This typically forces Cline to establish the connection without mode switching, enabling real-time analysis for optimized execution planning.

Resources

• AI design prompt templates: https://gist.github.com/eonist/166bf55c1c61b99d5712e826c6df0d15

• Design process essentials: https://gist.github.com/eonist/db3ed36d2faf4c6a94eada4dddf6a392

• Vibe Designing with Cline + MCP + Figma: https://eoncodes.substack.com/p/vibe-designing-with-cline-mcp-figma