用途
Wireframe Sketch 是一个用于产出单页手绘风格线框图的技能。它的核心目标是让页面明确呈现“这是一张草图”的感觉，因此刻意保持松散、不精确的视觉语言。它适合在早期设计探索阶段快速表达布局与结构想法，而不是用于交付精细的成品 UI。
主要能力
该技能会生成一个完整的手绘线框页面，包含以下典型元素：
- 页头：粗衬线标题，旁边钉着一个带虚线边框、轻微旋转的伪标签（如“WIREFRAME v0.1”），下方是马克笔斜体副标题，右侧是等宽字体的日期/设备/保真度信息行。
- 标签条：4–5 个带马克笔勾选框字形的标签，激活项背后有黄色或橙色荧光笔涂抹效果并轻微倾斜。
- 草图画布：网格纸卡片，背景由 24px × 24px 的 linear-gradient 线条绘制，边框粗圆，模仿记号笔线条。
- 浏览器窗口栏：三个手绘圆圈加一个手写风格 URL 的伪地址栏。
- 侧边导航：每个导航项由手绘复选框和马克笔斜体标签组成，激活项有一条荧光笔横线。
- KPI 卡片：3–4 个盒子，每个包含马克笔风格的粗涂数字、小装饰印章和一行标签。
- 折线图占位：手绘坐标轴和波浪状折线，带 3–4 个点标记。
- 柱状图占位：斜线填充的矩形，高度不一。
- 便签：1–2 张黄色或粉色便签，马克笔文字，用轻微旋转的胶带固定，标注“next step”“page-1”或“needs review”等。
使用方式
技能的工作流要求从需求中选取屏幕变体，通常为 3–4 个标签，例如“01 · A · ORGANIZED”“02 · B · DASHBOARD”等，其中一个为激活态。如果 DESIGN.md 推动成品 UI，应跳过它，因为该技能明确追求低保真外观；类型令牌只做宽松处理（标题用系统衬线，注释用等宽，标记字体回退）。
最终输出一个从 <!doctype html> 到 </html> 的单一 HTML 文档，CSS 内联。字体优先使用 Google Fonts 的 Caveat、Patrick Hand 或 Architects Daughter，否则回退到斜体衬线。页面各处使用轻微旋转（如 transform: rotate(-0.6deg)）来打破网格感。关键区域通过 data-od-id 标记，包括 header、tabs、sidebar、KPIs、chart、bar-chart、sticky notes。
输出契约要求将 HTML 放在 <artifact> 标签之间，格式为：
<artifact identifier="wireframe-slug" type="text/html" title="Wireframe — Title">
<!doctype html>
<html>...</html>
</artifact>
artifact 之前只写一句话，之后不写任何内容。
适用场景
适合早期设计探索、布局结构讨论、快速表达多个屏幕变体、向团队展示低保真概念。也适合需要刻意呈现“草稿感”的演示或评审场景。
限制
该技能明确不追求像素级精确，如果页面看起来过于完美，说明渲染过度。自检要求马克笔/铅笔质感、网格纸、斜线填充和便签全部出现，缺一不可；激活标签必须有荧光笔涂抹，其他标签没有。它不适合需要精细视觉、高保真原型或最终交付的界面设计。关于收费、价格、平台支持等具体信息，资料中暂未提供。