Ui To Ascii

---
name: ui-to-ascii
description: 将用户粘贴的 UI 设计稿/截图/原型图转换为纯文本 ASCII 框线布局图并存入 Markdown 文件，把设计稿上的标注（尺寸、间距、颜色、字体、交互说明等）保留为编号锚点+标注表，解决图片无法被无视觉模型识别、体积大不易版本化的问题。也支持仅凭用户的文字描述直接生成界面的 ASCII 草图（此模式直接输出到对话、不落盘）。当用户粘贴 UI 图/设计稿要求转 ASCII、转成文字、转存设计稿，或说"把这个设计图转成文本""ui to ascii""存一下这个设计稿"，以及"帮我画个 XX 界面的 ASCII""按我描述画个界面草图"时使用。
---

# UI 设计稿转 ASCII（UI to ASCII）

## 概述

**目的**：把一张只有视觉模型才看得懂、又体积大不易进版本库的 UI 设计稿，一次性"固化"成纯文本的 ASCII 布局图 + 结构化标注，让**任何模型（含无视觉能力的）和用户**都能反复查阅、diff、进 git。

**功能**：
- 由**有视觉能力的 AI** 读图，产出 ASCII 框线布局（还原组件相对位置、嵌套、大致比例）
- 把设计稿上的标注（尺寸/间距/颜色/字体/交互/状态等）提取为**编号锚点 `①②③` + 标注表**
- 多屏或含跳转流程时，单文件多章节组织 + 一张 Mermaid 流程图串联
- 设"保真核对"质量闸门：只画图里确实存在的元素，杜绝臆造，拿不准标 `[待确认]`
- 产物落盘为 Markdown，轻量、可版本化、通用可读
- 另支持**描述生成模式**：仅凭用户文字描述直接产出 ASCII 草图，直接输出到对话、不落盘

**使用场景**：
- 用户粘贴 UI 设计稿/截图/原型图，要求转成文本存档
- 需要把设计稿信息带给一个**无视觉能力**的模型继续工作
- 想把界面结构与标注纳入 git 版本管理、方便 diff 评审
- 用户说"把这个设计图转成文本""ui to ascii""存一下这个设计稿"时
- 用户没有图、只用文字描述想要的界面，想快速看个 ASCII 草图（如"帮我画个登录页的 ASCII"）

---

## 产物落盘（模式 A：图转存）

产物写入项目根目录下的 `.ui-ascii/{slug}.md`（`slug` 取界面/功能名的 kebab-case，如 `login-page`、`order-detail`）：

```
.ui-ascii/
├── login-page.md          # 单张设计稿 → 单文件
├── checkout-flow.md        # 多屏流程 → 单文件多章节 + 流程图
└── INDEX.md                # 可选：设计稿超过 3 个时建索引
```

若无法在项目内写入或用户另有指定，遵循用户指定路径。

---

## 工作流程

复制此清单跟踪进度：

```
UI → ASCII 进度：
- [ ] Phase 0：确认输入模式（A 图转存 / B 描述生成）
【模式 A：图 → ASCII，落盘存档】
- [ ] Phase 1：结构识别（拆区域 / 列组件 / 定层级）
- [ ] Phase 2：ASCII 框线绘制
- [ ] Phase 3：标注提取（编号锚点 + 标注表）
- [ ] Phase 4：多屏组织 + Mermaid 流程图（按需）
- [ ] Phase 5：保真核对闸门（回看原图逐区核对）
- [ ] 落盘 .ui-ascii/{slug}.md
【模式 B：描述 → ASCII，直接输出】
- [ ] 复用 Phase 1–3 绘制方法（依据描述而非图）
- [ ] 自检符合描述、未臆造 → 直接输出到对话，不落盘
```

---

## Phase 0：确认输入模式与前置

先判定本次属于哪种模式：

| 模式 | 触发 | 后续 |
|------|------|------|
| **A. 图转存模式** | 用户粘贴了设计稿/截图/原型图 | 走下方视觉闸门 → Phase 1–5 → 落盘存档 |
| **B. 描述生成模式** | 用户只用文字描述想要的界面、无图 | 跳过视觉闸门与落盘，见文末「描述生成模式」一节 |

> 图和文字都给了？以图为准走模式 A，用户的补充文字并入结构识别。

### 模式 A 前置：视觉能力闸门（硬前置，不可跳过）

