tweaks

Tweaks Skill · 参数化变体面板

Tweaks 是一种给任意 HTML 作品加装实时参数面板的技能。它的核心产物是一个自包含的单文件 HTML，包含两层：舞台（原始作品，如落地页、演示文稿或仪表盘）与面板（固定侧栏，小视口下变为抽屉）。面板中的表单控件通过一小段原生 JavaScript 桥接到 CSS 自定义属性，所有改动实时生效并持久化到 localStorage。

主要能力

• 实时改写 CSS 自定义属性，无需重新渲染页面即可看到变化。
• 按作品标识持久化设置，刷新页面后偏好仍然保留。
• 提供键盘快捷键：按 T 隐藏或显示面板，按 R 恢复默认值。
• 面板可默认打开或关闭，宿主工具栏可与其双向同步。

5 个标准调节旋钮

技能定义了 5 个标准旋钮，但建议只挑选适合当前作品的子集；只用到 2 个时就不要全部放出 5 个。

1. --accent：强调色。使用一个下拉选择，提供 5 至 8 个精选色板（如 Rust #c96442、Cobalt #2c4d8e、Sage #4a7a3f、Plum #7a3f6a、Graphite #3a3a3a），而不是自由取色器。作品中原先硬编码的强调色改为使用 var(--accent)，边框、链接、引文线和 CTA 会一起变化。

2. --scale：字号比例，三档为 Compact（0.85）、Normal（1.0）、Generous（1.15）。所有 font-size 通过 calc(... * var(--scale)) 相乘。不建议超过 ±15%，否则布局可能破裂。

3. --density：布局密度，三档为 Tight（0.75）、Normal（1.0）、Roomy（1.4）。所有 padding、gap、margin 通过 var(--density) 相乘。这是影响最大的旋钮，也最脆弱，布局关键容器需要先声明基础间距的自定义属性。

4. --mode：明暗模式，两态切换。在 <html> 元素上设置 data-mode="light" 或 dark，:root 选择器响应两套颜色。若作品原本用媒体查询实现暗色模式，应替换为 data 属性版本，让用户选择优先于系统设置。

5. --motion：动效，三档为 Off（0s，同时禁用 WebGL 画布和装饰性动画）、Subtle（1.0，作品原有节奏）、Lively（1.6，更慢的过渡、更明显的动效）。映射到 CSS 变量 --motion-mult，缩放所有 transition-duration 与 animation-duration。若用户设置了 prefers-reduced-motion，应默认选 Off，除非用户明确点击选择。

宿主集成契约

查看器工具栏有一个 Tweaks 开关，从 iframe 外部控制面板可见性。作品需实现以下两种协议之一，不能混用；工具栏一旦检测到信号就会启用。

协议 A——postMessage（推荐用于由智能体生成的作品）。作品在挂载时向 window.parent 发送 { type: '__edit_mode_available', visible?: boolean }。省略 visible 时宿主按 true 处理；传 visible: false 表示面板默认关闭。用户本地关闭面板时发送 { type: '__edit_mode_dismissed' }，工具栏切换为关闭。宿主向作品发送 { type: '__activate_edit_mode' } 打开面板，{ type: '__deactivate_edit_mode' } 关闭面板。

协议 B——基于类名（用于 assets/wrap.html）。作品带一个 .tw-panel 元素，并通过 .tw-hidden 类切换可见性。查看器的 iframe 桥接会隐藏面板初始绘制、用 MutationObserver 监听类变化并双向传递状态。选择器固定为 .tw-panel 与 .tw-hidden，不可重命名。

反模式：不要发明第三种协议或重命名任何标识符，否则工具栏开关无法绑定，面板将置灰。

实现要点

读取 assets/wrap.html，它提供了面板与桥接的惰性模板。实现步骤为：取用户现有作品 HTML；把强调色、模式、间距、比例提升为自定义属性（将硬编码的 #hex、Npx、Nrem 改掉）；把内容粘贴到 wrap.html 的标记区域；编辑其 KNOBS 数组，只保留相关旋钮；把 STORAGE_KEY 改为唯一标识（tweaks-<artifact-slug>）。桥接会加载 localStorage[STORAGE_KEY]，通过 document.documentElement.style.setProperty 应用值，监听所有控件 change 事件写回，并暴露 T 与 R 快捷键。

工作流程

第 1 步，获取作品：项目文件（项目文件夹中的 index.html）、聊天中粘贴的 HTML，或本轮由你生成的内容。

第 2 步，判断适用旋钮：先读作品的 CSS。--accent 适用于有 1 个强调色且使用 ≥ 3 次的情况；--scale 适用于以文字为主的作品（文章、演示文稿、定价页）；--density 适用于有一致间距节奏的作品（演示文稿、仪表盘、落地页），操作手册这类已经很紧凑的不适用；--mode 适用于已有暗色模式令牌或你愿意推导的情况；--motion 适用于有值得缩放的过渡或动画，静态报告与评审报告不适用。默认 3 个旋钮是最佳平衡。

第 3 步，提升硬编码值：按 wrap.html 的命名方案重写，如 color: #c96442 → color: var(--accent)，font-size: 18px → font-size: calc(18px * var(--scale))，padding: 24px 32px → padding: calc(24px * var(--density)) calc(32px * var(--density))，transition: opacity 200ms → transition: opacity calc(200ms * var(--motion-mult))。若已使用 clamp() 或 vw，只在外层乘以自定义属性，不要拆开 clamp()。

第 4 步，粘贴进包裹模板，保留面板与桥接不变。

第 5 步，测试闭环：打开结果，每个旋钮至少点击一次，刷新页面确认选择保留；若某个旋钮破坏布局，移除它而不要交付。

输出契约

输出形如 <artifact identifier="tweaks-<artifact-slug>" type="text/html" title="<Artifact Title> · Tweaks"> 的单个 HTML；artifact 之前用一句话说明，如“Wrapped X with a 3-knob tweak panel — accent / scale / mode.”，</artifact> 之后停止。

硬性规则

• 不提供自由取色器，只用精选色板。
• 按作品标识持久化（tweaks-<slug>），不要用全局键；两个标签页打开两个作品时状态不能共享。
• 尊重 prefers-reduced-motion，若用户设置了该偏好，动效默认 Off，仅显式点击时覆盖。
• 单文件交付，除作品已有导入外不引入外部 CSS、JS、字体，面板与桥接内联。
• 视口小于 720px 时面板默认隐藏，通过右上角 T 按钮滑出抽屉。
• 不要超过 5 个旋钮，3 个是最佳平衡。

适用场景

• 用户已经 80% 满意生成结果，想自己微调最后 20%。
• 展示设计系统或品牌，让观众现场感受变体，而不是重新运行智能体。
• 发布独立演示（如作品集），希望观众上手把玩。

不适用场景

• 不会被迭代的一次性产物（如操作手册，参数没有帮助）。
• 价值在于固定比例的作品（如精心配平的数据可视化信息图，旋钮会导致效果退化）。

技能中提到的收费、价格等信息暂未提供。