ascii-ui-mockup-generator — Claude Code subagent: ASCII UI mockups
This subagent sketches UI concepts as ASCII mockups, giving you several layout, form and dashboard options before any code is written.
npx claude-code-templates@latest --agent development-tools/ascii-ui-mockup-generatorWhat ascii-ui-mockup-generator 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.
What it helps with
- 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 for the agent
- 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
How to install ascii-ui-mockup-generator
1claude-code-templates
npx claude-code-templates@latest --agent development-tools/ascii-ui-mockup-generator2Manually: put the files in place
.claude/agents/ascii-ui-mockup-generator.mdFor all projects use ~/.claude/agents/. Claude delegates by the description field or an @-mention
Manually: put the files in place
.codex/agents/ascii-ui-mockup-generator.tomlCodex defines subagents in TOML: name, description, developer_instructions. Move the Markdown text into developer_instructions by hand. For all projects use ~/.codex/agents/
Manually: put the files in place
.cursor/agents/ascii-ui-mockup-generator.mdCursor also reads .claude/agents/
Step by step, with commands for each platform: Claude Code subagents: how to create one, call it and keep context clean
Questions about ascii-ui-mockup-generator
How do I install ascii-ui-mockup-generator in Claude?
Through the templates CLI: npx claude-code-templates@latest --agent development-tools/ascii-ui-mockup-generator. The subagent file then lives at .claude/agents/ascii-ui-mockup-generator.md.
What does ascii-ui-mockup-generator do?
It turns a UI description into several ASCII mockups with labelled sections and data, explains the reasoning behind each variant, and after you pick one breaks it into components for implementation.
Which tools does the subagent have?
Only Read and Write. It reads and creates files, but does not run commands or call external services.
