New to Claude Skills? Learn how to install them →

Get Claude Skills
nexu-io on GitHub

Wireframe Sketch

Free

Create hand-drawn style wireframes effortlessly.

by nexu-io84.9k stars on nexu-io/open-design
1 views
Updated Aug 10, 2026
Get this skill

Free · Opens the source repo

What Wireframe Sketch does

The Wireframe Sketch skill is designed for designers and developers looking to produce low-fidelity wireframes that convey ideas without the constraints of polished design. This skill emphasizes a hand-drawn aesthetic, mimicking the informal and iterative nature of early design stages. By using a graph-paper background and marker tones, it allows users to create wireframes that feel like they were sketched on a whiteboard, making it ideal for brainstorming and initial concept presentations.

This skill guides users through a structured workflow that prioritizes a loose and informal design approach. It encourages skipping formal design guidelines and instead focuses on essential layout elements such as page headers, tab strips, and sketch canvases. Users will create an HTML document that includes various components like KPI tiles, chart placeholders, and sticky notes, all rendered with a hand-drawn flair. The output is intended to look intentionally imperfect, which enhances the sketch-like quality of the wireframe.

The Wireframe Sketch skill is particularly useful in scenarios where quick iterations are needed, such as during design sprints or collaborative brainstorming sessions. It helps teams visualize concepts without getting bogged down by details, allowing for more dynamic discussions. By producing a single HTML document that encapsulates the wireframe, users can easily share their sketches with stakeholders or team members for feedback.

Overall, this skill is perfect for designers and developers who want to communicate ideas quickly and effectively without the pressure of creating final designs. It fosters a creative environment where concepts can evolve freely, making it a valuable tool in the early stages of design work.

When to use it

Use this skill during brainstorming sessions or when initial wireframes are needed to communicate concepts without the need for high fidelity.

When not to use it

This skill is not suitable for final design presentations or when a polished, high-fidelity wireframe is required.

What you can build with it

Initial Concept Discussions

Use the Wireframe Sketch skill to create quick wireframes for brainstorming sessions, facilitating discussions around initial design concepts.

Design Sprints

In design sprints, leverage this skill to rapidly iterate on wireframes, allowing teams to visualize ideas without getting stuck on details.

Stakeholder Feedback

Generate hand-drawn wireframes to present to stakeholders for early feedback, ensuring concepts are aligned before moving to high-fidelity designs.

How to install Wireframe Sketch

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/wireframe-sketch --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by nexu-io

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.

Frequently asked questions about Wireframe Sketch

Similar skills

Penpot UI/UX Design

Create professional UI/UX designs in Penpot with ease.

UX Theming

Streamline your VS Code theming process with best practices.

Wireframe

Create low-fidelity UI wireframes in SVG format.

Waitlist Page

Create a clean, focused pre-launch landing page.

Hallmark

Design skill for creating unique, structured UIs.

UI Styling

Create beautiful, accessible user interfaces effortlessly.