ASCII Mockups

Create text-based UI wireframes directly in prooph board element descriptions.

Overview

ASCII Mockups let you document UI layouts using plain text characters. Instead of images or design files, the mockup is written directly in the element description as a code block — visible and editable on the canvas itself.

This skill teaches AI agents how to create effective ASCII mockups for UI elements in your Event Models.

Pros and Cons

Advantages

Plain text — Mockups live directly on UI elements in prooph board. Anyone can read and edit them without leaving the canvas.
Cheap to create — ASCII mockups consume very few tokens, making them efficient for AI agents to generate during modeling sessions.
No external tools needed — No image files, no design software, no upload steps. Everything stays in one place.
Version control friendly — Since they're plain text, changes are tracked in the model history just like any other text content.

Disadvantages

Technical appearance — Text-based mockups look more like developer artifacts than polished wireframes. They may feel out of place for non-technical stakeholders.
Canvas space — ASCII mockups take up room in the element description, which can make the Event Model harder to navigate when zooming out. Use them when the detail matters, not for every UI element.

When to Use

✅ Use ASCII Mockups	❌ Use Alternatives
Documenting UI states in the flow	High-fidelity design reviews
Quick layout references for developers	Presenting to external stakeholders
Keeping everything in one place	Complex visual designs with many details

Usage

Once installed, your AI agent will know how to create ASCII mockups for UI elements. The mockups are written in the element description using bash code blocks:

## ASCII Mockup

```bash
┌─────────────────────────────────────┐
│  Dashboard                          │
├─────────────────────────────────────┤
│  ┌──────────┐  ┌──────────┐         │
│  │  Stats   │  │  Charts  │         │
│  └──────────┘  └──────────┘         │
└─────────────────────────────────────┘
```

Examples

Tips

Keep mockups simple — focus on layout and key elements, not pixel-perfect details
Use consistent styling across all mockups in your model
Document state variations when the UI changes significantly based on data

name	ascii-mockups
description	ASCII Mockups Skill - Guide for creating ASCII mockups in UI element descriptions on prooph board. Covers visual state representation and documenting UI variations using text-based wireframes.

ASCII Mockups for UI Element Descriptions

This document describes how to create effective ASCII mockups for UI elements in prooph board.

Structure

ASCII mockups go inside a bash code block under a ## ASCII Mockup heading:

## ASCII Mockup

```bash
┌─────────────────────────────────────┐
│  Time Tracker                       │
├─────────────────────────────────────┤
│         09:23:45                    │
│      Time in progress               │
├─────────────────────────────────────┤
│     [ Pause ]  [ Clock Out ]        │
└─────────────────────────────────────┘
```

Patterns

Pattern 1: State Description with Mockup

- clocked in: true

Time is ticking

```yaml
trackingId: track1
```

## ASCII Mockup

```bash
┌─────────────────────────────────────┐
│  Time Tracker                       │
├─────────────────────────────────────┤
│                                     │
│         09:23:45                    │
│      Time in progress               │
│                                     │
│    Started: 09:00 AM                │
│                                     │
├─────────────────────────────────────┤
│     [ Pause ]  [ Clock Out ]        │
└─────────────────────────────────────┘
```

Use cases:

Show UI state variations
Visual mockups for developer reference
Document interactive elements

Pattern 2: Dashboard / Feature Overview

Overview of:

- days worked in current month
- total hours worked this month
- total overtime

## ASCII Mockup

```bash
┌─────────────────────────────────────────────┐
│  Time Entries Dashboard                     │
├─────────────────────────────────────────────┤
│                                             │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  │
│  │  Days    │  │  Hours   │  │ Overtime │  │
│  │ Worked   │  │ Worked   │  │  Hours   │  │
│  │    15    │  │  120.5   │  │   +8.5   │  │
│  └──────────┘  └──────────┘  └──────────┘  │
└─────────────────────────────────────────────┘
```

Use cases:

Dashboard/overview screens
Card-based layouts
Provide visual layout reference

Pattern 3: State Variations

Document different UI states with separate mockups:

- clocked in: true

Time is ticking

## ASCII Mockup

```bash
┌─────────────────────────────────────┐
│  Time Tracker                       │
├─────────────────────────────────────┤
│         09:23:45                    │
│      Time in progress               │
└─────────────────────────────────────┘
```

- clocked in: false

Time is not ticking

## ASCII Mockup

```bash
┌─────────────────────────────────────┐
│  Time Tracker                       │
├─────────────────────────────────────┤
│         PAUSED                      │
│    ⚠️ On break                      │
├─────────────────────────────────────┤
│         [ Continue ]                │
└─────────────────────────────────────┘
```

Use cases:

Document different UI states
Show how UI changes based on data
Help developers understand state transitions

Pattern 4: Blocked / Disabled State

## ASCII Mockup

```bash
┌─────────────────────────────────────┐
│  Time Tracker                       │
│  (Blocked State)                    │
├─────────────────────────────────────┤
│         09:23:45                    │
│      Time in progress               │
└─────────────────────────────────────┘
```

Alternative: Markdown Tables for List Views

For list/overview screens, markdown tables are often more practical than ASCII mockups:

## List View

| Name | Email | Status | Last Activity |
|------|-------|--------|---------------|
| Anna M. | anna@example.com | Active | 2026-03-05 |
| Bob K. | bob@example.com | Inactive | 2026-02-28 |

Use when:

List/overview screens
Tabular data presentation
Lightweight alternative to ASCII mockups

Best Practices

Keep It Simple

Focus on the elements that matter for this process step. Don't include every UI detail.

✅ Good: Simple, clear structure
┌──────────────────┐
│  Time Tracker    │
├──────────────────┤
│  09:23:45        │
│  [Pause] [Out]   │
└──────────────────┘

❌ Avoid: Pixel-perfect with too much detail
┌─────────────────────────────────────────────┐
│ ☰  My App            🌐 User ▾    🔔 3     │
├─────────────────────────────────────────────┤
...

Show What Changes

If the mockup documents a specific state, make the state clear:

- clocked in: true

Or add a label in the mockup:

│  (Blocked State)                    │

Use Consistent Styling

Pick a mockup style and stick with it across the model:

Box-drawing characters: ┌─┐│├┤└┘
Button representation: [ Button ]
Icons: ⚠️ 🔔 🌐 (sparingly)

Common Mistakes

Too Detailed

❌ Bad: Every CSS class, spacing, and color noted

✅ Better: Show layout and key elements only

Outdated Mockups

Keep mockups in sync with actual UI changes. Outdated mockups create confusion.