用途
make-tweakable 用于向一个已经存在的 HTML 产物中注入一个浮动的 Tweaks 调节面板。面板直接存在于产物内部（不使用 iframe），让用户能在预览界面中实时调整参数，例如颜色、字体、间距和布局变体等。
主要能力
面板参数由 CSS 自定义属性与一个 JSON schema 描述：
- 将可调默认值以 --tweak- 前缀的 CSS 自定义属性包裹在 :root 上。
- 添加标记块 <script id="__tweak_schema" type="application/json">{...}</script> 存放默认值。
- 注入浮动面板（<div id="tweaks-panel">），其中的控件与每个键绑定。
- 面板通过 File System Access API 将更新写入 pending.yaml（首次使用时要求用户选择目标文件）。
- Shift+T 可切换面板的可见性。
支持的参数类型包括：颜色、数字（可带 min/max/step/unit）、布尔值、字符串。
使用方式
- 决定要暴露的键。若用户指定了键（$ARGUMENTS），则使用这些键；否则从产物中推断，例如颜色（primaryColor、accentColor、bgColor、textColor）、排版（fontFamily、fontSize、lineHeight）、间距（gap、padding）、布局变体（dense/comfortable/spacious）以及深色模式开关。建议保持精简，4-7 个旋钮，而非 20 个。
- 重构 HTML 以使用 --tweak- 变量：找到硬编码值并替换为 var(--tweak-keyName)，在 :root 上设置默认值，并添加 schema 块。
- 注入 Tweaks 面板脚本（追加到 </body> 之前）。
- 建立会话状态文件：创建 artifacts/tweaks/<session-id>/applied 目录，并写入 artifacts/tweaks/<session-id>/state.yaml（包含 target_html、phase、last_applied_at 字段）；session-id 形如 tweaks-{slug}-{YYYYMMDD}。
- 验证：运行 /serve（若产物使用外部 .jsx 启动器则需要），然后 /done http://127.0.0.1:4567/<html-path>，确认面板出现、Shift+T 可切换且无 console 错误。
用户操作：按 Shift+T 打开面板；点击「Link pending.yaml」→选择 artifacts/tweaks/<session-id>/pending.yaml，面板此后每次改动都会实时写入；满意后说出「apply tweaks」或运行 /apply-tweaks <html-path>。
适用场景
需要在预览中反复调整视觉参数（颜色、排版、间距、布局密度、深色模式等），并希望将调整结果回写到 HTML 源文件的工作流。
限制与注意事项
- File System Access API 需要 http 来源（在 Chrome >= 2024 中也可在 file:// 下运行，但有注意事项）。建议始终通过 http 提供可调节产物。
- 若浏览器不支持 File System Access API，可使用面板中的「Copy YAML」回退方案，将 YAML 粘贴给 Claude 并说出「apply tweaks」。
- 面板浏览器内状态使用 localStorage 保存。
- 本技能的实际运行依赖相关脚本与配套命令（如 /serve、/done、/apply-tweaks），其具体可用性以运行环境为准。