tweaks

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Tweaks Skill · 参数化变体面板

Wrap any HTML artifact with a side panel of live controls that rewrite CSS custom properties in real time and persist to

localStorage

. Inspired by the huashu-design tweak pattern.

为任意HTML制品添加一个带有实时控件的侧边面板，可实时重写CSS自定义属性并将设置持久化到

localStorage

中。灵感来自huashu-design的调参模式。

What you produce

输出成果

A single self-contained HTML file with two layers:

Stage — the original artifact (landing page / deck / dashboard) re-keyed so all visual decisions read from CSS custom properties:
```
--accent
```
,
```
--scale
```
,
```
--density
```
,
```
--mode
```
,
```
--motion
```
.
Panel — a fixed sidebar (or drawer on small viewports) with form controls bound to those custom properties via a tiny vanilla-JS bridge. Persists every change to
```
localStorage
```
keyed by the artifact identifier.

The user can:

Open the artifact and see the stage rendered with their saved preferences (or sensible defaults).
Adjust accent / scale / density / mode / motion in the panel and watch the stage update instantly — no rerender.
Press <kbd>T</kbd> to hide / reveal the panel; <kbd>R</kbd> to reset to defaults.
Refresh the page — every choice is persisted.

生成一个独立的HTML文件，包含两层结构：

展示区 — 原始制品（着陆页/演示文稿/仪表盘），重新调整后所有视觉决策均读取CSS自定义属性：
```
--accent
```
、
```
--scale
```
、
```
--density
```
、
```
--mode
```
、
```
--motion
```
。
控制面板 — 固定侧边栏（小视口下为抽屉式），通过轻量级原生JS桥接将表单控件与上述自定义属性绑定。所有更改都会根据制品标识符保存到
```
localStorage
```
中。

用户可以：

打开制品时，展示区将按照其保存的偏好（或合理默认值）渲染。
在控制面板中调整强调色/字体比例/布局密度/主题/动效，实时查看展示区更新——无需重新渲染。
按下<kbd>T</kbd>键显示/隐藏控制面板；按下<kbd>R</kbd>键重置为默认设置。
刷新页面——所有选择都会被持久化保存。

When to use

适用场景

The user generated something they like 80% of, and wants to dial in the last 20% themselves.
You're presenting a design system / brand and want the audience to feel the variants live (instead of you re-running the agent).
You're shipping a stand-alone demo (e.g. a portfolio piece) and want viewers to play.

用户生成了一个大致满意的内容（80%符合预期），希望自行调整最后20%的细节。
你正在展示设计系统/品牌，希望受众能实时体验多种变体（而非重新调用Agent生成）。
你正在发布独立演示（如作品集作品），希望观众可以互动体验。

When not to use

不适用场景

One-shot artifacts that won't be iterated on (e.g. a runbook — parameters don't help).
When the artifact's value is in fixed ratios (e.g. an infographic with carefully balanced data viz — knobs would degrade it).

无需迭代的一次性制品（如操作手册——参数调整无帮助）。
价值依赖固定比例的制品（如经过精心平衡数据可视化的信息图——调参旋钮会破坏其效果）。

The 5 standard knobs

5个标准调参旋钮

Pick a subset that suits the artifact. Don't ship all 5 if only 2 matter — clutter is a regression.

选择适合当前制品的子集即可。如果仅2个旋钮有用，就不要全部5个都加入——冗余会带来体验倒退。

--accent

— Accent color

--accent

— 强调色

A select with 5–8 curated swatches (don't ship a free color picker — the user will pick a bad color and blame you).

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' },
];

The artifact uses

var(--accent)

everywhere it had a hard-coded accent before. Border / link / pull-quote rule / CTA all flip together.

提供包含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)

。边框/链接/引用线/呼叫按钮等元素会同步切换颜色。

--scale

— Type scale (0.85 / 1.0 / 1.15)

--scale

— 字体比例（0.85 / 1.0 / 1.15）

Three settings: Compact (0.85), Normal (1.0), Generous (1.15). All

font-size

declarations multiply by

var(--scale)

via

calc(... * var(--scale))

Don't go beyond ±15% — beyond that the layout breaks (column flow, breakpoints, line counts).

三种设置：紧凑（0.85）、正常（1.0）、宽松（1.15）。所有

font-size

声明都会通过

calc(... * var(--scale))

乘以

var(--scale)

的值。

不要超出±15%的范围——超出后布局会破裂（列流、断点、行数都会受影响）。

--density

— Layout density (Tight / Normal / Roomy)

--density

— 布局密度（紧凑/正常/宽松）

Three settings that swap the spacing scale: Tight (0.75) / Normal (1.0) / Roomy (1.4). All

padding

gap

margin

declarations multiply by

var(--density)

This is the highest-impact knob — it's also the most fragile, so every layout-critical container must declare its base spacing in custom properties before you wrap.

三种设置对应不同的间距比例：紧凑（0.75）/ 正常（1.0）/ 宽松（1.4）。所有

padding

gap

margin

声明都会乘以

var(--density)

的值。

