Integrate Figma MCP and Shadcn MCP to build UI

@ User Interface

Introduction

UI often relies on designers and front-end developers spending significant time and effort on organization and maintenance. Recently, with frontend rebuild, we encountered a lot of outdated code that needs to be replaced. But who has the time to replace them individually?

As developers, we usually both lazy and smart. By integrating Figma MCP with Shadcn MCP Server, we can precisely build frontend interfaces through chat with AI.

Figma MCP

Currently, the local Figma software🔗 provides a beta MCP Server🔗 feature, which is very easy to set up in just three steps!

  1. Preferences > Enable Dev Mode MCP Server🔗
  2. Set up your MCP client🔗
  "mcpServers": {
    "Figma Dev Mode MCP": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
  1. Start a Prompt! For example:
Take the selected frame in Figma and convert it to a website layout using HTML and tailwind CSS

With the above steps, you can generate usable interface code directly from Figma through conversations with AI. It’s best to pay attention to the Figma MCP best practices🔗:

  1. Use components for any element that needs to be reused (e.g., buttons, cards, input fields, etc.).
  2. Connect components to the code base through Code Connect🔗. This is the best way to ensure that components are reused consistently across the code. Without doing this, the model can only make guesses.
  3. Use variables to set spacing, colors, borders, and fonts.
  4. Use semantic naming for layers (e.g., use CardContainer, not Group 5).
  5. Use Auto layout🔗 to express the intent of responsive design.

If you need to remind AI how to better use Figma MCP repeatedly, the official documentation also provides general example 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

Often, building a usable design system from scratch is not practical, so I chose Shadcn as the most mature, fastest, and free open-source solution next.

Shadcn MCP

Shadcn is currently the most popular open-source component library in the frontend, supporting various mainstream frameworks (React, Vue, Svelte). By using Shadcn MCP🔗, you can provide AI with the appropriate tools to quickly build the corresponding framework components. It’s best to include a GitHub Token🔗, as the Shadcn MCP retrieves relevant component data through the GitHub API, and providing it is necessary to avoid rate limiting due to frequent queries.

  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": [
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "ghp_your_token_here"
      ]
    }
  }

The official documentation also provides example Prompts🔗 for interaction, such as:

"Show me the shadcn/ui button component"
"Show me how to use the card component"
"Get the dashboard-01 block implementation"
"Help me build a login form using shadcn/ui components"

Combining Figma, Shadcn, and AI Interaction

Once the development environment is set up with Figma MCP and Shadcn MCP, you can use appropriate commands and operations to call MCP’s tools and context from AI for better and more consistent UI creation:

Take the selected frame in Figma and covert it to a website layout using Shadcn vue as much as possable, modify content in baz.vue

For example, by incorporating ready-made Figma components and variables: @shadcn/ui components with variables & Tailwind classes - Updated July 2025🔗 allows for quickly crafting the product’s visuals and aligning all used UI variables and common components with the frontend. With Figma MCP + Shadcn MCP, you can use existing component libraries or visual variables while coding, encouraging the reuse of component logic and the adoption of existing solutions.

Conclusion

It turns out that maintaining a design system and frontend components can be impractical for small teams. If the frontend can focus its time on planning the commercial aspects of the product and user experience, while AI learns to refer to defined best practices, we will be able to free up productivity to do more meaningful things.

There are still many details that can be improved, such as if the Figma implementation is unclear, the generated code will also be poor, along with the writing of automated test cases.

At first glance, it seems impressive to connect everything together and create good results, but in practice, AI often makes foolish mistakes. This technology is worth trying, but its practical application still requires experimentation and observation…

Further Reading