agentsclimarketplace

Wireframe sketch

Skill nexu-io/open-design/plugins/_official/examples/wireframe-sketch

🎨 The open-source Claude Design alternative. πŸ–₯️ Local-first desktop app. πŸ–ΌοΈ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video β€” real files, HTML/PDF/PPTX/MP4 export. πŸ€– Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen & 20+ CLIs via BYOK.

Install
npx -y skills add nexu-io/open-design --skill wireframe-sketch

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

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 "ζ‰‹η»˜εŽŸεž‹".

SKILL.md

3.9 KB, as published. Nobody here has run it

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.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.