Right now, AI solutions and tools aren't the best choice if you want to build a well-scaling app, but they can be super helpful in speeding up the whole process. One area you can automate is building the user interface. Today I'll describe how we at Evojam help move projects from Figma to app code.

MCP Protocol

Model Context Protocol (MCP) is a protocol that standardizes how apps provide context to language models. Simply put, it works as a middleman, translating responses from apps into language that the language model can understand.

Using MCP, we can connect a code editor like Cursor with Figma, so the AI Agent gets direct access to the app project or website. This lets us generate much more accurate interfaces than we could from just a screenshot.

To use the protocol in Cursor, you first need to add it in the options. Go to Tools & Integrations > Add Custom MCP. A config file called mcp.json will open where you paste:

{
  "mcpServers": {
    "Figma MCP": {
      "command": "pnpm",
      "args": [
        "dlx",
        "figma-developer-mcp",
        "--figma-api-key=[figma-key]",
        "--stdio"
      ]
    }
  }
}

Replace the phrase [figma-key] with the access key generated in Figma. For MCP to have access to a specific design, you need to have editor role on it, otherwise Figma will return an error.

After all this, in the options you should see something like this:

How to use it?

We'll try to recreate an example login page. After going through the link, open the project in Figma and copy the link to the desktop version of the form.

Having already created an empty project using React open the chat tab in Cursor and type a prompt that includes the copied link (the Agent can also create a project). In my case, it looks like this:

Create this login page: [link]

As you can see, it doesn't have to be elaborate at all, but providing context can make sure we get better results. My example isn't complicated, so this is enough. After all this, we start generating the form...

And here's the result... as you can see, even the image and icons were pulled in.

Is this the perfect solution?

No, it's definitely not the perfect solution, because language models aren't deterministic and there's model hallucination. This means:

  • The same prompt can give different results on subsequent runs
  • Models can "make up" elements that don't exist in the original design
  • They can "forget" about specific page elements
  • They might struggle with complex designs, especially when the page has many elements and complex structure
  • Models often skip the need to separate code into individual components and dump everything into one file

The best approach to get the best results is experimenting with different language models, with prompts, to find a configuration that handles the specific task best:

For complex designs it's best to break the page into several prompts that generate components one by one:

  • Generate the main structure first (header, main, footer)
  • Then add individual sections (hero, features, testimonials)
  • Finally polish the details and styles
  • Combine components into a whole in a separate step

The general workflow process with this tool should look like this:

  1. Test different models - compare results between Claude, GPT, Gemini, etc.
  2. Adjust prompts - different models might respond better to different ways of formulating instructions
  3. Iterate and improve - use the generated code as a starting point, not a finished solution
  4. Validate results - always check if the generated code matches the original design

How to get even better results

One of the most effective ways to improve generation results is using Cursor Rules - a feature that lets you attach context about the current project to the AI agent. This gives the model access to:

  • Technologies used in the project - framework (React, Vue, Angular), CSS libraries (Tailwind, Bootstrap), bundlers, etc.
  • Project structure - where UI components, styles, assets, configurations are located
  • Naming conventions - how to name files, components, CSS classes
  • Architecture - folder organization, design patterns, coding standards
  • Dependencies - what packages are available, technology versions

More info about Cursor Rules: https://docs.cursor.com/en/context/rules

Just like with the prompt itself, you need to experiment with Cursor Rules to get the best results. I managed to make the agent detect which Shadcn library components are already in the project and only install the missing ones to generate a specific piece of interface.

Summary

Figma MCP and the agent in Cursor are great tools for generating code, but right now you need to check their results and iteratively improve them. Despite this, they allow for significant speedup in the user interface building process, especially when you write good Cursor Rules.

The MCP protocol opens new possibilities in automating interface creation processes, allowing direct use of Figma projects in the coding process. While it's not the perfect solution and requires verification, it's a significant step forward in speeding up web app development.