Using the wireframe tool with an AI assistant

Ask any AI assistant to design a layout, then copy and paste its layout text into the wireframe tool. There is no account, API or plugin, and nothing leaves your browser.

Quick start

Copy the prompt below and fill in what you want to build.
Paste it into your assistant. It reads the plain-text guide and replies with layout text in a code block.
Copy the code block, open the tool, and click Import in the toolbar. Paste the text and click Replace canvas, or Add to canvas to keep existing elements.

For assistants that can open links:

Prompt

Design a wireframe for [describe your site or app, and whether you want a browser version, a phone version or both]. Read https://john-richardson.net/tools/wireframing/agents.txt for the layout format (if you can't open links, tell me and I'll paste it). Reply with the layout text in one code block that I can paste into the tool's Import dialog. Use frame sections for each version. Do not put the layout in a URL.

Works with any assistant, even one that can't browse the web. It contains the whole format:

Full prompt

I'm using a free online wireframe tool that imports a simple text layout. Design a wireframe for: [describe your site or app, and whether you want a browser version, a phone version or both].

Reply with ONE code block containing only the layout text (no commentary inside it) and a one-line note outside it. Do not put the layout in a URL.

FORMAT - one element per line:
type [x y w h] ["text"]
- x y w h are pixels from the top left. Give all four, or none. With no numbers, lines stack top to bottom 20px apart (full-width types span the frame, others are centred).
- "text" is optional and always in double quotes.
- "frame browser" (1200px wide) or "frame phone" (390px wide) on its own line starts a section. The page can be any height.
- Later lines draw on top. Align to a 20px grid. Keep text short. Use 8 to 30 elements.
- Browser: keep content between x=100 and x=1100 (three cards: x=100, 450, 800 at w=300). Phone: 20px side margins, one column.

ELEMENT TYPES (default size):
rect (200 x 120) - text: optional label centred in the box
circle (120 x 120)
heading (360 x 40) - text: the heading text
paragraph (360 x 80)
button (140 x 44) - text: button label
divider (360 x 20)
image (280 x 180) - text: caption under the placeholder icon
video (400 x 225)
avatar (64 x 64)
logo (150 x 44) - text: wordmark next to the logo mark
input (280 x 44) - text: placeholder text
checkbox (200 x 28) - text: label
list (280 x 140)
form (360 x 340) - text: form title (Name, Email, Message and Submit are drawn automatically)
navbar (full width x 70) - text: logo text
floatnav (480 x 56) - text: comma-separated menu items (first is highlighted)
menu (360 x 32) - text: comma-separated menu items (first is underlined)
burger (44 x 44)
dropdown (180 x 40) - text: placeholder text
menulist (190 x 170) - text: comma-separated menu items
usermenu (84 x 40) - text: optional user name
hero (full width x 360) - text: headline
features (800 x 200)
cta (800 x 160) - text: banner heading
card (280 x 320) - text: card title
pricing (260 x 360) - text: plan name
testimonial (400 x 200) - text: person name
accordion (360 x 220) - text: comma-separated row titles (first row is open)
tabs (420 x 160) - text: comma-separated tab names (first is active)
slider (600 x 300)
table (560 x 220)
modal (420 x 260) - text: modal title
footer (full width x 140)

EXAMPLE:
frame browser
navbar 0 0 1200 70 "Acme"
hero 0 90 1200 400 "Plan trips together"
card 100 520 300 320 "Flights"
card 450 520 300 320 "Hotels"
card 800 520 300 320 "Cars"
cta 100 880 1000 160 "Join the beta"
footer 0 1080 1200 140

frame phone
navbar 0 0 390 70 "Acme"
hero 0 90 390 360 "Plan trips together"
card 50 480 290 320 "Flights"
footer 0 840 390 140

Layout format

One element per line:

Format

type [x y w h] ["text"]

x y w h are pixels from the top left. Give all four, or none for auto-layout.
"text" is optional and always in double quotes.
frame browser or frame phone on its own line starts a section for that frame. Browser is 1200px wide and phone is 390px wide. The page grows downwards, so any height works.
Lines with no numbers stack top to bottom, 20px apart. Navbar, hero and footer span the width and the rest are centred.
Later lines draw on top of earlier ones. Lines starting with # or // are ignored.

