wireframe-sketch

线框草图技能

制作一个手绘风格的线框页面。核心就是“这是一张草图”——随性就是它的风格。大胆使用铅笔／马克笔色调、排线填充、虚线边框和轻微旋转。

工作流

1. 如果 DESIGN.md 要求成品 UI，就跳过它。 这项技能明确要求低保真外观。只需宽松地遵循字体令牌（标题用系统衬线字体，注释用等宽字体，马克笔字体作为后备）。
2. 根据需求简述选择屏幕变体——通常是 3–4 个标签，例如“01 · A · ORGANIZED”“02 · B · DASHBOARD”等。一个为“活动”状态，其余为非活动的草图标签。
3. 按以下顺序布局：
   • 页面标题区——醒目的衬线标题，旁边钉着一个仿造的“WIREFRAME v0.1”标签（虚线边框，轻微旋转）。下方是马克笔斜体单行副标题，右侧用等宽字体标注日期／设备／保真度。
   • 标签栏——4–5 个标签，配有马克笔风格的方框勾选符号。活动标签背后加一道荧光笔涂抹效果（黄色／橙色色调＋轻微倾斜）。
   • 草图画布——一张方格纸卡片（背景用 linear-gradient 绘制 24px × 24px 网格线），外框加粗且圆润，呈现粗头记号笔的笔触效果。
   • 浏览器外框行——三个草绘圆圈＋一个仿造 URL 栏，里面写上手写风格的 URL。
   • 侧边栏导航——每个导航项都配有草绘复选框和标签，并使用马克笔斜体。其中一个项上划有荧光笔线条（表示活动状态）。
   • KPI 卡片——3–4 个方框，每个都用马克笔风格的粗笔触写一个醒目数字，配一个小型点缀印记和单行标签。
   • 图表占位区——一张带手绘坐标轴和摇摆折线的卡片。添加 3–4 个圆点标记。
   • 柱状图占位区——一张卡片，内含不同高度的排线填充矩形。
   • 便利贴——放置 1–2 张黄色／粉色便利贴，写上马克笔文字，用略微旋转的胶带粘贴，覆盖在关键区域上，标注“下一步”“page-1”或“需要审核”。
4. 编写一个 HTML 文档：
   • 从 <!doctype html> 到 </html>，CSS 内联。
   • 通过 Google Fonts 使用系统可用的“Caveat”“Patrick Hand”或“Architects Daughter”字体；否则使用斜体衬线字体作为后备。
   • 各处都略微旋转（transform: rotate(-0.6deg)），打破网格的规整感，营造手绘效果。
   • 在标题区、标签栏、侧边栏、KPI、图表、柱状图和便利贴上添加 data-od-id。
5. 自检：
   • 页面不应看起来像像素级精准设计。如果是，就说明细节处理过度了。
   • 必须包含马克笔／铅笔效果、方格纸、排线填充和便利贴；缺少任何一项都要补上。
   • 活动标签要有荧光笔涂抹效果；其他标签不要有。

输出约定

在 <artifact> 标签之间输出：

<artifact identifier="wireframe-slug" type="text/html" title="Wireframe — Title">
<!doctype html>
<html>...</html>
</artifact>

在制品前写一个句子，之后不要写任何内容。