Back to Details

wireframe-sketch

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Wireframe Sketch Skill

Wireframe Sketch 技能

Produce a single hand-drawn wireframe page. The whole point is "this is a sketch" — looseness is the brand. Lean into pencil/marker tones, hatched fills, dashed borders, slight rotations.
生成单页手绘wireframe。核心要点是“这是一份草稿”——松弛感是其特色。要突出铅笔/马克笔色调、阴影填充、虚线边框、轻微旋转效果。

Workflow

工作流程

  1. Skip the DESIGN.md if it pushes for finished UI. This skill explicitly wants a low-fidelity look. Only honor type tokens loosely (system serif for headlines, mono for annotations, marker font fallback).
  2. Pick the screen variants from the brief — typically 3–4 tab labels like "01 · A · ORGANIZED", "02 · B · DASHBOARD", etc. One is "active", the rest are inactive sketch tabs.
  3. Layout, in order:
    • Page header — bold serif title with a fake "WIREFRAME v0.1" tag pinned next to it (dashed border, slight rotation). Below: one-line subtitle in marker italic + a date / device / fidelity dateline on the right in mono.
    • Tab strip — 4–5 labels with marker check-square glyphs. The active one has a highlighter swipe behind it (yellow / orange tint + slight skew).
    • Sketch canvas — a graph-paper card (background: 24px × 24px grid drawn with 
      linear-gradient
      lines), with a thick rounded border drawn to look like a sharpie line.
    • Browser chrome row — three sketched circles + a fake URL bar with a hand-written-style URL.
    • Sidebar nav — sketched checkbox + label for each nav item, marker italic. One has a highlighter line through it (active).
    • KPI tiles — 3–4 boxes, each with a chunky scribbled number in a marker-style stroke, a tiny accent stamp, and a one-line label.
    • Chart placeholder — a card with a hand-drawn axis and a wobbly polyline. Add 3–4 dot markers.
    • Bar chart placeholder — a card with hatched-fill rectangles of varying heights.
    • Sticky notes — 1–2 yellow / pink notes with marker text, taped with a slightly rotated band, pinned over key regions to call out "next step", "page-1", or "needs review".
  4. Write a single HTML document: 
    • <!doctype html>
      through 
      </html>
      , CSS inline.
    • Use the system's available "Caveat", "Patrick Hand", or "Architects Daughter" fonts via Google Fonts; otherwise fall back to italic serif.
    • Slight rotations everywhere (
      transform: rotate(-0.6deg)
      ) to break the grid and feel hand-drawn.
    • data-od-id
      on header, tabs, sidebar, KPIs, chart, bar-chart, sticky notes.
  5. Self-check:
    • The page should not look pixel-perfect. If it does, you over-rendered.
    • Marker / pencil + graph paper + hatched fills + sticky notes are all present; if any is missing, add it.
    • The active tab has the highlighter swipe; the others don't.
  1. 跳过DESIGN.md如果它要求成品UI。本技能明确要求低保真视觉效果。仅大致遵循类型标记（标题使用系统衬线字体，注释使用等宽字体， fallback到马克笔风格字体）。
  2. 从需求中选择屏幕变体——通常是3–4个标签页标签，例如“01 · A · ORGANIZED”“02 · B · DASHBOARD”等。其中一个为“激活态”，其余为非激活草稿标签页。
  3. 布局顺序：
    • 页面页眉——粗体衬线标题旁固定一个仿造的“WIREFRAME v0.1”标签（虚线边框、轻微旋转）。下方：一行马克笔斜体副标题，右侧是等宽字体的日期/设备/保真度标注。
    • 标签栏——4–5个带有马克笔勾选方块符号的标签。激活态标签后方有荧光笔涂抹效果（黄/橙色色调+轻微倾斜）。
    • 草稿画布——方格纸卡片（背景：用
      linear-gradient
      线条绘制的24px × 24px网格），带有类似马克笔绘制的粗圆角边框。
    • 浏览器顶部栏——三个手绘圆圈+一个带有手写风格URL的仿造地址栏。
    • 侧边导航栏——每个导航项对应手绘复选框+标签，采用马克笔斜体。其中一个带有荧光笔划线（激活态）。
    • KPI卡片——3–4个盒子，每个包含马克笔风格笔触的潦草数字、一个小装饰印章和一行标签。
    • 图表占位符——带有手绘坐标轴和不规则折线的卡片。添加3–4个点标记。
    • 柱状图占位符——包含不同高度阴影填充矩形的卡片。
    • 便签——1–2个黄/粉色便签，带有马克笔文字，用轻微旋转的胶带粘贴，固定在关键区域，标注“下一步”“第1页”或“需审核”。
  4. 编写单个HTML文档：
    • 包含
      <!doctype html>
      到
      </html>
      的完整结构，CSS内联。
    • 通过Google Fonts使用系统可用的“Caveat”“Patrick Hand”或“Architects Daughter”字体；否则 fallback到斜体衬线字体。
    • 各处添加轻微旋转效果（
      transform: rotate(-0.6deg)
      ），打破规整网格，营造手绘感。
    • 在页眉、标签页、侧边栏、KPI、图表、柱状图、便签上添加
      data-od-id
      属性。
  5. 自我检查：
    • 页面不应看起来像素级完美。如果是，说明过度渲染了。
    • 必须包含马克笔/铅笔风格、方格纸、阴影填充、便签；若有缺失，需补充。
    • 激活态标签带有荧光笔涂抹效果，其他标签没有。

Output contract

输出约定

Emit between 
<artifact>
tags:
<artifact identifier="wireframe-slug" type="text/html" title="Wireframe — Title">
<!doctype html>
<html>...</html>
</artifact>
One sentence before the artifact, nothing after.
在
<artifact>
标签内输出：
<artifact identifier="wireframe-slug" type="text/html" title="Wireframe — Title">
<!doctype html>
<html>...</html>
</artifact>
在artifact标签前写一句话，之后无内容。