Make tweakable

Skill aiatelie/ai-atelie/skills/make-tweakable

Local-first, open-source alternative to Anthropic's Claude Design. MIT-licensed, BYO agent CLI — Claude Code, Kimi, Codex, or any SDK-compatible model. Composable skills · three edit paths · designs as plain HTML/JSX/CSS folders · run locally, no cloud round-trip. Generate banners, thumbnails, websites, animations, design systems.

Install

npx -y skills add aiatelie/ai-atelie --skill make-tweakable

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

7 stars7 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Add in-design tweak controls

SKILL.md

2.5 KB, as published. Nobody here has run it

Tweaks

The user can toggle Tweaks on/off from the toolbar. When on, show additional in-page controls that let the user tweak aspects of the design — colors, fonts, spacing, copy, layout variants, feature flags, whatever makes sense. You design the tweaks UI; it lives inside the prototype. Title your panel/window "Tweaks" so the naming matches the toolbar toggle.

Protocol

Order matters: register the listener before you announce availability. If you post __edit_mode_available first, the host's activate message can land before your handler exists and the toggle silently does nothing.
First, register a message listener on window that handles: {type: '__activate_edit_mode'} → show your Tweaks panel {type: '__deactivate_edit_mode'} → hide it
Then — only once that listener is live — call: window.parent.postMessage({type: '__edit_mode_available'}, '*') This makes the toolbar toggle appear.
When the user changes a value, apply it live in the page and persist it by calling: window.parent.postMessage({type: '__edit_mode_set_keys', edits: {fontSize: 18}}, '*') You can send partial updates — only the keys you include are merged.

Persisting state

Wrap your tweakable defaults in comment markers so the host can rewrite them on disk, like this:

const TWEAK_DEFAULS = /*EDITMODE-BEGIN*/{
  "primaryColor": "#D97757",
  "fontSize": 16,
  "dark": false
}/*EDITMODE-END*/;

The block between the markers must be valid JSON (double-quoted keys and strings). There must be exactly one such block in the root HTML file, inside inline <script>. When you post __edit_mode_set_keys, the host parses the JSON, merges your edits, and writes the file back — so the change survives reload.

Tips

Keep the Tweaks surface small — a floating panel in the bottom-right of the screen, or inline handles. Don't overbuild.
Hide the controls entirely when Tweaks is off; the design should look final.
If the user asks for multiple variants of a single element within a largher design, use this to allow cycling thru the options.
If the user does not ask for any tweaks, add a couple anyway by default; be creative and try to expose the user to interesting possibilities.
Add data-cc-no-inspect="true" to the panel root and the FAB so the editor's inspector skips them.