Problem
When you ask Claude Code to build a UI component, it generates complete code immediately -- HTML, CSS, component structure, styling. If the layout isn't right, you describe the change, wait for a full code regeneration, render it, check the result, and repeat. Each cycle takes significant time and tokens because the agent is working at the code level when you're still thinking at the layout level. You might go through five or six iterations just to get the basic structure right, burning tokens on syntactically correct but visually wrong output each time.
Solution
Ask Claude Code to wireframe the UI in ASCII art first. Iterate on the ASCII layout until you're satisfied, then convert to code in a single pass.
Step 1: Request an ASCII wireframe
> Draw an ASCII wireframe for a dashboard with a sidebar nav, header with search,
and a main content area with a 3-column card grid
Claude Code produces:
+----------------------------------------------------------+
| Logo [ Search... ] [Avatar] [!] |
+----------+-----------------------------------------------+
| | |
| Dashboard| Welcome back, User |
| Projects | |
| Analytics| +----------------+ +----------------+ +----+ |
| Settings | | Card 1 | | Card 2 | | Ca | |
| | | metric: 1,234 | | metric: 5,678 | | me | |
| -------- | | +12% this week | | -3% this week | | +8 | |
| Team | +----------------+ +----------------+ +----+ |
| Billing | |
| | +----------------+ +----------------+ +----+ |
| | | Card 4 | | Card 5 | | Ca | |
| | | metric: 901 | | metric: 2,345 | | me | |
| | +----------------+ +----------------+ +----+ |
+----------+-----------------------------------------------+
Step 2: Iterate on the wireframe
> Move the search bar to be full-width below the header.
Make the sidebar collapsible. Add a footer with pagination.
The agent updates the ASCII art in seconds -- no rendering, no build step, no waiting for styles to compile.
Step 3: Convert to code once the layout is final
> Convert this wireframe to a React component using Tailwind CSS.
Use a responsive grid that collapses to 1 column on mobile.
Now the agent generates code with the correct structure on the first attempt, because the layout was already validated in ASCII.
Prompt template for consistent results:
Before writing any code, draw an ASCII wireframe of the UI I describe.
Use box-drawing characters for borders. Label all interactive elements.
Show the layout at desktop width. I will iterate on the wireframe
before asking you to generate code.
Why It Works
ASCII wireframes are orders of magnitude cheaper to generate and modify than real code. A layout change that requires rewriting 50 lines of JSX and CSS takes just a few character adjustments in ASCII. This lets you iterate at the speed of thought rather than the speed of code generation. Claude is surprisingly capable at producing well-structured ASCII art, and the text-based format means it can be included directly in prompts, PLAN.md files, or issue descriptions without screenshots. By the time you ask for code, the structural decisions are already made, so the agent typically gets the implementation right on the first pass.
Context
- Community members report approximately 5x time savings compared to direct code generation
- ASCII wireframes work especially well for layout-heavy UIs: dashboards, forms, data tables, navigation structures
- For more visual ASCII drawing, asciidraw.github.io provides a browser-based canvas tool
- This pattern pairs well with the planning-before-implementation workflow -- include the ASCII wireframe in your PLAN.md
- Also useful for communicating UI intent in GitHub issues, pull request descriptions, or Slack messages where screenshots aren't convenient
- Works with any frontend framework since the wireframe is framework-agnostic