tweaks

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:

1. Stage — the original artifact (landing page / deck / dashboard) re-keyed so all visual decisions read from CSS custom properties: --accent, --scale, --density, --mode, --motion.
2. 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 T to hide / reveal the panel; R to reset to defaults.
• Refresh the page — every choice is persisted.

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.

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

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