布局
画布优先。画布不是一张卡片，是撑满的底层；两侧栏贴在它旁边，各管一件事。
前导侧栏管「加入什么」——模板、预设、素材、图层。它回答"这张画布上要放什么"， 内容是可选可换的条目，所以用缩略图或列表，选中态明确。 尾侧栏管「调什么参数」——当前对象的属性栈。它回答"放上去的这个东西长什么样"， 内容是分区加字段行，导出钉在它的底部，不用滚到底才找得到。
这条分工决定了两栏不可互换：加入是离散选择，调参是连续调节。 把它们混在一栏里，用户每改一个数值都要重新在缩略图和滑块之间找位置。 派生结果（用量、时长、块数）不单独占一栏——它跟着导出放在尾侧栏底部， 或者作为尺寸标注直接画在画布上。
三栏零间隙、零圆角。侧栏宽度固定（前导 320 · 尾侧 272），画布随窗口伸缩—— 参数栏不该因为窗口变宽而变宽。两栏都可折叠成 40px 细导轨；折叠尾侧栏时画布长出来， 折叠前导侧栏适合已经选定模板、进入纯调参阶段的时候。 没有内容库的生成器（只有参数、没有模板可选）直接去掉前导侧栏，两栏就够—— 多一栏空面板比少一栏更糟。
主流程必须一目了然
输入 → 配置 → 生成 → 查看 → 调整 → 导出。不是每个生成器都有每一步：实时预览类根本没有"生成"这一步，给它加一个生成按钮是缺陷，不是体贴。
垂直节奏只有一条阶梯
4 和 16 的对比让说明明确归属上面那个控件；12 < 16 让标题明确归属下面那一组。面板横向水槽统一 16px。如果某个布局只有在 14px 时才顺眼，问题出在对齐，不在量表。
分组用线，不用框
面板内部用分隔线分组。面板本身已经是一块封闭区域，划界一次就够； 而卡片的圆角会跟输入框的圆角互相抢注意力。卡片留给真正离开平面的东西——浮层、下拉浮层、弹窗， 它们需要一道 stroke-default 加接触阴影来交代自己浮在哪。
预览三个状态，三个都要设计
| 状态 | 必须有什么 | 理由 |
|---|---|---|
| 初始 | 示例结果或最近记录 | 一个空白矩形会被读成"坏了" |
| 计算中 | 阶段名 + 数字 + 取消入口 | 绝不是无限转圈。有个性的转圈是你不知道进度时才做的东西，而这里你知道 |
| 完成 | 放大、平移、对比、重新生成 | 调参是循环，不是单程 |
错误属于出错的那个控件旁边，说清原因并给出下一步。屏幕顶部的 toast 是错误信息被忽略的地方。
尺寸与滚动
决定你尺寸的是平台分配给你的区域，不是视口。面板自适应用容器查询，不用媒体查询。窄于 960px 改为分步流程（底部切换），并把生成操作固定在底部；此时竖向分割线要清掉。
flex:1，只写 min-height:0 的容器只有内容高，会让预览栏撑不满、配置栏溢出而不内部滚动。② 用细滚动条（8px 自绘），经典滚动条会从内边距吃走 15px，让面板右侧看起来比左侧宽一倍。③ 绝不横向滚动，绝不在滚动容器里再套滚动容器。