引言
从想法到代码,中间往往要经历画原型、出设计稿等环节。
用 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) | |
| | +----------------------------------------+ |
+--------+----------------------------------------------+


