← Back to writing

Why I sketch with letters before any pixels

Before I describe anything visual to the AI, I rough it out in ASCII first. A few pipes and dashes is enough to lock the shape without spending an hour in Figma. The AI returns five working variations in twenty minutes. I pick one, we polish — no design files needed at all.
ASCII first a low-fidelity wireframe — letters and lines lock the shape commit to hierarchy, leave aesthetics open five working variations ask for N takes in one prompt no design files go straight from text to real HTML

A week ago I redesigned my personal contact page. Three actions, one page. I didn't open Figma. I didn't sketch on paper. I opened a text file and roughed it out:

┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ [video icon] │ │ [message] │ │ [people] │ │ 15 MIN CHAT │ │ REPLY IN 24H │ │ WORKSHOP │ │ │ │ │ │ │ │ Book a chat. │ │ Send a │ │ Looking for │ │ │ │ message. │ │ the workshop?│ │ │ │ │ │ │ │ Pick a slot↓ │ │ Open form → │ │ Go to DWB ↗ │ └──────────────┘ └──────────────┘ └──────────────┘

That's it. Three boxes. Each with a small mono label, a big headline, a body line, a CTA. Eight lines of plain text — no color, no font, no spacing decisions baked in.

I sent that brief to the AI with one extra line — I use Claude here, but ChatGPT, Gemini, Cursor, or any modern AI assistant works the same way:

"Same brief, three takes in ASCII. A is equal weight — three cards, no hierarchy. B is asymmetric — make the primary CTA big, the other two smaller. C is warmer — add a personal hero with my photo above the three doors."

Less than a minute later, the AI sent back these three variations in ASCII:

┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ [video] │ │ [message] │ │ [people] │ │ 15 MIN CHAT │ │ REPLY 24H │ │ WORKSHOP │ │ │ │ │ │ │ │ Book a chat. │ │ Send a │ │ Looking for │ │ │ │ message. │ │ the workshop?│ │ │ │ │ │ │ │ Pick a slot↓ │ │ Open form → │ │ Go to DWB ↗ │ └──────────────┘ └──────────────┘ └──────────────┘

Variant A · Equal weight, three cards, no hierarchy. The default you'll get when you don't bias the layout.

┌────────────────────────────────┐ ┌──────────────┐ │ [video] ★ FASTEST WAY │ │ [message] │ │ 15 MIN · CAL VIDEO │ │ REPLY 24H │ │ │ │ │ │ Book a chat with me. │ │ Send a msg → │ │ │ ├──────────────┤ │ Quick 15 min, anything on │ │ [people] │ │ your mind. Pick a slot below. │ │ WORKSHOP │ │ │ │ │ │ [ Pick a slot ↓ ] │ │ Go to DWB ↗ │ └────────────────────────────────┘ └──────────────┘

Variant B · Asymmetric. The Cal door dominates with a "fastest way" tag; the other two stack smaller on the right. Hierarchy without removing choices.

╭─────╮ │ ◯ │ ╰─────╯ Hi, I'm Pradeep. How can I help? [ NID · Intuit · 15+ years · 3 cos ] ┌────────────┐ ┌────────────┐ ┌────────────┐ │ Book a │ │ Send a │ │ DWB │ │ chat. │ │ message. │ │ workshop │ │ │ │ │ │ │ │ 15 min ↓ │ │ Form → │ │ Apply ↗ │ └────────────┘ └────────────┘ └────────────┘

Variant C · Warmer. Personal photo + greeting + credentials above three smaller doors. Says "real person on the other end."

Click between the tabs. The structural differences are obvious by looking, not by reasoning about hierarchy in the abstract.

Pixels lock you in. Letters free you up.

Optional: render the variants as HTML to confirm

ASCII tells you the shape. But before you finalize, you might want to see what each variant actually looks like — color, type, spacing, the feel of real layout. One more prompt does it:

"Render all three variants as working HTML. Cream background (#f7f3ea), my brand red as the primary accent, Inter for everything except the body which is Lora. Three separate browser-window mockups."

About 12 minutes later, here's what came back:

Variant A · Equal cards on cream
15 min · Cal Video
Book a chat.
Quick call. Pick a slot below — auto-confirms with a Cal Video link.
Pick a slot ↓
Reply within 24h
Send a message.
Specific question or just want to write? Drop a note — it lands in my inbox.
Open form →
designerswhobuild.in
Looking for the workshop?
If you're here about the workshop — that lives on its own site.
Go to DWB ↗
Variant A · Rendered. The equal-weight ASCII becomes three identical card sizes in real type and spacing.
Variant B · Asymmetric, primary CTA emphasized
★ Fastest way
Book a chat.
Pick a 15-min slot. Auto-confirms with a Cal Video link in your inbox.
↓ Pick a slot
Reply 24h
Send a message.
Drop a note.
DWB
Workshop?
Go to DWB.
Variant B · Rendered. The Cal door takes 60% with a gold "★ Fastest way" tag; the others stack smaller. The hierarchy ASCII suggested becomes real in pixels.
Variant C · Photo hero above the doors
PS
Hey there —
I'm Pradeep. Let's talk.
Ex-Intuit Ex-Goldman Chiblu
Book a chat.
Send a message.
Workshop?
Variant C · Rendered. Personal hero on top with a dashed yellow halo around the avatar, italic greeting, three credential pills. The warmth ASCII hinted at becomes obvious here.

I went with Variant B. The HTML render confirmed what the ASCII suggested — the asymmetric hierarchy felt right at every size. Twelve minutes from brief to decision; another twelve from decision to live page.

Decide in ASCII. Confirm in pixels.

That's the move I keep using. The decision happens in ASCII; the pixels just prove it. You brainstorm in letters with the AI — the brief is yours, the variations are the AI's. The HTML render is a verification step, not the comparison. No Figma. No design files. No moodboards.

Three things ASCII does that Figma doesn't

It sounds like a downgrade. It's actually the opposite.

It forces you to commit to structure. When you can't add color, gradient, or shadow, the only decision left is hierarchy. Where does the headline sit? Where do the CTAs go? What's the dominant element? You can answer those questions in five minutes. You can't fudge it with a pretty gradient.

It hides your existing aesthetic preferences. When you give the AI a Figma file, it copies the patterns it sees — your nav, your card style, your specific shade of red. You get more of what you already have. An ASCII sketch is too coarse to leak preferences. The output comes back fresher because the AI wasn't anchored to anything visual.

It's cheap enough to compare side by side. When the cost of one variant drops from "two hours in Figma" to "30 seconds in a text file," asking the AI for three takes stops being a luxury and becomes the default. Variations aren't a privilege of big teams anymore — they're a one-minute prompt.

What you get
  1. Five working takes instead of one polished thing. The cost of variation drops from "two hours each" to "twelve minutes total." That changes what you'll attempt.
  2. You stop pre-deciding things you don't have an opinion on yet. Color, type, spacing get left to the AI until you can compare options. Most of your real opinions form once you see actual variants side by side.
  3. Restructuring is a 30-second edit. Move three doors to a stack? Delete two lines, retype them vertically. Try it. See how it lands.
  4. Non-designers can write the brief too. A founder, an engineer, a friend can describe what they want with pipes and dashes. They can't draft a Figma file.
  5. The brief stays human-readable forever. Six months later when you wonder "what was I going for here?" — the ASCII still tells you. A Figma file by then is a graveyard of artboards.
What you give up
  1. You skip the "feeling" stage of design. Sometimes you need to play with color and texture before you know what the structure should be. ASCII can't help you there — it's a structural tool, not a mood tool.
  2. It requires committing to hierarchy early. If you genuinely don't know whether the headline or the image should be the dominant element, the ASCII can't help you decide. You're still in mood-board territory and you need to leave it before this works.
  3. For brand identity, it's wrong. You need to see real color, real type, real spacing to make brand decisions. ASCII is for layout, not identity.

Going further: paper before ASCII

Sometimes ASCII still feels too structured for the very first sketch — especially when you don't yet know what should be on the page at all.

Pull out a notebook. Draw with a pencil. Boxes, arrows, labels — whatever lands. Photograph it with your phone. Drop the photo into the AI. Modern AI can read images now — it'll look at your sketch, find the boxes and arrows, interpret the spatial intent, and give you back ASCII or a working web page on the other side.

I use this in workshops with designers who'd rather draw than type, and for myself when I'm genuinely lost on a page I've never built before. Paper first to find the shape. ASCII next to lock it. Then build.

When to use this pattern

Yes, for

Landing pages, contact pages, dashboards, internal tools, prototypes, posters, emails, anything where you mostly know what should be on the page and need to see what it could look like.

No, for

Brand identity work, illustration, photo-led pages, anything where the visual decision is the design. ASCII won't help you pick a typeface or a color story.

The mental rule I use: could a senior designer describe what they want on a napkin? If yes, ASCII works. If they need to show you a moodboard first, ASCII won't help.

I've stopped opening Figma first. Most days I open a text file, rough out a layout, ask the AI for three takes in ASCII, pick the one that feels right, render it as a working web page to confirm, and ship from there. Figma still comes in eventually — for polish, for export, for the final screens. But not as the first move. Not the cold-start.

Letters to decide. Pixels to confirm. The fastest brief I've ever found.

Let's connect

Building something interesting? Want to collaborate? Always happy to chat about design, products, and the messy middle of building.