Mastering ASCII UI Design with the ascii‑designer Skill: Workflow, Templates, and Best Practices

SKILL.md Definition

---
name: ascii-designer
description: Create professional ASCII UI wireframes, mockups, and prototypes for software, web, and mobile interfaces. Supports various styles including standard, modular, and compact dashboard views.
version: 1.2.0
license: MIT
---
# ASCII Designer

**Core Features**:
- Auto‑save designs to the <code>ascii-ui-design/</code> folder in the project root.
- Multiple interface styles and layout modes.
- Complete design documentation.

Workflow

Requirement Analysis : Interpret the user description or field list to determine interface type, functional needs, and style preferences.

Design Generation : Produce an ASCII diagram using predefined visual components and layout rules.

Automatic Saving : Save each generated design to {project_root}/ascii-ui-design/ with a naming convention such as {page_name}_{timestamp}.txt or {page_name}_v{version}.txt. Create the folder automatically if it does not exist.

Design Explanation : Output a brief rationale, key elements, and style choices alongside the diagram.

Trigger Patterns

用户需要快速绘制软件界面原型

提供字段列表要求生成界面布局

使用短语如 "设计一个…页面"、"画一个…界面"、"展示 CLI 布局" 等

Interaction Methods

Direct Description : 设计一个 [页面类型] 界面 Data‑Driven : Provide a list of fields, e.g.

根据以下字段生成 [页面类型] ASCII 图：
- 字段1
- 字段2
...

Style & Layout Specification : Request multiple style options, e.g.

生成 [页面类型] 的 ASCII 图，提供 [风格1]、[风格2] 等多套方案

Design Principles

Visual Hierarchy : Use different border characters (e.g., ╔═╗, ┌─┐) and whitespace to separate sections and emphasize important information.

Consistent Component Library : Standardize UI elements such as buttons ( [ 确定 ]), input boxes ( ┌──────────┐), tags ( [处理中]), icons ( [📄]), and checkboxes ( [x]).

Layout Patterns : Include immersive headers, floating cards, fixed bottom bars, and grid systems using | for column separation.

Interface Styles

Standard / Immersive : Clear header, layered information, comfortable visual flow. Typical for mobile app detail pages and personal centers.

Modular / Card : Grouped information with block separation. Ideal for settings, forms, and aggregated info pages.

Compact / Kanban : High‑density, multi‑column layout with minimal scrolling. Suited for ops dashboards, data monitoring, and CLI tools.

Minimalist : Very few lines and abundant whitespace. Used for modern web homepages and reading‑focused apps.

Example Library

1. Mobile Ticket Detail (Immersive)

+---------------------------------------------------------------+
|  <               工单详情               (...)                |
|                                                               |
|  张三 提交的工单  [⚡]                                      |
|  二楼打印机无法连接网络，重启多次无效...                  |
|                                                               |
|  +-------------------------------------------------------+   |
|  |  工单信息   客户信息   服务记录                     |   |
|  |  ========                                         |   |
|  |                                                   |   |
|  |  工作组   服务台                                 |   |
|  |                                                   |   |
|  |  工程师   丰德工程师                             |   |
|  |                                                   |   |
|  |  响应时间   2025-12-17 15:14                     |   |
|  |                                                   |   |
|  |  工单历时   20天2小时11分钟                     |   |
|  |                                                   |   |
|  |  附件   [📎 查看1个附件]                         |   |
|  +-------------------------------------------------------+   |
|                                                               |
+---------------------------------------------------------------+
|      [↩️]   [➡️]   [✅]                                        |
|      回复   转交   完结                                        |
+---------------------------------------------------------------+

2. Modular View

+---------------------------------------------------------------+
|  <               工单详情               (...)                |
+---------------------------------------------------------------+
|  #T20231024001          [处理中]  [非常紧急]               |
|  **二楼打印机无法连接网络...**                               |
+---------------------------------------------------------------+
|  +-- 人员信息 ---------------------------------------------+ |
|  |  提交人: 张三          响应人: 丰德工程师               |
|  |  工作组: 服务台        工程师: 丰德工程师               |
|  +---------------------------------------------------------+ |
|  +-- 时间统计 ---------------------------------------------+ |
|  |  响应时间: 2025-12-17 15:14                           |
|  |  工单历时: 20天2小时11分钟                           |
|  +---------------------------------------------------------+ |
+---------------------------------------------------------------+
|  [ 💬 回复 ]   [ ➡️ 转交 ]   [ ✅ 完结 ]                     |
+---------------------------------------------------------------+

3. Simple Login Form

┌─────────────────────────────────────┐
│           用户登录                     │
├─────────────────────────────────────┤
│                                       │
│  用户名：                             │
│  ┌─────────────────────────────┐   │
│  │                                 │   │
│  └─────────────────────────────┘   │
│                                       │
│  密码：                               │
│  ┌─────────────────────────────┐   │
│  │ ••••••••                       │   │
│  └─────────────────────────────┘   │
│                                       │
│  [    登录    ]  [ 取消 ]               │
│                                       │
│  ☑ 记住密码   ☐ 自动登录               │
│                                       │
│  还没有账号？[立即注册]                │
│                                       │
└─────────────────────────────────────┘

Output Standards

Generate ASCII Design : Wrap the diagram in a fenced text block to preserve formatting and ensure character alignment.

Save to File : Automatically store the file under {project_root}/ascii-ui-design/ using the naming pattern {page_name}_{YYYYMMDD}.txt or {page_name}_v{N}.txt. The file must contain the diagram, a design rationale, creation date, and version.

Provide Design Explanation : Output a concise description of layout decisions, key elements, and style choices.

Accessibility & Compatibility : Use universally supported characters and advise users to view wide tables on a large screen.

Design File Template

# ============================================================
# {页面名称} ASCII 设计稿
# ============================================================
# 创建时间: {YYYY-MM-DD HH:mm}
# 版本: {v1.0}
# 设计师: AI Assistant
# ============================================================

{ASCII 设计稿内容}

# ------------------------------------------------------------
# 设计说明
# ------------------------------------------------------------
## 布局思路
- {说明}
## 关键元素
- {元素1}: {说明}
- {元素2}: {说明}
## 风格选择
- {风格}: {原因}
## 平台特性
- iOS: {特性说明}
# ============================================================

Common Tweaks

加宽一点 / 宽度调整为 100 字符

把按钮移到顶部

增加一个搜索框

改为深色模式风格（使用块状字符填充背景）

保存为 v2 版本（创建新版本文件）

导出设计文档（生成完整的设计说明文档）

File Organization

项目根目录/
├── ascii-ui-design/          # All design drafts
│   ├── login/               # Login‑related designs
│   │   ├── ios_login_v1.txt
│   │   └── android_login_v1.txt
│   ├── dashboard/           # Dashboard designs
│   │   └── main_dashboard_v1.txt
│   ├── forms/               # Form designs
│   └── archive/             # Historical versions
├── src/                     # Source code
└── ...

Installation

Place the SKILL.md file into the skills directory of Claude. The skill name ascii-designer must match the definition above. Repository reference: https://github.com/mengday/ai