メニュー
Produce low-fidelity black-and-white UI wireframes as standalone SVG files. Use when asked to wireframe a screen, page, or flow, make a low-fi mockup or layout draft, bundle wireframes into a browsable viewer page, or publish wireframes for review.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | wireframe |
| description | Produce low-fidelity black-and-white UI wireframes as standalone SVG files. Use when asked to wireframe a screen, page, or flow, make a low-fi mockup or layout draft, bundle wireframes into a browsable viewer page, or publish wireframes for review. |
Produce low-fidelity, black-and-white UI wireframes as standalone SVG files. The goal is to communicate structure — what goes where, in what order, at roughly what size — without committing to colour, brand, or polish.
Wireframes are diagnostic, not decorative. Lock these tokens on every output:
| Token | Value | Notes |
|---|---|---|
| Stroke | #000 width 1.5 | All borders, dividers, outlines |
| Fill (boxes) | #fff | Default for cards/containers |
| Placeholder fill | #e6e6e6 | Image/avatar/empty-state regions |
| Text colour | #000 for labels, #666 for placeholder text | No other colours |
| Accent | #d33 (dashed) — annotation layer ONLY | Never inside real UI elements |
| Font | font-family="-apple-system, system-ui, sans-serif" | Single typeface across the whole file |
| Type scale | 12 caption · 14 body · 20 heading · 28 title | No other sizes |
| Grid | 8px snap, 24px gutter | All x/y/w/h must be multiples of 8 |
| Default canvas | 1280×800 desktop, 375×812 mobile, 768×1024 tablet | Pick one and state it in the comment |
If you need to highlight a specific region for a callout, use the annotation layer (red dashed). Never colourise the wireframe itself.
references/components.md and assemble the screen from the primitive snippets. Snap every coordinate to 8px.wireframes/<slug>.svg in the working directory. Filename slug describes the screen (login.svg, dashboard.svg, settings-account.svg).flow.svg that arranges thumbnails left-to-right with arrows between them.<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="800" viewBox="0 0 1280 800"
font-family="-apple-system, system-ui, sans-serif" fill="#fff" stroke="#000" stroke-width="1.5">
<!-- canvas border -->
<rect x="0" y="0" width="1280" height="800" />
<!-- example: a button -->
<g transform="translate(48, 48)">
<rect width="120" height="40" rx="4" />
<text x="60" y="25" font-size="14" text-anchor="middle" stroke="none" fill="#000">Continue</text>
</g>
</svg>
Two house-style gotchas worth memorising:
stroke="none" on <text> elements (text inherits the parent stroke and gets a halo otherwise).fill="#000") since the parent group fill is #fff for boxes.The full set of reusable primitives lives in references/components.md. Load it whenever you need a primitive whose exact markup you do not have in working memory. Do not re-derive primitives from scratch — copy the snippet and adjust coordinates.
Primitives provided:
For exact pixel values, palette tokens, and type sizes, see references/grid-system.md.
references/examples.md contains four complete wireframes you can copy and adapt:
When the user's request is close to one of these, start from the example and modify, rather than building from blank.
Every wireframe response should include:
When the user asks to bundle the wireframes into a browsable page ("make a page that shows the screens", "let me click through them", "show them all on one page") or to deploy/publish/host them, read references/viewer.md and start from assets/site-template.html.
Skip this skill when the request mentions brand, polish, real components, "production-ready", colour palettes, hi-fi, Figma export, or actual code/HTML/React deliverables. Specifically:
assets/template.svg — blank desktop canvas with hidden 8px-grid guides; copy as a starting point.assets/template-mobile.svg — same for 375×812 mobile.assets/site-template.html — minimal review-viewer page (sticky TOC + responsive collapse + lightbox). Copy to design/<task-slug>/index.html and fill in the sections when the user requests a viewer page.Gate merges and commits of AI-implemented work behind a comprehension quiz that the USER must pass. Use this whenever a nontrivial implementation is complete and the user is about to commit, merge, open a PR, or ship — or whenever the user says "quiz me", "gate this", "do I understand this", or asks to review AI-generated changes before accepting them. Also use proactively at the end of any substantial implementation session, even if the user doesn't ask, offer the quiz before suggesting a commit.
Turn a working session — the docs, issues, and half-formed ideas you've fed in, plus anything you point it at — into a spec and then a set of self-contained, executable implementation plans for OTHER models/agents to build. A senior architect that plans but never implements. Use when you have that context in hand and want it distilled into a PRD-style spec and broken into dependency-ordered, verifiable work items. Publishes to the repo's configured issue tracker or to markdown files.
Audit and harden Node.js projects against npm supply chain attacks — compromised maintainer accounts, malicious package versions, and install-script payloads. Use when reviewing or setting up package.json, lockfiles, .npmrc, Dockerfile, or CI workflows for security; when the user mentions npm security, supply chain attacks, `npm audit`, lockfile policy, install scripts, or min-release-age; also when the user wants to check whether their dependencies are safe, or recover from a suspected compromise.
Manage Val Town projects using the vt CLI. Use when working with Vals (Val Town serverless functions), syncing code to Val Town, creating HTTP endpoints, streaming logs, or managing Val Town branches. Triggers on tasks involving Val Town development, val creation/editing, or when user mentions "vt", "val town", or "vals".
Use when the user gives a rough idea, broad objective, unfinished `/goal`, plan, issue, visual target, optimization target, or research task and wants it refined into a concise Codex Goal contract with one durable objective, clear boundaries, realistic environment, measurable progress, evidence-based completion, checkpoints, cleanup, blockers, and an output strictly under the hard cap of 4,000 characters.
Guides structured ideation through Socratic questioning to explore problems, opportunities, and solutions. Use when brainstorming features, exploring use cases, or thinking through new ideas.