Frame0 Diagramming
Creates wireframes and diagrams in the Frame0 application through text prompts. Lets you build UI mockups by describing what you want instead of manually drawing.
Provides a bridge to the Frame0 diagramming application for creating and manipulating visual elements like shapes, text, and connectors with customizable properties for diagram generation and mockup creation.
What it does
- Create wireframe shapes like rectangles, text, and icons
- Build complete app mockups from text descriptions
- Update and modify existing diagram elements
- Add connectors and lines between components
- Generate multi-page wireframe projects
- Export diagrams as images
Best for
About Frame0 Diagramming
Frame0 Diagramming is a community-built MCP server published by niklauslee that provides AI assistants with tools and capabilities via the Model Context Protocol. Bridge to Frame0 Diagramming—an intuitive website and web wireframe tool for creating diagrams, mockups, and visual elem It is categorized under productivity, developer tools. This server exposes 28 tools that AI clients can invoke during conversations and coding sessions.
How to install
You can install Frame0 Diagramming in your AI client of choice. Use the install panel on this page to get one-click setup for Cursor, Claude Desktop, VS Code, and other MCP-compatible clients. This server runs locally on your machine via the stdio transport.
License
Frame0 Diagramming is released under the MIT license. This is a permissive open-source license, meaning you can freely use, modify, and distribute the software.
Tools (28)
Create a frame shape in Frame0. Must add a new page before you create a new frame.
Create a rectangle shape in Frame0.
Create an ellipse shape in Frame0.
Create a text shape in Frame0.
Create a line shape in Frame0.
Frame0 MCP Server
Frame0 is a Balsamiq-alternative wireframe tool for modern apps. Frame0 MCP Server allows you for creating and modifying wireframes in Frame0 by prompting.
Setup
Prerequisite:
Setup for Claude Desktop in claude_desktop_config.json as below:
{
"mcpServers": {
"frame0-mcp-server": {
"command": "npx",
"args": ["-y", "frame0-mcp-server"]
}
}
}
You can use --api-port=<port> optional parameter to use another port number for Frame0's API server.
Example Prompts
- “Create a login screen for Phone in Frame0”
- “Create a Instagram home screen for Phone in Frame0”
- “Create a Netflix home screen for TV in Frame0”
- “Change the color of the Login button”
- “Remove the Twitter social login”
- “Replace the emojis by icons”
- “Set a link from the google login button to the Google website”
Tools
create_framecreate_rectanglecreate_ellipsecreate_textcreate_linecreate_polygoncreate_connectorcreate_iconcreate_imageupdate_shapeduplicate_shapedelete_shapesearch_iconsmove_shapealign_shapesgroupungroupset_linkexport_shape_as_imageadd_pageupdate_pageduplicate_pagedelete_pageget_current_page_idset_current_page_by_idget_pageget_all_pagesexport_page_as_image
Dev
- Clone this repository.
- Build with
npm run build. - Update
claude_desktop_config.jsonin Claude Desktop as below. - Restart Claude Desktop.
{
"mcpServers": {
"frame0-mcp-server": {
"command": "node",
"args": ["<full-path-to>/frame0-mcp-server/build/index.js"]
}
}
}
Alternatives
Related Skills
Browse all skillsUI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.
Answer questions about the AI SDK and help build AI-powered features. Use when developers: (1) Ask about AI SDK functions like generateText, streamText, ToolLoopAgent, embed, or tools, (2) Want to build AI agents, chatbots, RAG systems, or text generation features, (3) Have questions about AI providers (OpenAI, Anthropic, Google, etc.), streaming, tool calling, structured output, or embeddings, (4) Use React hooks like useChat or useCompletion. Triggers on: "AI SDK", "Vercel AI SDK", "generateText", "streamText", "add AI to my app", "build an agent", "tool calling", "structured output", "useChat".
Leveraging AI coding assistants and tools to boost development productivity, while maintaining oversight to ensure quality results.
Master API documentation with OpenAPI 3.1, AI-powered tools, and modern developer experience practices. Create interactive docs, generate SDKs, and build comprehensive developer portals. Use PROACTIVELY for API documentation or developer portal creation.
Creates educational Teams channel posts for internal knowledge sharing about Claude Code features, tools, and best practices. Applies when writing posts, announcements, or documentation to teach colleagues effective Claude Code usage, announce new features, share productivity tips, or document lessons learned. Provides templates, writing guidelines, and structured approaches emphasizing concrete examples, underlying principles, and connections to best practices like context engineering. Activates for content involving Teams posts, channel announcements, feature documentation, or tip sharing.
Use when working with the OpenAI API (Responses API) or OpenAI platform features (tools, streaming, Realtime API, auth, models, rate limits, MCP) and you need authoritative, up-to-date documentation (schemas, examples, limits, edge cases). Prefer the OpenAI Developer Documentation MCP server tools when available; otherwise guide the user to enable `openaiDeveloperDocs`.