Claude Code 更新！ 全新 Extension for VSCode/Cursor 介面

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 的介面

claudecode_before_and_after_in_extension

可以看到右邊的介面變成一個全新的介面
左邊則是原本的介面

新的介面讓你像是在使用 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

Darrell TW

Claude Code 更新！全新 Extension for VSCode/Cursor 介面