它解决什么问题

传统的原型设计流程是这样的：产品经理打开 Figma / Sketch，花 30 分钟画一个登录页的线框图，标注字段，导出 PDF，发给工程师，工程师再花 10 分钟理解这个图。

问题在于：这个图是静态的，不能被 AI 直接理解和执行。

ASCII 线框图的思路是：让 AI 直接输出 UI 结构，然后 AI 就能理解这个结构，进而帮你写代码、评审方案、生成测试用例。

组件库：核心构件

这个 skill 提供了一套精确定义的 ASCII 组件规范。以下是完整组件库，摘自 prototype-ascii skill：

按钮 Button

[ Primary Button ]
[ Secondary Button ]
Link →

格式：[ 文字 ]，简洁清晰。

输入框 Input

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

注意：标签放上方，不放输入框内。

卡片 Card

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

标签页 Tabs

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

徽标 Badge

(12) [New]

进度条 Progress Bar

████░░░░ 58%

下拉框 Dropdown

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

开关 Toggle

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

复选框 / 单选框 Checkbox / Radio

☑ Checked
☐ Unchecked
(●) Selected
( ) Unselected

模态框 Modal

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

注意：Modal 用双线边框（╔═╗╚═╝），与普通组件的单线边框（┌─┐└─┘）区分。

头像 Avatar

(JD) or [IMG]

表格 Table

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

手风琴 Accordion

▸ Collapsed section
▾ Expanded section
   └ Content here

状态 Status

✓ Success
⚠ Warning
✕ Error
◉ Active
○ Inactive

导航 Navigation

▸ Active item
  Inactive
  Inactive

图标 Icons

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

快速参考表

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

实战示例

登录页

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

仪表盘

┌──────────────────────────────────────────┐
│ Dashboard                    [Settings]  │
├──────────┬──────────┬───────────────────┤
│ (12) [New]│ ██████ 78%│ ✓ Success         │
│          │          │                   │
│ ┌──────┐ │ ┌──────┐ │ ┌────────────────┐ │
│ │ card │ │ │ card │ │ │ Table          │ │
│ └──────┘ │ └──────┘ │ ├────────────────┤ │
│          │          │ │ data1  │ data2 │ │
└──────────┴──────────┴───────────────────┘

对齐规则（最容易出错的地方）

  1. 标签放上方，不放输入框内 — 新手最容易犯的错误
  2. 右边界必须对齐 — 所有 │ 必须垂直对齐，不能浮空
  3. 用 Unicode 线条字符 — 用 ┌─┐└─┘│ 而不是 +---+
  4. 外层框架撑满 — 外层容器用全宽框架
  5. 嵌套元素右边界与外层对齐 — 嵌套卡片、输入框的右边界要与外层边框对齐

为什么用它

对 AI 友好：纯文本格式，AI 可以直接理解 UI 结构，不再需要截图 + OCR。

零门槛：不需要 Figma，不需要设计工具。任何一个能打字的界面都能用。

版本友好：ASCII 线框图可以直接放进 Git，作为代码审查的一部分。

和 Everyone 项目结合：这个 skill 来自 nixihz/everyone，一个 AI Agent 插件 & Skill 市场，面向产品经理。prototype-ascii 只是其中之一，同一个项目里还有：

  • prd — 生成、更新、评审 PRD 和用户故事
  • llm-wiki — 增量维护 Markdown 知识库

感兴趣的可以去 everyone 项目 看看。