# ASCII Mockups

> A web application for creating ASCII-based UI mockups that serve as visual instructions for LLMs and coding agents.

## What is ASCII Mockups?

ASCII Mockups is a free, browser-based tool that allows developers and designers to create UI mockups using ASCII art characters. These mockups can be exported in formats optimized for AI assistants like Claude, GPT, and other coding agents.

## Why Use ASCII Mockups?

When working with AI coding assistants, visual communication is often challenging. ASCII Mockups bridges this gap by allowing you to:

- Design UI layouts using intuitive drag-and-drop components
- Export mockups in LLM-optimized formats with semantic annotations
- Provide clear visual instructions that AI assistants can interpret
- Create wireframes without needing graphic design software

## Features

- **Component Library**: 27+ UI components including buttons, inputs, cards, tables, dialogs, and more
- **Multi-Page Support**: Create multiple pages/screens in a single project
- **Templates**: Built-in and custom templates for common UI patterns
- **Export Formats**: Plain text, Markdown, JSON, and LLM-optimized with annotations
- **Local Storage**: Projects auto-save to browser storage
- **Keyboard Shortcuts**: Efficient workflow with comprehensive shortcuts

## Export Formats

### LLM-Optimized Export

The LLM-optimized export format includes:
- Page metadata and descriptions
- Component inventory with positions and properties
- Inline annotations mapping visual elements to component types
- shadcn/ui component references for implementation guidance

### Plain Text Export

Raw ASCII art suitable for any context.

### Markdown Export

ASCII art wrapped in code blocks with optional headers.

### JSON Export

Structured data with full component properties for programmatic use.

## How AI Agents Should Use This

When receiving an ASCII mockup from this tool:

1. Parse the `@page` and `@description` annotations for context
2. Review the `@components` inventory for semantic information
3. Use inline `@type(id)` annotations to identify UI elements
4. Reference shadcn/ui mappings for React implementation
5. Respect the visual layout as the intended structure

## Component Types

Containers: container, card, dialog, drawer, sheet, collapsible
Form Elements: button, input, textarea, checkbox, radio, dropdown, switch, slider, combobox, datepicker
Text: text, badge, label
Layout: tabs, divider, grid, accordion, breadcrumb
Data Display: table, datatable, list, tree, calendar
Media: image, icon, avatar, skeleton
Navigation: menubar, navigationmenu, pagination, sidebarnav
Feedback: alert, alertdialog, tooltip, popover, contextmenu, progress
Visualization: chart, carousel

## Links

- Application: https://ascii-mockups.com
- Documentation: https://ascii-mockups.com/docs
- Made by DocuTray: https://docutray.com

## Contact

For questions or feedback, visit https://docutray.com