ui-ascii-wireframe

name

ui-ascii-wireframe

description

Use this skill when generating ASCII text wireframes for enterprise web UI. Activates on: "wireframe", "ASCII UI", "text prototype", "design UI", "UI layout", "design enterprise screen", "prototype from requirements", "visualize states", or any request to turn a feature spec or state machine into a visual text mockup. Provides the ASCII component vocabulary, state visualization patterns, app shell grammar, and rendering rules for producing production-quality text wireframes.

UI ASCII Wireframe

Produce enterprise web UI wireframes as ASCII text. These serve as AI-readable prototypes that map directly to component structure and state machine states.

---

1. App Shell Grammar

Every wireframe must fit inside this shell or a deliberate subset of it:

┌─────────────────────────────────────────────────────────────────────────┐
│ SIDEBAR (240px)          │  TOP BAR                                      │
│                          │  ┌─────────────────────────────────────────┐  │
│  ● Module Group          │  │ 🔍 Search...    [+ Create] 🔔 👤 Admin  │  │
│    ▸ Sub-item            │  └─────────────────────────────────────────┘  │
│    ▸ Sub-item [active]   │                                               │
│                          │  MAIN CANVAS                                  │
│  ● Module Group 2        │  ┌─────────────────────────────────────────┐  │
│    ▸ Sub-item            │  │ PAGE CONTENT                             │  │
│                          │  │                                          │  │
│ ─────────────────────── │  │                                          │  │
│  [DEV] Environment badge │  └─────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────────────┘

---

2. ASCII Component Vocabulary

Box / Container

┌─────────────────────┐    ╔═════════════════════╗    ┌ ─ ─ ─ ─ ─ ─ ─ ─ ┐
│ Regular box         │    ║ Emphasized / modal  ║     Dashed = loading
└─────────────────────┘    ╚═════════════════════╝    └ ─ ─ ─ ─ ─ ─ ─ ─ ┘

Page Header

┌─────────────────────────────────────────────────────────┐
│ ← Breadcrumb / Module Name                               │
│  H1 Page Title                    [Secondary] [Primary+] │
│  Subtitle or description text                            │
└─────────────────────────────────────────────────────────┘

KPI Strip (3–4 metrics)

┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Label        │ │ Label        │ │ Label        │ │ Label        │
│ 1,234        │ │ 98.2%        │ │ 56           │ │ ▲ 12%        │
│ ▲ +8% mo/mo │ │ ▼ -2%        │ │ ─ steady     │ │ vs last week │
└──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘

Filter Toolbar

┌────────────────────────────────────────────────────────────────────┐
│ 🔍 [Search placeholder...      ] [Status ▼] [Date range ▼] [Owner ▼] [Reset] │
└────────────────────────────────────────────────────────────────────┘

Data Table

┌────────────────────────────────────────────────────────────────────┐
│ ☐ │ Column A        │ Column B    │ Column C     │ Status  │ Acts  │
├───┼─────────────────┼─────────────┼──────────────┼─────────┼───────┤
│ ☐ │ Row value       │ Value       │ Value        │ ● Active│ ⋯     │
│ ☑ │ Row value       │ Value       │ Value        │ ○ Draft │ ⋯     │
│ ☐ │ Row value       │ Value       │ Value        │ ✕ Error │ ⋯     │
├───┴─────────────────┴─────────────┴──────────────┴─────────┴───────┤
│ ← Prev  Page 1 of 12  Next →                       Items: 10 ▼  │
└────────────────────────────────────────────────────────────────────┘

Bulk Action Bar (appears when rows selected)

╔════════════════════════════════════════════════════════════════════╗
║ ☑ 3 items selected   [Export] [Change Status ▼] [Delete]  [✕ Clear] ║
╚════════════════════════════════════════════════════════════════════╝

Context / Detail Panel (right side)

                              ┌────────────────────────┐
                              │ Entity Name       [✕]   │
                              │ ─────────────────────── │
                              │ Field    Value           │
                              │ Field    Value           │
                              │ Field    Long value that  │
                              │          wraps here      │
                              │                          │
                              │ [Open Full Page →]       │
                              └────────────────────────┘

Modal / Dialog

              ╔══════════════════════════════════╗
              ║ Modal Title                  [✕] ║
              ╠══════════════════════════════════╣
              ║                                  ║
              ║  Content area                    ║
              ║  or form fields here             ║
              ║                                  ║
              ╠══════════════════════════════════╣
              ║ [Cancel]              [Confirm+] ║
              ╚══════════════════════════════════╝

Form Fields

