tweaks
Wrap any HTML artifact with a side panel of live, parameterized controls — accent color, type scale, density, motion, theme — that rewrite CSS custom properties in real time and persist to localStorage. Lets the user explore variants of a design without re-prompting the agent. Use when the brief asks for "variants", "side-by-side options", "tweak this", "let me adjust", "live knobs", or "实时调参".
Profile →npx skills add nexu-io/open-design --skill tweaks --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 <kbd>T</kbd> to hide / reveal the panel; <kbd>R</kbd> 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
- What you produce
- When to use
- When not to use
- The 5 standard knobs
- 1. --accent — Accent color
- 2. --scale — Type scale (0.85 / 1.0 / 1.15)
- 3. --density — Layout density (Tight / Normal / Roomy)
- 4. --mode — Light / Dark
- 5. --motion — Off / Subtle / Lively
- Host integration contract (REQUIRED)
- Protocol A — postMessage (recommended for agent-generated artifacts)
- Protocol B — class-based (used by assets/wrap.html)
- Anti-pattern
- Implementation primitives
What does the tweaks skill do?
Wrap any HTML artifact with a side panel of live, parameterized controls — accent color, type scale, density, motion, theme — that rewrite CSS custom properties in real time and persist to localStorage. Lets the user explore variants of a design without re-prompting the agent. Use when the brief asks for "variants", "side-by-side options", "tweak this", "let me adjust", "live knobs", or "实时调参".
How do I install it?
Run `npx skills add nexu-io/open-design --skill tweaks --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From nexu-io/open-design, a repository with 83,577 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.