wireframe-sketch

Generate hand-drawn low-fidelity wireframe templates with SVG filters and handwritten typography.

Updated Jul 9, 2026
One-click install
npx skills add https://github.com/AshesOfTheUndead/rezurxlib --skill wireframe-sketch-ashesoftheundead
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: wireframe-sketch
Source: https://github.com/AshesOfTheUndead/rezurxlib/tree/main/skills/design/design-templates/wireframe-sketch
Command: npx skills add https://github.com/AshesOfTheUndead/rezurxlib --skill wireframe-sketch-ashesoftheundead

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This skill solves the problem of over-polished wireframes that distract stakeholders from structural feedback, providing a draft-style visual language that clearly signals "not final" and encourages collaborative iteration.

Core Features & Use Cases

  • Multi-Skeleton Support: Choose between Single-Page Editorial, App Multi-Screen Flow, or IA/Sitemap diagrams to match your specific documentation needs.
  • Authentic Aesthetic: Uses SVG turbulence filters, handwritten font stacks, and marginalia annotations to mimic the look and feel of paper-based sketching.
  • Use Case: When you need to present a new user registration flow to a product team, use this skill to generate a series of annotated screens with flow arrows and TBD notes that invite critique rather than pixel-perfect scrutiny.

Quick Start

Use the wireframe-sketch skill to generate an App Multi-Screen Flow for a new task management mobile application.

Frequently Asked Questions about wireframe-sketch

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create low-fidelity wireframes that look hand-drawn for early product design feedback?

Low-fidelity wireframes that look hand-drawn are generated using SVG turbulence filters, monochrome ink palettes, and handwritten typography to maintain a draft-quality aesthetic that encourages structural critique rather than pixel scrutiny.

Can I generate an app multi-screen flow with marginalia annotations for a mobile registration process?

Yes, you can generate an app multi-screen flow complete with flow arrows, monochrome ink palettes, and marginalia annotations to effectively document mobile application flows and information architecture diagrams.

What is the best way to present information architecture diagrams without making them look too final?

Information architecture diagrams can be presented using wobble filters and marginalia annotations that mimic paper-based sketching, clearly signaling a draft-state visual language that invites collaborative iteration from stakeholders.

Does this wireframe sketching approach support single-page editorial layouts?

Yes, this wireframe sketching approach supports single-page editorial layouts, app multi-screen flows, and information architecture diagrams to match specific structural documentation needs for early-stage product design.

Why use hand-drawn wireframe templates instead of high-fidelity prototypes for team presentations?

Hand-drawn wireframe templates solve the problem of over-polished prototypes distracting stakeholders, providing a draft-style visual language that clearly signals not final and encourages collaborative iteration.