06 · 实战：手绘 UI 线框图
把页面抽象成一组几何数据 → JS 渲染出"草图"
核心思想 —— "代码即构图"：
把页面元素建模成一组对象数组：{type, x, y, w, h, label}，
渲染时遍历数组 switch 出对应形状。
这种数据驱动的画法适合：
1. 文章里反复用到的"基础设施图"（用户路径、系统架构）
2. 想 A/B 两种布局时，改改数据就行，不用重新画图
3. 跟代码仓库一起 commit，PR 时图自动跟着改
代价：写起来比 Figma 拖拽慢，对"快速试一下"不友好。
所以 RoughJS 不是替代 Figma，而是替代"为了画一张图而打开 Visio"这个场景。