Example

frame browser
navbar 0 0 1200 70 "Acme"
hero 0 90 1200 400 "Plan trips together"
card 100 520 300 320 "Flights"
card 450 520 300 320 "Hotels"
card 800 520 300 320 "Cars"
cta 100 880 1000 160 "Join the beta"
footer 0 1080 1200 140

frame phone
navbar 0 0 390 70 "Acme"
hero 0 90 390 360 "Plan trips together"
card 50 480 290 320 "Flights"
footer 0 840 390 140

Auto-layout example (no coordinates)

Auto-layout example

navbar "Acme"
hero "Plan trips together"
features
cta "Join the beta"
footer

JSON is also accepted: { "frame": "browser", "elements": [ { "type": "hero", "x": 0, "y": 90, "w": 1200, "h": 400, "text": "Headline" } ] }

Importing your layout

Copy the layout text from your assistant's code block. In the tool, click Import in the toolbar, or choose Import layout… from the project menu. Paste the text and click Replace canvas.

Browser and phone sections can be imported together. Use Add to canvas if you want to keep your existing elements.

Sending feedback back

Select any element and type in its Note field to record an issue or a change. A yellow badge marks it on the canvas. Then open Import and click Copy layout with notes. Notes appear as note "..." lines under their element:

Layout with a note

hero 0 90 1200 400 "Plan trips together"
note "Headline too long; make the call to action more prominent"

Prompt to send with it:

Prompt

Here is my current wireframe layout. Lines starting with note are my feedback on the element directly above them. Apply the changes and give me the full updated layout in one code block, without the note lines, using the same format. If a note is unclear, ask me instead of guessing.

[paste the copied layout here]

Tips for good wireframes

Work top to bottom: navbar, hero, content sections, call to action, footer.
Align to a 20px grid, so x, y, w and h are multiples of 20.
Browser: keep content between x=100 and x=1100. Three cards sit at x=100, 450 and 800, each 300 wide.
Phone: keep a 20px margin, stack content in one column, and use a navbar, which shows a burger menu at that width.
Keep text short. Wireframes show structure, not copy.

Element types

Basic

Type	Default size	Text
rect	200 × 120	optional label centred in the box
circle	120 × 120	not used
heading	360 × 40	the heading text
paragraph	360 × 80	not used
button	140 × 44	button label
divider	360 × 20	not used

Media

Type	Default size	Text
image	280 × 180	caption under the placeholder icon
video	400 × 225	not used
avatar	64 × 64	not used
logo	150 × 44	wordmark next to the logo mark

Forms

Type	Default size	Text
input	280 × 44	placeholder text
checkbox	200 × 28	label
list	280 × 140	not used
form	360 × 340	form title (Name, Email, Message and Submit are drawn automatically)

Navigation

Type	Default size	Text
navbar	full width × 70	logo text
floatnav	480 × 56	comma-separated menu items (first is highlighted)
menu	360 × 32	comma-separated menu items (first is underlined)
burger	44 × 44	not used
dropdown	180 × 40	placeholder text
menulist	190 × 170	comma-separated menu items
usermenu	84 × 40	optional user name

Blocks

Type	Default size	Text
hero	full width × 360	headline
features	800 × 200	not used
cta	800 × 160	banner heading
card	280 × 320	card title
pricing	260 × 360	plan name
testimonial	400 × 200	person name
accordion	360 × 220	comma-separated row titles (first row is open)
tabs	420 × 160	comma-separated tab names (first is active)
slider	600 × 300	not used
table	560 × 220	not used
modal	420 × 260	modal title
footer	full width × 140	not used

For agents that control a browser

On the tool page, window.wireframe is available:

window.wireframe.load(text, { add: false }) imports layout text or JSON and returns { added, warnings }. Use add: true to append instead of replace.
window.wireframe.export() returns the current layout as text.

Plain-text version of this guide: /tools/wireframing/agents.txt

Something missing?

If an element or option would make this easier for you or your assistant, let me know.

Contact me