wireframe-sketch
Grid background + marker brushstrokes + multi-tabs + sticky notes + scribble charts
1How It Works & Mechanism
This skill is not an executable program, but rather a "template" for html-anything: a directory (SKILL.md + example.html[/example.md]) scanned and read from disk at runtime by loader.ts—adding a new template simply means adding a directory, requiring no changes to TypeScript.
Adding a template = adding a folder. No TS code change required; the API
The frontmatter provides metadata for the selector/API (zh_name/en_name/emoji/description/category/scenario/aspect_hint/featured/recommended/tags) mapped to SkillMeta via fmToMeta(); the body following the frontmatter constitutes the actual specifications for the model.
zhName: fm.zh_name ?? fm.name ?? id,
During generation, this template body serves as the prompt body: /api/convert uses assemblePrompt() to concatenate "global design directives + this template's body + user content" into a prompt, passing it to the host's local agent CLI, with HTML streamed and captured via stdout.
prompt = assemblePrompt({ body: skill.body, content, format });
A layer of global directives (SHARED_DESIGN_DIRECTIVES) is prepended above the template body, standardizing technical and content rules before each template—the CDN and external font links commonly found in the example HTML originate here (injected by the host shell, not demanded by the template itself).
通过 CDN 引入 Tailwind v3 Play (https://cdn.tailwindcss.com) 与所需的 Google Fonts。
Outputs are returned as stdout text: global directives explicitly forbid the agent from touching the file system, leaving disk writing to the frontend—thus, the template directory contains neither scripts nor disk-writing capabilities.
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。
example.html is a pre-rendered example bundled with the package: /api/templates/<id>/preview returns it verbatim as text/html to an iframe (for inline preview in the selector), while /api/templates/<id>/example returns both example.md and example.html together.
return new Response(skill.exampleHtml, {
The body defines "hand-drawn wireframe" via four components: a graph-paper background, multi-tab variant labels, scribbled chart placeholders with hatched fills, and slightly rotated yellow sticky notes.
- Graph-paper 背景
The graph-paper background is achieved by superimposing two sets of repeating-linear-gradient layers (24px grid) rather than using image textures.
repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 24px),
The instruction "do not align rigidly" is quantified through numerous micro-rotations: tags at rotate(-2.2deg), tabs at rotate(-0.4deg), sticky notes at rotate(2.4deg)/(-3.2deg), and individual tilts on KPI cards.
.sticky.sn1 { top: 20px; right: 30px; background: var(--note-yellow); transform: rotate(2.4deg); }
Handwritten fonts are implemented in the example via a Caveat + Patrick Hand combination (plus DM Serif Display / IBM Plex Mono), without using the Architects Daughter specified in the body.
--hand-bold: 'Caveat', 'Patrick Hand', cursive;
Chart placeholders utilize inline SVG "doodles" (.panel svg.scribble), complying with the global directive to "prioritize inline CSS / SVG rendering".
.panel svg.scribble { width: 100%; height: 160px; display: block; }
The CLI side contains another direct keyword matching path: skills-matcher.ts maps keywords in user content directly to the template id, assigning confidence = match_count × 2 + 3 upon hit; if it reaches threshold 3, it follows local rules without having the model select a template.
[["原型", "prototype", "线框", "wireframe", "mockup", "低保真", "sketch", "手绘"], "prototype-web"],
Threshold constants used in CLI fallback matching: content length must exceed 60 characters before enabling AI summary matching; the strong signal threshold is 3.
const MIN_CONTENT_LENGTH_FOR_AI = 60;
The host shell uses an iframe with sandbox="allow-scripts allow-same-origin" to render examples/artifacts (allowing scripts and same-origin)—this is a product shell tradeoff, documented under risks, and does not affect the rating of this skill.
sandbox="allow-scripts allow-same-origin"
2Core Capabilities
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| network | Google Fonts（Caveat / Patrick Hand / DM Serif Display / IBM Plex Mono） |
| network | Google Fonts 静态资源域（preconnect） |
4Recommended Governance & Evidence
- SKILL.md: Pure prompt directives and rule text, without script execution or external side effects
5Second-Pass Verification
- [ok] skill 目录文件清单 — find 得 SKILL.md + example.html，无 scripts/references。
- [ok] 无脚本执行 — grep -c "<script" example.html = 0；SKILL.md 无脚本指令。
- [ok] 外部端点仅字体 — example.html 仅 fonts.googleapis.com css2 与 fonts.gstatic.com preconnect；SKILL.md 正文无 URL。
- [discrepancy] 正文字体 vs 示例字体 — SKILL.md 写「字体: Caveat / Architects Daughter」，example.html 实际加载 Caveat + Patrick Hand（--hand: 'Patrick Hand', 'Caveat' / --hand-bold 反之），未出现 Architects Daughter。
- [discrepancy] CLI 强信号是否覆盖本模板 — cli/src/skills-matcher.ts 中 wireframe/线框/sketch/手绘 的关键词行映射到 "prototype-web"（第 35 行），全套 STRONG_SIGNALS 无 wireframe-sketch 行；本模板仅能通过 fallbackMatch（tags 命中 +3/条）或手选命中。
- [ok] graph-paper 与 sticky note 是否落地 — 两处 repeating-linear-gradient(…1px 24px) 构成网格；.sticky.sn1/sn2 用 --note-yellow/--note-pink 并带 rotate(2.4deg)/(-3.2deg)。
- [ok] 判级 green 自证 — 目录零脚本文件、零凭证、零写盘；正文无运行时接口，端点仅见示例 → green。
- [ok] official_desc 逐字 — meta.official_desc 取自 frontmatter description 原文「网格背景 + marker 笔触 + 多 tab + sticky note + scribble 图表」。
6Verdict & Scenarios
40e72150a36c51da…