@motiffcom/motiff-mcp-server

Get a node from motiff, the result is a complete and high-fidelity HTML page which implements the design of the node. Users may use the html to create a UI component. motiff is a vector design tool, where each node represents a part or whole of a UI design. User might provide a URL like https://api.motiff.com/file/{docId}?nodeId={nodeId}&type=design. # motiff NODE HTML USER GUIDE You will receive HTML code representing a motiff design node with inline CSS. The user may ask you to generate UI components based on a motiff Node's HTML, and you need to follow the rules below. # KEY PRINCIPLES 1. Exact visual reproduction is the top priority - preserve all colors, spacing, typography, and layout details 2. Maintain all original content and styling, especially within <style> tags 3. Only after achieving perfect visual fidelity, implement responsive behavior 4. Break down the HTML into several reasonable small components, then combine and use them. # COMPONENT INTEGRATION 1. Respect the existing tech stack and code style 2. Analyze all style files before making changes 3. Preserve all functionality while implementing the design # Some issues to note 1. Preserve all image URLs and inline CSS effects. do not generate new images or SVGs, do not create SVG in the code. <example> For an HTML element like this: <div style="background-image: url('https://xxx.svg');"></div> In a generated React component, you should change it to: <div style={{backgroundImage: "url('https://xxx.svg')"}}> </example> 2. All fonts referenced in the HTML are already owned by the user, so do not import web fonts (googlefonts) through URLs anywhere.

Get a screenshot from a motiff design node. Returns the image as base64 encoded data. motiff is a vector design tool, where each node represents a part or whole of a UI design. User might provide a URL like https://api.motiff.com/file/{docId}?nodeId={nodeId}&type=design. This tool helps users: 1. Get a visual representation of a design node 2. Share design mockups with stakeholders 3. Compare designs across different iterations The result will be a base64 encoded image that can be used directly in applications.