引言
从想法到代码，中间往往要经历画原型、出设计稿等环节。
用 ASCII 草图，可以跳过大量原型绘制、结构拆解和手动搭骨架的中间步骤。
这种表达方式其实一直存在，但真正让它进入工程流程的，是 AI 的能力提升。大语言模型对结构化文本具有很强的解析能力，能够识别文本中的层级、对齐关系与空间划分，并将这些结构信息稳定地映射为组件树和页面布局。
因此，ASCII 不再只是沟通草稿，而成为一种可执行的结构描述。
什么是'ASCII 草图'
提到 ASCII，很多人的第一反应可能是那个年代久远的'字符画'。没错，ASCII 草图就是用字符来构建页面布局。
在 AI 时代，这种看似简陋的草图，其实蕴含着巨大的能量。大语言模型（LLM）对结构化文本的理解能力极强。相比于模糊的自然语言描述（'我要一个左边宽右边窄的布局'），ASCII 草图提供了一种所见即所得的结构化 Prompt。
简单来说，ASCII 草图充当了视觉蓝图的角色，AI 根据这个结构生成代码。
为什么要让 AI 先生成 ASCII 草图？
你可能会想：直接让 AI 生成代码不就行了吗？为什么要中间多这一步？
这就涉及到一个沟通精度的问题。
直接描述布局的问题
用自然语言描述布局，很容易产生歧义。比如你说'左边放导航，右边放内容'，AI 可能会理解成左右各占 50%，而你想要的是导航 200px 宽度。你说'卡片要突出一点'，AI 理解的'突出'可能是加阴影，而你想要的是加大字号。
这些细节上的偏差，会导致生成出来的代码需要反复调整。
ASCII 草图作为中间层的价值
让 AI 先生成 ASCII 草图，相当于在需求和代码之间加了一个可视化确认步骤。
- 结构一目了然：ASCII 图能直观展示层级关系、组件位置、相对大小，比自然语言描述更精确
- 快速迭代：草图不对，让 AI 改几句就行，比改代码快得多
- 专注布局：这一步只讨论结构，不涉及样式细节，避免过早陷入细节纠结
简单来说，ASCII 草图充当了视觉蓝图的角色——先确认布局结构没问题，再让 AI 填充代码实现。
实战演练：三步构建一个 Dashboard
光说不练假把式。假设我们要开发一个常见的后台管理系统 Dashboard，包含顶部导航、侧边栏、数据统计卡片和图表区域。
第一步：描述需求，让 AI 生成草图
你只需要用自然语言描述布局结构，让 AI 来生成 ASCII 草图。
Prompt 示例
我需要一个后台管理系统的 Dashboard 布局，包含：
- 顶部导航栏：左侧是 LOGO，中间是导航菜单，右侧是用户头像
- 左侧边栏：垂直排列的导航菜单项
- 主内容区：
- 标题"Dashboard Overview"
- 三个横向排列的统计卡片：Users、Revenue、Orders
- 下方是一个大的区域图表
请帮我生成对应的 ASCII 布局草图。
AI 会输出类似这样的草图：
+-------------------------------------------------------+
| LOGO [ Home ] [ Dashboard ] [ Settings ] [User] |
+-------------------------------------------------------+
| |
| | Dashboard Overview |
| | +----------+ +----------+ +----------+ |
| | | Users | | Revenue | | Orders | |
| | | , | | $, | | | |
| | +----------+ +----------+ +----------+ |
| | |
| | +----------------------------------------+ |
| | | Revenue Chart (Area) | |
| | +----------------------------------------+ |
+--------+----------------------------------------------+
