TUI Studio：把终端 UI 从「手写 ANSI」搬进「Figma 式画布」
阅读时间: 大约 9 分钟
TUI Studio：把终端 UI 从「手写 ANSI」搬进「Figma 式画布」
终端应用（TUI，Text User Interface）——比如 htop、lazygit、k9s——的界面长期以来都是纯代码手搓：你要在 BubbleTea、Textual、Ink 这些框架里手写每一个 Box 的边框、每一行的对齐、每一种 ANSI 颜色码。TUIStudio（官网 tui.studio，当前 v0.3.6 Alpha）想做的事，是把这件事变成「像用 Figma 一样拖拖拽拽」。本文基于其官网与官方说明，看看它到底是什么、做到了哪一步，以及宣传语里被划掉的那个「SOON」。
一、它要解决的问题：TUI 为什么一直没有设计工具
Web 前端有 Figma、Sketch、浏览器 DevTools；桌面有原生设计器；唯独 TUI 的界面，几十年来都是「写代码 → 跑起来 → 看歪了 → 回去改坐标」。原因不复杂：TUI 不是像素画布，而是一个字符网格——一个组件占几行几列、边框用全角还是半角、中文等宽字符怎么对齐，都得靠开发者人肉算。随着 k9s、lazygit 这类工具越来越复杂，「终端应用也需要设计」这件事开始被认真对待，TUIStudio 就是这个方向上的一次产品化尝试。
二、它是什么：一个深色的、Figma 式的 TUI 设计器
按官网自述，它提供一块「活的画布」：把组件拖进去、右侧改属性、画布按真实 ANSI 字符实时预览，缩放可调。具体能力：
- 21 个内置组件：Screen、Box、Button、TextInput、Checkbox、Radio、Select、Toggle、Text、Spinner、ProgressBar、Table、List、Tree、Menu、Tabs、Breadcrumb、Modal、Popover、Tooltip、Spacer；
- 三种布局模式：Absolute（绝对定位）、Flexbox、Grid——官方直接说「就像浏览器里的 CSS」；
- 8 套配色主题：Dracula、Nord、Solarized、Monokai、Gruvbox、Tokyo Night、Nightfox、Sonokai，切换时画布实时重渲；
- 工程化：项目保存为可移植的
.tuiJSON 文件，可 git 提交、可分享给团队，不需要账号或云端； - 分发：提供 macOS（Apple Silicon）、Windows 和 Docker 三种方式。
三、关键能力清单
| 维度 | 官方说法 |
|---|---|
| 当前版本 | v0.3.6，Alpha |
| 内置组件数 | 21 个 |
| 布局引擎 | Absolute / Flexbox / Grid（类 CSS） |
| 内置主题 | 8 套（Dracula、Nord、Solarized、Monokai、Gruvbox、Tokyo Night、Nightfox、Sonokai） |
| 工程文件 | .tui JSON，可 git 版本控制，无需账号 |
| 计划导出目标 | Ink(TS)、BubbleTea(Go)、Blessed(JS)、Textual(Python)、OpenTUI(TS)、Tview(Go) 共 6 个框架 |
| 商业模式 | 核心编辑器免费；后续 Pro 档（团队协作、云同步、优先支持） |
四、评测口径批判：那个被划掉的「SOON」
这是本文最想提醒读者的一节。官网首页最亮眼的一句是「export to 6 frameworks with one click SOON」——注意那两道删除线。紧接着在 Export 区，官方挂了一个醒目的 ⚠ Alpha notice：
Code export is not functional yet. We’re actively working on it.
也就是说，这个产品最被宣传、最有差异化的卖点——「设计一次，一键导出成 Ink/BubbleTea/Textual 等生产代码」——在当前 Alpha 版本里根本还没做。它现在真正能用的，是「可视化画 TUI、实时 ANSI 预览、存成 .tui JSON」这一半；从设计稿到能跑的框架代码之间的那座桥，还在修。
其他几个官方自己写明的前提，读的时候也要带上：
- 没做代码签名：macOS Gatekeeper 会直接拦（提示「无法打开，因为来自未知开发者」），Windows SmartScreen 会弹「Windows 已保护你的电脑」，只有 Linux 能直接装；对非技术用户相当不友好；
- 版本仍在快速重构：v0.3.6 的更新说明就是把 Menu 组件的样式从「逐项设置」改成「全局统一设置」——组件 API 还在变；
- 「21 个组件」「6 框架」是目标清单，不是已验收的功能矩阵，文档也明说「more soon」。
换句话说，把它当「TUI 界的 Figma」来期待，会失望；把它当「一个早期、好看、但导出还没通的 TUI 原型工具」来看，才接近事实。
社区里对这类工具的讨论也很有参考价值。它在 Hacker News 亮相时，评论区没有一味叫好，而是集中追问了三个技术软肋：鼠标交互到底支持到什么程度（TUI 本质是键盘优先的）、可视化拖拽和 TUI/GUI 边界到底在哪、以及宽字符（中文等）与缩放对齐的兼容性。这些恰好是 TUI 区别于 Web UI 的地方——一个中文字符占两个单元格宽，拖拽布局在等宽网格里会不会错位，不是 Web 那套 CSS 能直接照搬的。官方用「类 CSS 布局」做类比降低了学习成本，但真正落地时，这些字符级细节才是决定工具能否被认真采用的关键。
五、优势与局限
优势：
- 方向对：TUI 长期缺可视化设计工具，用类 CSS 的布局引擎 + 实时 ANSI 预览切入，命中了真实痛点；
- 工程意识好：
.tuiJSON 可 git 版本控制、不强制登录上云，符合开发者审美； - 组件与主题覆盖广：21 个组件 + 8 套主流终端主题，起步配置相当齐全。
局限：
- 核心卖点（代码导出）尚未实现——Alpha 阶段只能设计、不能落地成框架代码；
- 未签名分发，macOS/Windows 安装都要手动绕过系统拦截，门槛高；
- 成熟度低：组件 API 仍在重构，早期用户可能频繁踩变更；
- 生态待验证：导出到 6 个框架的代码质量如何（是否 production-ready），官方自己也还没拿出成品证明。
六、谁该关注
- 正在用 BubbleTea / Textual / Ink 写 TUI 工具、又觉得手搓布局痛苦的开发者：可以先下一个玩玩可视化设计流程，但别指望它现在就能吐出生产代码；
- 做内部 CLI/运维工具、想统一 TUI 视觉风格的小团队：
.tuiJSON 可入 git，适合提前把「设计稿」规范化； - 但如果你现在就要能直接编译运行的框架代码，请等它 Export 正式版——官网自己都标了 Alpha，别拿原型工具上生产。