{"id":"ff6daa75-2bc8-4dc9-8f08-3b471be27c8f","slug":"wireframe-doc","kind":"skill","name":"wireframe-doc","summary":"Figma is for designing; this is for deciding what to design. Low-fi product wireframes as one shareable URL — a Claude Code skill.","owner":"JimmySadek","repoUrl":"https://github.com/JimmySadek/wireframe-doc","license":"MIT","licenseTier":"permissive","trust":"community","stars":4,"match":null,"fewStars":true,"format":"skill","createdAt":"2026-05-17T01:42:24.000Z","addedAt":"2026-10-21T23:06:57.227Z","logoUrl":"https://avatars.githubusercontent.com/u/75118?u=8d4c771ec616a6b211c8b725ffe7aa2b983777a1&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["developer-tools","design-media","files-documents"],"tags":["claude-code","figma-alternative","low-fidelity","mockup","wireframe","wireframes","wireframing"],"runtime":"binary","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-26T23:45:29.383Z","sample":false,"url":"https://conduits.dev/tools/wireframe-doc","language":"JavaScript","transports":["stdio"],"install":{},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"![wireframe-doc — Markdown spec to HTML wireframes](assets/banner.jpg)\n\n[![Version](https://img.shields.io/badge/version-1.6.0-blue)](CHANGELOG.md)\n[![License: MIT](https://img.shields.io/badge/license-MIT-green)](LICENSE)\n\n# wireframe-doc\n\n> Figma is for designing. **wireframe-doc is for deciding what to design.**\n\nA Claude Code skill that turns a Markdown spec into a single self-contained HTML\npage of low-fidelity screen wireframes — ASCII frames in device chrome, a flow\ndiagram, decision-flow logic cards, reviewer notes — that you share as one URL. ~50 KB for a small deck,\nscaling to ~200 KB+ for a large multi-flow one — no design tool, no export. Built for the\nmessy moment before design: when you need cofounders or your team reacting to\nthe screens in your head.\n\n![The FieldPilot showcase, enlarged: the desktop \"Dispatch board\" frame in a browser-chrome device shell — KPI strip on top, unassigned-jobs queue and fleet timeline as the body, action bar pinned to the bottom — beside its reviewer notes, with the Copy link button and the modal close/Prev/Next controls](assets/sample.png)\n\n*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.*\n\n## The problem\n\nThe fastest way to align on a product flow is to show people the screens. But\nthe tools for that are heavy — Figma means a license, a learning curve, and a\n~1.8 MB export for what's still just a sketch. So the screens stay in your head,\nor in a doc nobody can picture, and you commit to a design before anyone's\nreacted to the flow.\n\n## Who it's for\n\n- Founders, pre-design — get cofounders reacting to a flow before you spend a design cycle on it.\n- 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.\n- Anyone who'd otherwise send a heavy Figma export — replace it with a URL that opens on a phone.\n\n## wireframe-doc vs a real design tool\n\n| | wireframe-doc | Figma / design tool |\n|---|---|---|\n| Stage | Before design — deciding the flow | During design — making it real |\n| Fidelity | Low-fi, intent over polish | Pixel-perfect |\n| Output | One URL (~50 KB small, ~200 KB+ large) | ~1.8 MB file / export |\n| Audience | Cofounders, team, async reviewers | Designers, stakeholders |\n\nUse wireframe-doc to decide what to build. Switch to a real design tool to make it look right.\n\n## What's inside\n\nWhen 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:\n\n- **`SKILL.md`** — the authoring contract. Agents read this at trigger time; humans can skim it to understand what good output looks like.\n- **`examples/showcase/poc.md`** — the canonical screenshot-verified example (6 frames across phone, tablet, and desktop; 2 flows; the full feature set).\n- **`assets/spec-template.md`** — copy this to start a new wireframe doc.\n- **`tests/fixtures/`** — renderer fixture coverage.\n\n## Quick start\n\n1. Copy `assets/spec-template.md` to your project\n2. Fill in frontmatter + scene + open questions + frames + notes\n3. Render: `node scripts/wireframe-render.mjs your-spec.md output.html`\n4. Open `output.html` in a browser, or deploy to any static host\n5. Share the URL — or use a frame's **Copy link** button to share one screen for discussion\n\n## Deploy\n\nThe render output is a **single self-contained HTML file**. Deploy it anywhere:\n\n- **Vercel** — `vercel deploy --prod --yes`\n- **Netlify** — drag the HTML file to Netlify Drop\n- **GitHub Pages** — commit as `index.html` to a `gh-pages` branch\n\n## Examples\n\nOne 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:\n\n```\nnode scripts/wireframe-render.mjs examples/showcase/poc.md /tmp/showcase.html\n```\n"}