JimmySadek

Wireframe Doc — Design skill for Claude Code

Design community

Figma is for designing; this is for deciding what to design.

How to install Wireframe Doc

This entry records only its repository, not the path inside it, so there is no exact command to give. Open JimmySadek/wireframe-doc and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Wireframe Doc does

Figma is for designing; this is for deciding what to design. Low-fi product wireframes as one shareable URL — a Claude Code skill.

Alternatives in Design

Doc — Read, create, and edit .docx documents with formatting and layout fidelity 14.6k ★
Brainstorm Experiments New — Design lean pretotypes for new product validation 7.8k ★
Grade — Generate a shareable HTML "Design Report Card" — letter grade, 8 dimensions, evidence (palette, type, rhythm) 3.6k ★

README

![wireframe-doc — Markdown spec to HTML wireframes](assets/banner.jpg)

[![Version](https://img.shields.io/badge/version-1.6.0-blue)](CHANGELOG.md) [![License: MIT](https://img.shields.io/badge/license-MIT-green)](LICENSE)

wireframe-doc

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 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)

*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 problem

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.

Who it's for

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