线框图：使用"视觉AI + 无视觉AI"的协同方式理解图片
无视觉能力的 AI（如某些代码模型）无法直接理解图片。但通过「视觉AI → ASCII Wireframe → 无视觉AI」的转换链，可以让图片信息无损传递。
流程
┌─────────────┐ ┌──────────────────┐ ┌─────────────────┐
│ 图片输入 │ ─→ │ 视觉 AI 理解 │ ─→ │ 人工转录 ASCII │ ─→ 无视觉 AI 开发
└─────────────┘ └──────────────────┘ └─────────────────┘步骤
- 图片 → 视觉AI：将 UI 设计稿、架构图、流程图等喂给有视觉能力的 AI
- 视觉AI 描述：获取图片的结构化描述
- 人工转录 ASCII Wireframe：将描述转化为纯文本的线框图
- ASCII → 无视觉AI：无视觉 AI 可以完美理解 ASCII，进行后续开发
ASCII Wireframe 示例
一个简单的页面布局：
┌─────────────────────────────────────────────────────────┐
│ Header [Logo] [Menu]│
├─────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Hero Section │ │
│ │ [大标题 + 副标题] │ │
│ │ │ │
│ │ [CTA Button] │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
├──────────────────────┬──────────────────────────────────┤
│ │ │
│ Sidebar │ Main Content Area │
│ - Nav Item 1 │ │
│ - Nav Item 2 │ ┌────────┐ ┌────────┐ │
│ - Nav Item 3 │ │ Card 1 │ │ Card 2 │ │
│ │ └────────┘ └────────┘ │
│ │ │
├──────────────────────┴──────────────────────────────────┤
│ Footer │
│ [Links] [Copyright] │
└─────────────────────────────────────────────────────────┘为什么这样做
| 方式 | 问题 |
|---|---|
| 直接描述图片 | 信息丢失，无视觉AI难以还原空间关系 |
| ASCII Wireframe | 保留空间结构，无视觉AI可精确理解布局 |
本质：ASCII 是人类和 AI 都能理解的"视觉语言"。
适用场景
- UI 设计稿 → 前端开发
- 系统架构图 → 代码实现
- 流程图 → 逻辑实现
- 任何需要空间理解的图片
技巧
- 用
┌ ─ ┐ │ └ ┘ ├ ┤ ┬ ┴ ┼等字符绘制边框 - 缩进表示层级
- 注释
[ ]标注关键元素 - 保持简洁，只表达结构，不追求美观