Press enter or click to view image in full size
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ T H E F A S T E S T W A Y T O G O F R O M 0 → 1 ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛~15 years ago, we had Balsamiq Mockups (2008). Deliberately sketchy. Intentionally low-fidelity. The comic-sans-looking wireframes were a feature, not a bug — they kept stakeholders from obsessing over button colors when we were still figuring out if the damn thing should exist at all.
Press enter or click to view image in full size
Press enter or click to view image in full size
~12 years ago, Sketch (2010) changed the game for UI designers — lighter than Photoshop, purpose-built for interfaces. InVision (2011) let you turn static mockups into clickable prototypes you could actually demo.
~10 years ago, tools like Lucidchart and Draw.io emerged. Flowcharts met wireframes. Teams mapped user journeys and information architecture. Still relatively abstract, but the boxes got cleaner, the arrows got smarter.
Press enter or click to view image in full size
~8 years ago, Figma (2016) changed everything. Browser-based. Real-time collaboration. No more “which version is latest?” By 2019, it had auto-layout, variants, and multiplayer — prototypes became indistinguishable from production.
~2 years ago, AI entered the chat. v0, Lovable, Bolt — describe what you want, get working code. You can skip the design tool entirely.
But here’s the thing: AI-generated UIs are high-fidelity by default. Describe a dashboard, you get a dashboard — complete with colors, fonts, shadows. You’re back in the trap of committing to aesthetics before structure is right.
Beautiful.
But also… dangerous, very slow, and costly.
The High-Fidelity Trap
Here’s what happened: prototyping became production design.
When your “wireframe” looks indistinguishable from the shipped product, you’re no longer exploring — you’re committing. Every stakeholder review becomes a design critique. Every prototype iteration carries the weight of aesthetic decisions.
We traded speed for fidelity. We traded exploration for polish. We traded “is this the right structure?” for “should this blue be 3% darker?”
Don’t get me wrong — Figma is phenomenal for what it does. But sometimes you don’t need a high-fidelity prototype. Sometimes you need to shape the idea.
Enter: ASCII-Driven Development
For the past several months, I’ve been doing something that feels almost strange:
Prototyping UIs using ASCII characters.
Not as an aesthetic choice. Not as nostalgia. But as a thinking tool.
+------------------------------------------------------------------+
| ASCII-Driven Development |
| ────────────────────────────────────────────────────────────────|
| ✓ See structure without design distraction |
| ✓ Iterate in seconds, not minutes |
| ✓ Focus on flow, hierarchy, and components |
| ✓ Perfect for LLM-assisted ideation |
+------------------------------------------------------------------+I call it ASCII-Driven Development — and it’s become my go-to method for getting from zero to one. Fast feedback. Easy for anyone on the team to jump in, edit, and comment.
Why ASCII Works for Early-Stage Thinking
ASCII forces abstraction. You literally cannot get distracted by:
- Color palettes
- Font choices
- Spacing systems
- Border radii
- Shadow depths
- Gradient directions
What you can see clearly:
- Hierarchy — What’s primary? What’s secondary?
- Flow — Where does the eye go? What’s the journey?
- Components — What are the building blocks?
- Density — Is this too busy? Too sparse?
- Relationships — What’s grouped? What’s separated?
ASCII is the skeleton before the skin.
The LLM Advantage
Here’s the thing that makes this especially powerful.
LLMs are remarkably good at generating and manipulating ASCII layouts.
You can describe a UI in natural language, and in seconds get back a structured ASCII representation. Then iterate conversationally:
> “Make the sidebar collapsible”
> “Add a secondary action bar”
> “Split the main content into a 2:1 grid”
> “Show what happens when a modal opens”
No design tool. Just conversation → structure → conversation.
It’s pair-designing at the speed of thought.
Examples: UIs in ASCII
Let me show you what ASCII prototyping looks like.
Example 1: Enterprise SaaS Dashboard
This is a full analytics dashboard with navigation, metrics, charts, tables, and contextual actions.
╔══════════════════════════════════════════════════════════════════════════════════════════════╗
║ ☰ ACME Analytics 🔍 Search... 🔔 3 (JD) ║
╠══════════════════════════════════════════════════════════════════════════════════════════════╣
║ ║
║ ┌──────────────┐ ┌────────────────────────────────────────────────────────────────────┐ ║
║ │ 📊 ANALYTICS │ │ │ ║
║ │──────────────│ │ Dashboard / Overview [+ New Report] │ ║
║ │ ▸ Overview │ │ │ ║
║ │ Funnels │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ ║
║ │ Cohorts │ │ │ TOTAL USERS │ │ ACTIVE NOW │ │ REVENUE MTD │ │ CHURN │ │ ║
║ │ Events │ │ │─────────────│ │─────────────│ │─────────────│ │─────────────│ │ ║
║ │ │ │ │ 124,892 │ │ 3,421 │ │ $847,230 │ │ 2.3% │ │ ║
║ │ 👥 USERS │ │ │ ↑ 12.4% │ │ ↑ 847 │ │ ↑ 18.2% │ │ ↓ 0.4% │ │ ║
║ │──────────────│ │ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ │ ║
║ │ Segments │ │ │ ║
║ │ Explorer │ │ ┌──────────────────────────────────┐ ┌───────────────────────┐ │ ║
║ │ Profiles │ │ │ Revenue Trend (6 months) │ │ Traffic Sources │ │ ║
║ │ │ │ │──────────────────────────────────│ │───────────────────────│ │ ║
║ │ 💰 REVENUE │ │ │ ╭──── │ │ │ │ ║
║ │──────────────│ │ │ ╭────╯ │ │ Direct ████ 42% │ │ ║
║ │ Overview │ │ │ ╭────╯ │ │ Organic ███ 28% │ │ ║
║ │ Products │ │ │ ╭────╯ │ │ Referral ██ 18% │ │ ║
║ │ Invoices │ │ │ ╭────╯ │ │ Paid █ 12% │ │ ║
║ │ │ │ │ ╭────╯ │ │ │ │ ║
║ │ ⚙️ SETTINGS │ │ │───╯ │ │ [ View Details → ] │ │ ║
║ │──────────────│ │ │ J F M A M J │ └───────────────────────┘ │ ║
║ │ Team │ │ └──────────────────────────────────┘ │ ║
║ │ Billing │ │ │ ║
║ │ API Keys │ │ ┌────────────────────────────────────────────────────────────┐ │ ║
║ │ Integr. │ │ │ Recent Events Filter ▾ │ │ ║
║ │ │ │ │────────────────────────────────────────────────────────────│ │ ║
║ └──────────────┘ │ │ USER EVENT SOURCE TIME │ │ ║
║ │ │────────────────────────────────────────────────────────────│ │ ║
║ │ │ john@acme.com Signed up Google 2 min ago │ │ ║
║ │ │ maria@corp.io Upgraded Plan Direct 5 min ago │ │ ║
║ │ │ alex@startup.co Created Report Referral 12 min ago │ │ ║
║ │ │ sarah@big.co Invited Team Email 18 min ago │ │ ║
║ │ │ mike@agency.io Exported Data Direct 24 min ago │ │ ║
║ │ │ │ │ ║
║ │ │ [ Load More ] │ │ ║
║ │ └────────────────────────────────────────────────────────────┘ │ ║
║ │ │ ║
║ └────────────────────────────────────────────────────────────────────┘ ║
║ ║
╚══════════════════════════════════════════════════════════════════════════════════════════════╝What you can already evaluate:
- Navigation hierarchy is clear (sections with sub-items)
- KPI cards are scannable at a glance
- Chart + breakdown share the row (60/40 split?)
- Event table has clear columns and actions
- Primary action (New Report) is positioned top-right
Example 2: E-Commerce Product Page
A product detail page with images, variants, reviews, and related items.
╔══════════════════════════════════════════════════════════════════════════════════════════════╗
║ 🛒 SHOPIFY STORE [Catalog] [Collections] [About] 🔍 ♡ 3 🛒 2 (ME) ║
╠══════════════════════════════════════════════════════════════════════════════════════════════╣
║ ║
║ Home › Furniture › Chairs › Ergonomic Office Chair ║
║ ║
║ ┌─────────────────────────────────────┐ ┌────────────────────────────────────────────┐ ║
║ │ │ │ │ ║
║ │ │ │ ERGONOMIC OFFICE CHAIR PRO │ ║
║ │ ┌─────────────────┐ │ │ ════════════════════════════════════════ │ ║
║ │ │ │ │ │ │ ║
║ │ │ │ │ │ ★★★★☆ 4.7 (2,847 reviews) │ ║
║ │ │ [PRODUCT │ │ │ │ ║
║ │ │ IMAGE] │ │ │ $549.00 ̶$̶6̶9̶9̶.̶0̶0̶ (Save 21%) │ ║
║ │ │ │ │ │ or 4 payments of $137.25 with Klarna │ ║
║ │ │ │ │ │ │ ║
║ │ └─────────────────┘ │ │ ─────────────────────────────────────── │ ║
║ │ │ │ │ ║
║ │ ┌───┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ │ │ COLOR │ ║
║ │ │ 1 │ │ 2 │ │ 3 │ │ 4 │ │ 5 │ │ │ [●] Midnight Black │ ║
║ │ └───┘ └───┘ └───┘ └───┘ └───┘ │ │ [ ] Storm Gray │ ║
║ │ │ │ [ ] Arctic White │ ║
║ │ [ ◀ ] [ ▶ ] │ │ │ ║
║ └─────────────────────────────────────┘ │ HEADREST │ ║
║ │ (●) With Headrest (+$79) │ ║
║ │ ( ) Without Headrest │ ║
║ │ │ ║
║ │ ARMRESTS │ ║
║ │ ▾ [4D Adjustable Arms ] ▾ │ ║
║ │ │ ║
║ │ QTY [ - ] 1 [ + ] │ ║
║ │ │ ║
║ │ ┌────────────────────────────────────┐ │ ║
║ │ │ 🛒 ADD TO CART │ │ ║
║ │ └────────────────────────────────────┘ │ ║
║ │ ┌────────────────────────────────────┐ │ ║
║ │ │ ♡ ADD TO WISHLIST │ │ ║
║ │ └────────────────────────────────────┘ │ ║
║ │ │ ║
║ │ ✓ Free shipping on orders over $100 │ ║
║ │ ✓ 30-day money-back guarantee │ ║
║ │ ✓ 5-year warranty included │ ║
║ └────────────────────────────────────────────┘ ║
║ ║
║ ───────────────────────────────────────────────────────────────────────────────────────── ║
║ ║
║ [ Description ] Features Specifications Reviews (2,847) ║
║ ════════════════════════════════════════════════════════════════════════════════════════ ║
║ ║
║ Designed for professionals who spend 8+ hours at their desk. The Ergonomic Office ║
║ Chair Pro features advanced lumbar support, breathable mesh back, and fully adjustable ║
║ components to fit any body type. ║
║ ║
║ KEY FEATURES ║
║ • Adaptive lumbar support system • 135° recline with tension control ║
║ • Breathable mesh back • Seat depth adjustment ║
║ • 4D adjustable armrests • Heavy-duty aluminum base ║
║ ║
║ ───────────────────────────────────────────────────────────────────────────────────────── ║
║ ║
║ CUSTOMER REVIEWS [ Write Review ] ║
║ ║
║ ┌────────────────────────────────────────────────────────────────────────────────────────┐ ║
║ │ ★★★★★ "Best chair I've ever owned" Verified Purchase │ ║
║ │ Sarah M. — Dec 15, 2024 │ ║
║ │ After 3 months of daily use, my back pain is completely gone. Worth every penny. │ ║
║ │ 👍 142 💬 12 [ Reply ] │ ║
║ └────────────────────────────────────────────────────────────────────────────────────────┘ ║
║ ┌────────────────────────────────────────────────────────────────────────────────────────┐ ║
║ │ ★★★★☆ "Great but assembly took forever" Verified Purchase │ ║
║ │ Mike T. — Dec 12, 2024 │ ║
║ │ Chair is amazing once assembled. Instructions could be clearer. Plan for 45+ min. │ ║
║ │ 👍 58 💬 4 [ Reply ] │ ║
║ └────────────────────────────────────────────────────────────────────────────────────────┘ ║
║ ║
║ [ Show all 2,847 reviews ] ║
║ ║
║ ───────────────────────────────────────────────────────────────────────────────────────── ║
║ ║
║ YOU MAY ALSO LIKE ║
║ ║
║ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ║
║ │ │ │ │ │ │ │ │ ║
║ │ [IMAGE] │ │ [IMAGE] │ │ [IMAGE] │ │ [IMAGE] │ ║
║ │ │ │ │ │ │ │ │ ║
║ │──────────────│ │──────────────│ │──────────────│ │──────────────│ ║
║ │ Standing │ │ Monitor Arm │ │ Desk Mat │ │ Footrest │ ║
║ │ Desk Pro │ │ Dual Mount │ │ Premium XL │ │ Ergonomic │ ║
║ │ ★★★★★ $899 │ │ ★★★★☆ $189 │ │ ★★★★★ $79 │ │ ★★★★☆ $129 │ ║
║ └──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘ ║
║ ║
╚══════════════════════════════════════════════════════════════════════════════════════════════╝What you can already evaluate:
- Image gallery with thumbnails is clearly positioned
- Product options (color, variants) are scannable
- Price hierarchy (sale price, original, payment plan) is evident
- Trust signals appear near CTA
- Tab structure for additional content
- Review cards show information hierarchy
- Related products follow e-commerce conventions
Example 3: Project Management Kanban Board
A Trello/Linear-style board with multiple columns, cards, and contextual menus.
╔══════════════════════════════════════════════════════════════════════════════════════════════╗
║ ⬡ Linear Projects ▾ [ 🔍 Search or jump to... ⌘K ] 🔔 ⚙️ (AV) ║
╠══════════════════════════════════════════════════════════════════════════════════════════════╣
║ ║
║ ◀ Projects / Mobile App Redesign ║
║ ║
║ [ Board ] List Timeline · Filter ▾ Group: Status ▾ · ⋮ ║
║ ║
║ ───────────────────────────────────────────────────────────────────────────────────────── ║
║ ║
║ BACKLOG (12) TODO (8) IN PROGRESS (4) IN REVIEW (2) DONE ✓ ║
║ ────────────── ────────────── ───────────────── ────────────── ──────── ║
║ ║
║ ┌────────────────┐ ┌────────────────┐ ┌─────────────────┐ ┌────────────────┐ ║
║ │ MOB-142 │ │ MOB-138 │ │ MOB-127 │ │ MOB-134 │ ║
║ │────────────────│ │────────────────│ │─────────────────│ │────────────────│ ║
║ │ Research new │ │ Design empty │ │ Implement new │ │ Update app │ ║
║ │ onboarding │ │ states for │ │ navigation │ │ icon set for │ ║
║ │ patterns │ │ dashboard │ │ drawer with │ │ iOS 18 │ ║
║ │ │ │ │ │ gesture support │ │ │ ║
║ │────────────────│ │────────────────│ │─────────────────│ │────────────────│ ║
║ │ 🏷️ research │ │ 🏷️ design │ │ 🏷️ feature │ │ 🏷️ design │ ║
║ │ 📅 Dec 28 │ │ ⚡ High │ │ ⚡ Urgent │ │ 👤 Maria │ ║
║ │ │ │ 👤 Alex │ │ 👤 Jordan │ │ 💬 3 │ ║
║ └────────────────┘ └────────────────┘ │ 💬 12 │ └────────────────┘ ║
║ └─────────────────┘ ║
║ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ ║
║ │ MOB-156 │ │ MOB-151 │ ┌─────────────────┐ │ MOB-129 │ ║
║ │────────────────│ │────────────────│ │ MOB-133 │ │────────────────│ ║
║ │ Audit current │ │ Create loading │ │─────────────────│ │ Add haptic │ ║
║ │ accessibility │ │ skeleton │ │ Fix memory leak │ │ feedback to │ ║
║ │ compliance │ │ components │ │ in image │ │ pull-refresh │ ║
║ │ │ │ │ │ carousel │ │ │ ║
║ │────────────────│ │────────────────│ │─────────────────│ │────────────────│ ║
║ │ 🏷️ tech-debt │ │ 🏷️ ui │ │ 🏷️ bug 🐛 │ │ 👤 Sarah │ ║
║ │ 📅 Jan 5 │ │ 👤 Sam │ │ ⚡ High │ │ 💬 1 │ ║
║ └────────────────┘ └────────────────┘ │ 👤 Chris │ └────────────────┘ ║
║ └─────────────────┘ ║
║ ┌────────────────┐ ┌────────────────┐ ║
║ │ MOB-161 │ │ MOB-149 │ ┌─────────────────┐ ║
║ │────────────────│ │────────────────│ │ MOB-141 │ ║
║ │ Evaluate │ │ Migrate to │ │─────────────────│ ║
║ │ React Native │ │ new analytics │ │ Dark mode │ ║
║ │ 0.73 upgrade │ │ SDK │ │ color system │ ║
║ │ │ │ │ │ implementation │ ║
║ │────────────────│ │────────────────│ │─────────────────│ ║
║ │ 🏷️ infra │ │ 🏷️ analytics │ │ 🏷️ feature │ ║
║ │ ⚡ Medium │ │ 📅 Dec 30 │ │ ⚡ Medium │ ║
║ └────────────────┘ └────────────────┘ │ 👤 Alex │ ║
║ │ 📎 2 │ ║
║ ┌ + Add issue ─ ┐ ┌ + Add issue ─ ┐ └─────────────────┘ ║
║ ║
║ │ ⋮ │ │ ⋮ │ ┌ + Add issue ─ ┐ ║
║ └───────────────┘ └───────────────┘ ║
║ ║
╚══════════════════════════════════════════════════════════════════════════════════════════════╝What you can already evaluate:
- Column headers show status + count
- Cards have consistent structure (ID, title, metadata)
- Priority and assignment are visible at a glance
- Comment indicators show activity
- Add buttons are contextually placed per column
- The “In Progress” column correctly has fewer items (WIP limits?)
Example 4: Multi-Step Checkout Flow
An e-commerce checkout with progress indicator, form validation, and order summary.
╔══════════════════════════════════════════════════════════════════════════════════════════════╗
║ 🛒 CHECKOUT Secure checkout 🔒 ║
╠══════════════════════════════════════════════════════════════════════════════════════════════╣
║ ║
║ ①───────────②───────────③───────────④ ║
║ SHIPPING PAYMENT REVIEW DONE ║
║ ✓ [●] ○ ○ ║
║ ║
║ ───────────────────────────────────────────────────────────────────────────────────────── ║
║ ║
║ ┌───────────────────────────────────────────────────┐ ┌────────────────────────────────┐ ║
║ │ │ │ ORDER SUMMARY │ ║
║ │ PAYMENT METHOD │ │────────────────────────────────│ ║
║ │ ═══════════════════════════════════════════════ │ │ │ ║
║ │ │ │ ┌────┐ Ergonomic Chair 1x │ ║
║ │ ┌─────────────────────────────────────────────┐ │ │ │░░░░│ Midnight Black │ ║
║ │ │ (●) Credit Card ( ) PayPal ( ) Apple │ │ │ └────┘ $549.00 │ ║
║ │ └─────────────────────────────────────────────┘ │ │ │ ║
║ │ │ │ ┌────┐ Monitor Arm 1x │ ║
║ │ CARD DETAILS │ │ │░░░░│ Dual Mount │ ║
║ │ ───────────────────────────────────────────────│ │ └────┘ $189.00 │ ║
║ │ │ │ │ ║
║ │ Card number │ │────────────────────────────────│ ║
║ │ ┌─────────────────────────────────────────────┐ │ │ │ ║
║ │ │ 4532 •••• •••• 7890 💳 │ │ │ Subtotal $738.00 │ ║
║ │ └─────────────────────────────────────────────┘ │ │ Shipping FREE │ ║
║ │ │ │ Tax $59.04 │ ║
║ │ Expiry date CVV │ │ │ ║
║ │ ┌──────────────────┐ ┌──────────────────┐ │ │────────────────────────────────│ ║
║ │ │ 12 / 27 │ │ ••• 🔒 │ │ │ │ ║
║ │ └──────────────────┘ └──────────────────┘ │ │ TOTAL $797.04 │ ║
║ │ │ │ │ ║
║ │ Name on card │ │────────────────────────────────│ ║
║ │ ┌─────────────────────────────────────────────┐ │ │ │ ║
║ │ │ John Doe │ │ │ PROMO CODE │ ║
║ │ └─────────────────────────────────────────────┘ │ │ ┌────────────────┐ ┌────────┐ │ ║
║ │ │ │ │ │ │ APPLY │ │ ║
║ │ ☑ Save card for future purchases │ │ └────────────────┘ └────────┘ │ ║
║ │ │ │ │ ║
║ │ ═══════════════════════════════════════════════ │ └────────────────────────────────┘ ║
║ │ │ ║
║ │ BILLING ADDRESS │ ┌────────────────────────────────┐ ║
║ │ ───────────────────────────────────────────────│ │ SHIPPING TO │ ║
║ │ │ │────────────────────────────────│ ║
║ │ (●) Same as shipping address │ │ │ ║
║ │ ( ) Use a different billing address │ │ John Doe │ ║
║ │ │ │ 123 Main Street, Apt 4B │ ║
║ │ ═══════════════════════════════════════════════ │ │ San Francisco, CA 94102 │ ║
║ │ │ │ United States │ ║
║ │ │ │ │ ║
║ │ ┌───────────────┐ ┌─────────────────────────┐│ │ ✏️ Edit │ ║
║ │ │ ← Back │ │ Continue to Review →││ │ │ ║
║ │ └───────────────┘ └─────────────────────────┘│ └────────────────────────────────┘ ║
║ │ │ ║
║ └───────────────────────────────────────────────────┘ ║
║ ║
║ ───────────────────────────────────────────────────────────────────────────────────────── ║
║ 🔒 Your payment is secured with 256-bit SSL encryption ║
║ We accept: [VISA] [MC] [AMEX] [PAYPAL] [APPLE PAY] ║
║ ║
╚══════════════════════════════════════════════════════════════════════════════════════════════╝What you can already evaluate:
- Progress indicator shows current step clearly
- Two-column layout (form left, summary right)
- Form sections are logically grouped
- Input fields show expected format
- Order summary is always visible
- Trust signals (SSL, payment logos) at footer
- Navigation actions are clearly positioned
Example 5: Mobile App — Authentication Flow
ASCII works great for mobile layouts too. Here’s a login/signup flow:
┌─────────────────────────┐ ┌─────────────────────────┐ ┌─────────────────────────┐
│ ▔▔▔▔▔▔▔ 9:41 ▔▔▔▔▔▔▔▔▔ │ │ ▔▔▔▔▔▔▔ 9:41 ▔▔▔▔▔▔▔▔▔ │ │ ▔▔▔▔▔▔▔ 9:41 ▔▔▔▔▔▔▔▔▔ │
├─────────────────────────┤ ├─────────────────────────┤ ├─────────────────────────┤
│ │ │ ← Back │ │ ← Back │
│ │ │ │ │ │
│ │ │ │ │ ①────②────③────④ │
│ ╭───╮ │ │ Create Account │ │ ✓ ● ○ ○ │
│ ( ⬡ ) │ │ │ │ │
│ ╰───╯ │ │ ───────────────── │ │ │
│ │ │ │ │ What should we │
│ ACME APP │ │ Full name │ │ call you? │
│ │ │ ┌───────────────────┐ │ │ │
│ ───────────────── │ │ │ Sarah Chen │ │ │ ───────────────── │
│ │ │ └───────────────────┘ │ │ │
│ Welcome back │ │ │ │ @username │
│ │ │ Email │ │ ┌───────────────────┐ │
│ ───────────────── │ │ ┌───────────────────┐ │ │ │ @sarahchen │ │
│ │ │ │ sarah@email.com │ │ │ └───────────────────┘ │
│ Email │ │ └───────────────────┘ │ │ ✓ Username available │
│ ┌───────────────────┐ │ │ │ │ │
│ │ │ │ │ Password │ │ This is how others │
│ └───────────────────┘ │ │ ┌───────────────────┐ │ │ will find you. │
│ │ │ │ •••••••••• 👁️ │ │ │ │
│ Password │ │ └───────────────────┘ │ │ │
│ ┌───────────────────┐ │ │ ✓ 8+ characters │ │ │
│ │ │ │ │ ✓ One uppercase │ │ │
│ └───────────────────┘ │ │ ○ One number │ │ │
│ │ │ │ │ │
│ Forgot password? │ │ ┌───────────────────┐ │ │ │
│ │ │ │ Continue │ │ │ │
│ ┌───────────────────┐ │ │ └───────────────────┘ │ │ ┌───────────────────┐ │
│ │ Sign in │ │ │ │ │ │ Continue │ │
│ └───────────────────┘ │ │ By continuing you │ │ └───────────────────┘ │
│ │ │ agree to our Terms │ │ │
│ ─── or continue ─── │ │ and Privacy Policy │ │ [ Skip for now ] │
│ │ │ │ │ │
│ [G] [ ] [f] │ │ │ │ │
│ │ │ Already have an │ │ │
│ │ │ account? Sign in │ │ │
│ Don't have account? │ │ │ │ │
│ Sign up │ │ │ │ │
│ │ │ │ │ │
│▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔│ │▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔│ │▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔│
└─────────────────────────┘ └─────────────────────────┘ └─────────────────────────┘What you can already evaluate:
- Consistent header pattern across screens
- Password validation states
- Progress indicator for onboarding
- Social login options
- Secondary actions (skip, already have account)
- Input states and validation feedback
The Workflow
Here’s how I actually use ASCII-Driven Development:
Step 1: Describe, Don’t Design
Start with natural language:
“I need a settings page with sections for Profile, Security, Notifications, and Billing. Each section should be collapsible. Include a save button that’s sticky at the bottom. Render it in ASCII.”
Step 2: Iterate Fast
> “Move the Save button into each section instead of global” “Add a warning badge to Security if 2FA is disabled”
> “Show what it looks like on mobile”
Each iteration takes seconds.
Step 3: Feed It to an AI Code Generator
Here’s where it gets powerful.
Once your ASCII structure is locked, you don’t have to build from scratch. Take that ASCII and feed it directly to tools like:
- v0 (Vercel)
- Lovable
- Bolt
- Claude / GPT with code generation
These tools excel at turning structured specs into working code.
Your prompt becomes:
"Here's my UI structure in ASCII. Generate a React + shadcn/ui
implementation. Match the layout exactly. Use a dark theme with
blue accents."[paste ASCII here]
Your conversation with the AI shifts from “what should this do?” to “how should this look?”
Structure is solved. Now you’re just discussing:
- Color palette
- Typography choices
- Spacing and rhythm
- Animation and micro-interactions
- Responsive breakpoints
You’ve decoupled architecture from aesthetics — and you can iterate on each independently.
Collaboration Without Friction
Here’s something that surprised me: ASCII specs are incredibly collaborative.
Think about it. When your UI spec is a Figma file:
- Only people with Figma access can edit
- Only people who know Figma can contribute meaningfully
- Comments live in a separate layer from the artifact
- Version control is… Figma’s version control
Every day, they make it easier, but still, there is friction and learning involved.
When your UI spec is ASCII text:
- Anyone can edit it — PMs, engineers, founders, stakeholders
- Anyone can fork it — copy, paste, modify, propose alternatives
- It lives anywhere — Slack, Notion, GitHub, email
- It’s diffable — git tracks every change
- It’s promptable — paste it to an LLM and say “add a search bar”
┌────────────────────────────────────────────────────────────────────────┐
│ │
│ Designer: "Here's the dashboard layout" → [ASCII v1] │
│ ↓ │
│ PM: "Can we add a notifications → [ASCII v2] │
│ panel on the right?" │
│ ↓ │
│ Engineer: "What if the sidebar collapsed → [ASCII v3] │
│ on mobile? Like this..." │
│ ↓ │
│ Founder: "Love it. But add a quick → [ASCII v4] │
│ action button here" │
│ ↓ │
│ Everyone: "Ship it" → Feed to v0 │
│ │
└────────────────────────────────────────────────────────────────────────┘Just text. Just ideas. Just ship.
The PM who “can’t design” can absolutely draw a box with brackets. The engineer who hates Figma can absolutely rearrange some ASCII columns. The founder with feedback at 11pm can just… edit the doc.
Collaboration becomes additive instead of gated.
Why This Matters Now
We’re in an era where:
- LLMs can generate full UIs from prompts
- High-fidelity tools make everything look “finished” too early
- Speed of exploration matters more than pixel perfection
- AI code generators (v0, Lovable, Bolt) need clear specs
ASCII-Driven Development brings back the intentional low-fidelity that Balsamiq pioneered — but native to the LLM workflow.
It’s not about nostalgia for text terminals.
It’s about thinking clearly before building — and then handing a clean spec to AI tools that can build it for you.
Quick Reference: ASCII Component Vocabulary
Here’s a cheat sheet for common UI patterns:
CARDS TABS BUTTONS
┌─────────────┐ [ Active ] Inactive Inactive [ Primary ]
│ Title │ ─────────────────────────────── [Secondary]
│─────────────│ Link →
│ Content │ INPUTS
│ here │ ┌──────────────────┐ BADGES
└─────────────┘ │ Placeholder... │ (12) [NEW]
└──────────────────┘
PROGRESS
███████░░░░░░ 58% DROPDOWN TOGGLE
┌──────────────────┐ [●━━━] ON
CHECKBOX / RADIO │ Selected item ▾ │ [━━━●] OFF
☑ Checked └──────────────────┘
☐ Unchecked AVATAR
(●) Selected MODAL (JD) or [IMG]
( ) Unselected ╔═══════════════════╗
║ Modal Title ✕ ║ ICONS
TABLE ╠═══════════════════╣ 🔍 ⚙️ 🔔 ✓ ✕
┌────────┬────────┐ ║ Content ║ ← → ▲ ▼ ▸ ▾
│ Col 1 │ Col 2 │ ║ ║
├────────┼────────┤ ║ [Cancel] [Submit] ║ STATES
│ Data │ Data │ ╚═══════════════════╝ ✓ Success
└────────┴────────┘ ⚠ Warning
ACCORDION ✕ Error
NAVIGATION ▸ Collapsed section ◉ Active
▸ Active item ▾ Expanded section ○ Inactive
Inactive └ Content here
InactiveConclusion
Prototyping has come full circle.
From Balsamiq’s intentional sketchiness → to Figma’s pixel-perfect fidelity → to ASCII’s structured minimalism.
ASCII-Driven Development isn’t a step backward. It’s a return to first principles — optimized for the LLM age.
When you’re going from zero to one, you don’t need high-fidelity mockups. You need:
✅ Speed — iterate in seconds, not minutes
✅ Clarity — see structure without design distraction
✅ Focus — components and flow, not colors and shadows
✅ Portability — ASCII works as input for v0, Lovable, Bolt, or any LLM
✅ Separation of concerns — solve structure first, then design
The workflow is simple:
┌──────────────────────────────────────────────────────────────────────┐
│ │
│ 1. Describe UI in natural language │
│ ↓ │
│ 2. Generate ASCII with LLM → iterate until structure is right │
│ ↓ │
│ 3. Feed ASCII to code generator (v0, Lovable, Bolt, Claude) │
│ ↓ │
│ 4. Now discuss design: colors, fonts, animations, polish │
│ ↓ │
│ 5. Ship │
│ │
└──────────────────────────────────────────────────────────────────────┘Structure and design become separate conversations. You’re not arguing about button colors when the navigation is still wrong. You’re not rebuilding layouts when you just wanted a different shade of blue.
Next time you’re starting a new UI, try this:
- Open Claude, GPT, or your favorite LLM
- Describe what you’re building
- Ask for ASCII
- Iterate until the structure feels right
- Paste into v0/Lovable/Bolt with design direction
- Ship
You might be surprised how much faster — and more intentionally — you build.