skills.rest
Keimoshi
KeimoshiCOMMUNITY
Explore all skills by this author →
GitHub

wireframe-sketch

Generates a hand-drawn low-fidelity wireframe as a single self-contained HTML page.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designers and product teams often need a quick, deliberately rough visual exploration of a screen layout before committing to polished UI work. This Skill produces a hand-drawn wireframe page — graph-paper background, marker and pencil tones, sticky-note annotations, and scribbled chart placeholders — so the output reads like a designer's whiteboard sketch rather than a finished mockup. ## Core Features & Use Cases - Lo-fi wireframe generation: Produces one HTML document with graph-paper canvas, hatched fills, dashed borders, slight rotations, and hand-written fonts (Caveat, Patrick Hand, Architects Daughter). - Multi-variant tab exploration: Renders 3–5 tab labels for layout variants, with a highlighter swipe marking the active variant. - Sketch-style components: Includes browser chrome, sidebar nav, KPI tiles, wobbly polyline charts, hatched bar charts, and taped sticky notes for annotations. - Use Case: Ask for a wireframe of a student portal dashboard and receive a single HTML file showing four tabbed layout variants with KPI tiles, a hand-drawn deviation-score chart, and sticky notes marking next steps. ## Quick Start Ask the AI to sketch a hand-drawn wireframe v0.1 for your screen idea with several tabbed variants on graph paper, and it will emit a single HTML artifact.

Frequently Asked Questions about wireframe-sketch

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

FAQPage Schema
How do I generate a hand-drawn wireframe mockup with AI?▼

Describe the screen you want and mention wireframe, sketch, lo-fi, or hand-drawn in your prompt. The Skill outputs one HTML file with graph-paper background, marker fonts, tabbed variants, and sticky-note annotations that you can open directly in a browser.

What does the generated wireframe HTML include?▼

The output is a single HTML document with inline CSS containing a page header with a wireframe version tag, a tab strip of layout variants, a graph-paper canvas, browser chrome, sidebar navigation, KPI tiles, scribbled line and bar charts, and taped sticky notes.

Does the wireframe skill require any libraries or build tools?▼

No build tools or dependencies are required. The output is a standalone HTML file with inline CSS that optionally loads hand-writing fonts such as Caveat or Patrick Hand from Google Fonts, falling back to italic serif if unavailable.

When should I use a lo-fi wireframe instead of a high-fidelity mockup?▼

Use a lo-fi wireframe during early layout exploration when you want to compare multiple screen variants without committing to visual polish. The deliberately rough style signals that structure, not pixels, is under review.

Why does my wireframe output look too polished or pixel-perfect?▼

The Skill's self-check requires the page to look intentionally unpolished. If the result looks pixel-perfect, it should be regenerated with more rotation, hatched fills, dashed borders, and marker-style strokes to restore the hand-drawn character.

Related Skills

Explore More Design & Creative Skills→
gabrielnsmntogabrielnsmnto
3

ux-create-wireframe

Creates wireframes, interaction flows, and component inventories for developer handoff.

Community
Intermediate
zxpmailzxpmail
18

design-maker

Convert design briefs and product specifications into high-fidelity design mockups.

Community
Advanced
claude-office-skillsclaude-office-skills
368

infographic

Design infographic layouts with content structures, color palettes, and typography.

Official
Intermediate
SeaCloudAISeaCloudAI
1

wan2.7-image-pro

Generate high-fidelity images via SeaCloud CLI using wan27_image_pro.

Official
Advanced