# ascii-ui-mockup-generator

This subagent sketches UI concepts as ASCII mockups, giving you several layout, form and dashboard options before any code is written.

- subagent · `type=agent` · Claude Code · 207 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/agents/development-tools/ascii-ui-mockup-generator.md
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/agents/ascii-ui-mockup-generator

## What it does

The subagent takes a UI idea, breaks it into components, data relationships and layout constraints, then produces 3–5 distinct ASCII mockups of the same screen. Each one shows sections, where the data sits and labels for interactive elements. A short rationale comes with every variant: the layout approach, what it does for your requirements and where it might fall short.

Mockups are numbered, so you pick one. From there you can ask for edits, merge pieces of different variants or get a deeper explanation of the design decisions. Once a mockup is chosen, the subagent breaks it into components, suggests a stack, an implementation order and styling guidance.

Its tools are `Read` and `Write` only — it reads and writes files, runs nothing and reaches no external services. It confirms its understanding of the requirements before drawing anything and waits for your go-ahead. Pixel-level spacing or anything outside a character grid is not what this one is for.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --agent development-tools/ascii-ui-mockup-generator
```

2. **Manually: put the files in place**
- File: `.claude/agents/ascii-ui-mockup-generator.md` — For all projects use ~/.claude/agents/. Claude delegates by the description field or an @-mention

### Codex

**Manually: put the files in place**
- File: `.codex/agents/ascii-ui-mockup-generator.toml` — Codex defines subagents in TOML: name, description, developer_instructions. Move the Markdown text into developer_instructions by hand. For all projects use ~/.codex/agents/

### Cursor

**Manually: put the files in place**
- File: `.cursor/agents/ascii-ui-mockup-generator.md` — Cursor also reads .claude/agents/

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/agents/development-tools/ascii-ui-mockup-generator.md

## When to use it
- compare several screen layouts before writing markup
- show a client dashboard structure without opening Figma
- break a UI idea into components and data relationships
- turn a chosen mockup into a step-by-step implementation plan
- agree on form and field placement before coding starts

## Example prompts
- draw ASCII mockups for a profile settings screen, give me 4 options
- take option 2 and add a payment history block
- break the chosen mockup into components and suggest an implementation order

## Similar
- [plantuml-ascii](https://affpapa.org/en/nevibecode/skills/plantuml-ascii.md) — skill · 9740 installs
- [ascii-art](https://affpapa.org/en/nevibecode/skills/ascii-art.md) — skill · 424 installs
- [ascii-simulation-game-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/ascii-simulation-game-cursorrules-prompt-file.md) — rule · ★ 41011
- [image-to-ui](https://affpapa.org/en/nevibecode/skills/image-to-ui.md) — skill · 63500 installs
- [muapi-ui-design](https://affpapa.org/en/nevibecode/skills/muapi-ui-design.md) — skill · 2800 installs
- [html-prototype](https://affpapa.org/en/nevibecode/skills/html-prototype.md) — skill · 1800 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 205 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md