Wireframe

Sketch it. Hand the agent
the exact spec.

A fast board for sketching UI that hands your coding agent the exact spec — so it builds what you meant, on the first try.

Open the app Self-host / install
01Why

Stop describing layouts in paragraphs.

Claude Code
Claude Code
build this settings page
wireframe.pngwireframe.png
the layout
Text input (280x38 at 0,56) Dropdown (280x38 at 0,108) Checkbox (280x26 at 0,160)…spec.md
5 components · exact px
Done — exactly what you drew, first try. ✓
02How it works

Draw it. Export it. Hand it off.

1.

Draw it

Sketch the layout on the board. Real wireframe components, exact positions, nothing to configure.

phil@airfoil.studio
Admin
Email me a copy of my data
Save changes
2.

Export the spec

One export, two linked artifacts: the picture, and every component's type, position, size, and label. Hover a line — or a component — to see them matched.

phil@airfoil.studio
Admin
Email me a copy of my data
Save changes
spec.md
I have a wireframe image for you (I pasted it above/separately). This message is the exact spec behind the image.
Positions and sizes below are precise (pixels, origin top-left of the whole board). Use them for layout, spacing, and proportions.
Text, block (280x60 at 0,0): Account settings
Text input (280x38 at 0,56)
Dropdown (280x38 at 0,108)
Checkbox (280x26 at 0,160): Label
Button (88x40 at 0,216): Save changes
3.

Hand it to your agent

Both pieces land in the chat. The agent builds what you drew, first try.

Claude Code
Building your settings page from the wireframe.
wireframe.pngwireframe.png
image · the layout
Text input (280x38 at 0,56) Dropdown (280x38 at 0,108) Checkbox (280x26 at 0,160)…spec.md
5 components · exact px
Message…⏎
03The skill

Or let your agent ask.

Install the companion skill and your agent learns when a request is too vague to build from — and hands you the board itself.

Claude Code
build me a settings page
Message…⏎
Opens pre-filled in the agent you already use
Claude Code Cursor ChatGPT or paste into anything else

Install.

The whole app is a single self-contained HTML file with no build step, no account, and no telemetry. It installs as a PWA and works offline.

Use it

  1. Open wireframe.airfoil.studio/app. Or clone the repo and open app/index.html straight from disk.
  2. Your board autosaves locally. Add it to your dock or home screen as an app.

Install the agent skill

  1. Works unchanged in Claude Code, Codex, Cursor, and Aside — the standard Agent Skills format.
  2. Easiest: the skills CLI auto-detects your agents and puts it in the right place:
npx skills add hedayatnia/wireframe --skill wireframe-first

Personal (every project):

mkdir -p ~/.claude/skills/wireframe-first curl -sL https://raw.githubusercontent.com/hedayatnia/wireframe/main/skills/wireframe-first/SKILL.md -o ~/.claude/skills/wireframe-first/SKILL.md

Per-project instead: .claude/skills/wireframe-first/ inside the repo. Claude Code picks up new skills live; invoke it directly with /wireframe-first or let it trigger on vague UI requests.

One file. Runs anywhere.
npx skills add hedayatnia/wireframe --skill wireframe-first
Open the app →
© 2026 Phil HedayatniaAirfoilGitHub