About wireframe-sketch
A hand-drawn wireframe template for early interface exploration on a whiteboard or in a draft. It uses graph paper, variant labels, scribbled chart placeholders, and sticky-note annotations to create a rough-sketch look.
Key features
- 01Graph-paper background
- 02Labels for multiple variants
- 03Scribbled chart placeholders and hatching
- 04Slightly tilted yellow sticky notes
- 05Handwritten fonts and loose alignment
Use cases
- 01Explore interface ideas at whiteboard stage
- 02Show multiple layout variants side by side
- 03Annotate wireframe drafts with sticky notes
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/wireframe-sketchin Claude Code to confirm it loaded.
Bundled filesexample.html
Details
From the project README【模板: 手绘 Wireframe】 【意图】白板 / 草稿前阶段的 wireframe 探索。 【布局】
- Graph-paper 背景
- 多 tab labels (variants 标签)
- scribbled chart placeholders + hatched fills
- Sticky-note annotations (黄色, 旋转一点点) 【设计细节】
- 字体: Caveat / Architects Daughter; 不要规规矩矩的对齐
Comments
Markdown supported