Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
nexu-io avatar

Wireframe Sketch

nexu-io/open-design

  • 266 installs
  • 83.7k repo stars
  • Updated August 5, 2026
  • nexu-io/open-design

wireframe-sketch is an Open Design skill that produces low-fidelity hand-drawn wireframe HTML sketches on graph paper for developers who need to validate information architecture before high-fidelity UI or code.

About

wireframe-sketch is an Open Design skill from nexu-io/open-design that generates lo-fi, hand-drawn wireframe artifacts emphasizing structure over polished UI. Output is a single HTML file with inline CSS, marker-style fonts, wobbly lines, hatched chart placeholders, sticky-note annotations, slight rotations, and highlighter swipes on graph-paper backgrounds so stakeholders focus on layout instead of button colors. The skill supports tabbed layouts for exploring variants side by side and responds to briefs asking for whiteboard style, sketch mockups, or early-stage thinking without production commitments. Developers reach for wireframe-sketch during discovery when validating navigation flows, dashboard IA, or mobile screen sequences before invoking higher-fidelity Open Design skills like mobile-app or saas-landing. Install via npx skills add against the open-design repository. The deliberate unfinished aesthetic signals work-in-progress status and pairs well with Open Design sandboxed preview for quick stakeholder reviews without Figma or native code.

  • Low-fidelity layout
  • IA exploration
  • Fast iteration
  • Flow mapping
  • Stakeholder feedback

Wireframe Sketch by the numbers

  • 266 all-time installs (skills.sh)
  • +1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
  • Ranked #858 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/nexu-io/open-design --skill wireframe-sketch

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs266
repo stars★ 83.7k
Last updatedAugust 5, 2026
Repositorynexu-io/open-design ↗

How do you sketch lo-fi wireframes for IA review?

Produce low-fidelity wireframe sketches to test information architecture and flows before committing to visual design or production code.

Who is it for?

Developers and designers exploring layout variants and information architecture before committing to high-fidelity mockups or frontend implementation.

Skip if: Final marketing pages, brand-polished UI kits, or pixel-perfect device mockups that need Open Design's mobile-app or saas-landing skills instead.

When should I use this skill?

The user asks for lo-fi wireframes, whiteboard sketches, graph-paper mockups, or early IA exploration inside Open Design.

What you get

Single HTML wireframe file with inline CSS, marker fonts, hatched placeholders, and optional tabbed layout variants.

  • wireframe HTML file with inline CSS

By the numbers

  • Outputs a single self-contained HTML wireframe file with inline CSS

Files

SKILL.mdMarkdownGitHub ↗

Wireframe Sketch Skill

Produce a single hand-drawn wireframe page. The whole point is "this is a sketch" — looseness is the brand. Lean into pencil/marker tones, hatched fills, dashed borders, slight rotations.

Workflow

1. Skip the DESIGN.md if it pushes for finished UI. This skill explicitly wants a low-fidelity look. Only honor type tokens loosely (system serif for headlines, mono for annotations, marker font fallback). 2. Pick the screen variants from the brief — typically 3–4 tab labels like "01 · A · ORGANIZED", "02 · B · DASHBOARD", etc. One is "active", the rest are inactive sketch tabs. 3. Layout, in order:

  • Page header — bold serif title with a fake "WIREFRAME v0.1" tag

pinned next to it (dashed border, slight rotation). Below: one-line subtitle in marker italic + a date / device / fidelity dateline on the right in mono.

  • Tab strip — 4–5 labels with marker check-square glyphs. The active

one has a highlighter swipe behind it (yellow / orange tint + slight skew).

  • Sketch canvas — a graph-paper card (background: 24px × 24px grid

drawn with linear-gradient lines), with a thick rounded border drawn to look like a sharpie line.

  • Browser chrome row — three sketched circles + a fake URL bar with

a hand-written-style URL.

  • Sidebar nav — sketched checkbox + label for each nav item, marker

italic. One has a highlighter line through it (active).

  • KPI tiles — 3–4 boxes, each with a chunky scribbled number in a

marker-style stroke, a tiny accent stamp, and a one-line label.

  • Chart placeholder — a card with a hand-drawn axis and a wobbly

polyline. Add 3–4 dot markers.

  • Bar chart placeholder — a card with hatched-fill rectangles of

varying heights.

  • Sticky notes — 1–2 yellow / pink notes with marker text, taped

with a slightly rotated band, pinned over key regions to call out "next step", "page-1", or "needs review". 4. Write a single HTML document:

  • <!doctype html> through </html>, CSS inline.
  • Use the system's available "Caveat", "Patrick Hand", or "Architects

Daughter" fonts via Google Fonts; otherwise fall back to italic serif.

  • Slight rotations everywhere (transform: rotate(-0.6deg)) to break

the grid and feel hand-drawn.

  • data-od-id on header, tabs, sidebar, KPIs, chart, bar-chart,

sticky notes. 5. Self-check:

  • The page should not look pixel-perfect. If it does, you over-rendered.
  • Marker / pencil + graph paper + hatched fills + sticky notes are all

present; if any is missing, add it.

  • The active tab has the highlighter swipe; the others don't.

Output contract

Emit between <artifact> tags:

<artifact identifier="wireframe-slug" type="text/html" title="Wireframe — Title">
<!doctype html>
<html>...</html>
</artifact>

One sentence before the artifact, nothing after.

Related skills

anthropicsFrontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165kvercel-labsWeb Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6klarksuiteLark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16ksleekdotdesignSleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476leonxlnxDesign Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4knextlevelbuilderUi Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k

How it compares

Use wireframe-sketch before mobile-app when stakeholders need structural feedback without device chrome or brand tokens.

FAQ

What file format does wireframe-sketch output?

wireframe-sketch outputs a single HTML file with inline CSS and marker-style fonts on a graph-paper background. The artifact is designed for Open Design sandboxed preview and can include tabbed sections for multiple layout variants.

When should wireframe-sketch be used instead of mobile-app?

wireframe-sketch fits early IA and flow validation with deliberately unfinished sketches. mobile-app is for pixel-accurate iPhone-framed UI mockups once structure is settled and a DESIGN.md system is active.

Design & UI/UXuiux
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.