Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
Figma is for designing. wireframe-doc is for deciding what to design.
A Claude Code skill that turns a Markdown spec into a single self-contained HTML page of low-fidelity screen wireframes — ASCII frames in device chrome, a flow diagram, decision-flow logic cards, reviewer notes — that you share as one URL. ~50 KB for a small deck, scaling to ~200 KB+ for a large multi-flow one — no design tool, no export. Built for the messy moment before design: when you need cofounders or your team reacting to the screens in your head.
The "Dispatch board" frame (desktop) from the FieldPilot job-dispatch showcase, opened in the enlarge modal — composed top→body→bottom, its reviewer notes alongside. Authored as plain Markdown ASCII; shared as one URL.
The fastest way to align on a product flow is to show people the screens. But the tools for that are heavy — Figma means a license, a learning curve, and a ~1.8 MB export for what's still just a sketch. So the screens stay in your head, or in a doc nobody can picture, and you commit to a design before anyone's reacted to the flow.
- Founders, pre-design — get cofounders reacting to a flow before you spend a design cycle on it.
- Product and engineering with no designer in the loop — sketch the screens, drop the link in Slack, read the notes when people get to them.
- Anyone who'd otherwise send a heavy Figma export — replace it with a URL that opens on a phone.
| wireframe-doc | Figma / design tool | |
|---|---|---|
| Stage | Before design — deciding the flow | During design — making it real |
| Fidelity | Low-fi, intent over polish | Pixel-perfect |
| Output | One URL (~50 KB small, ~200 KB+ large) | ~1.8 MB file / export |
| Audience | Cofounders, team, async reviewers | Designers, stakeholders |
Use wireframe-doc to decide what to build. Switch to a real design tool to make it look right.
When an AI agent triggers this skill, it reads SKILL.md — the authoring contract that teaches it how to produce a quality wireframe deck. Humans don't need to. Here's where to look:
- SKILL.md — the authoring contract. Agents read this at trigger time; humans can skim it to understand what good output looks like.
- examples/showcase/poc.md — the canonical screenshot-verified example (6 frames across phone, tablet, and desktop; 2 flows; the full feature set).
- assets/spec-template.md — copy this to start a new wireframe doc.
- tests/fixtures/ — renderer fixture coverage.
- Copy assets/spec-template.md to your project
- Fill in frontmatter + scene + open questions + frames + notes
- Render: node scripts/wireframe-render.mjs your-spec.md output.html
- Open output.html in a browser, or deploy to any static host
- Share the URL — or use a frame's Copy link button to share one screen for discussion
The render output is a single self-contained HTML file. Deploy it anywhere:
- Vercel — vercel deploy --prod --yes
- Netlify — drag the HTML file to Netlify Drop
- GitHub Pages — commit as index.html to a gh-pages branch
One canonical, screenshot-verified example ships with the skill — examples/showcase/poc.md (FieldPilot job dispatch, 6 frames across phone / desktop / tablet, 2 flows). Render it:
node scripts/wireframe-render.mjs examples/showcase/poc.md /tmp/showcase.html