Wireframe Sketcher MCP Server

Interactive canvas for creating wireframes with drag-and-drop components, annotations, and developer spec export.

Features

• Drag-and-drop canvas - Easily position and resize wireframe elements
• Multiple component types - Support for buttons, text boxes, images, containers, headers, inputs, and navigation bars
• Developer annotations - Add notes and specifications directly to elements
• Real-time positioning - Visual feedback with coordinates and dimensions
• Spec export - Generate structured markdown specifications from wireframes
• Customizable dimensions - Create wireframes at any size for different device targets

Installation

npm install @gongrzhe/server-wireframe-sketcher

Usage

As a CLI

npx @gongrzhe/server-wireframe-sketcher

Claude Desktop Configuration

Add this to your Claude Desktop claude_desktop_config.json:

{
  "mcpServers": {
    "wireframe-sketcher": {
      "command": "npx",
      "args": ["-y", "@gongrzhe/server-wireframe-sketcher"]
    }
  }
}

Claude Code Configuration

claude mcp add wireframe-sketcher -- npx -y @gongrzhe/server-wireframe-sketcher

Tools

create-wireframe

Creates a new blank wireframe canvas with the given title and dimensions.

Input:

• title (string, required) - Title for the wireframe
• width (number, optional) - Canvas width in pixels (default: 800)
• height (number, optional) - Canvas height in pixels (default: 500)

Output:

• Returns a wireframe object with ID, title, dimensions, and empty elements array

export-wireframe

Exports wireframe elements as a structured developer specification in markdown format.

Input:

• elements (array, required) - Array of wireframe elements with type, position, size, and optional label/annotation

Output:

• spec (string) - Markdown specification with element details
• elementCount (number) - Total number of elements
• summary (string) - Summary of element types and counts

Example Prompt

Create a wireframe for a login page with:
- A header at the top with the company logo
- An email input field
- A password input field
- A "Sign In" button
- A "Forgot Password?" link at the bottom

License

MIT