Mmcp.market

wireframe-sketch skill

by nexu-io·nexu-io/open-design·98k stars·Apache-2.0

A hand-drawn wireframe exploration — graph-paper background, marker / pencil tone, multiple tab labels for variants, sticky-note annotations, scribbled chart placeholders, hatched fills. Reads like a designer's whiteboard before any pixels are committed. Use when the brief asks for "wireframe", "sketch wireframe", "hand-drawn", "lo-fi", "whiteboard", "草稿", or "手绘原型".

A100/100content scan

Is the wireframe-sketch skill safe?

Clean: nothing in its files matched our rules. We read 2 files in the folder on 2026-09-28.

No findings.

Install the wireframe-sketch skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description. 

git clone --depth 1 https://github.com/nexu-io/open-design.git /tmp/open-design
mkdir -p ~/.claude/skills
cp -r /tmp/open-design/design-templates/wireframe-sketch ~/.claude/skills/wireframe-sketch
available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

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

wants a low-fidelity look. Only honor type tokens loosely (system serif for headlines, mono for annotations, marker font fallback).

  1. Skip the DESIGN.md if it pushes for finished UI. This skill explicitly

like "01 · A · ORGANIZED", "02 · B · DASHBOARD", etc. One is "active", the rest are inactive sketch tabs.

  1. Pick the screen variants from the brief — typically 3–4 tab labels
  1. Layout, in order:

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.

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

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

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

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

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

a hand-written-style URL.

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

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

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

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

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

polyline. Add 3–4 dot markers.

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

varying heights.

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

with a slightly rotated band, pinned over key regions to call out "next step", "page-1", or "needs review".

  • Sticky notes — 1–2 yellow / pink notes with marker text, taped
  1. Write a single HTML document:

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

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

the grid and feel hand-drawn.

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

sticky notes.

  • data-od-id on header, tabs, sidebar, KPIs, chart, bar-chart,
  1. Self-check:

present; if any is missing, add it.

  • The page should not look pixel-perfect. If it does, you over-rendered.
  • Marker / pencil + graph paper + hatched fills + sticky notes are all
  • The active tab has the highlighter swipe; the others don't.

Output contract

Emit between tags:

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

One sentence before the artifact, nothing after.

More skills from nexu-io/open-design

  • Aarticle-magazineHuashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
  • Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
  • Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
  • Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
  • Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
  • Abuild-testRun the project's build / typecheck / lint / test commands and emit the build.passing + tests.passing signals devloop convergence reads.
  • Acard-twitterTwitter quote or data card designed to pair with a post.
  • Acard-xiaohongshuXiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
  • Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
  • Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
  • Acode-importRead an existing repository's structure into the project cwd as a normalised snapshot the agent can analyse without re-walking the tree on every turn.
  • Acodex-interactive-capability-mapTurn a long-form article, thread, memo, or product narrative into a compact clickable capability map with a workflow loop, use-case matrix, and responsive detail panel.

All agent skills → · MCP servers