ds-ascii

使用你的设计系统进行 ASCII 原型设计

将自然语言需求转化为等宽线框图，其中每个区域都是你自己的设计系统中的一个已命名组件，类型层级清晰可见，而不是用文字描述。

这是一份真正的规格说明，凡是能显示文本的地方都可以阅读：聊天、PR 描述、代码注释或 Slack 讨论串。无需渲染流程，也无需切换上下文；而且由于受等宽网格的限制，它会促使你进行简洁直接的方框和箭头式思考，这正是优秀线框图所需要的。

让它不止是随手涂鸦的关键在于，每个区域都对应系统中实际存在的组件，并使用其真实名称。这样，设计稿就能成为设计师或开发者可以据此实现的方案。

三个层次

1. GRAMMAR.md — 如何绘制。 框架、边框粗细、明暗层级、字体层级、按钮等级。通用规则，不包含任何组件名称。
2. ARCHETYPES.md — 绘制什么。 十四种形态：页面外壳、页眉、主视觉区、分区、网格、卡片、按钮、字段、表单、表格、列表、媒体、叠加层、页脚。同样通用。
3. ds-ascii/PROFILE.md — 团队如何称呼它。 从原型到真实组件名称的映射表，通过 intake/PROFILE-INTAKE.md 一次性创建，并保存在用户的项目中。

原型在不同设计系统之间是稳定的，组件名称则不是。这种划分正是整个设计的核心：每个系统都有卡片，但没有两个系统会对卡片各区域的名称达成一致。

模式

模式 1 — 渲染（最常见）

1. 查找配置文件。 如果 ds-ascii/PROFILE.md 存在，请读取并确认其仍然有效（“此配置文件已于 验证，目前仍适用吗？”）。如果没有配置文件，请先运行 intake/PROFILE-INTAKE.md。这只需几分钟，之后的所有步骤都会更快。
2. 根据需求判断页面类型。 首页、列表、表单、仪表板、身份验证页面？这决定了页面骨架。
3. 选择保真度级别。 默认使用线框图。如果需求有强烈的视觉亮点，则使用插画式；如果某个区域内容过密，则改用草图，而不是裁切其文案。
4. 从上到下组合，将每个区域映射到一种原型，再将每种原型映射到对应的绑定组件。
5. 使用 tools/build_example.py 中的内边距辅助工具构建，这样宽度就能从一开始准确无误。手动计数最容易导致渲染出错。
6. 在下方编写 ANATOMY 图例，注明真实组件名称；如果需要调整语法规则，则添加 DEVIATIONS 说明。

模式 2 — 创建或更新配置文件

运行 intake/PROFILE-INTAKE.md。如果渲染结果中出现了某个别人找不到的名称，或者系统发布了重大版本，这也是合适的做法。

模式 3 — 根据不同配置文件重新渲染

使用相同的需求和不同的配置文件。适合比较两个系统各自擅长的部分，也是 examples/ 中验证关卡的工作方式。

让渲染忠实可靠的规则

1. 绝不臆造组件名称。 如果某个原型在配置文件中没有对应绑定，就绘制通用形状，并在图例中标记为 <unmapped: hero>。大多数组件库都不提供页面布局组件，所以这种情况经常会遇到，这并不意味着失败。这样的渲染如实说明了你的系统状况。
2. 保留证据标签。 从清单中读取的绑定标记为 [verified]；由人告知的绑定标记为 [reported]。如果渲染依赖 [reported] 绑定，请在图例下方注明。
3. 绝不超出框架宽度。 一行过长就会换行，下面的所有方框都会错位。辅助工具会检查这一点；请运行它。
4. 框定区域内不要使用表情符号。 它们占两个字符宽，会让右侧边界移位。表情符号应该放在框架周围的说明文字里。
5. 声明偏离之处。 如果实际页面迫使你调整语法，请在下方写明。已声明的偏离是读者可以核查的判断；未声明的偏离则违反了规则。
6. 说明输出不是什么。 这是一份线框规格，而非生成的代码。没人应该把它粘贴到构建流程中，并期待得到标记语言。

反模式

• 所有文本都是同一种权重。如果看不出层级，说明渲染失败。
• 没有标注的 ASCII 图。这只是装饰，不是原型。
• 在图中标注嵌套部分。标注容器；各部分放在图例中说明。
• 将主要按钮和次要按钮渲染成相同的权重。必须体现层级。
• 当配置文件的反模式禁止在卡片的媒体区域放标题时，仍在那里放置标题。
• 在宽度为 52 列的框架中放置三列完整句子。这样每行只剩大约 11 个可用字符。改为两列，或降低保真度。

此工具包中的文件

• GRAMMAR.md — 通用渲染语法
• ARCHETYPES.md — 十四种形状及其绑定问题
• intake/PROFILE-INTAKE.md — 用于构建配置文件的证据链
• profiles/PROFILE-FORMAT.md — 配置文件格式
• profiles/material-web.md、profiles/eddie.md — 两份真实且经过验证的配置文件，特意采用截然相反的设计
• reference/CAPABILITIES.md — 此技能能做和不能做的事
• reference/FIGMA-ACCESS.md — 如何访问设计库，以及各桥接工具实际能看到什么
• examples/ — 使用这两份配置文件渲染同一份需求说明
• tools/build_example.py — 填充辅助工具

状态（在用户的项目中）

ds-ascii/
└── PROFILE.md          ← the binding table, built once

如果可以写入文件，请将配置文件保存在那里。如果不行，请将其作为消息输出，方便用户保存并在下次粘贴回来。