本模式依赖 AI 真正"看到"图片内容。开工前先自检：

1. **能看到图**：确认已接收到用户粘贴的图片且能识别其中的界面元素 → 继续。
2. **看不到图 / 无视觉能力**：**立即停止**，明确告知用户"当前无法识别图片内容，无法完成转换"，不要凭猜测或文件名硬编 ASCII（那是幻觉）。可请用户改用有视觉能力的模型，或用文字描述界面（转入模式 B）。

> **判定标准**：若你无法说出图中任意一处**具体文字或可辨认的组件**，即视为"看不到"，按第 2 条停止——不要因为知道界面叫"登录页"就凭常识脑补布局。

**输入确认**：
- 确认设计稿数量与来源（单张 / 多张 / 含跳转流程；内联粘贴或图片路径）
- 与用户确认 `slug` 命名（默认取界面主功能名，如登录页 → `login-page`）
- **落盘前查重**：若 `.ui-ascii/{slug}.md` 已存在，先询问用户覆盖、改名还是追加为新章节，不静默覆盖旧转换
- 若图中标注文字过小看不清，先请用户放大或补充说明，勿猜测数值

---

## Phase 1：结构识别

读图后，先在脑中（或列表中）拆解，**不要急着画**：

1. **切分大区域**：按视觉分组划出顶层区块（如 顶栏 / 侧边栏 / 主内容 / 底栏 / 弹层）。
2. **列组件清单**：逐区域列出内部组件（按钮、输入框、列表、卡片、图标、图片占位、文本块等）。
3. **定层级与顺序**：明确嵌套关系（谁包含谁）和排列方向（横排 / 竖排 / 网格）。
4. **估相对比例**：判断各区块的大致宽高占比，用于后续 ASCII 的尺寸分配（相对即可，不追求像素级）。
5. **复杂度分级**：若单屏组件过多（如密集 dashboard），一张 ASCII 画不下会严重失真——此时**降级为"整体区域骨架图 + 各区域局部放大图"**：先画一张只含顶层区块的骨架，再为每个复杂区域单独画局部 ASCII，用同一套编号锚点串联，避免硬塞进 80 字符宽度导致错乱。

> 目标是**结构化框线布局**：还原相对位置、嵌套、大致比例和区域划分，兼顾可读性与信息量，不做像素级还原。

---

## Phase 2：ASCII 框线绘制

