Generate ASCII Style Mock
Create ASCII art mockups and wireframes for rapid prototyping and documentation.
What's an ASCII Mock?
An ASCII mock is a text-based wireframe using ASCII characters to represent UI elements. It's perfect for rapid prototyping, documentation, or communicating interface ideas without design tools.
+-------------------------------------+ | Header / Navigation | +-------------------------------------+ | | | Main Content Area | | | | +----------+ +----------+ | | | Card 1 | | Card 2 | | | | | | | | | | [Button] | | [Button] | | | +----------+ +----------+ | | | +-------------------------------------+ | Footer | +-------------------------------------+
Prompt
Create an ASCII art mockup/wireframe for [interface/component name].
Include:
1. Layout Structure
- Use ASCII characters to represent UI elements
- Boxes: ┌ ┐ └ ┘ │ ─ (or + - | for simpler)
- Text labels: Clear, concise labels
- Spacing: Consistent indentation and alignment
2. Component Elements
- Headers: Use = or - for section dividers
- Buttons: [Button Text]
- Input fields: [___________]
- Navigation: > Home | Products | About
- Content areas: Use | for columns, - for rows
3. Visual Hierarchy
- Use spacing to show grouping
- Use different characters for emphasis
- Show relationships between elements
- Indicate interactive vs. static elements
4. Responsive Considerations (if applicable)
- Show mobile vs. desktop layouts
- Indicate breakpoints
- Show how elements reflow
5. Annotations (optional)
- Add notes explaining design decisions
- Label key interactions
- Mark important elements
Format as clean, readable ASCII art that clearly communicates the interface structure.How to use
- 1Replace [interface/component name] with your specific interface (e.g., "Dashboard", "Login Form", "Product Card")
- 2Add context before the prompt: Describe the interface purpose and key elements. Example: "Dashboard for analytics. Needs: header with logo, sidebar navigation, main chart area, data table below."
- 3If you have a reference: Describe existing interfaces or upload screenshots. Say "Similar to [product name] dashboard" or "Based on this design: [description]"
- 4Specify complexity: Mention "Simple wireframe" or "Detailed mockup with all states" to control detail level
- 5Paste the modified prompt into your preferred AI tool, like ChatGPT or Claude
- 6Review the ASCII mockup: Check if layout structure, component elements, and hierarchy are clear
- 7Iterate: Ask "Add mobile layout" or "Show hover states" or "Make it more detailed"
- 8Use the mockup: Copy ASCII art to documentation, code comments, or team chat for quick communication
- 9Refine: Ask "Add annotations explaining each section" or "Show responsive breakpoints"
Pro Tips
- • Start simple: Begin with basic layout, then add details in follow-up prompts
- • Use for documentation: ASCII mocks are perfect for README files, design docs, or code comments
- • Show states: Ask "Show default, hover, and active states" for interactive elements
- • Mobile-first: Request "Show mobile layout first, then desktop" for responsive designs
- • Combine with code: Use ASCII mockup to plan before writing actual component code
- • Share easily: ASCII art works in any text editor, Slack, GitHub, or documentation tools
- • Iterate quickly: Much faster than opening Figma - perfect for rapid ideation
