tweaks

Tweaks Skill · 参数化变体面板

为任意 HTML 成品添加一个侧边面板，其中的实时控件可即时改写 CSS 自定义属性，并将设置持久化到 localStorage。 灵感来自 huashu-design 的 tweak 模式。

产出内容

一个自包含的 HTML 文件，包含两个层级：

1. 舞台 — 原始成品（着陆页 / 演示文稿 / 仪表板）， 经过重新配置，使所有视觉决策都读取 CSS 自定义属性： --accent、--scale、--density、--mode、--motion。
2. 面板 — 固定侧边栏（小视口下为抽屉），包含通过一个小型 原生 JavaScript 桥接程序绑定到这些自定义属性的表单控件。每次更改 都会按成品标识符为键持久化到 localStorage。

用户可以：

• 打开成品，查看应用了已保存偏好（或合理默认值）的舞台。
• 在面板中调整 accent / scale / density / mode / motion，并观察舞台即时更新——无需重新渲染。
• 按 T 隐藏 / 显示面板；按 R 重置为默认值。
• 刷新页面——每项选择都会持久化。

适用场景

• 用户生成了一个自己有八成满意的成品，想亲自微调剩下的两成。
• 你正在展示设计系统 / 品牌，希望观众实时感受不同变体（而不是由你重新运行 Agent）。
• 你正在发布独立演示（例如作品集项目），希望观众可以自行体验。

不适用场景

• 不会迭代修改的一次性成品（例如运维手册——参数派不上用场）。
• 成品价值取决于固定比例时（例如精心平衡数据可视化的图表——这些调节项会损害效果）。

5 个标准调节项

根据成品选择合适的子集。如果只有 2 项有意义，就不要把 5 项全加上——杂乱只会造成退步。

1. --accent — 强调色

提供包含 5–8 种精选色样的下拉列表（不要提供自由选色器—— 用户可能会选出糟糕的颜色，然后怪你）。

const ACCENT_PRESETS = [
  { id: 'rust',    val: '#c96442', label: 'Rust' },
  { id: 'cobalt',  val: '#2c4d8e', label: 'Cobalt' },
  { id: 'sage',    val: '#4a7a3f', label: 'Sage' },
  { id: 'plum',    val: '#7a3f6a', label: 'Plum' },
  { id: 'graphite',val: '#3a3a3a', label: 'Graphite' },
];

成品中原先使用硬编码强调色的所有位置，现在都使用 var(--accent)。 边框 / 链接 / 引述竖线 / CTA 都会一起切换。

2. --scale — 字体缩放（0.85 / 1.0 / 1.15）

提供三个设置：紧凑（0.85）、标准（1.0）、宽松（1.15）。 所有 font-size 声明都通过 calc(... * var(--scale)) 乘以 var(--scale)。

不要超过 ±15%——再多会破坏布局（列流、断点、行数）。

3. --density — 布局密度（紧凑 / 标准 / 宽松）

提供三个可切换间距比例的设置：紧凑（0.75）/ 标准（1.0）/ 宽松（1.4）。所有 padding / gap / margin 声明都乘以 var(--density)。

这是影响最大的调节项——也是最脆弱的一项，因此在添加面板 之前，每个对布局至关重要的容器都必须在自定义属性中声明基础间距。

4. --mode — 浅色 / 深色

一个两态开关。在 <html> 元素上设置 data-mode="light" 或 "dark"，成品的 :root 选择器据此响应并应用两套颜色。

如果成品已有基于媒体查询的深色模式，请将其替换 为基于 data 属性的版本——用户的选择应优先于操作系统设置。

5. --motion — 关闭 / 轻微 / 活跃

提供三个设置。映射到 CSS 变量 --motion-mult，以缩放 所有 transition-duration / animation-duration 声明：

• 关闭 — 0s（也会禁用 WebGL 画布 / 装饰性动画）。
• 轻微 — 1.0（成品原本设定的时长）。
• 活跃 — 1.6（过渡更慢，动效更明显）。

遵循 prefers-reduced-motion：如果用户启用了该设置，无论存储的 偏好是什么，都默认设为关闭。

实现原语

阅读 assets/wrap.html——其中附带了面板和桥接代码，作为惰性模板。你的任务是：

1. 获取用户现有的 HTML 成品。
2. 将其强调色、模式、间距和缩放提取为自定义属性（搜索硬编码的 #hex / Npx / Nrem 并进行转换）。
3. 将内容粘贴到 wrap.html 中标记的区域。
4. 编辑 assets/wrap.html 的 KNOBS 数组，只保留你认为与此成品相关的旋钮。重要的只有 2 个，就别放 5 个。
5. 将 STORAGE_KEY 改为唯一的 slug（tweaks-<artifact-slug>）。

wrap.html 中的桥接代码：

• 首次绘制时加载 localStorage[STORAGE_KEY] 中的 JSON。
• 将值应用为 document.documentElement.style.setProperty('--accent', ...)。
• 监听每个表单控件的 change 事件并写回。
• 提供 T（切换面板）和 R（重置）。

工作流

第 1 步 — 获取成品

选项与 critique 技能相同：

1. 项目文件（项目文件夹中的 index.html）。
2. 聊天中粘贴的 HTML。
3. 由你在本轮中生成。

第 2 步 — 确定适用的旋钮

先阅读成品的 CSS。对每个旋钮，判断是 / 否：

• --accent — 如果成品有一种使用次数 ≥ 3 的强调色，则选是。
• --scale — 如果成品以排版为主（文章、演示文稿、定价页），则选是。
• --density — 如果成品有一致的间距 / 内边距节奏（演示文稿、仪表板、落地页），则选是。操作手册不选（本来就很紧凑）。
• --mode — 如果成品定义了深色模式令牌，或者你愿意推导这些令牌，则选是。
• --motion — 如果成品有值得调整的过渡 / 动画，则选是。静态报告 / 评审报告不选。

默认：3 个旋钮最合适。 5 个太繁杂，1 个不值得做成面板。

第 3 步 — 将硬编码值提取为自定义属性

打开 assets/wrap.html 的 <style> 块——复制其中的自定义属性命名方案（--accent、--scale 等）。在用户的成品中，找到这些属性涉及的所有位置并改写：

• 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 步 — 粘贴到封装模板中

将成品的 <style> 和 <body> 复制到 wrap.html 中标记的区域。保留面板和桥接代码不变。

第 5 步 — 测试完整流程

打开结果，至少点击每个旋钮一次，刷新页面，确认选择会保留。如果某个旋钮导致布局错乱——移除它，不要发布。

输出约定

<artifact identifier="tweaks-<artifact-slug>" type="text/html" title="<Artifact Title> · Tweaks">
<!doctype html>
<html>...</html>
</artifact>

在成品前写一句话（“已为 X 添加封装和 3 旋钮微调面板——强调色 / 缩放 / 模式。”）。在 </artifact> 后停止。

硬性规则

• 不要提供自由选色器——只提供精选色板。给用户自由选择时，他们会选出糟糕的颜色；避免这种情况正是整个设计的目的。
• 按成品标识符持久化——使用 tweaks-<slug>，而不是全局键。两个成品分别在两个标签页中打开时，不得共享状态。
• 尊重 prefers-reduced-motion——如果用户启用了该设置，动效默认设为关闭，仅在用户明确点击后才覆盖。
• 单文件——除成品现有导入项外，不得使用外部 CSS / JS / 字体。将面板和桥接代码内嵌。
• 视口宽度 < 720px 时默认隐藏面板——通过右上角的“T”按钮打开滑入式抽屉。
• 旋钮不得超过 5 个。 3 个最合适。