中

MCP Protocol in Practice: Converting Figma to Code with CodeBuddy

MCP Protocol, CodeBuddy, Figma —

I finally found time last weekend to fully experience CodeBuddy’s MCP feature for converting Figma designs to runnable code.

First, the conclusion: Better than expected, but still far from ‘one-click deployment.’ This tool works better as a starting point than an endpoint.

What is MCP Protocol?

If you haven’t heard of MCP (Model Context Protocol), here’s a quick explanation: It’s an open protocol by Anthropic that lets AI models safely connect to external tools and data sources.

Analogy: Previous AI models were like people locked in a room—only answering based on training data. With MCP, they can look through windows to see the outside world, even reach out and interact with things.

CodeBuddy is the first Chinese AI coding tool with full MCP support—that’s why I chose it for testing.

Preparation

Before starting, you’ll need:

  1. A Figma account and share link to the design you want to convert
  2. CodeBuddy IDE (I used version 4.3)
  3. Some patience—it’s new tech, expect some bumps

Configuring MCP Server

First step: Configure Figma’s MCP Server in CodeBuddy. Open settings, find MCP config, add Figma’s server.

One pitfall here: Figma’s API token permissions are strict. Make sure the token has access to the target file. I wasted half an hour my first time because of insufficient permissions.

The Conversion Process

Once configured, start converting. I picked a relatively simple landing page design—Hero section, feature cards, CTA buttons, common elements.

In CodeBuddy’s Craft agent, I entered this prompt:

‘Based on Figma design [link], generate corresponding React code using Tailwind CSS, component structure, responsive layout.’

Then waited. Craft took about 2-3 minutes. I could see it ‘thinking’—first analyzing Figma file structure, then planning code organization, finally generating specific code.

Results Assessment

The generated code structure was reasonable. Component separation was clear, style class naming followed conventions. Layout-wise, desktop and mobile adaptation was basically correct.

But there were areas needing manual adjustment:

First, colors. Figma used brand color variables, but generated code had hardcoded hex values. Definitely needs changing for real projects.

Second, interaction details. Hover effects and animations from the design were implemented but felt stiff—not smooth enough.

Finally, image assets. Figma images were exported, but path handling needed manual adjustment.

My Takeaways

After this exercise, I have a clearer picture of MCP+AI coding:

It does significantly boost development efficiency, but it’s about ‘empowering developers,’ not ‘replacing developers.’

Specifically, these tools excel at:

  1. Rapid prototyping. Want to quickly see how an idea looks? No need to write boilerplate code manually.
  2. Learning reference. Generated code structure is educational, especially for unfamiliar framework patterns.
  3. Repetitive work. Batch converting old designs to new framework code, for example.

But currently unsuitable for:

  1. Direct production deployment without review.
  2. Automatic implementation of complex interaction logic.
  3. Scenarios with extreme performance requirements.

Pitfalls Logged

Recording some pitfalls I hit, hoping they help:

  1. Figma layer naming needs to be consistent, or AI struggles to understand.
  2. Complex components (with many variants) are better simplified before conversion.
  3. Always check responsive layout after generation—sometimes large screen adaptation has issues.
  4. Code style can be specified in prompts; defaults may not match your project conventions.

Overall, I’m optimistic about MCP protocol + AI coding. It’s not perfect yet, but improving fast. For frontend engineers, getting familiar with these tools early is definitely worthwhile.

After all, tools serve people. Those who master tools always have an advantage over those who just grind away.

Related Posts