---
url: /blog/wireframe-visual-nonvisual-ai/index.md
---
# 核心洞察

无视觉能力的 AI（如某些代码模型）无法直接理解图片。但通过「视觉AI → ASCII Wireframe → 无视觉AI」的转换链，可以让图片信息无损传递。

# 流程

```
┌─────────────┐    ┌──────────────────┐    ┌─────────────────┐
│   图片输入   │ ─→ │   视觉 AI 理解    │ ─→ │  人工转录 ASCII  │ ─→ 无视觉 AI 开发
└─────────────┘    └──────────────────┘    └─────────────────┘
```

## 步骤

1. **图片 → 视觉AI**：将 UI 设计稿、架构图、流程图等喂给有视觉能力的 AI
2. **视觉AI 描述**：获取图片的结构化描述
3. **人工转录 ASCII Wireframe**：将描述转化为纯文本的线框图
4. **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 设计稿 → 前端开发
* 系统架构图 → 代码实现
* 流程图 → 逻辑实现
* 任何需要空间理解的图片

# 技巧

* 用 `┌ ─ ┐ │ └ ┘ ├ ┤ ┬ ┴ ┼` 等字符绘制边框
* 缩进表示层级
* 注释 `[ ]` 标注关键元素
* 保持简洁，只表达结构，不追求美观