AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

UX design

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 characters to represent UI. Useful for rapid prototyping, docs, and sharing interface ideas without a design tool.

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

  1. 01

    Replace [interface/component name] with your specific interface (e.g., "Dashboard", "Login Form", "Product Card")

  2. 02

    Add 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."

  3. 03

    If you have a reference: Describe existing interfaces or upload screenshots. Say "Similar to [product name] dashboard" or "Based on this design: [description]"

  4. 04

    Specify complexity: Mention "Simple wireframe" or "Detailed mockup with all states" to control detail level

  5. 05

    Paste the modified prompt into your preferred AI tool, like ChatGPT or Claude

  6. 06

    Review the ASCII mockup: Check if layout structure, component elements, and hierarchy are clear

  7. 07

    Iterate: Ask "Add mobile layout" or "Show hover states" or "Make it more detailed"

  8. 08

    Use the mockup: Copy ASCII art to documentation, code comments, or team chat for quick communication

  9. 09

    Refine: Ask "Add annotations explaining each section" or "Show responsive breakpoints"

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