mcp-server-guide

Provide the best context for your design intent, so the MCP and your AI assistant can generate code that's clear, consistent, and aligned with your system.

• Use components for anything reused (buttons, cards, inputs, etc.)
• Link components to your codebase via Code Connect. This is the best way to get consistent component reuse in code. Without it, the model is guessing.
• Use variables for spacing, color, radius, and typography.
• Name layers semantically (e.g. CardContainer, not Group 5)
• Use Auto layout to communicate responsive intent.

[!TIP] Resize the frame in Figma to check that it behaves as expected before generating code.

• Use annotations and dev resources to convey design intent that's hard to capture from visuals alone, like how something should behave, align, or respond.

• The Figma MCP server provides an assets endpoint which can serve image and SVG assets
• IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
• IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
• IMPORTANT: do NOT use or create placeholders if a localhost source is provided

#### General quality rules

• IMPORTANT: Always use components from /path_to_your_design_system when possible
• Prioritize Figma fidelity to match designs exactly
• Avoid hardcoded values, use design tokens from Figma where available
• Follow WCAG requirements for accessibility
• Add component documentation
• Place UI components in /path_to_your_design_system; avoid inline styles unless truly necessary

Adding these once can dramatically reduce the need for repetitive prompting and ensures that teammates or agents consistently follow the same expectations.

Be sure to check your IDE or MCP client's documentation for how to structure rules, and experiment to find what works best for your team. Clear, consistent guidance often leads to better, more reusable code with less back-and-forth.

### Break down large selections

Break screens into smaller parts (like components or logical chunks) for faster, more reliable results.

Large selections can slow the tools down, cause errors, or result in incomplete responses, especially when there's too much context for the model to process. Instead:

1. Generate code for smaller sections or individual components (e.g. Card, Header, Sidebar)
2. If it feels slow or stuck, reduce your selection size

This helps keep the context manageable and results more predictable, both for you and for the model.

If something in the output doesn't look quite right, it usually helps to revisit the basics: how the Figma file is structured, how the prompt is written, and what context is being sent. Following the best practices above can make a big difference, and often leads to more consistent, reusable code.