| name | wireframe-sketch |
| description | Hand-drawn paper-wireframe template — white paper background, monochromatic ink palette, SVG turbulence "wobble" filters for pen-quiver authenticity, handwritten fonts (Caveat / Kalam / Ma Shan Zheng / Long Cang), wavy dividers, sketch-rect overlays, marginalia annotations. For PRD illustrations, IA flow docs, low-fidelity layout exploration, "draft / not final" stakeholder communication. Three skeletons (single-page editorial / app multi-screen flow / IA sitemap) — pick one up front based on the artifact, do NOT inherit only the brush strokes. |
| visibility | public |
| mode | template |
| carrier | web-page |
| scenario | lo-fi-mockup |
| pattern_source | foolscap-wireframe.html |
| source_priority | skill-first |
| triggers | ["做个手绘 wireframe","纸感线框图","IA 流程图","低保真草图","PRD 配图","draft / not final 风格"] |
Wireframe Sketch Template
Hand-drawn lo-fi wireframes that look explicitly draft — to invite layout feedback, signal "not shippable", or document IA without committing to visual design.
⚠️ Pick the Skeleton FIRST
The biggest failure mode of this skill: model inherits the brush strokes (wobble, dashed, handwriting) but writes the wrong document structure — e.g. producing 3 isolated app screens when a multi-screen flow doc was needed, or stuffing a sitemap with editorial figures.
Before you write a single line, declare in your reply which skeleton you're using and why. Match user's words to one of:
| User says | Skeleton | Why |
|---|
| 报纸 / 杂志 / landing / 官网 / brochure / 单页 / 一篇 / 简报 / 海报式文档 / one-pager / editorial | A. Single-Page Editorial | One long page, sections stack, content-dense |
| App / 小程序 / 移动端 / 手机 / 桌面应用 / SaaS 流程 / 用户路径 / 注册流 / 下单流 / 多屏 / 多页 / 注册 / 登录 / 引导 / 设置 / Tab / 表单流 | B. App Multi-Screen Flow | Multiple screens, navigation, states, triggers |
| 信息架构 / IA / sitemap / 站点地图 / 流程图 / 关系图 / 节点图 / 数据流 / 状态机 / 权限矩阵 | C. IA / Sitemap Diagram | Nodes + edges, no actual screens |
| 不明 / 用户没说 / 都行 | ask the user before picking — don't default | — |
If the user gave a topic but no skeleton hint, ask which one. Picking wrong = doing the work twice.
Skeleton A — Single-Page Editorial
foolscap-wireframe.html is the reference for this skeleton. Use when the artifact is a single scrollable page (newspaper, magazine spread, landing page wireframe, brochure, single-page PRD illustration).
Required sections (in order, can drop 1–2 but keep the rhythm):
- Masthead / banner — title, issue/version, date
- Hero feature — one big lead block with headline + intro + hand-drawn illustration placeholder
- 3–5 content sections — each with its own h2, mix of text figures and sketch illustrations
- Sidebar / brief / list block — short items, dense type, breaks the rhythm
- CTA / signup / footer
Density: aim for the foolscap reference's content-per-square-inch — sparse single-page wireframes feel like a stub, not a draft.
Skeleton B — App Multi-Screen Flow ⛔ HARD MINIMUMS
