skills.rest
az9713
az9713COMMUNITY
Explore all skills by this author →
GitHub

wireframe-sketch

Generates a hand-drawn wireframe page as a self-contained HTML document with header, tab strip, canvas, sidebar, tiles, sticky notes, and optional loaded assets.

Updated May 2, 2026
Search Tags:#prototype#wireframe#mockup#sketch#hand-drawn#lo-fi
One-click install
npx skills add https://github.com/az9713/open-design-tutorial --skill wireframe-sketch-az9713
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wireframe-sketch
Source: https://github.com/az9713/open-design-tutorial/tree/main/skills/wireframe-sketch
Command: npx skills add https://github.com/az9713/open-design-tutorial --skill wireframe-sketch-az9713

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Hand-drawn wireframes speed up early design exploration by capturing layout ideas without committing to pixels.

Core Features & Use Cases

  • Produce a single hand-drawn wireframe page with a graph-paper background, tab variants, sticky-note annotations, and marker/pencil styling to convey lo-fi concepts.
  • Use in design briefs to rapidly sketch interfaces, compare 3–4 tab variants, and communicate layout ideas to stakeholders.

Quick Start

Sketch a hand-drawn wireframe page for a portal with four tab variants, a graph-paper background, and sticky-note annotations.

Frequently Asked Questions about wireframe-sketch

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

FAQPage Schema
How do I create a hand-drawn wireframe for early interface design?▼

To create a hand-drawn wireframe, generate a self-contained HTML document featuring a graph-paper background, marker-toned elements, and sticky-note annotations to capture lo-fi layout concepts without committing to pixels.

What is a lo-fi wireframe used for in desktop interface design?▼

A lo-fi wireframe is used to rapidly sketch interface layouts and communicate early design ideas to stakeholders without getting bogged down by pixel-perfect details or high-fidelity assets.

Can I compare multiple tab variants in a single wireframe mockup?▼

Yes, you can compare 3–4 tab variants within a single wireframe mockup by utilizing the tab strip component to display different layout ideas side-by-side in the generated HTML document.

How do I add KPI tiles and sticky notes to a wireframe sketch?▼

You add KPI tiles and sticky notes by generating the wireframe HTML with predefined sections for header, sidebar, KPI tiles, and sticky-note annotations to convey layout concepts and metrics.

Do I need external assets to generate a hand-drawn wireframe page?▼

No, you do not need external assets as the deliverable is a self-contained HTML document, but it optionally supports loading additional assets from scripts/ or references/ directories when provided.

What is the best way to sketch a portal interface with graph-paper styling?▼

The best way to sketch a portal interface with graph-paper styling is to generate a hand-drawn wireframe HTML page that includes a canvas area, tab strip, and marker-toned elements for lo-fi concepts.

Related Skills

Explore More Design & Creative Skills→
maslennikov-igmaslennikov-ig
243

frontend-aesthetics

Generate actionable frontend design guidance for typography, color, and motion.

Community
Advanced
ben-mad-jlpben-mad-jlp

using-roughjs-wireframes

Create hand-drawn style UI wireframes from JSON schemas for Rough.js.

Community
Basic
pipixia-labspipixia-labs
38

wireframe-sketch

Generate hand-drawn wireframe visuals in a single HTML document.

Official
Intermediate
jgezelscorpjgezelscorp

excalidraw

Generate hand-drawn style diagrams, wireframes, and UI mockups in Excalidraw.

Community
Basic