技能概述
Tweaks 將任何 HTML artifact 包裹在一個側邊欄實時控制面板中。5 個標準旋鈕（accent color / type scale / layout density / light-dark mode / motion intensity）通過純 Vanilla JS 橋接實時重寫 CSS custom properties，並持久化到 localStorage。用戶可即時調整設計變體而無需重新 prompt。按 T 隱藏/顯示面板，按 R 重置默認值。
觸發關鍵字
- tweaks、variants、tweak panel、live controls、adjust on the fly、實時調參、可调参数面板、side panel、knobs
什麼時候用
- 生成設計後用戶想自己微調最後 20%
- 展示設計系統變體給客戶
- 作品集 demo 讓觀眾自己探索
- A/B 設計方案比較
不適用場景：一次性 artifact（如 runbook）、固定比例的圖表/信息圖
使用方法
自然語言觸發
Wrap this landing page with a tweak panel
幫呢個設計加個調參面板
Let me adjust the accent color and density live
指定技能
用 tweaks 技能包裹剛才的設計
工作流程
- 獲取 artifact — 項目文件 / 聊天中貼上的 HTML / 剛生成的 artifact
- 決定哪些旋鈕適用：
--accent：artifact 有 1 個強調色出現 ≥ 3 次--scale：artifact 以排版為主（文章 / 演示 / 定價頁）--density：artifact 有一致的 gap/padding 節奏--mode：artifact 有深色模式 tokenmotion：artifact 有 transition / animation
- 轉換硬編碼值為 custom properties —
color: #hex→color: var(--accent) - 貼入 wrap.html — 只保留相關旋鈕（3 個最佳，不超過 5 個）
- 測試循環 — 點擊每個旋鈕，刷新頁面確認持久化
- 輸出 HTML — 單文件內聯面板 + 橋接代碼
5 個標準旋鈕
| 旋鈕 | 選項 | 影響 |
|---|---|---|
| Accent color | 5-8 個預設色 | 邊框 / 鏈接 / CTA 整體變色 |
| Type scale | Compact 0.85 / Normal 1.0 / Generous 1.15 | 所有 font-size × var(--scale) |
| Density | Tight 0.75 / Normal 1.0 / Roomy 1.4 | padding / gap / margin × var(--density) |
| Light/Dark | 2 狀態切換 | data-mode="light" vs "dark" |
| Motion | Off / Subtle / Lively | transition-duration × var(--motion-mult) |
硬性規則
- 不要提供自定義顏色選擇器 — 只用預設色板
- 按 artifact ID 持久化 —
tweaks-<slug>，不同 artifact 不共享狀態 - 尊重 prefers-reduced-motion — 有此偏好時默認 Motion Off
- 單文件 — 無外部 CSS / JS / 字體
- 小於 720px 時面板隱藏 — 通過頂部 "T" 按鈕滑入
- 不超過 5 個旋鈕 — 3 個是最佳點
實際例子
例子 1：包裹 Landing Page
用戶：「Wrap this landing page with a tweak panel — accent color, type scale, light/dark — persist to localStorage.」
生成：
- 3 旋鈕面板（accent / scale / mode）
- 即時調整，刷新保留選擇
- 按 T 隱藏面板，按 R 重置