| name | make-tweakable |
| description | Overlays a floating control panel on the prototype allowing real-time adjustment of color tokens, type scale, font weight, spacing multiplier, radius, and shadow parameters. Changes reflect instantly. On user confirmation, syncs back to DesignSystemManifest. |
| trigger | ["原型生成后，用户需要微调配色、间距、字号等参数时","用户说\"我想调一下颜色/间距/字号\"时","make-prototype 完成后用户进入迭代阶段"] |
调参面板（Make Tweakable）
触发时机
- 原型生成后（
make-prototype 完成），用户需要微调配色、间距、字号等参数时
- 用户明确提出"想调整颜色/间距/字号/圆角/阴影"
- 迭代阶段（PatchLog 期间），用户想批量探索参数变化
前置条件
- PrototypeSpec — 已生成的高保真原型 HTML 文件
- DesignSystemManifest — 当前设计系统的 Token 定义
执行内容
在原型页面上叠加一个浮动调参面板，允许用户实时调整设计系统参数，调整结果实时反映在原型上。
调参面板功能
面板作为浮动控件注入原型 HTML，包含以下调节区域：
1. 配色调节
| 可调参数 | 控件类型 | 说明 |
|---|
| 主色（Primary） | Color Picker + Hex 输入 | 调整 --color-primary |
| 辅色（Secondary） | Color Picker + Hex 输入 | 调整 --color-secondary |
| 强调色（Accent） | Color Picker + Hex 输入 | 调整 --color-accent |
| 背景色（Background） | Color Picker + Hex 输入 | 调整 --color-bg |
| 文本色（Text） | Color Picker + Hex 输入 | 调整 --color-text |
- 每个颜色同时显示 hex 和 oklch 值
- 调色时实时更新所有引用该 Token 的元素
- 提供"撤销"按钮回退到上一次确认的值
2. 字号梯度调节
| 可调参数 | 控件类型 | 说明 |
|---|
| 基础字号（Body） | Slider 12-20px | 调整 --font-size-body |
| 梯度比例 | Select 1.125 / 1.200 / 1.250 / 1.333 / 1.500 | 选择比例后自动重算所有层级 |
| 字重（Display） | Slider 400-900 | 调整标题字重 |
| 字重（Body） | Slider 300-600 | 调整正文字重 |
- 梯度比例变化时，自动重算 H1-H4 和 Body/Caption 的字号
- 显示当前完整的字号梯度表
3. 间距标尺调节
| 可调参数 | 控件类型 | 说明 |
|---|
| 基础单位 | Slider 4-8px | 切换 4px 或 8px 基础单位 |
| 倍数系统 | Select 线性 / 黄金比 / 自定义 | 选择倍数后重算间距标尺 |
| 全局缩放 | Slider 0.5x-2.0x | 等比缩放所有间距值 |
- 缩放时实时更新所有
padding、margin、gap 引用 Token 的元素
- 显示当前间距标尺的完整值表
4. 圆角与阴影调节
| 可调参数 | 控件类型 | 说明 |
|---|
| 全局圆角 | Slider 0-24px | 统一调整所有组件圆角 |
| 按钮圆角 | Slider 0-24px | 独立调整按钮圆角 |
| 卡片圆角 | Slider 0-24px | 独立调整卡片圆角 |
| 阴影强度 | Select none / sm / md / lg | 切换全局阴影层级 |
| 阴影颜色透明度 | Slider 0-30% | 调整阴影透明度 |
技术实现
调参面板通过 JavaScript 注入原型 HTML，使用 CSS Custom Properties 实现实时更新：
<div id="tweak-panel" style="position: fixed; top: 16px; right: 16px; z-index: 9999;">
<div class="tweak-panel__header">
<span>Design Tuner</span>
<button onclick="document.getElementById('tweak-panel').classList.toggle('collapsed')">—</button>
</div>
<div class="tweak-panel__body">
<section class="tweak-section">
<h4>Colors</h4>
<label>Primary <input type="color" data-token="--color-primary" value="#{hex}"></label>
</section>
<section class="tweak-section">
<h4>Type Scale</>
Body Size
Confirm & Save
Reset
面板样式
- 面板自身使用半透明背景 + 模糊效果（
backdrop-filter: blur(12px)）
- 面板可折叠（点击标题栏收起/展开）
- 面板宽度固定 280px，内容超出可滚动
- 面板使用设计系统的字体和间距，但不影响原型本身的样式
用户确认后
- 收集面板中所有 Token 的当前值
- 生成 DesignSystemManifest 的更新片段（只列出变化的 Token）
- 更新 DesignSystemManifest 文件
- 更新 PatchLog，记录变更项
- 移除调参面板（原型恢复为不可调状态）
输出格式
# TweakLog
> 调参时间：{日期}
> 原型：{文件名}
## 变更项
| Token | 旧值 | 新值 | 说明 |
|-------|------|------|------|
| --color-primary | #{old} | #{new} | {说明} |
| --font-size-body | {old}px | {new}px | {说明} |
| --space-base | {old}px | {new}px | {说明} |
## DesignSystemManifest 更新
已同步更新以下章节：
- {章节1}
- {章节2}
## PatchLog 记录
已记录到 PatchLog。
注意事项
- 调参面板只调整 DesignSystemManifest 中已定义的 Token，不能新增 Token
- 颜色调整后应提示用户检查对比度（触发
qa-review 的可访问性审查对比度检测）
- 间距全局缩放可能导致布局溢出，调整时实时检查
overflow
- 面板移除后，原型应保留确认后的值（写入 CSS Custom Properties 的 inline 默认值）
- 如果用户取消（Reset），所有 Token 恢复为 DesignSystemManifest 的原始值
