看到某個網站的按鈕、卡片、甚至是整個區塊設計得很漂亮，想「參考」但打開 DevTools 一看，HTML 結構複雜到想放棄？
今天要推薦的這個 Chrome 插件 Slicer.dev，就是為了解決這個痛點而生——只要在網頁上點選任何元件，就能一鍵匯出成專為 AI 工具優化的提示詞。
它能做到什麼？
互動元件一鍵截取
傳統的「複製 HTML」從開發者工具拿出來的 code 通常是這樣的：
- 一堆看不懂的 class 名稱（
.jsx-1234567890這種） - 遺失的 CSS 樣式
- 壞掉的圖片連結
- 沒有 hover / animation 狀態
Slicer.dev 直接幫你把這些「翻譯」成 AI 能理解的描述，而且保留動畫、hover 狀態、互動邏輯。
支援的 AI 工具
輸出格式專為以下工具優化：
- Lovable
- Bolt.new
- Cursor
- Claude Code
- v0.dev
簡單來說，現在流行的「Vibe Coding」工具它都支援。
輸出格式
目前支援兩種匯出模式：
- AI Prompt：給大語言模型的高品質提示詞，描述元件的佈局、色彩、間距、字體
- React：直接輸出可用的 React 元件程式碼
未來還會支援 Figma 和 Framer。
安裝方式
- 前往 Chrome Web Store - Slicer.dev
- 點擊「加到 Chrome」完成安裝
- 安裝完成後，瀏覽任何網站就能直接使用
目前是公開測試版，免費使用。
使用教學
基本操作
- 安裝完成後，來到你想偷元件的網站
- 按住 Shift + 滑鼠左鍵，Slicer 就會進入選取模式
- 移動滑鼠時，會即時預覽即將被抓取的區塊範圍
- 確認範圍後放開，選擇「Copy as Prompt」或「Copy as React」
鍵盤快捷鍵
| 快捷鍵 | 功能 |
|---|---|
Enter |
選取父層 |
Shift + Enter |
選取子層 |
Esc |
取消選取 |
實際應用情境
情境一：想要某個網站的按鈕設計
以前：打開 DevTools，找 CSS，改 class，一個一個慢慢試
現在：Shift + 點擊按鈕 → Copy as Prompt → 貼給 Cursor/Claude → 完成
情境二：想要複製整個 Hero Section
Slicer 會聰明地幫你分析 DOM 結構，直接產出包含以下資訊的提示詞：
- 佈局結構（grid / flex / absolute）
- 色彩 palette
- 字體大小與 weight
- 動畫類型（fade-in、slide-up 等）
情境三：想要某個產品的 Feature Card
直接點擊就能抓取，包含 hover 效果、圖片配置、文字層級——全部轉化成 AI 可以理解的描述。
與其他工具的比較
| 工具 | 輸出類型 | 互動狀態 | 適合場景 |
|---|---|---|---|
| Slicer.dev | AI Prompt / React | ✅ 支援 | Vibe Coding、快速複製 |
| DivMagic | HTML/CSS/JSX/Tailwind | ⚠️ 部分 | 程式碼取向的開發者 |
| html.to.design | Figma | ❌ 不支援 | 設計師轉進 Figma |
Slicer 的最大優勢在於它專為 AI 提示詞優化，輸出結果是給 LLM 看的描述，不是 raw code——這正好符合現在「用嘴巴寫程式」的趨勢。
適合誰使用？
- 前端 / React 開發者：快速 scaffold UI 元件
- UI/UX 設計師：即將支援 Figma，取用網頁靈感更方便
- Vibe Coder：用 Cursor、Lovable 等工具開發應用的開發者
- PM 與創辦人：快速做出有參考感的 prototype
隱私與安全
Slicer.dev 的隱私政策說明它會存取「驗證資訊」與「網站內容」，不會販售給第三方。如果在意的人可以先看一下他们的 隱私政策。
結語
與其花兩小時對著 DevTools 慢慢抄，不如 Shift + 點一下，30 秒交給 AI。
現在就安裝 Slicer.dev，體驗一下「所見即所得」的 AI 開法吧。