Skip to content
UXClaim
Product Management

Wireframe Doc

Turn Markdown specs into shareable low-fi HTML wireframes. Decide what to design before committing to Figma.

View source More in Product Management

What it does

Wireframe Doc converts plain Markdown into a self-contained HTML wireframe deck. ASCII frames render in device chrome (phone, tablet, desktop) alongside reviewer notes, flow diagrams, and decision-flow logic cards—all as a single ~50-200 KB shareable URL. No design tool, no export overhead.

How it works

Write your product flow in Markdown using the included template: frontmatter, scene description, open questions, ASCII wireframes, and reviewer notes. The renderer transforms this spec into an interactive HTML page with frame enlargement modals, prev/next navigation, and one-click link copying for frame-specific discussion.

Use cases

  • Pre-design alignment: Share flows with cofounders before committing design cycles
  • Teams without designers: Sketch screens, drop a Slack link, collect async feedback
  • Cross-device testing: Test flows on phone/tablet/desktop simultaneously
  • Lightweight stakeholder review: Replace bulky Figma exports with URLs that work everywhere

Who benefits

Founders deciding product direction, product managers scoping flows, teams with no designer, anyone who needs fast feedback before high-fidelity design. Best for the messy pre-design moment when the screens are still in your head.

Frequently asked questions

How do I create a wireframe doc?
Copy `assets/spec-template.md` to your project. Fill in the frontmatter (title, description), define your scenes and frames using ASCII art, add reviewer notes, and run the renderer: `node scripts/wireframe-render.mjs your-spec.md output.html`. Open the HTML in a browser to preview.
What's the difference between wireframe-doc and Figma?
Wireframe-doc is for deciding what to design (low-fi, before design cycles); Figma is for making it look right (pixel-perfect, during design). Use wireframe-doc to align on flows with cofounders, then move to Figma for high-fidelity design.
How do I share a wireframe doc?
Deploy the single HTML output to any static host: Vercel, Netlify Drop, GitHub Pages, or a web server. Share the URL in Slack or email. Use each frame's 'Copy link' button to share specific screens for discussion.
Can I use wireframe-doc on my phone?
Yes. The output renders responsive HTML frames for phone, tablet, and desktop. Open the URL on any device—no app required. Frames enlarge in a modal when tapped or clicked.
What devices does wireframe-doc support?
Frames can render in iPhone, iPad, Android phone, Android tablet, desktop, and custom breakpoints. Specify device type in your Markdown spec, and the renderer wraps frames in appropriate chrome.
How large is a wireframe doc HTML file?
Small decks run ~50 KB; larger multi-flow decks scale to 200+ KB. All assets are embedded in one file, so no additional requests or downloads are needed. Works on slow connections.
Do I need a Claude API key to use wireframe-doc?
No. The skill itself uses Claude Code for rendering, but you only need Node.js installed locally to render Markdown to HTML. The output is plain HTML—no runtime dependencies.
Can I add reviewer notes and open questions?
Yes. Each frame can have reviewer notes displayed in a sidebar in the enlargement modal. Add an 'Open questions' section in your spec to list unresolved decisions, and decision-flow cards to map branching logic.

Glossary

ASCII wireframes
Text-based representations of screen layouts using characters to denote UI elements (buttons, inputs, lists). Quick to author, language-agnostic, and version-control friendly.
Device chrome
Visual frame around a wireframe that represents a phone, tablet, or desktop browser—context for how the screen will be viewed.
Fidelity
Level of detail and polish in a design. Low-fidelity (wireframe-doc) focuses on structure and flow; high-fidelity (Figma) includes visual design, typography, and pixel-perfect layouts.
Self-contained HTML
A single HTML file that includes all CSS, JavaScript, and embedded assets (no external dependencies). Can be opened locally or deployed anywhere without build steps.

More in Product Management

All →
Product Management

SaaS Blueprint

End-to-end operating system with 80+ playbooks for building, launching, and scaling SaaS from MVP to market scale.

tuliosousapro
Product Management

Agent-Native Design

Design CLIs that work reliably for humans, AI agents, and orchestration systems simultaneously with schema-driven interfaces and safety tiers.

Agents365-ai