布局
生成器把两个问题——画布上放什么（左）和它长什么样（右）——组合成五种布局之一。平台自己的生成器覆盖了全部五种；你的生成器从最接近的那一份起步。
五类模板
| # | 模板 | 左 | 右 | 适用 |
|---|---|---|---|---|
| 1 | layout-1-params.html | 无 | 320 参数 | 没有东西可挑可生成，用户只调值 |
| 2 | layout-2-templates.html | 320 模板 | 320 参数 | 左侧只有一件事：浏览并选择模板 |
| 3 | layout-3-generate.html | 320 生成，停靠 | 320 参数 | 从一个输入（提示词、风格、图片）出发，再调整 |
| 4 | layout-4-floating.html | 360 生成，悬浮 | 无 | 选中风格后在对话框里配置这次生成，之后没有可调项 |
| 5 | layout-5-multi.html | 64 工具 + 320 面板 | 320 参数 | 左侧有多件事：生成、模板、导入 |
在 3 和 4 之间拿不定时，问题只有一个：生成之后还要调东西吗？要，选 3。结果即终稿，选 4。
五种组合，一副骨架：左边是要挑选或要生成的东西，中间是结果，右边是要调整的参数，导出（深色小块）永远在右下。
每份模板有两种形态。骨架版（<layout>.skeleton.html）是结构加完整样式表、剥掉脚本块——搭页面结构时读这一份，文件里没有别的东西跟布局和令牌抢注意力。可运行版（同一地址去掉 .skeleton）把行为也内联进来，用来看示例跑起来；里面控件做的事是演示，不是规范。两种都是单个 HTML 文件，没有第二份要一起拷的。
里面每个控件都能用——重置、单位切换、数值字段的拖拽改值、缩放、下拉、收起、加工 Tips 的分步引导、二级页。只有导出按钮是替身，它会说明平台本来会做什么。下面可以直接操作，下载后复制进项目即可。
区域
| 区域 | 宽度 | 装什么 |
|---|---|---|
| 平台顶栏 | 64 | 平台自己画的——你不要再加一条 |
| 工具栏 | 64 | 仅布局 5：每个左侧面板一枚图标 |
| 左侧栏 | 320，悬浮时 360 | 可添加、可生成的东西：模板、风格、提示词、导入 |
| 画布 | 侧栏之外的全部 | 预览，加四个覆层：视图 tab、加工 Tips、缩放，以及没有参数栏时的导出 |
| 参数栏 | 320 | 属性卡片堆，导出固定在底部 |
侧栏定宽。窗口的变化全部由画布吸收：窗口变宽，参数栏不跟着变宽。
停靠区域之间没有间距也没有圆角，侧栏与画布之间只有一条 1px 的 stroke-default。悬浮栏是唯一例外：白卡片、12px 圆角、shadow-100 阴影，距画布顶、起始、底三边各 16px。
左侧栏可收起为画布左上角一枚 40px 的胶囊（侧栏标题 + 面板图标），画布随之变大。布局 5 里再次点击已选中的工具即可收起面板。
参数栏永远 320px，永远三段：
- 头部行——起始端单位切换，末端 Reset
- 中间——可滚动的属性卡片堆
- 底部——导出按钮，固定在这里，不用滚动去找
派生结果（用量、零件数、时长）标注在画布上，或放进卡片堆底部的一张卡片。它们不单开一列。
画布的四个角
画布上只有四个覆层，别无其他：视图 tab 在顶部居中，加工 Tips 胶囊在顶部末端，缩放簇在底部起始端。第四个是导出，只在没有参数栏时出现在底部末端。覆层 hover 时不位移。
缩放是自由值，不是固定档位：滚轮与双指捏合连续缩放画布且锚在指针位置，拖拽画布即平移，读数是一个菜单按钮、菜单里列几档作为快捷入口，「适应画布」量画布算比例并把画板归位。菜单列哪几档、范围到哪，由你定。
前置栏可以有二级页：分区的「View all」或栏底的历史行，会把栏内内容替换成一行返回按钮加一个三列 90px 方块的栅格。画布不动，也不弹对话框；Back 是唯一的出口。
视图切换是分段控件，不是页签条：两到三个互斥视图（2D design / 3D preview / Export）。超过三个，说明画布承担了太多。顶部末端那枚胶囊只打开加工 Tips 的分步引导，不做别的。
属性卡片
参数按对象或按功能分组进属性卡片：白底、stroke-divider 边框、四角 8px 圆角、shadow-100，在 bg-subtlest 面板上以 12px 间距堆叠。一张卡片就是一行标题加它下面的字段行。标题行是整行宽的 <button aria-expanded>，起始端是标题，末端是展开箭头。卡片本身是 <section>，用 aria-labelledby 指向那行标题。
参数少的卡片保持展开，参数多的可以默认收起。收起只改两样东西：卡片内容的 hidden，和箭头的旋转。没有高度动画。
字段行是 标签 ⋯ 控件，上下 8px、左右 16px 内边距，标签用 text-primary，控件靠末端对齐。取值的类型决定控件：数值用 92px 输入框，选项用 110px 下拉，范围用滑块并在旁边显示数字，开关用开关，颜色用一枚 24px 色块。
第二张卡片默认收起：标题行仍在，箭头翻转，卡片只剩一行高。点标题展开。
流程与状态
布局必须让流程一目了然：挑选或输入 → 配置 → 生成 → 检视 → 导出。实时预览型生成器拖动滑块就重绘，没有「生成」这一步；给它加一个 Generate 按钮是缺陷。
预览有三个状态，三个都要设计：
- 空——展示示例或提示，不是一块空白矩形
- 计算中——阶段名、数字，以及取消的入口；不是无限转圈
- 完成——缩放、平移、对比、重新生成
错误放在引发它的控件旁边，并给出下一步。屏幕顶部的 toast 是错误被忽略的地方。
尺寸与滚动
你的宽度是平台分配的区域，不是视口，所以用容器查询适配。960px 以下三个区域堆叠，画布在先、侧栏在后，导出按钮仍固定在底部。
侧栏在自己内部滚动，用细滚动条。不要出现横向滚动，也不要把一个滚动容器套进另一个。既要填满又要能滚的面板，flex: 1 和 min-height: 0 缺一不可。前者让它长满，后者允许它收缩到比内容矮。少了后者，flex 子项保持默认的 min-height: auto，不肯收缩，于是溢出而不滚动。模板里每个滚动容器都是两条一起写的。