make-tweakable
Make Tweakable
Inject a floating Tweaks panel into an existing HTML artifact. Panel lives in-artifact (no iframe), uses File System Access API for persistence (with copy-paste fallback).
Pattern
- Wrap tweakable defaults in CSS custom properties with
--tweak-prefix on:root - Add marker block
<script id="__tweak_schema" type="application/json">{...}</script>with the defaults - Inject floating panel (
<div id="tweaks-panel">) with controls bound to each key - Panel writes updates to
pending.yamlvia File System Access API (asks user to select target file on first use) Shift+Ttoggles panel visibility- User invokes
/apply-tweaks <html-path>or says "save tweaks" — Claude readspending.yaml, edits HTML viaEdittool, clears pending
Phase 1 — Decide keys
More from bluzir/claude-code-design
make-deck
Build an HTML slide deck (1920×1080, keyboard nav, exportable) when user asks for a presentation, pitch deck, slides, or keynote. Uses deck_stage.js starter and Claude Design taste rules.
14export-pptx
Export an HTML deck to PPTX via per-slide screenshots. Requires Node + pptxgenjs + puppeteer (run /doctor first).
13wireframe
Explore 3+ design variations in low-fi/greyscale on a labeled canvas for comparison. Use when user asks for wireframes, lo-fi, ideas, variants, sketches, many options.
13export-pdf
Export an HTML artifact to PDF via headless Chromium (puppeteer Page.pdf). For multi-slide decks one page per <section>.
13animated-video
Build animated motion design (explainer, transition reel, product intro). Uses Stage/Sprite timeline from animations.jsx for in-browser compositions or Remotion for full video/MP4 workflows.
13interactive-prototype
Build a hi-fi clickable React prototype with realistic device chrome. Triggered by "prototype", "clickable", "app mockup", "interactive demo".
13