# Prototype Ascii

> Generate ASCII wireframe prototypes for UI design. Triggered when the user asks for wireframes, UI prototypes, page layouts, or screen mockups.

- Skill: `nixihz/prototype-ascii` (Agent Skill)
- Install (CLI): `npx skillmds@latest add nixihz/prototype-ascii`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nixihz/prototype-ascii/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: nixihz (https://skillmd.com/u/nixihz)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nixihz/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

| Component | ASCII |
|-----------|-------|
| Card | `┌────┐` `│` `└────┘` |
| Input | `┌──────┐` `└──────┘` |
| Button | `[ text ]` |
| Checkbox | `☑` / `☐` |
| Radio | `(●)` / `( )` |
| Badge | `(12) [New]` |
| Avatar | `(JD)` / `[IMG]` |
| Toggle | `[●━━━]` / `[━━━●]` |
| Modal | `╔═══╗` `╚═══╝` |
| Progress | `████░░░░ 58%` |

## 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

| Mistake | Fix |
|---------|-----|
| Using box-drawing chars (`+`, `-`, `\|`) instead of components | Use components exactly as in the library |
| Adding explanations | Output ASCII chart only |
| Inconsistent spacing | Use uniform margins |
| No visual hierarchy | Use larger/more prominent elements for important items |
| Floating borders (broken right border) | Use full-width outer frame, align nested elements |
| Label inside input | Place label **above** input, not inside |
| Right border not aligned | All right `│` must align vertically |

## 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.