tweaks skill

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.

What you produce

A single self-contained HTML file with two layers:

re-keyed so all visual decisions read from CSS custom properties: --accent, --scale, --density, --mode, --motion.

1. Stage — the original artifact (landing page / deck / dashboard)

form controls bound to those custom properties via a tiny vanilla-JS bridge. Persists every change to localStorage keyed by the artifact identifier.

1. Panel — a fixed sidebar (or drawer on small viewports) with

The user can:

preferences (or sensible defaults).

• Open the artifact and see the stage rendered with their saved

watch the stage update instantly — no rerender.

• Adjust accent / scale / density / mode / motion in the panel and

reset to defaults.

• Press T to hide / reveal the panel; R to

• Refresh the page — every choice is persisted.

When to use

in the last 20% themselves.

• The user generated something they like 80% of, and wants to dial

feel the variants live (instead of you re-running the agent).

• You're presenting a design system / brand and want the audience to

want viewers to play.

• You're shipping a stand-alone demo (e.g. a portfolio piece) and

When not to use

parameters don't help).

• One-shot artifacts that won't be iterated on (e.g. a runbook —

with carefully balanced data viz — knobs would degrade it).

• When the artifact's value is in fixed ratios (e.g. an infographic

The 5 standard knobs

Pick a subset that suits the artifact. Don't ship all 5 if only 2

matter — clutter is a regression.

1. --accent — Accent color

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.

2. --scale — Type 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).

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

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.

4. --mode — Light / Dark

A 2-state toggle. Sets data-mode="light" vs "dark" on the 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.

5. --motion — Off / Subtle / Lively

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.

Host integration contract (REQUIRED)

The OpenDesign viewer toolbar has a Tweaks toggle that drives panel visibility from outside the iframe. For the toggle to bind to your panel, your artifact must speak one of these two protocols (pick one; don't mix). The toolbar enables itself the moment it sees either signal.

Protocol A — postMessage (recommended for agent-generated artifacts)

Use this when the panel mounts via JS (React, vanilla, anything dynamic).

Artifact → host:

window.parent. Tells the toolbar a panel exists; the optional visible reports the panel's initial state so the toolbar toggle starts in sync. Omit visible for the common "panel is already on screen" case (the host treats a missing field as true so the legacy zero-arg message keeps working). Pass visible: false to declare a default-closed panel.

• On mount, post { type: 'editmode_available', visible?: boolean } to

{ type: 'editmode_dismissed' }. Toolbar flips to "off".

• When the user closes the panel locally (× button, Esc, etc.), post

Host → artifact:

• { type: 'activateedit_mode' } — open the panel (setOpen(true)).
• { type: 'deactivateedit_mode' } — close the panel (setOpen(false)).

Minimal listener: