Most UI work starts with a rough sketch — something to make the idea concrete before you commit to building it. Traditionally that meant opening Figma, dragging rectangles around, and thinking about the UI.
However, the more I integrate Claude into the design process, the more I'm skipping Figma and just asking Claude to generate wireframes or diagrams in plain text.
It's quite easy to get started. Open a conversation and type something like:
Create ASCII wireframes for a move document dialog. It needs to allow me to move between folders or spaces.Create ASCII wireframes for a move document dialog. It needs to allow me to move between folders or spaces.You'll get back something like this:
┌────────────────────────────────────────┐
│ Move "My Document" │
├────────────────────────────────────────┤
│ │
│ Space │
│ ┌──────────────────────────────────┐ │
│ │ Acme Corp ▼ │ │
│ └──────────────────────────────────┘ │
│ │
│ Folder │
│ ┌──────────────────────────────────┐ │
│ │ Select a folder... ▼ │ │
│ └──────────────────────────────────┘ │
│ │
│ [Cancel] [Move] │
└────────────────────────────────────────┘ ┌────────────────────────────────────────┐
│ Move "My Document" │
├────────────────────────────────────────┤
│ │
│ Space │
│ ┌──────────────────────────────────┐ │
│ │ Acme Corp ▼ │ │
│ └──────────────────────────────────┘ │
│ │
│ Folder │
│ ┌──────────────────────────────────┐ │
│ │ Select a folder... ▼ │ │
│ └──────────────────────────────────┘ │
│ │
│ [Cancel] [Move] │
└────────────────────────────────────────┘Lately, I prefer prompting with descriptions that are less about what the UI should look like and more about what I'm trying to do. For example, instead of saying I want a sidebar on the left and a content area on the right, I start with describing what I'm trying to do and let Claude come up with the interface itself. Claude is surprisingly good at coming up with very reasonable approaches that I can build on, requesting changes if I don't like the output (which is rare).
What makes these useful isn't fidelity — it's speed and portability. You can paste an ASCII wireframe into a Linear issue, a PR description, a dev plan, or a Slack message. Everyone can see it without opening another tool. And because it's just text, you can edit it right where it lives. Change a label, add a field, rearrange the layout — all without leaving the issue tracker.
It's not perfect, but it's fast.
I like this approach so much that I baked it into my workflow for creating new issues. My /new-issue skill generates ASCII wireframes automatically for every task that involves UI.
ASCII works for other things, too. When I'm working on a plan with a complicated flow, I often ask Claude to generate a flowchart to help me visually understand what it's suggesting. Here's an example of an onboarding flow for ContextStore:
┌────────────────────┐
│ Welcome │
│ │
│ ○ Create new space │
│ ○ Open existing │
└─────────┬──────────┘
┌─────────────┴─────────────┐
▼ ▼
┌────────────────┐ ┌───────────────────┐
│ Name & Logo │ │ Connection │
└───────┬────────┘ │ Method │
│ │ │
▼ │ ○ GitHub App │
┌────────────────┐ │ ○ Git URL │
│ Storage │ │ ○ Local Folder │
│ Strategy │ └─────────┬─────────┘
│ │ │
│ ○ Separate repo│ ┌──────────┼───────────┐
│ ○ Folder /docs │ ▼ ▼ ▼
│ ○ Branch │ ┌─────────┐ ┌─────────┐ ┌────────┐
└───────┬────────┘ │ GitHub │ │ Git URL │ │ Folder │
│ │ Sign-In │ │ Input │ │ Picker │
▼ └────┬────┘ └────┬────┘ └────┬───┘
┌────────────────┐ │ │ │
│ Sync Setup │ └───────────┴───────────┘
└───────┬────────┘ │
│ ▼
└─────────────────► ┌──────────────┐
│ Creating │
│ your space │
└──────┬───────┘
▼
┌──────────────┐
│ Done! │
└──────────────┘ ┌────────────────────┐
│ Welcome │
│ │
│ ○ Create new space │
│ ○ Open existing │
└─────────┬──────────┘
┌─────────────┴─────────────┐
▼ ▼
┌────────────────┐ ┌───────────────────┐
│ Name & Logo │ │ Connection │
└───────┬────────┘ │ Method │
│ │ │
▼ │ ○ GitHub App │
┌────────────────┐ │ ○ Git URL │
│ Storage │ │ ○ Local Folder │
│ Strategy │ └─────────┬─────────┘
│ │ │
│ ○ Separate repo│ ┌──────────┼───────────┐
│ ○ Folder /docs │ ▼ ▼ ▼
│ ○ Branch │ ┌─────────┐ ┌─────────┐ ┌────────┐
└───────┬────────┘ │ GitHub │ │ Git URL │ │ Folder │
│ │ Sign-In │ │ Input │ │ Picker │
▼ └────┬────┘ └────┬────┘ └────┬───┘
┌────────────────┐ │ │ │
│ Sync Setup │ └───────────┴───────────┘
└───────┬────────┘ │
│ ▼
└─────────────────► ┌──────────────┐
│ Creating │
│ your space │
└──────┬───────┘
▼
┌──────────────┐
│ Done! │
└──────────────┘This kind of diagram is a great way of turning a multi-page plan into something that is understandable at a glance.
Anywhere you need to communicate UI intent or complex flow in plain text, ASCII diagrams fit. Next time you're working on a UI task, try asking Claude to create ASCII wireframes of what you're building. You might find that a lot of your design thinking happens right there in the text.
Comments
You might also like…
Build a /new-issue skill and stop writing issues by hand
John LongAIThe final post in my series on skills for dev workflow. A /new-issue skill lets you describe a bug or feature in a sentence and get back a well-structured issue with wireframes and acceptance criteria — better than most people write by hand.
How I manage my dev workflow with three Agent skills
John LongAIOne of the most exciting things about LLMs is their ability to do useful things that would be hard to script in the traditional sense. Skills take this further, letting you build intelligent workflows that handle the messy, context-dependent parts of product development.
Introducing Quiddity: generate essential skills for your dev workflow
John LongSide ProjectsQuiddity interviews you about your tools and process, then generates custom /new-issue, /next-task, and /approve skills tailored to how you actually work. One install, one setup command, and you're off.
Three areas of AI innovation
John LongAIAI is advancing on three areas at once. Better models, better harnesses, and better hardware. Understanding how they work together helps you make sense of where things are headed.