用框线字符画出布局。字符集与对齐规则见 [reference.md](reference.md#ascii-绘制规范)。核心约束：

- **字符集**：外框和分区用 `┌ ┐ └ ┘ ├ ┤ ┬ ┴ ┼ ─ │`；组件内文字直接写组件名/占位文案。
- **宽度控制**：整体宽度建议 ≤ 80 字符（复杂大图可放宽到 ~100），避免换行错乱。
- **还原要点**：
  - 用**框的嵌套**表达组件包含关系
  - 用**相对大小**表达区块占比（不必精确，但大区块要明显大于小区块）
  - 用**位置**表达对齐与排列（左/中/右、上/下）
  - 图标/图片用占位符：`[img]`、`[icon]`、`[图]`、`(●)` 等，并保持一致
  - 表单元素：输入框 `[____________]`、按钮 `[ 登录 ]`、复选框 `[x]`/`[ ]`、单选 `(o)`/`( )`
- **锚点预留**：在需要标注的元素旁写上编号锚点 `①②③…`（与 Phase 3 的标注表对应）。

---

## Phase 3：标注提取

把设计稿上的标注信息结构化。**只提取图中确实可见的标注**：

1. **挂锚点**：在 ASCII 图对应元素旁标 `①②③…`。
2. **建标注表**（紧跟 ASCII 图下方）：

| 编号 | 类型 | 目标元素 | 标注内容 |
|------|------|----------|----------|
| ① | 尺寸 | 登录按钮 | 宽 320px，高 48px |
| ② | 颜色 | 主按钮背景 | #1677FF |
| ③ | 间距 | 表单项之间 | 16px |
| ④ | 交互 | 登录按钮 | 点击后跳转首页 |

- **类型**取值：`尺寸 / 间距 / 颜色 / 字体 / 圆角 / 阴影 / 交互 / 状态 / 文案 / 其他`
- **数值必须来自图中可见标注**，不得猜测或"按常识补全"
- 拿不准或图中未标明的：写 `[待确认]`，并在文件末尾"待确认项"里汇总，供用户补充

---

## Phase 4：多屏组织 + 流程图（按需）

仅当用户一次粘贴**多张图**或图中含**跳转流程**时执行：

- **单文件多章节**：每屏一个 `## 屏 N：{屏名}` 章节，各自含 ASCII 图 + 标注表。
- **Mermaid 流程图**：在文件顶部加一张 `flowchart` 串联各屏跳转关系，示例见 [reference.md](reference.md#多屏流程图模板)。

单张图跳过本阶段。

---

## Phase 5：保真核对闸门（防幻觉）

落盘前**必须**回看原图，逐条核对，这是杜绝幻觉的关键闸门：

复制此核对清单：

```
保真核对：
- [ ] ASCII 里的每个元素，原图中都确实存在（无臆造组件）
- [ ] 原图中的主要区域/组件，ASCII 里都有体现（无遗漏大块）
- [ ] 组件的相对位置、嵌套、排列方向与原图一致
- [ ] 标注表里每条数值都来自图中可见标注（无猜测）
- [ ] 图中看不清/未标明的已标 [待确认]，未编造
- [ ] 多屏跳转关系与原图/说明一致
```

**任一项不通过 → 回到对应 Phase 修正后重新核对**。核对通过才落盘。

---

## 落盘（模式 A）

按 [reference.md](reference.md#产物文件模板) 的模板写入 `.ui-ascii/{slug}.md`，文件应包含：

1. 标题与来源说明（转自设计稿，转换日期）
2. （多屏时）Mermaid 跳转流程图
3. ASCII 布局图（含锚点）
4. 标注表
5. 待确认项（若有）

落盘后向用户简述：画了哪些区域、提取了几条标注、有几项待确认。

---

## 描述生成模式（模式 B：直接输出，不落盘）

用户没有图、只用文字描述想要的界面时走本模式。**产物直接输出到对话，不写 md 文件**——描述本身已是文本、易存储，ASCII 只是即时可视化草图，存档无收益。

1. **需求确认与合理补全**：能合理默认的就默认（如常规登录页布局、Logo 占位），只在**结构性歧义**（如没说有哪些区域、竖排还是横排）时才问清；补全的缺省组件要在输出说明里点出供用户确认，但不得虚构偏离描述意图的关键功能。
2. **绘制**：复用 Phase 1 结构识别 + Phase 2 框线绘制方法，依据来源从"图"换成"用户描述"。
3. **标注**：仅当用户在描述里明确给了尺寸/颜色/交互等参数时，才用 Phase 3 的编号锚点 + 标注表；没给就不加，更不编造。
4. **多屏**：描述含多个界面/跳转时，同样可用 Mermaid 流程图串联，一并输出在对话里。
5. **核对后输出**：贴出 ASCII 前先自检——
   - [ ] ASCII 未虚构偏离用户意图的关键功能（常规缺省组件可补全，但已在说明里点出）
   - [ ] 描述里的关键区域/组件都画到了
   - [ ] 中文全角对齐、框线不错位

   通过后把 ASCII 直接贴进回复，并一句话说明画了哪些区域（含补全项）。若用户随后说"存一下"，**不重走视觉闸门**——直接把已确认的 ASCII 按 [reference.md](reference.md#产物文件模板) 模板写入 `.ui-ascii/{slug}.md`（核对基准仍是用户描述，落盘前同样查重）。

---

## 表现形式规范

- **纯文本优先**：ASCII 图放在 ` ``` ` 代码块里（不指定语言），保证等宽对齐不被 Markdown 破坏。
- **对齐**：全程用等宽思维，框线竖直对齐；宁可留白也不要错位。
- **中文全角对齐**：中文字符在等宽字体里占 **2 个**西文字符宽，框内混排中文极易把右框线顶歪——按**视觉宽度**（1 汉字≈2 空格）估算框宽，右框线对不齐时优先在文字右侧补空格，不强求逐像素对齐；纯结构区域可多用西文占位符规避。
- **一致性**：占位符、锚点符号、表格列名全文统一（见反模式）。
- **克制**：不追求像素级还原；不给图中没有的元素编造标注；emoji 仅在必要处偶用（如待确认 ⚠️），宁少勿滥。

## 更多资源

- ASCII 绘制规范、字符集、各类组件画法、完整产物模板与样例，参见 [reference.md](reference.md)