Guide · Agent skill
How to use the Tweaks skill: live design controls for agents
Updated · written with AI from the project's own documentation and checked against our catalogue data
The tweaks skill lets an agent wrap a finished HTML page, such as a landing page or slide deck, with a side panel of live controls for accent color, text size, spacing, light or dark mode and animation intensity. This guide explains what the skill does, how to install it, how to trigger it and where it fits. By the end you will know when it is worth using and how to avoid the common pitfalls.
Tweaks Live Controls Panelnexu-io/open-design · Apache-2.0 Download the skill Quick start
- 1Download and unzip. Download the tweaks ZIP from this page and unzip it to get SKILL.md, assets/wrap.html and example.html.
- 2Place the skill folder. Copy the folder into ~/.claude/skills/ for personal use or into your project's .claude/skills/ folder. Alternatively, upload the ZIP under Settings → Capabilities → Skills.
- 3Ask for a tweak panel. Describe the page and the controls you want, using words such as variants, tweak, live controls or knobs.
- 4Review the knobs. Check that only the controls relevant to your artifact are included, since clutter counts as a regression according to the skill.
- 5Test in the browser. Open the generated HTML file, change the panel settings, and refresh to confirm your choices persist.
- 6Share the result. Send the single HTML file to viewers so they can explore the variants themselves.
What the tweaks skill makes the agent do
Agent skills are folders of instructions and supporting files that an AI agent loads when a task matches them. The tweaks skill tells the agent how to take an existing HTML artifact and add a fixed sidebar panel, with a drawer on small screens.
The panel controls CSS custom properties such as --accent, --scale, --density, --mode and --motion. Changes apply instantly in the browser without the agent regenerating the page. Choices are saved to the browser's localStorage, so they survive a refresh. Press T to show or hide the panel and R to reset to defaults.
- Accent color: a choice of 5 to 8 curated swatches rather than a free color picker
- Type scale: Compact (0.85), Normal (1.0) or Generous (1.15)
- Density: Tight (0.75), Normal (1.0) or Roomy (1.4)
- Mode: light or dark, which overrides the operating system setting
- Motion: Off, Subtle or Lively, with Off as the default when prefers-reduced-motion is set
Install the tweaks skill from the ZIP or the Claude apps
Download the tweaks ZIP from this page and unzip it. The skill folder contains assets/wrap.html, example.html and SKILL.md.
For a personal install, place the unzipped folder in ~/.claude/skills/. To limit it to one project, place it in that project's .claude/skills/ folder instead.
If you use the Claude apps, you can upload the ZIP under Settings → Capabilities → Skills instead of copying files by hand.
- Personal install: ~/.claude/skills/tweaks
- Project install: .claude/skills/tweaks inside your project folder
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
Trigger the skill with natural requests
You do not need a special command. The skill loads when your request matches its description or trigger words. Ask for variants, side-by-side options, live knobs or a panel to adjust things yourself.
Name the controls you want. The skill recommends picking only the knobs that suit the artifact, because extra controls add clutter.
- "Wrap this landing page with a tweak panel for accent color, type scale and light/dark mode."
- "Let me adjust the spacing and motion on this deck myself, and remember my choices after a refresh."
- "Give me live knobs for this design system so the team can try variants."
- "Add side-by-side options for this hero section that I can tweak."
What the skill needs and how the panel connects to a host
You need a web browser to open the output HTML file. The skill runs no scripts and makes no network requests, and the output is one self-contained HTML file.
If the page runs inside the OpenDesign viewer, its Tweaks toggle only works if the artifact uses one of two protocols: postMessage (recommended for panels built with JavaScript) or class-based integration, which uses the .tw-panel and .tw-hidden classes from assets/wrap.html. Do not mix them or rename those classes, or the toggle stays greyed out.
The skill's own guidance is to wrap assets/wrap.html as a template: lift hard-coded colors, spacing and sizes into custom properties, paste the content into the marked region, then trim the KNOBS array to the controls you need.
Know when not to use it
The skill is designed for artifacts you will keep iterating on. It is a poor fit for one-off documents such as runbooks or reports, where parameters add clutter.
Infographics and data visualizations with balanced ratios can break when spacing or scale changes. The skill warns that the density and type-scale knobs are the most fragile, and that scale should not go beyond plus or minus 15 percent. Layouts with fixed structure need their base spacing declared in custom properties before wrapping.
- Avoid for runbooks, reports and other one-shot documents
- Avoid for infographics with carefully balanced data visualization
- Keep type scale within plus or minus 15 percent
- Declare base spacing in custom properties before enabling density
What people use it for
- A designer presents a brand system and lets stakeholders try accent and theme variants live.
- A creator fine-tunes spacing and type size on a generated landing page without another full regeneration.
- A developer publishes a portfolio demo where viewers can switch between light and dark mode and adjust motion.
- A team reviews a slide deck and adjusts type scale for a projector or a printout.
Frequently asked questions
Is the tweaks agent skill free to use?
The source lists the item under the Apache-2.0 licence, and this page offers the ZIP for download. Check the licence file included with the project for the full terms before reuse.
How do I install the tweaks skill?
Unzip the downloaded ZIP and place the folder in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder. In the Claude apps, you can upload the ZIP under Settings → Capabilities → Skills.
What do I need to run tweaks?
You need a web browser to view the output HTML file. The skill runs no scripts and uses no network connection. If you use it inside the OpenDesign viewer, the artifact must follow the postMessage or class-based protocol.
Why are my tweak panel settings not saving?
The panel stores choices in the browser's localStorage, so check that your browser allows local storage for the page and that you are not in a private window that clears data. The skill's persistence depends on this storage.
Why is the Tweaks toggle greyed out in the OpenDesign viewer?
The toolbar only enables itself when the artifact sends a valid signal. Use either the postMessage protocol or the .tw-panel and .tw-hidden classes from assets/wrap.html, and do not rename those identifiers or mix protocols.
How does tweaks compare with simply asking the agent to regenerate the page?
Tweaks lets viewers change accent, type scale, spacing, theme and motion themselves, instantly and without another agent run. Regenerating is better when you need structural changes, since the panel only adjusts the parameters you exposed.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use the tweaks skill when you like most of a generated page and want viewers or yourself to fine-tune the look live, such as for a design system presentation or a portfolio demo. Pick a different approach for one-off documents, data-heavy infographics or layouts that depend on fixed proportions.
Download the skill