Label *
┌─────────────────────────────────┐
│ Input value                     │
└─────────────────────────────────┘

Label               Dropdown ▼
┌───────────────┐   ┌────────────────┐
│ Text input    │   │ Option A    ▼  │
└───────────────┘   └────────────────┘

● Option A   ○ Option B   ○ Option C     ☑ Checkbox label

Stepper (Wizard)

──●───────────────────────○───────────────────────○──
  1. Step Name           2. Step Name           3. Step Name
  [current]              [pending]              [pending]

Tabs

┌──────────┬──────────┬──────────┬──────────┐
│ Tab A    │ [Tab B]  │ Tab C    │ Tab D    │
│          └──────────┘          │          │
└──────────────────────────────────────────┘
  (underline = active tab)

Alert / Banner

┌─────────────────────────────────────────────────────┐
│ ⚠  Warning message text here              [Action]  │
└─────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────┐
│ ✓  Success: entity saved successfully               │
└─────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────┐
│ ✕  Error: could not complete action.   [Retry]      │
└─────────────────────────────────────────────────────┘

Empty State

┌──────────────────────────────────────────────────────┐
│                                                       │
│                   📭  (icon)                          │
│             No [entities] found                       │
│      Adjust your filters or create a new one.         │
│                  [+ Create First X]                   │
│                                                       │
└──────────────────────────────────────────────────────┘

Skeleton / Loading Row

│ ░░░░░░░ │ ░░░░░░░░░░░░░ │ ░░░░░░░ │ ░░░░░░│
│ ░░░░░░░ │ ░░░░░░░░░░░░░ │ ░░░░░░░ │ ░░░░░░│
│ ░░░░░░░ │ ░░░░░░░░░░░░░ │ ░░░░░░░ │ ░░░░░░│

Badge / Status Chip

● Active    ○ Draft    ✕ Error    ⏸ Paused    🔒 Locked    ⚑ Flagged

Notification Toast (top-right corner)

                              ┌──────────────────────┐
                              │ ✓ Saved successfully  │
                              └──────────────────────┘

---

3. State Rendering Rules

For each feature screen, render ALL states from the state machine as separate wireframes.

Use this header format per state:

═══════════════════════════════════════════════════
 STATE: [State Name]   TRIGGER: [What caused this]
═══════════════════════════════════════════════════

Mandatory states per data screen (mirror §4 of enterprise-ui-recipes):

State	Visual cue
loading	Skeleton rows (░░░), no data rendered
empty	EmptyState box with CTA
error	Error alert banner + retry, table hidden
populated	Full table/content (happy path)
permission-denied	EmptyState variant with lock icon, no actions

Additional states from state machine:

For each non-trivial transition in the feature's state machine, add a wireframe showing what the UI looks like during/after that transition (e.g. submitting, bulk-selected, filter-active, detail-open).

---

4. Annotation Conventions

Add annotations inline using → or below the wireframe:

[+ Create]  → opens modal-create-entity (R03 wizard pattern)
Row click   → opens drawer-context-panel (right panel)
[Open →]    → navigates to /entities/[id] (canonical URL)

URL:    /[locale]/(private)/entities
Route:  screen-entity-list  (R01 pattern)
Recipe: R01 — Operations List + Bulk Actions
Density: compact

---

5. Output Format per Feature

Produce in this order:

# UI Wireframe: [Feature Name]

Recipe: R0X — [recipe name]
Density: compact | cozy
Route: /[locale]/...

---

## App Shell
[full shell wireframe showing which nav item is active]

---

## States

### STATE: loading
[wireframe]

### STATE: empty
[wireframe]

### STATE: error
[wireframe]

### STATE: populated (happy path)
[wireframe + annotations]

### STATE: [custom state from state machine]
[wireframe]

---

## Flow Diagram (ASCII)

[user action] → [state transition] → [resulting state]
[user action] → [state transition] → [resulting state]

---

## Route Map
/[locale]/...     → screen-xxx (this screen)
/[locale]/.../[id] → screen-xxx-detail (canonical)
@modal/(.)...      → modal-xxx (if applicable)

---

6. Wireframe Quality Rules

• Every wireframe must show the full page in context (header + nav + content) — never just a component in isolation
• Use real-looking (but fake) data — not "Lorem ipsum"
• Widths must be consistent: sidebar ≈ 24 chars, main canvas ≈ 60 chars, total ≈ 90 chars
• Mark the active nav item with [active] or ▸
• Show [+ Primary Action] buttons as [+ Label], secondary as [Label]
• Align columns in tables
• Never omit states — if a state exists in the state machine, it must have a wireframe