Skill6.7k repo starsupdated 11d ago

wireframe-sketch

The wireframe-sketch skill generates hand-drawn style wireframes with a graph-paper background, multiple tabs, scribbled chart placeholders with hatched fills, and rotated sticky-note annotations. Use this when creating early-stage design explorations, whiteboard mockups, or informal sketches that prioritize conceptual layout over polished appearance, leveraging casual handwriting fonts like Caveat to maintain a sketchy, exploratory aesthetic.

View source Repository: html-anything

Install in Claude Code

Copy

git clone --depth 1 https://github.com/nexu-io/html-anything /tmp/wireframe-sketch && cp -r /tmp/wireframe-sketch/next/src/lib/templates/skills/wireframe-sketch ~/.claude/skills/wireframe-sketch

Then start a new Claude Code session; the skill loads automatically.

Definition

SKILL.md

【模板: 手绘 Wireframe】
【意图】白板 / 草稿前阶段的 wireframe 探索。
【布局】
- Graph-paper 背景
- 多 tab labels (variants 标签)
- scribbled chart placeholders + hatched fills
- Sticky-note annotations (黄色, 旋转一点点)
【设计细节】
- 字体: Caveat / Architects Daughter; 不要规规矩矩的对齐