A design-tool panel for vibe coding:
scrub real values, preview live, drag to move
— then copy the exact numbers for
your AI to apply precisely.為 vibe coding 而生的設計工具面板：
刷真實數值、即時預覽、拖曳移動
——再把精準數字交給 AI 精準套用。
Telling an AI "a touch more padding… no, less… rounder" burns turns guessing numbers.
UI Tweaker flips it: every adjustment is a structured, round-trippable value — never a vibe.叫 AI「padding 多一點⋯不對少一點⋯再圓一點」很耗回合在猜數字。UI Tweaker 反過來：每個調整都是可回填的結構化數值——不是憑感覺。
Try an open-source font on the selected text.
替選取的文字試套開源字體。
Real tool also supports Fixed, Fill, Hug, and Auto size modes.
真實工具也支援 Fixed、Fill、Hug、Auto 尺寸模式。
Flex controls: display, direction, wrap, gap, align-items, justify-content.
Flex 控制：display、方向、換行、gap、align-items、justify-content。
Glass lives here now: backdrop blur, saturation, tint, plus shadow layers.
Glass 現在放在這裡：背景模糊、飽和度、染色，加上陰影圖層。
Includes border stroke alignment and a Photoshop-style multi-stop gradient editor.
包含邊框對齊，以及 Photoshop 風格多 stop 漸層編輯器。
Drag any slider on the right — the card updates live. Hit Confirm to see what your AI receives.拉右側任一滑桿——卡片即時更新。按確認，看 AI 會收到的數值。
The preview links your project's real CSS and reads initial values via getComputedStyle — what you see matches production.預覽連結你專案的真實 CSS，用 getComputedStyle 讀初始值——所見即上線結果。
Typography, spacing, size, layout, radius, position/offset, shadow, frosted glass, color — each fully scrubbable.字型、間距、尺寸、佈局、圓角、位置偏移、陰影、磨砂玻璃、顏色——每項都能拖曳微調。
Photoshop-style multi-stop gradients, border stroke alignment, and glass effects that stay see-through.Photoshop 風格多 stop 漸層、邊框對齊，以及真正透明可見的 Glass 效果。
Select any element for an 8-handle box: corners scale proportionally, edges resize, drag to move, rotate, live px label.選任何元素都給 8 手把框：角等比縮放、邊改寬高、拖移、旋轉、即時 px 標籤。
On Confirm, copy structured values for your AI — selectors, values, and intent are ready to paste.按確認後，複製給 AI 的結構化數值——selector、數值與意圖都整理好，直接貼上。
Packaged as a Claude Code plugin, with portable adapters for Codex, Cursor, Windsurf, and plain skill folders.包裝成 Claude Code plugin，並提供 Codex、Cursor、Windsurf 與純 skill folder 的可攜 adapter。
"Help me tweak the card." Your AI opens the panel rendered from your real stylesheet.「幫我調整卡片。」AI 用你真實樣式表開出面板。
Scrub sliders, drag the transform box, watch the live preview update instantly.刷滑桿、拖變形框，即時預覽馬上跟著變。
Hit Confirm — the panel emits a clean, structured block of values and selectors.按確認——面板吐出乾淨的結構化數值與 selector。
Paste the structured values to your AI. It can precisely edit your source and verify the result.把整理好的結構化數值貼給 AI，它就會精準修改你的原始碼並驗證。
Or use the portable adapters for any other AI coding tool.其他 AI coding 工具則用可攜 adapter。
UI Tweaker is MIT-licensed and free. Star it, fork it, or open an issue — feedback makes it sharper.UI Tweaker 採 MIT 授權、完全免費。給星、fork、或開 issue——回饋讓它更銳利。
View on GitHub到 GitHub 看看