Prototype Ascii

Prototype ASCII Wireframe

Overview

Use the provided component library to create simple ASCII wireframes for UI prototype design. Output ASCII charts only — no explanations, no code.

When to Use

• User requests "prototype design", "wireframe"
• User wants a visual representation of a UI layout
• Output should be pure ASCII art (the chart itself should not use Markdown code blocks)

Key Rules

Must use component library:

• Button: use [ text ] format
• Input box: use ┌──────────────────┐ / └──────────────────┘
• Card: use ┌─────────────┐ / │ / └─────────────┘
• Modal: use ╔═══╗ / ╚═══╝ double-line border

Alignment rules (most important):

• Full-width container: use outer frame spanning full width ┌────┐
• Nested elements: when using inner cards/inputs, ensure right border aligns with outer frame
• Label + input combination: place label above the input, not inside it
• Consistent spacing: maintain uniform margin (2-4 spaces) from border to content
• No floating borders: every ┐ must connect to vertical │ lines

Prohibited:

• Do not use + at corners (use ┌ ┐ └ ┘)
• Do not use single horizontal line --- (use ─ if needed)
• Do not use +---+ style borders

Core Patterns

Layout Principles

1. Grid-based: components arranged in rows and columns
2. Left to right, top to bottom: standard reading order
3. Consistent spacing: use spaces to align elements
4. Component-first: select components from library first, then layout

Component Library Reference

Card

┌─────────────┐
│ title       │
│─────────────│
│ content     │
│             │
└─────────────┘

Tabs

[ Active ]  Inactive  Inactive
───────────────────────────────

Button

[ Primary Button ]
[ Secondary Button ]
Link →

Input

┌──────────────────┐
│ placeholder...   │
└──────────────────┘

Badge

(12) [New]

Progress Bar

████░░░░ 58%

Dropdown

┌──────────────────┐
│ select-option  ▾ │
└──────────────────┘

Toggle

[●━━━] On
[━━━●] Off

Checkbox/Radio

☑ Checked
☐ Unchecked
(●) Selected
( ) Unselected

Modal

╔═══════════════════╗
║ title           ✕ ║
╠═══════════════════╣
║ content           ║
║                   ║
║ [cancel]  [ok]    ║
╚═══════════════════╝

Avatar

(JD) or [IMG]

Table

┌────────┬────────┐
│ field  │ field  │
├────────┼────────┤
│ data1  │ data2  │
└────────┴────────┘

Icons

🔍 ⚙️ 🔔 ✓ ✕
← → ▲ ▼ ▸ ▾

Accordion

▸ Collapsed section
▾ Expanded section
   └ Content here

Status

✓ Success
⚠ Warning
✕ Error
◉ Active
○ Inactive

Navigation

▸ Active item
  Inactive
  Inactive

Quick Reference

Implementation Steps

Step 1: Identify Components

List all required UI components (inputs, buttons, cards, etc.)

Step 2: Select from Library

Match each component with the library examples

Step 3: Layout

Arrange in reading order, maintain consistent spacing

Example - Login Page (Correct)

┌─────────────────────────────────┐
│  ┌───────────────────────────┐  │
│  │          Login            │  │
│  └───────────────────────────┘  │
│                                 │
│  Username                       │
│  ┌───────────────────────────┐  │
│  │                           │  │
│  └───────────────────────────┘  │
│  Password                       │
│  ┌───────────────────────────┐  │
│  │                           │  │
│  └───────────────────────────┘  │
│                                 │
│  ☑ Remember me      [Forgot?]   │
│                                 │
│      ┌───────────────────┐      │
│      │       Login       │      │
│      └───────────────────┘      │
│                                 │
│    No account? [Register] →     │
│                                 │
└─────────────────────────────────┘

Common Mistakes

Output Format

• Do not use Markdown code fences
• Do not add explanatory text
• Output pure ASCII art only
• If outputting to a markdown file, wrap in ``` code blocks to avoid layout issues during markdown preview.