using-roughjs-wireframes

To create hand-drawn style UI wireframes, define a JSON schema with required fields like viewport, direction, and screens, then render them using Rough.js styling. This approach avoids false precision and invites rapid feedback from non-designers.

The JSON wireframe schema for Rough.js rendering requires a viewport (mobile, tablet, or desktop), a layout direction, and a list of screens. It also includes guidelines for building reusable primitives like rows, columns, cards, buttons, and inputs with defined bounds.

Yes, wireframe JSON supports rapid mobile and web UX prototyping by defining the target viewport within the schema. It enables fast iteration of information architecture and layout decisions before committing to high-fidelity visuals.

To generate a wireframe in a mermaid-collab session, use the create_wireframe tool with arguments for your project path, session name, wireframe name, and the JSON content containing viewport, direction, and screens.

Rough wireframes are limited to early UX exploration, rapid prototyping, and layout decisions. They use a hand-drawn style to avoid false precision and are not intended for final visual design, detailed component styling, or high-fidelity mockups.