using-roughjs-wireframes

What problem does it solve?

Rough.js wireframes enable teams to rapidly sketch UI layouts in a hand-drawn style, inviting collaboration and feedback early while avoiding false precision.

Core Features & Use Cases

• JSON-based wireframe schema that defines a mobile/tablet/desktop viewport, layout direction, and a list of screens rendered with rough.js styling.
• Guidelines for building reusable wireframe primitives (screen, col, row, card, button, input, text) and their required bounds and properties.
• Use cases include early UX exploration, design reviews with non-designers, and rapid iteration of information architecture before committing to visuals.

Quick Start

Build a minimal wireframe JSON with viewport, direction, and screens, then create a wireframe in a collab session using the mermaid-collab MCP server. Example: Tool: mcp__mermaid__create_wireframe Args: { "project": "/path/to/project", "session": "default", "name": "sample-wireframe", "content": { "viewport": "mobile", "direction": "LR", "screens": [] } }