Generate high-fidelity text-based wireframes using fixed-width grids, ASCII characters, and strict formatting rules to distinguish interactive elements.
When to Use
Use this skill when:
- Designing UI layouts in chat without graphical tools
- Visualizing component hierarchy and structure
- Creating text-based mockups for rapid prototyping
- Specifying layouts that need to be discussed before implementation
Core Principles
Fixed-Width Grid System
All wireframes use a fixed-width container with aligned borders:
- Corners:
+ - Horizontal borders:
- - Vertical borders:
| - Critical rule: Right-most
|must align vertically on every line using whitespace padding
+------------------+
| Content here |
| More content |
+------------------+
Element Distinction Rules
Buttons vs. Inputs (critical differential):
- Buttons: Centered text with padding:
[ Save ] - Inputs: Left-aligned with underscores:
[ Value_______]or[___________]
Navigation hierarchy:
- 2-space indentation for nested items
>for collapsed groups,vfor expanded groups::for active items,-for inactive items
Quick Component Reference
Common components (see components.md for full reference):
Form elements:
[ Button ] Button (centered)
[ Input text___] Input field (left-aligned)
[x] Checkbox Checkbox (checked)
( ) Radio Radio (unchecked)
[ Select (v) ] Dropdown select
Navigation:
v Group Name Expanded group
:: Active Page Active navigation item
- Inactive Page Inactive item
> Collapsed Group Collapsed group
Layout:
+----------------+ Card/Container
| Content |
+----------------+
Example: Settings Page with Sidebar
+-----------------------+-------------------------------------------------------+
| [M] Logo | Settings / Profile [ X ] |
| | |
| v GENERAL | # Public Profile |
| :: Profile | |
| - Notifications | Display Name |
| | [ Jane Doe___________] |
| > BILLING | |
| - Invoices | Bio |
| - Payment Methods | [ Developer & Designer based in NYC. |
| | Loves ASCII art.___________________] |
| > SECURITY | |
| | Region |
| | [ United States (US) (v) ] |
| | |
| | --------------------------------------------------- |
| | |
| | [x] Profile is public |
| | [ ] Show email address |
| | |
| --------------------- | [ Save Profile ] |
| [ Jane Doe (v)]| |
+-----------------------+-------------------------------------------------------+
Common Mistakes to Avoid
- Misaligned borders: All right-side
|must align vertically (add padding) - Centering inputs: Inputs are left-aligned (only buttons are centered)
- Inconsistent borders: Use only
+,-,|for the main grid - Missing whitespace: Every line must have proper padding to reach the border
References
- components.md - Complete component reference table with all form elements, navigation patterns, and layout components