Skip to content
Get packs

Tweaks Live Controls Panel

Wraps an HTML design in a side panel of live sliders and swatches to adjust colors, spacing, and motion

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
3 files

What it does

When installed, the agent can take a finished HTML page (such as a landing page or slide deck) and add a sidebar of controls for accent color, text size, spacing, light or dark mode, and animation intensity. The viewer can change these live in the browser and their choices are saved in the browser's local storage, so they survive a refresh. This lets people explore design variants themselves without asking the agent to regenerate the page each time.

Great for

  • Designers presenting a design system or brand who want stakeholders to try variants live
  • Creators who like most of a generated page and want to fine-tune the remaining details
  • Developers shipping a standalone demo or portfolio piece where viewers can play with the look

Skip it if

  • One-off documents like runbooks or reports, where adjustable parameters add clutter without value
  • Infographics or data visualizations with carefully balanced ratios, because changing scale or spacing can break their layout
  • Artifacts that depend heavily on fixed layouts, since the skill itself warns the density and type-scale knobs are fragile

Try asking

  • “Wrap this landing page with a tweak panel for accent color, type scale, and density, and save the choices so they persist on refresh”
  • “Give me side-by-side design variants of this dashboard that I can adjust live”
  • “Add a light/dark toggle and a motion setting to this portfolio page”
Step-by-step guide: how to use Tweaks Live Controls PanelInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the Apache-2.0 licence and an attribution note.

    tweaks.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip tweaks.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip tweaks.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Pick only the knobs that matter for the artifact; the skill recommends against shipping all five if only two are meaningful
  • Define base spacing and font sizes as CSS custom properties before wrapping, otherwise the density and scale controls may break the layout
  • Test the output at different viewport sizes, since the panel becomes a drawer on small screens and large scale changes can affect column flow

What's inside

  • assets/wrap.html
  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.