ASCII UI Mockup Guru

A specialist agent that translates UI concepts into clear, detailed ASCII representations, providing rapid visual blueprints for interface layouts that serve as implementation guides for developers.

When to Use This Agent

Choose ASCII UI Mockup Guru when:

• Rapidly prototyping interface layouts in documentation or chat
• Creating visual specifications for terminal-based UIs or CLI tools
• Documenting UI layouts in code comments, READMEs, or design docs
• Communicating layout ideas in text-only environments (Slack, email, PRs)
• Wireframing component arrangements before writing any code

Consider alternatives when:

• Creating pixel-perfect visual designs (use Figma or a visual design agent)
• Building interactive prototypes with clickable flows (use a prototyping tool)
• Generating production HTML/CSS from designs (use a UI implementation agent)

Quick Start

Copy
# .claude/agents/ascii-ui-mockup-guru.yml
name: ASCII UI Mockup Guru
description: Generate ASCII wireframes and UI mockups
model: claude-sonnet
tools:
  - Read
  - Write

Example invocation:

claude "Create an ASCII mockup of a dashboard with a left sidebar, top stats bar with 4 KPI cards, and a main content area with a data table and chart placeholder"

Core Concepts

Layout Building Blocks

Element	ASCII Representation	Usage
Container	+------ Title ------+	Sections, cards, panels
Button	[ Submit ] or [x Cancel]	Actions, CTAs
Input	[________________]	Text fields
Checkbox	[x] Checked [ ] Unchecked	Boolean options
Radio	(o) Selected ( ) Option	Single selection
Dropdown	[ Select v ]	Option menus
Tab	`[ Tab1	Tab2
Divider	--- or ===	Section separators

Dashboard Mockup Example

+================================================================+
|  LOGO   [Dashboard] [Analytics] [Settings]    [@user v] [Logout]|
+================================================================+
|         |                                                       |
| SIDEBAR | +------------+ +------------+ +------------+ +------+ |
| ======= | | Revenue    | | Users      | | Orders     | | Conv | |
| > Home  | | $42,580    | | 12,453     | | 1,847      | | 3.2% | |
|   Sales | | +12.5% ^   | | +8.3% ^    | | -2.1% v    | | +0.4 | |
|   Users | +------------+ +------------+ +------------+ +------+ |
|   Items |                                                       |
|   ----  | +----------------------------------------------------+|
|   Repor | | Revenue Trend                          [1W|1M|*1Y*] ||
|   Setti | |                                                     ||
|         | |    ^                          ___                    ||
|         | |    |     ___/\      /\___/\__/   \                  ||
|         | |    |    /      \___/              \___              ||
|         | |    |___/                                            ||
|         | |    +-------------------------------------------->   ||
|         | |    Jan  Feb  Mar  Apr  May  Jun  Jul  Aug           ||
|         | +----------------------------------------------------+|
|         |                                                       |
+================================================================+

Component Detail Mockup

+------ User Registration Form ------+
|                                     |
|  Full Name                          |
|  [_________________________________]|
|                                     |
|  Email Address                      |
|  [_________________________________]|
|                                     |
|  Password           Strength: |||.. |
|  [_________________________________]|
|                                     |
|  [x] I agree to Terms of Service    |
|  [ ] Subscribe to newsletter        |
|                                     |
|  [ Create Account ]  Already have   |
|                       an account?   |
|                       Login here    |
+-------------------------------------+

Configuration

Parameter	Description	Default
style	Box drawing style (ascii, unicode, minimal)	ascii
width	Maximum character width	72
annotations	Include element annotations	true
responsive_views	Show mobile + desktop layouts	false
data_shapes	Include sample data in mockups	true
numbering	Number elements for reference	false

Best Practices

1. Establish a consistent character vocabulary and stick to it. Define which characters represent borders (+, -, |), buttons ([ ]), inputs ([___]), and interactive states. Document this vocabulary at the top of your mockup file. Consistency lets readers parse the mockup without guessing what each symbol means, which is the entire point of visual communication.

2. Show actual sample data, not placeholder text. "John Smith" and "$42,580" communicate layout constraints better than "Name" and "Value." Real-ish data reveals issues like text truncation, number alignment, and column width problems that generic placeholders hide. Use data that represents realistic edge cases — long names, large numbers, empty states.

3. Annotate interactive behavior below the mockup. ASCII cannot show hover states, transitions, or click behavior. Add a numbered annotation section below the visual: "1. Clicking [Dashboard] highlights tab and loads dashboard view. 2. Revenue card links to detailed revenue report." This bridges the gap between static wireframe and interactive specification.

4. Create separate mockups for each viewport width. Show at minimum a desktop (72+ chars wide) and mobile (36 chars wide) version. This forces early thinking about responsive behavior: does the sidebar collapse? Do cards stack vertically? Does the table become a card list? Decisions made during ASCII mockup phase prevent layout surprises during implementation.

5. Keep mockups updated as the design evolves. ASCII mockups in code comments and PRs are only useful if they reflect the current design. When the implementation diverges from the mockup, update or remove the ASCII version. Stale mockups mislead new developers and create confusion during code reviews. Treat them as living documentation.

Common Issues

Mockups become unreadable at complex layouts. Nested containers with many elements produce dense ASCII that is harder to read than the code it documents. Break complex pages into component-level mockups instead of one full-page diagram. Show each component separately with clear labels, then create a simple layout diagram showing how components arrange on the page.

Character alignment breaks when viewed in different editors or fonts. ASCII mockups rely on monospace rendering. Proportional fonts, tab vs. space differences, and varying terminal widths break alignment. Always use spaces (never tabs) for alignment. Add a note specifying monospace rendering. In Markdown documents, wrap mockups in code fences to force monospace display.

Stakeholders mistake ASCII mockups for final designs. Non-technical stakeholders may interpret wireframes as visual design commitments, expecting the final product to look like the ASCII layout. Set expectations explicitly: "This shows layout structure and content hierarchy, not visual design. Colors, typography, and pixel-level spacing will differ." Label mockups as "wireframe" or "layout blueprint" to prevent confusion.