Motiff MCP – Stream Design Data into Your IDE to Code with AI

Help Center/Develop Mode/Motiff MCP Server

The Motiff MCP server supports reading design data via the API, which can be integrated into local IDEs to code with AI.

The MCP Server is available in Develop Mode.

About MCP

The Model Context Protocol (MCP) is an open protocol that standardizes the way applications supply context and tools to large language models (LLMs). You can think of MCP as a plugin system for the AI client, enabling you to enhance the Agent’s functionality by linking it to diverse data sources and tools via standardized interfaces.

MCP follows a client-server architecture:

• MCP clients (like Cursor, VS Code) connect to MCP servers and request actions on behalf of the AI model.
• MCP servers (like Motiff MCP) are lightweight programs that offer specific capabilities via the standardized protocol. They serve as intermediaries, connecting AI clients to external tools or data sources.
• The Model Context Protocol (MCP) defines the message format for communication between clients and servers.

Use Motiff MCP Server

Note: Make sure Node.js is installed locally with a version of 18 or higher to ensure MCP runs properly.

1. 1.

   Integrate Motiff MCP Server into IDE.

   1. a.Open the Motiff file and toggle the Develop Mode switch or use the shortcut ⇧ Shift + D.
   2. b.Click Main menu - Help and account - Motiff MCP Server to view the configuration methods for different IDEs.

   Tip: If MCP doesn't run as expected after configuration, try restarting your IDE.

2. 2.

   Open your IDE's chat.

3. 3.

   Paste a link to a Motiff‘s frame.

4. 4.

   Provide instructions related to the Motiff frame, such as:

   • Help me create a React project.
   • Help me create a new component in the components directory based on this design.
5. 5.

   The AI client will automatically use Motiff MCP Server to retrieve the relevant design data from Motiff, and use it to write the code.

FAQ

1. 1.

   What format is the design data provided by Motiff?

   Motiff MCP Server supports exporting HTML data via API. Compared to the JSON data of design, the HTML format allows LLMs to better understand the interface design and generate code with high fidelity.

2. 2.

   Why does the generated code sometimes differ from the design content?

   The generated code may differ from the design content due to complex designs, layer numbers, AI coding tool data processing, and capabilities of large language models⁠⁠.

   • Complexity of the design
     • Cause: Design that have undergone complex editing operations may not be well-represented. For such designs, the exported HTML may not fully restore the design. Besides, to restore the design as accurately as possible, Motiff’s exported HTML uses absolute units in styles. For complex frames, current AI capabilities may not effectively adjust them into a responsive design.
     • Solution: You may also try narrowing the export scope to optimize this issue.
   • Number of layers
     • Cause: Frame with too many layers may exceed the context length that large models can handle, which can result in some content not being accurately reconstructed.
     • Solution: You can try reducing the range of layers being exported to avoid context overflow issues.
   • AI coding tool data processing
     • Cause: Different AI coding tools vary in how they parse and utilize design data, leading to differences in code quality.
   • The capabilities of the LLMs
     • Cause: Current large models still have limitations in semantic understanding and high-quality code generation, especially when dealing with complex cases.
     • Solution: You can use a newer and more advanced model can generally lead to better fidelity.