Sketchy Wireframe UI
Generate low-fidelity, sketch-style wireframes that mimic hand-drawn UI layouts. Focuses on structure, layout blocks, and rough UI representation similar to whiteboard or pencil sketches.
Design
wireframe
sketch
low-fidelity
ux
dashboard
hand-drawn
layout
admin
prototype
MCP Tool
render_wireframe
Output Type
Design
Input Examples
Copy
Create a sketchy dashboard wireframe for a car rental admin panel with charts and tables
How to Use
1
Connect MCP Server
Add MockFlow WireframePro MCP to your AI assistant:
Desktop MCP
Web MCP
claude mcp add --transport http -s user mockflow-wireframepro http://localhost:21194/mcp
Requires MockFlow Desktop app running locally
npm install -g @mockflow/wireframepro-mcp && mockflow-wireframepro-mcp login && mockflow-wireframepro-mcp
Install CLI, login with your MockFlow account, then start the server
2
Install Skill
Download the SKILL.md file and place it in your skills directory:
~/.claude/skills/mockflow-sketchy-wireframe-2/SKILL.md
3
Use the Skill
Claude Code will auto-detect when your prompt matches the skill. You can also invoke it directly with
/mockflow-sketchy-wireframe-2.Related skills
Slack Block Kit Interface
Design screens that mimic the Slack desktop client using standard Block Kit components
Creative Workspace Canvas
A clean, vibrant, and functional design inspired by the Canva web application interface.
Terminal Console Style
A high-contrast command-line interface aesthetic with monospaced typography
Anthropic Style
A clean, academic-inspired design with a warm neutral palette and sophisticated typography.
Support
Videos
