Markdown-UI DSL 是一种专为快速原型设计和需求可视化而设计的领域特定语言（DSL），它允许开发者和产品经理使用纯文本语法创建低保真线框图。该工具的核心理念是将 UI 设计过程从图形界面中解放出来，通过简洁的标记语言表达布局结构、组件类型和交互逻辑，从而提升沟通效率并减少理解偏差。与传统的拖拽式线框图工具不同，Markdown-UI DSL 完全基于文本，支持版本控制、易于集成到开发流程中，并可作为 Spec-Driven Development（SDD）的关键组成部分。其语法借鉴了 Markdown 的直观性，同时扩展了专门用于 UI 描述的结构化标签，如容器、卡片、模态框和输入控件等。这种轻量级但表达能力强的方案特别适合在早期设计阶段进行快速迭代和跨职能协作。
核心功能特点
- 使用类 Markdown 语法创建文本化线框图，无需图形界面或复杂工具
- 支持垂直与水平布局容器、卡片、模态框、头部/底部导航等结构化区域定义
- 内置按钮、输入框、复选框、下拉菜单、标签、聊天气泡等多种常见 UI 组件表示方式
- 可通过 YAML 前导元数据指定主题样式、目标框架（如 Next.js + TailwindCSS）及关联代码组件路径
- 支持响应式设计指令（如 `@sm`, `@md`），实现移动端优先的多断点样式覆盖
- 提供双向同步机制：可从 `.ui.md` 规格文件自动生成前端代码，也可反向将代码变更同步回线框图
适用场景
Markdown-UI DSL 特别适用于敏捷开发团队在产品设计初期进行快速概念验证和用户流程梳理。当产品负责人需要向设计师、工程师和利益相关者清晰传达界面结构和功能意图时，该工具能以极低的成本生成可读性极强的文本线框图，避免因口头描述不清导致的误解。此外，在 Spec-Driven Development 实践中，开发者可以直接依据 `.ui.md` 文件编写前端组件，确保设计与实现的一致性，显著降低后期返工风险。对于远程协作团队而言，基于文本的线框图天然支持 Git 版本管理，便于追踪变更历史和并行编辑。另一个典型应用场景是构建可维护的设计系统文档，通过在 YAML 中引用统一的设计规范文件，保证多个页面或组件间的视觉一致性。最后，该 DSL 还可用于自动化测试用例生成或作为 API 接口与前端之间的契约式约定，进一步推动前后端协作的标准化。