Design in
ASCII, Ship faster

Describe your UI in words. Get an instant ASCII wireframe. Iterate, export, and hand off to your coding agent — all inside the terminal.

Install ByteDesign See how it works ↓
claude — bytedesign
──────────────── ◆ FEATURES ◆ ────────────────

capabilities

Wireframing at the speed of thought

Instant Generation

Describe any UI — a button, a page, a multi-screen flow. Get a complete ASCII wireframe in seconds, not hours.

Natural Language Editing

"Move the sidebar to the left." "Add a search bar." Iterate on designs the way you think — in plain words.

Web & Mobile

Desktop dashboards, mobile apps, responsive layouts. Just describe your target platform in the prompt.

JSON Export

Export structured layout descriptions. Hand the JSON to any coding agent and go from wireframe to code instantly.

Claude Code Native

Runs as a slash command. No app switching, no context loss. Design and build in the same terminal session.

Zero Config

One markdown file. No runtime, no API keys, no dependencies. Install once, design forever.

examples

From words to wireframes

/bytedesign dashboard
┌────────┬───────────────────────────────┐ │ ◆ App │ Dashboard 🔔 (JD) │ │ ├───────────────────────────────┤ │ ▶ Home │ │ │ Users │ ┌────────┐ ┌────────┐ ┌────────┐ │ │ Stats │ │ Users │ │ Revenue│ │ Active │ │ │ │ │ 12,458 │ │ $48.2k │ │ 342 │ │ │ ─── │ │ ↑12.5% │ │ ↑ 8.2% │ │ ↓ 2.1% │ │ │ Gear │ └────────┘ └────────┘ └────────┘ │ │ │ │ │ │ ┌──────────────────────────┐ │ │ │ │ Name │ Email │ Role │ │ │ │ │───────┼───────┼───────│ │ │ │ │ Alice │ a@.. │ Admin │ │ │ │ │ Bob │ b@.. │ User │ │ │ │ └───────┴───────┴───────┘ │ └────────┴───────────────────────────────┘
/bytedesign mobile shopping
┌──────────────────────┐ │ ← ♡ 🛒(2)│ ├──────────────────────┤ │ │ │ ░░░░░░░░░░░░░░░░░░ │ │ ░░ Product Img ░░ │ │ ░░ 1 / 5 ░░ │ │ ░░░░░░░░░░░░░░░░░░ │ │ ● ○ ○ ○ ○ │ │ │ │ Cotton T-Shirt │ │ ★★★★☆ 4.2 (1.2k) │ │ │ │ ¥129 ¥199 -35% │ │ ────────────────── │ │ Color: │ │ [Wht] [Blk] [Gry] │ │ Size: │ │ [S] [ M ] [L] [XL] │ │ Qty: [−] 1 [+] │ ├──────────────────────┤ │ Chat │♡│[Add Cart][Buy]│ └──────────────────────┘
────────────── ◆ HOW IT WORKS ◆ ──────────────

workflow

Three commands. That's it.

01

Install the command

One command. Downloads a single markdown file to your Claude Code config.

$ curl -fsSL .../install.sh | bash
02

Describe what you see

Type /bytedesign, then describe your UI in any language. Be as vague or specific as you want.

> /bytedesign an e-commerce checkout with cart summary and payment form
03

Iterate and ship

Refine with follow-ups. Export JSON. Let your coding agent turn ASCII into real code.

> Export this as JSON and build it with Tailwind
╔════════════════════════════════════════════════════════╗

Start designing now

One install. Zero dependencies. Infinite wireframes.

$ curl -fsSL https://raw.githubusercontent.com/TsukimiTei/ByteDesign/main/install.sh | bash copy

— or clone & install —

$ git clone https://github.com/TsukimiTei/ByteDesign.git && cd ByteDesign && bash install.sh copy 
╚════════════════════════════════════════════════════════╝