Tweaks

Wraps your HTML artifacts with a live control panel that lets users adjust accent color, type scale, density, light/dark mode, and motion without re-prompting Claude. Changes rewrite CSS custom properties in real time and persist to localStorage across refreshes. Use it when someone likes your design 80% of the way but wants to dial in the last 20% themselves, or when you're demoing a brand system and want viewers to feel the variants live. Integrates with the Open Design viewer toolbar via postMessage or class-based protocols. The five-knob pattern is opinionated: curated color swatches instead of free pickers, ±15% scale limits to prevent layout breakage, and motion that respects prefers-reduced-motion.

skills.sh installs: 243
GitHub stars: 106.9K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add nexu-io/open-design --skill tweaks --agent claude-code

Installs into .claude/skills of the current project.

Files

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:

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 T to hide / reveal the panel; R to reset to defaults.
Refresh the page — every choice is persisted.