{"id":"3263e68a-192a-464a-950c-e93239e98d42","shortId":"PAET29","kind":"skill","title":"wireframe-sketch","tagline":"A hand-drawn wireframe exploration — graph-paper background, marker /\npencil tone, multiple tab labels for variants, sticky-note annotations,\nscribbled chart placeholders, hatched fills. Reads like a designer's\nwhiteboard before any pixels are committed. Use when the brief asks f","description":"# Wireframe Sketch Skill\n\nProduce a single hand-drawn wireframe page. The whole point is \"this is a\nsketch\" — looseness is the brand. Lean into pencil/marker tones, hatched\nfills, dashed borders, slight rotations.\n\n## Workflow\n\n1. **Skip the DESIGN.md** if it pushes for finished UI. This skill explicitly\n wants a low-fidelity look. Only honor type tokens loosely (system serif\n for headlines, mono for annotations, marker font fallback).\n2. **Pick the screen variants** from the brief — typically 3–4 tab labels\n like \"01 · A · ORGANIZED\", \"02 · B · DASHBOARD\", etc. One is \"active\",\n the rest are inactive sketch tabs.\n3. **Layout**, in order:\n - **Page header** — bold serif title with a fake \"WIREFRAME v0.1\" tag\n pinned next to it (dashed border, slight rotation). Below: one-line\n subtitle in marker italic + a date / device / fidelity dateline on\n the right in mono.\n - **Tab strip** — 4–5 labels with marker check-square glyphs. The active\n one has a highlighter swipe behind it (yellow / orange tint + slight\n skew).\n - **Sketch canvas** — a graph-paper card (background: 24px × 24px grid\n drawn with `linear-gradient` lines), with a thick rounded border drawn\n to look like a sharpie line.\n - **Browser chrome row** — three sketched circles + a fake URL bar with\n a hand-written-style URL.\n - **Sidebar nav** — sketched checkbox + label for each nav item, marker\n italic. One has a highlighter line through it (active).\n - **KPI tiles** — 3–4 boxes, each with a chunky scribbled number in a\n marker-style stroke, a tiny accent stamp, and a one-line label.\n - **Chart placeholder** — a card with a hand-drawn axis and a wobbly\n polyline. Add 3–4 dot markers.\n - **Bar chart placeholder** — a card with hatched-fill rectangles of\n varying heights.\n - **Sticky notes** — 1–2 yellow / pink notes with marker text, taped\n with a slightly rotated band, pinned over key regions to call out\n \"next step\", \"page-1\", or \"needs review\".\n4. **Write** a single HTML document:\n - `` through ``, CSS inline.\n - Use the system's available \"Caveat\", \"Patrick Hand\", or \"Architects\n Daughter\" fonts via Google Fonts; otherwise fall back to italic serif.\n - Slight rotations everywhere (`transform: rotate(-0.6deg)`) to break\n the grid and feel hand-drawn.\n - `data-od-id` on header, tabs, sidebar, KPIs, chart, bar-chart,\n sticky notes.\n5. **Self-check**:\n - The page should *not* look pixel-perfect. If it does, you over-rendered.\n - Marker / pencil + graph paper + hatched fills + sticky notes are all\n present; if any is missing, add it.\n - The active tab has the highlighter swipe; the others don't.\n\n## Output contract\n\nEmit between `` tags:\n\n```\n\n\n...\n\n```\n\nOne sentence before the artifact, nothing after.","tags":["wireframe","sketch","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design"],"capabilities":["skill","source-nexu-io","skill-wireframe-sketch","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/wireframe-sketch","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 36607 github stars · SKILL.md body (2,969 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-11T06:52:28.001Z","embedding":null,"createdAt":"2026-05-01T18:52:34.562Z","updatedAt":"2026-05-11T06:52:28.001Z","lastSeenAt":"2026-05-11T06:52:28.001Z","tsv":"'-0.6':401 '-1':362 '01':130 '02':133 '1':82,338 '2':116,339 '24px':220,221 '3':125,146,279,319 '4':126,189,280,320,366 '5':190,427 'accent':296 'activ':139,199,276,464 'add':318,461 'annot':25,112 'architect':384 'artifact':483 'ask':46 'avail':379 'axi':313 'b':134 'back':392 'background':13,219 'band':351 'bar':250,323,423 'bar-chart':422 'behind':205 'bold':152 'border':78,166,233 'box':281 'brand':70 'break':404 'brief':45,123 'browser':241 'call':357 'canva':213 'card':218,307,327 'caveat':380 'chart':27,304,324,421,424 'check':195,430 'check-squar':194 'checkbox':261 'chrome':242 'chunki':285 'circl':246 'commit':41 'contract':475 'css':373 'dash':77,165 'dashboard':135 'data':413 'data-od-id':412 'date':178 'datelin':181 'daughter':385 'deg':402 'design':34 'design.md':85 'devic':179 'document':371 'dot':321 'drawn':7,56,223,234,312,411 'emit':476 'etc':136 'everywher':398 'explicit':94 'explor':9 'f':47 'fake':157,248 'fall':391 'fallback':115 'feel':408 'fidel':99,180 'fill':30,76,331,451 'finish':90 'font':114,386,389 'glyph':197 'googl':388 'gradient':227 'graph':11,216,448 'graph-pap':10,215 'grid':222,406 'hand':6,55,254,311,382,410 'hand-drawn':5,54,310,409 'hand-written-styl':253 'hatch':29,75,330,450 'hatched-fil':329 'header':151,417 'headlin':109 'height':335 'highlight':203,272,468 'honor':102 'html':370 'id':415 'inact':143 'inlin':374 'ital':176,268,394 'item':266 'key':354 'kpi':277 'kpis':420 'label':19,128,191,262,303 'layout':147 'lean':71 'like':32,129,237 'line':172,228,240,273,302 'linear':226 'linear-gradi':225 'look':100,236,435 'loos':67,105 'low':98 'low-fidel':97 'marker':14,113,175,193,267,291,322,344,446 'marker-styl':290 'miss':460 'mono':110,186 'multipl':17 'nav':259,265 'need':364 'next':162,359 'note':24,337,342,426,453 'noth':484 'number':287 'od':414 'one':137,171,200,269,301,479 'one-lin':170,300 'orang':208 'order':149 'organ':132 'other':471 'otherwis':390 'output':474 'over-rend':443 'page':58,150,361,432 'paper':12,217,449 'patrick':381 'pencil':15,447 'pencil/marker':73 'perfect':438 'pick':117 'pin':161,352 'pink':341 'pixel':39,437 'pixel-perfect':436 'placehold':28,305,325 'point':61 'polylin':317 'present':456 'produc':51 'push':88 'read':31 'rectangl':332 'region':355 'render':445 'rest':141 'review':365 'right':184 'rotat':80,168,350,397,400 'round':232 'row':243 'screen':119 'scribbl':26,286 'self':429 'self-check':428 'sentenc':480 'serif':107,153,395 'sharpi':239 'sidebar':258,419 'singl':53,369 'sketch':3,49,66,144,212,245,260 'skew':211 'skill':50,93 'skill-wireframe-sketch' 'skip':83 'slight':79,167,210,349,396 'source-nexu-io' 'squar':196 'stamp':297 'step':360 'sticki':23,336,425,452 'sticky-not':22 'strip':188 'stroke':293 'style':256,292 'subtitl':173 'swipe':204,469 'system':106,377 'tab':18,127,145,187,418,465 'tag':160,478 'tape':346 'text':345 'thick':231 'three':244 'tile':278 'tini':295 'tint':209 'titl':154 'token':104 'tone':16,74 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'transform':399 'type':103 'typic':124 'ui':91 'url':249,257 'use':42,375 'v0.1':159 'vari':334 'variant':21,120 'via':387 'want':95 'whiteboard':36 'whole':60 'wirefram':2,8,48,57,158 'wireframe-sketch':1 'wobbl':316 'workflow':81 'write':367 'written':255 'yellow':207,340","prices":[{"id":"bfd1ad6b-fe1a-4839-b798-0ca6a5ef32b6","listingId":"3263e68a-192a-464a-950c-e93239e98d42","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-01T18:52:34.562Z"}],"sources":[{"listingId":"3263e68a-192a-464a-950c-e93239e98d42","source":"github","sourceId":"nexu-io/open-design/wireframe-sketch","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/wireframe-sketch","isPrimary":false,"firstSeenAt":"2026-05-01T18:52:34.562Z","lastSeenAt":"2026-05-11T06:52:28.001Z"},{"listingId":"3263e68a-192a-464a-950c-e93239e98d42","source":"skills_sh","sourceId":"nexu-io/open-design/wireframe-sketch","sourceUrl":"https://skills.sh/nexu-io/open-design/wireframe-sketch","isPrimary":true,"firstSeenAt":"2026-05-07T20:42:36.819Z","lastSeenAt":"2026-05-07T22:41:41.824Z"}],"details":{"listingId":"3263e68a-192a-464a-950c-e93239e98d42","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"wireframe-sketch","github":{"repo":"nexu-io/open-design","stars":36607,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-11T06:48:43Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"decb05e19b8d8561d503a157577f93a7da44057e","skill_md_path":"skills/wireframe-sketch/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/wireframe-sketch"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"wireframe-sketch","description":"A hand-drawn wireframe exploration — graph-paper background, marker /\npencil tone, multiple tab labels for variants, sticky-note annotations,\nscribbled chart placeholders, hatched fills. Reads like a designer's\nwhiteboard before any pixels are committed. Use when the brief asks for\n\"wireframe\", \"sketch wireframe\", \"hand-drawn\", \"lo-fi\", \"whiteboard\",\n\"草稿\", or \"手绘原型\"."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/wireframe-sketch"},"updatedAt":"2026-05-11T06:52:28.001Z"}}