Ui To Ascii

---
name: ui-to-ascii
description: 把用户粘贴的 UI 设计稿 / 截图 / 原型图转成纯文本 ASCII 框线布局图并存入 Markdown（设计稿标注转为编号锚点 + 标注表）；也支持凭文字描述直接生成界面 ASCII 草图（直接输出、不落盘）。凡是页面样式 / 布局的编写与修改（新增、改版、重构、修视觉缺陷），必须先经其「界面确认闸门」出 ASCII 图并与用户确认，确认后才可实施。触发："把这个设计图转成文本"、"ui to ascii"、"ui-ascii"、"存一下这个设计稿"、"帮我画个 XX 界面的 ASCII"、"改页面前先出图"、"布局确认"。
---

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

## 概述

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

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

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

**边界（与 ui-designer / 实现类 skill 分工）**：
- **从零设计界面视觉方案 / 产出 HTML demo** → 走 `ui-designer`；其布局定稿 ASCII 图遵循本 skill 的绘制规范，结构复杂时会调用本 skill 的描述生成模式
- **涉及页面样式 / 布局的编写与修改** → 必须先经本 skill 出 ASCII 图并与用户确认（见下文「界面确认闸门」）；本 skill 只负责出图与确认，不改代码、不写设计文档
- 本 skill 承接：已有设计稿/截图 → ASCII 转换存档（模式 A）；凭文字描述画 ASCII 草图（模式 B）；界面类改动的前置确认（模式 B + 闸门）

---

## 产物落盘（模式 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`（核对基准仍是用户描述，落盘前同样查重）。

   > **作为界面确认闸门交付时**：确认环节按「界面确认闸门」执行——本模式的"合理默认"只允许补全常规缺省组件，**不得替用户决定布局**；未取得确认不进入实施。
   >
   > **"不落盘"的口径**：仅指本 skill 不生成独立存档文件；调用方（如 `product-manager` 的报告、`ui-designer` 的方案文档）把该图作为**自己文档的内嵌内容**写入，不违背此约定，也无需另存 `.ui-ascii/`。

---

## 界面确认闸门（界面类改动的前置，SSOT）

> **铁律**：凡是涉及**页面样式 / 布局**的新增、修改、重设计、缺陷修复，都要**先出 ASCII 图并与用户确认，未经确认不得动手写**。本节为唯一口径：`requirement-mining`（Step 3 出图 + Step 4A 确认）/ `design-craft`（阶段 2.4）/ `debug`（Step 5 前置）/ `code-review`（阶段 5「界面类改动的额外检查」）直接引用本节；`product-manager`（规则 13）/ `ui-designer`（布局图闸门）按其既定的"必附图 + 定稿确认"规则执行，**触发与豁免口径以本节为准**。

### 触发（命中任一即必须走本闸门）

| 类别 | 典型信号 |
|------|----------|
| 布局 / 结构 | 增删区块、改排列方向、改栅格列数、拆合组件、改容器宽高关系、移动入口位置 |
| 样式体系 | 新增 / 更换主题、改断点、改间距体系、改对齐方式、改溢出与换行策略 |
| 显隐与层级 | 元素显示 / 隐藏、遮挡关系、层级（z-index）、空态 / 错误态 / 加载态的呈现 |
| 视觉缺陷 | 错位、重叠、溢出、折行错乱、对齐偏移、某断点破版 |

### 豁免（须在输出中写明"为什么不出图"）

- 只改样式**取值**、不改变结构 / 布局关系 / 换行 / 显隐：如调色值、字号 ±1~2px、圆角、阴影、局部间距值
- 纯文案修改；纯后端 / 逻辑修改且界面呈现不变
- 判定口诀：**"改完之后结构上能否看出区别"**——看不出 → 可豁免（改值）；看得出 → 必须出图

### 输出要求

1. **修改类**：现状图 + 预期图（上下或并排，共用一套锚点编号）；现状来自代码 / 截图 / 用户提供，不可知标 `[待确认]`，不臆造
2. **新建类**：预期图；必要时补一张"放在现有页面的哪个位置"的骨架图
3. **多方案**：每方案一张图（≤3 张），或一图 + 差异锚点标注，并给推荐
4. **图后必附变更点表**：`变更点 | 现状 | 预期 | 类型（新增 / 修改 / 删除）`
5. 结尾明确一句：**"请确认以上布局，确认后我再开始改 / 继续"**

### 闸门（硬约束）

- 用户**明确确认**（"可以 / 确认 / 就这样"）前：不写 UI 代码、不落设计文档的界面章节、不进入下游阶段、不宣告任务完成
- 用户提出修改 → **重绘并重新确认**，不得沿用旧图继续（旧图即旧错误）
- 无视觉能力的模型同样适用：ASCII 是文字产物，不依赖看图能力
- 图不单独存档（模式 B 口径）：随调用方文档内嵌落盘；用户说"存一下"再按模式 A 模板落 `.ui-ascii/{slug}.md`

### 边界情形（防死锁、防绕过）

| 情形 | 处置 |
|------|------|
| 用户说"你定 / 随便 / 按你想法来" | 视为**授权代定**：仍要出图（含你的选择与理由），图上注明"按用户授权代定"，出图后可直接实施（视为已确认）；不得借此跳过出图 |
| 用户明确说"不用出图，直接改" | 显式豁免，在回复里留痕（"按你的指示直接改，未出图"）；该次改动不计入"未经确认"违规 |
| 上游已有**经用户确认**的图 | 以其为基线，不重复出图；直接进实施与复核 |
| 无人值守 / 子 agent 拿不到确认 | 输出图 + 变更点表 + 待确认项，交调用方 / 主 agent 取确认，**不自行实施**，不把"没确认"当默认通过 |
| 需求本身没定清（连区块都没有） | 先按可合理默认的骨架出图并点明假设，图中歧义标 `[待确认]`；不得因"信息不全"跳过出图 |

---

## 表现形式规范

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

## 更多资源

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