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 真正"看到"图片内容。开工前先自检：

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

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

输入确认：

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

Phase 1：结构识别

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

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

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

Phase 2：ASCII 框线绘制

用框线字符画出布局。字符集与对齐规则见 reference.md。核心约束：

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

Phase 3：标注提取

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

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

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

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

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

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

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

单张图跳过本阶段。

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

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

复制此核对清单：

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

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

落盘（模式 A）

按 reference.md 的模板写入 .ui-ascii/{slug}.md，文件应包含：

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

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

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

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

需求确认与合理补全：能合理默认的就默认（如常规登录页布局、Logo 占位），只在结构性歧义（如没说有哪些区域、竖排还是横排）时才问清；补全的缺省组件要在输出说明里点出供用户确认，但不得虚构偏离描述意图的关键功能。
绘制：复用 Phase 1 结构识别 + Phase 2 框线绘制方法，依据来源从"图"换成"用户描述"。
标注：仅当用户在描述里明确给了尺寸/颜色/交互等参数时，才用 Phase 3 的编号锚点 + 标注表；没给就不加，更不编造。
多屏：描述含多个界面/跳转时，同样可用 Mermaid 流程图串联，一并输出在对话里。
核对后输出：贴出 ASCII 前先自检——
- ASCII 未虚构偏离用户意图的关键功能（常规缺省组件可补全，但已在说明里点出）
- 描述里的关键区域/组件都画到了
- 中文全角对齐、框线不错位
通过后把 ASCII 直接贴进回复，并一句话说明画了哪些区域（含补全项）。若用户随后说"存一下"，不重走视觉闸门——直接把已确认的 ASCII 按 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、圆角、阴影、局部间距值
纯文案修改；纯后端 / 逻辑修改且界面呈现不变
判定口诀："改完之后结构上能否看出区别"——看不出 → 可豁免（改值）；看得出 → 必须出图

输出要求

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

闸门（硬约束）

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

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

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

表现形式规范

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

ui-to-ascii

SKILL.mdskills/ui-to-ascii/SKILL.md