1.跨界前端的平面設計師
習慣了 Figma 等設計軟體的直覺操作，受不了只能用文字向 AI 笨拙地描述「往左一點」、「間距再大一點」的設計工作者。
2.重度依賴 AI 寫 code 的開發者
使用 Cursor、Claude Code 或 Windsurf 快速建構產品，希望專注於核心業務邏輯，不想把時間和腦力浪費在手動通靈 CSS 像素細節上的工程師。
1.「文字 Prompt 難以精確描述視覺」的災難
解決了跟 AI 說「這顆按鈕的內邊距再小一點」，結果 AI 擅自亂改，導致整個 Flexbox 佈局跑版崩潰的問題。
2.「浪費 Token 與時間盲猜數值」的損耗
解決了為了對齊幾個像素，必須不斷與 AI 來回對話（"再過去 2px... 不對，太多了退回 1px"），導致浪費大量 Token 額度與等待時間的痛點。
3.「第三方工具越權修改專案」的風險
解決了授權第三方工具自動改 code 卻把現有 Component 邏輯改壞的風險，透過「產出精確 Prompt 讓你手動貼給 AI」的安全機制，把控制權還給開發者。
• Figma 風格的即時控制面板 (Live Visual Manipulation)：
直接在瀏覽器的 Live DOM 上注入視覺化介面，讓你可以用拖拉滑桿的方式直覺調整 Margin、Padding 和 Gap，畫面即時連動預覽。
• 精確數值生成器 (Structured Value Generation)：
當你在畫面上調整到滿意的視覺比例後，面板會自動捕捉並生成對應的精確 CSS / Tailwind 數值與程式碼結構，沒有模糊地帶。
• 安全可控的工作流 (Opt-in Control Flow)：
絕對不主動覆寫你的本地檔案！工具只負責產生最完美的「微調指令」，你只需要將它複製貼上給你的 AI 助手執行，完全不破壞既有的開發習慣與專案安全。
•隨插即用的 Agent Skill：
開源且輕量，無需複雜安裝。只需將資料夾丟進對應的 .claude/skills/ 或 .cursor/skills/ 環境中，就能讓你的 AI 助手瞬間獲得強大的視覺化能力。
