Claude Code Plugin
最近在 Claude Code 的使用上看到一種新的功能 : Plugin
Plugin 安裝和啟用方式
首先需要啟動 Claude Code 之後 輸入下面兩個指令
# 新增官方插件市場來源 (Marketplace Source)
# 讓 Claude Code 知道去哪裡尋找官方維護的插件
/plugin marketplace add anthropics/claude-code
# 安裝特定的前端設計插件 (frontend-design)
# @claude-code-plugins 指定了這個插件來自剛剛新增的官方插件集合
# 這個插件能增強 Claude Code 在前端設計、審美和 UI/UX 方面的能力
/plugin install frontend-design@claude-code-plugins前端設計 Plugin 測試
裝了這個插件之後 馬上拿來重新設計某個頁面
我的 prompt 只下了 redesign this page
Claude 先跟我問答確認一些方向之後
最後居然給出了這麼詳細的 todo list!
Todos
☒ 建立 CSS 設計系統檔案 (design-system.css)
☒ 建立元件庫檔案 (components.css)
☒ 建立動畫庫檔案 (animations.css)
☒ 建立手機專用樣式檔案 (mobile.css)
☒ 建立動畫控制 JS (animations.js)
☒ 建立輪播控制 JS (carousel.js)
☐ 建立手機互動 JS (mobile-interactions.js)
☐ 重新設計並更新 Hero 區塊
☐ 新增 Trust Bar 區塊
☐ 新增 Problem/Solution 區塊
☐ 增強 Services 區塊樣式與互動
☐ 新增 Process Timeline 區塊
☐ 重組 Portfolio 區塊並加入成果數據
☐ 新增 Testimonials Carousel 區塊
☐ 新增 FAQ Accordion 區塊
☐ 新增 Final CTA 區塊
☐ 增強 Contact Form 樣式與互動
☐ 優化行動裝置響應式設計
☐ 在 index.html 中整合所有新 CSS/JS 檔案
☐ 測試與優化 (跨瀏覽器、效能、無障礙)並且正在針對這個長長的計劃逐步執行中！
VSCode/Cursor Extension
新版本來到 2.0.1
這版本最特別的地方就是大改 Claude Code 的介面
可以看到右邊的介面變成一個全新的介面 左邊則是原本的介面
新的介面讓你像是在使用 ChatGPT 一樣就能使用 Claude Code 而不是以前的 Command Line 介面，可能會勸退不少非開發者的朋友
新介面介紹
介面需分為三大塊 最上方可以檢視以前的對話歷史，和新增一個 Claude Code
中間則是會出現一些使用上的小技巧 和一個新的圖示
下方這是重要的聊天介面
- --可以點擊或是用
shift + tab來切換模式 (auto accept, plan mode) - --/ 選擇一些內建指令，但相對 CLI 版本可以選擇的也比較少
- --可以選擇是否要讓 Claude Code 讀取現在開啟的檔案
Command Line 清單
- Conversations
- New conversation // 新對話
- Resume conversation // 復原以前的對話
- Clear conversation // 清除對話
- Manage Context
- Mention a file // 提及專案中的檔案
- Attach file // 附加新檔案(例如截圖)
- Settings
- Select model // 選擇模型
- MCP // 管理 MCP
- Login // 登入帳號總結心得
Claude Code 這次更新在 VSCode , Cursor 的 Extension 用全新的介面來呈現 Claude Code
我猜是想讓非技術背景的人 用更友善的介面來使用 Claude Code 包裝成像在用 ChatGPT 一樣
以前就在想：Claude Code 好用歸好用 但要教其他人怎麼用，其實不簡單 要教 cd, mv, cp 等等指令對一般人來說不好學
新版看來能解決這樣的問題 讓更多人透過新 Extension 來嘗試 Claude Code
相關文章推薦
想了解更多 Claude Code 的功能嗎？推薦你閱讀這些文章：
