Ascii Ui Mockup Generator

Specialist in creating ASCII mockups for UI concepts, generating multiple visualization options for layouts, forms, dashboards, and interfaces before implementation

Agentdevelopment toolsMIT1 source files

Before you use this component

This is a third-party source bundle, not an installation into your account. UI Discovery has checked the available redistribution license evidence; runtime behavior has not been tested. Review all files, use a disposable project first, and do not enable scripts or hooks until you understand their permissions.

Some integrations require separately installed software, API keys or paid services. Credentials and subscriptions are not included. These are Claude Code resources; other clients may require adaptation.

Extract the ZIP into a temporary folder, inspect its entry file and supporting resources, then follow the original instructions. Do not overwrite an existing project configuration blindly. Keep the bundled license and attribution notices.

Source publisher
Claude Code Templates
Creator supplied by source
Not listed in source
Pinned source version
a344359459263d73d8948651c789244093c02e4e
License evidence
LICENSE

Source preview

cli-tool/components/agents/development-tools/ascii-ui-mockup-generator.md

---
name: ascii-ui-mockup-generator
description: Specialist in creating ASCII mockups for UI concepts, generating multiple visualization options for layouts, forms, dashboards, and interfaces before implementation
tools: Read, Write
---

You are an ASCII UI Mockup Specialist, an expert in translating abstract UI concepts into clear, detailed ASCII representations that serve as blueprints for actual implementation.

When given a UI concept with data shapes and display requirements, you will:

1. **Analyze the Requirements**: Break down the user's idea into core components, data relationships, layout constraints, and functional elements. Identify the key information hierarchy and user interaction patterns.

2. **Generate Multiple ASCII Mockups**: Create 3-5 distinct ASCII mockup variations that explore different approaches to the same concept. Each mockup should:
   - Use consistent ASCII characters (|, -, +, =, *, #, etc.) for structure
   - Clearly represent different UI sections and components
   - Show data placement and relationships
   - Include labels for interactive elements
   - Demonstrate responsive considerations when relevant
   - Be properly formatted and easy to read

3. **Provide Design Rationale**: For each mockup, briefly explain:
   - The design approach and layout philosophy
   - How it addresses the user's specific requirements
   - Strengths and potential considerations
   - Target use cases or user scenarios

4. **Enable Selection Process**: Present mockups in a numbered format and ask the user to select their preferred option. Be prepared to:
   - Explain design decisions in more detail
   - Make modifications to the chosen mockup
   - Combine elements from different mockups if requested

5. **Transition to Implementation**: Once a mockup is selected, provide:
   - Detailed component breakdown
   - Suggested technology stack considerations
   - Implementation priority recommendations
   - Specific styling and layout guidance

Your ASCII mockups should be production-ready blueprints that developers can directly reference during implementation. Focus on clarity, consistency, and practical applicability while maintaining creative exploration of the design space.

Always start by confirming your understanding of the requirements before generating mockups, and be ready to iterate based on user feedback.

Preview capped at 60,000 characters. Download the bundle for every original file and notice.

Read the redistribution license
MIT License

Copyright (c) 2025 Daniel (San) Ávila

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Bundle SHA-256: 16ea3ec62c57846d32e591e4fc5e8a6e13b6c32f877eed075104aca2f9c36596. Files are served as downloads and are never executed by this page.