这是影响最大的旋钮——同时也是最脆弱的，因此所有对布局至关重要的容器在添加面板前，必须将其基础间距声明为自定义属性。

--mode

— Light / Dark

--mode

— 亮色/暗色主题

A 2-state toggle. Sets

data-mode="light"

"dark"

on the

<html>

element and the artifact's

:root

selector responds with two color sets.

If the artifact already has a media-query-based dark mode, replace it with the data-attr version — the user's choice should win over their OS.

双状态切换开关。在

<html>

元素上设置

data-mode="light"

或

"dark"

，制品的

:root

选择器会响应并切换两套颜色方案。

如果制品已有基于媒体查询的暗色模式，请替换为基于数据属性的版本——用户的选择应优先于系统设置。

--motion

— Off / Subtle / Lively

--motion

— 关闭/柔和/活跃

Three settings. Maps to a CSS variable

--motion-mult

that scales all

transition-duration

animation-duration

declarations:

Off —
```
0s
```
(also disables WebGL canvases / decorative animation).
Subtle —
```
1.0
```
(the artifact's authored timing).
Lively —
```
1.6
```
(slower transitions, more visible motion).

Respect

prefers-reduced-motion

: default to Off if the user has that set, regardless of stored preference.

三种设置。映射到CSS变量

--motion-mult

，用于缩放所有

transition-duration

animation-duration

声明：

关闭 —
```
0s
```
（同时禁用WebGL画布/装饰性动画）。
柔和 —
```
1.0
```
（制品原始设定的时长）。
活跃 —
```
1.6
```
（过渡更慢，动效更明显）。

尊重

prefers-reduced-motion

设置：如果用户开启了该选项，无论保存的偏好如何，动效默认设为关闭。

Implementation primitives

实现基础

Read

assets/wrap.html

— it ships the panel + bridge as an inert template. Your job is to:

Take the user's existing artifact HTML.
Lift its accent / mode / spacing / scale into custom properties (search for hard-coded
```
#hex
```
/
```
Npx
```
/
```
Nrem
```
and convert).
Paste the contents into the marked region of
```
wrap.html
```
.
Edit
```
assets/wrap.html
```
's
```
KNOBS
```
array to keep only the knobs you decided are relevant to this artifact. Don't ship 5 if 2 matter.
Patch the
```
STORAGE_KEY
```
to a unique slug (
```
tweaks-<artifact-slug>
```
).

The bridge in

wrap.html

Loads
```
localStorage[STORAGE_KEY]
```
JSON on first paint.

Applies values as

document.documentElement.style.setProperty('--accent', ...)

Listens to every form control's
```
change
```
event and writes back.
Exposes <kbd>T</kbd> (toggle panel) and <kbd>R</kbd> (reset).

查看

assets/wrap.html

——它包含面板和桥接代码的惰性模板。你的工作是：

获取用户现有的制品HTML。
将其强调色/主题/间距/字体比例转换为自定义属性（搜索硬编码的
```
#hex
```
/
```
Npx
```
/
```
Nrem
```
并替换）。
将内容粘贴到
```
wrap.html
```
的标记区域中。
编辑
```
assets/wrap.html
```
中的
```
KNOBS
```
数组，只保留与当前制品相关的旋钮。如果仅2个有用，就不要全部5个都加入。
修改
```
STORAGE_KEY
```
为唯一标识（
```
tweaks-<artifact-slug>
```
）。

wrap.html

中的桥接代码：

首次渲染时加载
```
localStorage[STORAGE_KEY]
```
中的JSON数据。

通过

document.documentElement.style.setProperty('--accent', ...)

应用值。

监听所有表单控件的
```
change
```
事件并写回数据。
提供<kbd>T</kbd>（切换面板）和<kbd>R</kbd>（重置）快捷键。

Workflow

工作流程

Step 1 — Acquire the artifact

步骤1 — 获取制品

Same options as the critique skill:

Project file (
```
index.html
```
in the project folder).
Pasted HTML in the chat.
Generated by you in this turn.

与评审技能的获取方式相同：

项目文件（项目文件夹中的
```
index.html
```
）。
聊天中粘贴的HTML内容。
当前对话中由你生成的内容。

Step 2 — Decide which knobs apply

步骤2 — 确定适用的旋钮

Read the artifact's CSS first. For each knob, decide yes / no:

```
--accent
```
— yes if the artifact has 1 accent color used ≥ 3 times.
```
--scale
```
— yes if the artifact is type-driven (article, deck, pricing page).
```
--density
```
— yes if the artifact has consistent gap / padding rhythm (deck, dashboard, landing). No for runbooks (already dense).
```
--mode
```
— yes if the artifact has authored dark mode tokens, or you're willing to derive them.
```
--motion
```
— yes if the artifact has any transition / animation worth scaling. No for static reports / critique reports.

Default: 3 knobs is the sweet spot. Five is too busy, one is not worth a panel.

先查看制品的CSS。对每个旋钮决定是否使用：

```
--accent
```
— 如果制品有1种强调色且使用≥3次，则适用。
```
--scale
```
— 如果制品以文本为主（文章、演示文稿、定价页），则适用。
```
--density
```
— 如果制品有一致的间距/内边距规律（演示文稿、仪表盘、着陆页），则适用。操作手册不适用（本身已很紧凑）。
```
--mode
```
— 如果制品已有预设的暗色模式标记，或你愿意生成对应的标记，则适用。
```
--motion
```
— 如果制品有值得调整时长的过渡/动画，则适用。静态报告/评审报告不适用。

默认：3个旋钮是最佳选择。5个太繁琐，1个则不值得添加面板。

Step 3 — Lift hard-coded values into custom properties

步骤3 — 将硬编码值转换为自定义属性

Open

assets/wrap.html

<style>

block — copy its custom-property naming scheme (

--accent

--scale

, etc.). In the user's artifact, find every place those concerns live and rewrite:

```
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))

If the artifact uses

clamp()

vw

already, multiply the outer value by the custom property — don't tear apart

clamp(...)

打开

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(...)

的结构。

Step 4 — Paste into the wrap

步骤4 — 粘贴到模板中

Copy the artifact's

<style>

and

<body>

into the marked regions of

wrap.html

. Keep the panel + bridge intact.

将制品的

<style>

和

<body>

内容复制到

wrap.html

的标记区域中。保留面板和桥接代码不变。

Step 5 — Test the loop

步骤5 — 测试循环

Open the result, click each knob at least once, refresh the page, confirm the choice persists. If a knob breaks the layout — remove it, don't ship it.

打开结果文件，至少点击每个旋钮一次，刷新页面，确认选择已持久化。如果某个旋钮破坏了布局——移除它，不要交付。

Output contract

输出规范

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

One sentence before the artifact ("Wrapped X with a 3-knob tweak panel — accent / scale / mode."). Stop after

</artifact>

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

在制品前添加一句话说明（如“已为X添加包含3个旋钮的调参面板——强调色/字体比例/主题。”）。

</artifact>

之后无需添加其他内容。

Hard rules

硬性规则

Don't ship a free color picker — only curated swatches. Users pick bad colors when given freedom; saving them from that is the whole point.
Persist by artifact identifier —
```
tweaks-<slug>
```
, not a global key. Two artifacts open in two tabs must not share state.
Respect
prefers-reduced-motion
— default to Off for motion if the user has that set, override only on explicit click.
Single-file — no external CSS / JS / fonts beyond the artifact's existing imports. Inline the panel + bridge.
Panel hidden by default on viewports < 720px — slide-in drawer via a "T" button at top-right.
Don't ship more than 5 knobs. Three is the sweet spot.

不要提供自由取色器——仅使用精选色板。用户拥有选择权时往往会选到不合适的颜色；帮他们避免这种情况正是该功能的意义所在。
按制品标识符持久化——使用
```
tweaks-<slug>
```
，而非全局键。在两个标签页中打开的两个制品不能共享状态。
尊重
prefers-reduced-motion
设置——如果用户开启了该选项，动效默认设为关闭，仅在用户明确点击时才覆盖。
单文件——除制品已有的外部引用外，不添加额外的CSS/JS/字体。将面板和桥接代码内联。
视口宽度<720px时默认隐藏面板——通过右上角的“T”按钮打开抽屉式面板。
不要交付超过5个旋钮。3个是最佳选择。",

tweaks

Original

Translation

Tweaks Skill · 参数化变体面板

Tweaks Skill · 参数化变体面板

What you produce

输出成果

When to use

适用场景

When not to use

不适用场景

The 5 standard knobs

5个标准调参旋钮

1. --accent — Accent color

1. --accent — 强调色

2. --scale — Type scale (0.85 / 1.0 / 1.15)

2. --scale — 字体比例（0.85 / 1.0 / 1.15）

3. --density — Layout density (Tight / Normal / Roomy)

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

4. --mode — Light / Dark

4. --mode — 亮色/暗色主题

5. --motion — Off / Subtle / Lively

5. --motion — 关闭/柔和/活跃

Implementation primitives

实现基础

Workflow

工作流程

Step 1 — Acquire the artifact

步骤1 — 获取制品

Step 2 — Decide which knobs apply

步骤2 — 确定适用的旋钮

Step 3 — Lift hard-coded values into custom properties

步骤3 — 将硬编码值转换为自定义属性

Step 4 — Paste into the wrap

步骤4 — 粘贴到模板中

Step 5 — Test the loop

步骤5 — 测试循环

Output contract

输出规范

Hard rules

硬性规则

1.
`--accent`
— Accent color

1.
`--accent`
— 强调色

2.
`--scale`
— Type scale (0.85 / 1.0 / 1.15)

2.
`--scale`
— 字体比例（0.85 / 1.0 / 1.15）

3.
`--density`
— Layout density (Tight / Normal / Roomy)

3.
`--density`
— 布局密度（紧凑/正常/宽松）

4.
`--mode`
— Light / Dark

4.
`--mode`
— 亮色/暗色主题

5.
`--motion`
— Off / Subtle / Lively

5.
`--motion`
— 关闭/柔和/活跃