標籤: 程式碼助手

  • 把 VS Code 變成自動寫程式助手:cline 實戰

    把 VS Code 變成自動寫程式助手:cline 實戰

    📌 本文重點

    • cline 是裝在 VS Code 裡的自主程式碼 Agent
    • 可批次改檔、跑指令、查文件,但每步都需授權
    • 搭配版本控制與測試,可成為安全的半自動 pair programmer

    cline 要解決的問題很直接:讓一個「在你本機 IDE 裡跑的自主程式碼 Agent」,幫你改檔、跑指令、查文件,但所有動作都要你按下同意鍵才會執行。

    專案連結:github.com/cline/cline


    cline 是什麼?一句話定位

    cline = 安裝在 VS Code 裡的自主程式碼 Agent,可以:

    • 建立 / 編輯專案檔案
    • 執行終端機指令(build、test、lint 等)
    • 啟動瀏覽器幫你查文件
    • 但每一步都會先列出具體操作,等你按「允許」才真的動手

    它的定位不是「幫你寫一個函式就結束」的 Copilot,而是能帶著你一步步完成一個功能或重構任務的半自動 pair programmer


    核心功能:它到底能幹嘛?

    1. 批次改檔、搭 scaffold

    適合情境

    • 重構一個舊專案,把同樣的 pattern 套到多個檔案
    • 快速搭一個新專案的骨架(資料夾結構、基本檔案)

    你可以這樣用:

    1. 在 VS Code 裡打開專案資料夾。
    2. 開啟 cline 面板,輸入指令,例如:

      幫我把 src/ 底下所有 React class component 改成 function component,並保留原本 props 型別。

    3. cline 會:
    4. 先掃專案,列出會動到的檔案
    5. 給你一份「變更計畫」與 diff 預覽
    6. 每個檔案修改前都問你要不要執行

    效果:一次性重構多個檔案,但仍保留「你是 code review 者」的掌控感。

    💡 關鍵: 用 cline 做批次重構時,每個變更都先 review,再執行,可以同時兼顧效率與安全。

    2. 查 bug、跑測試、看 log

    適合情境

    • 接手別人寫的遺留專案
    • 單元測試一堆紅字懶得一個個追

    操作步驟:

    1. 把錯誤訊息貼給 cline,例如:

      Jest 測試 UserService 全掛了,請找出原因並修正。

    2. cline 會:
    3. 根據錯誤訊息定位到相關檔案
    4. 提出一個修正方案(含預計修改的檔案列表)
    5. 要你確認後才修改
    6. 自動幫你呼叫 npm testpnpm test,再讀測試結果

    你可以要求它:

    每一次修正只改一小步,測試通過後再進下一步。

    這樣你就得到一個測試驅動的 AI 助手,不會一次改爆整個 codebase。

    3. 幫你查文件、Google / Docs 查詢

    cline 內建「用瀏覽器查資料」的能力(具體依你設定的模型與工具支援而定),常見用法:

    • 不熟的框架 API
    • 某個 CLI 旗標
    • 某個錯誤碼

    例子:

    有一段 webpack 設定報 deprecated 警告,請幫我找到官方文件,並提供對應的 config 調整建議,改動前先給我 diff。

    cline 會:

    1. 打開瀏覽器工具查官方文件
    2. 摘要關鍵片段
    3. 提出「建議改法 + diff」
    4. 再次問你要不要套用

    關鍵點:所有網頁行為和檔案修改,都會顯示在面板上,必須經你同意。


    安全設計:每一步都要你確認

    agent 工具最怕兩件事:

    • 誤刪 / 誤改檔案
    • 執行奇怪的 shell 指令

    cline 的設計剛好反過來:

    • 每次改檔會顯示 diff,你可以逐行檢查
    • 每次跑指令會顯示 完整命令,例如 rm -rf 這種你一看就會擋
    • 每次讀/寫新檔案,會明確說明路徑

    使用時務必做到:

    • 只把權限給當前專案資料夾
    • 不要在有機敏資料(憑證、prod config)的 repo 直接放手讓它改
    • 先在一個「測試用 repo」練習上述流程

    💡 關鍵: 把 cline 當成需要你簽名才能動手的助手,用「授權前必看 diff / 指令」這個習慣來降低風險。


    適合誰用?三種常見場景

    1. 中小專案重構 / 遺留專案接手

    典型痛點:

    • 接手一個 1–3 年歷史的 Node / Django 專案
    • 設計不統一,命名風格混亂
    • 文件過時

    cline 可以幫你:

    • 產生一份「現有結構地圖」:掃描目錄,生成 docs/ARCHITECTURE.md
    • 逐步統一命名規則(例如全部改用 camelCase)
    • 把散落在 code 的註解整理成文件

    行動建議:

    1. 開一個新 branch(例如 refactor/with-cline)。
    2. 讓 cline 先生成「重構計畫」,內容包含:
    3. 優先修哪些模組
    4. 預計拆出哪些共用函式
    5. 需要補哪些測試
    6. 你確認計畫後,再讓它照計畫一項項執行。

    2. 日常重複開發工作

    常見重複工作:

    • 每次新專案都要搭一套相同骨架
    • CRUD api 的樣板重複貼
    • 測試檔案格式一樣,只是名字和 case 不同

    cline 的價值在於:

    • 把這些「手很痠的工作」變成一段腳本
    • 你只要給它「任務描述 + 確認」,不用自己一檔檔複製

    建議做法:

    • 為你的團隊定義一份「標準專案骨架」描述,像:

      對新的 React 專案:使用 Vite、設定 ESLint + Prettier、建立 src/components, src/hooks, src/pages 目錄,並生成基本範例檔案。

    • 之後每一次開新 repo 直接把這段 prompt 丟給 cline,讓它自動完成。

    3. 半自動 pair programming(搭配本地 / 雲端模型)

    在 Reddit 上有不少人分享,把本地模型(例如 Qwen3.6 35B)搭配 agent 框架(如 little-coder、PI Coding Agent),透過「plan-first」工作流,讓本地模型在 Polyglot benchmark 上接近雲端模型表現。

    參考:
    Qwen3.6-35B + little-coder 實測
    PI Coding Agent + Qwen3.6 35B 實戰心得

    cline 做的是類似事情:

    • 把「計畫 → 分解任務 → 執行」這套流程搬進 IDE
    • 你可以接雲端模型(例如 Claude、OpenAI),也可以接本地模型(透過 OpenAI 相容 API)

    這樣你得到的是一個永遠不搶鍵盤、每步先跟你報告的 pair programmer。


    跟其他 VS Code Agent 工具怎麼選?

    名稱 核心功能 免費方案 適合誰
    cline (GitHub) 單一自主程式碼 Agent,內建檔案操作、終端機、瀏覽器,強調「每步需授權」 工具本身開源;需自備模型 API(金鑰可用免費額度) 想要在現有 VS Code 工作流中加一個安全的半自動助手
    Roo Code (GitHub) 多 Agent 協作,模擬「一整個開發團隊」,支援自動化測試、部署 開源;同樣需自備模型 API 想要嘗試多代理協作、較複雜工作流的進階使用者
    claude-context (GitHub) 把整個 codebase 變成 Claude 的上下文(MCP 工具) 開源;需有 Claude 帳號 重度使用 Claude Code,希望提升大專案上下文理解的人

    如果你只是想讓自己的 IDE 多一個「會聽話的 AI 助手」,cline 的上手成本最低。

    💡 關鍵: 已有模型 API 的使用者,只要裝好 cline,就能用很低成本把 IDE 升級成具備自主能力的開發環境。


    怎麼開始?最快上手路徑

    步驟一:安裝 cline

    最簡單方式是從 VS Code Extension 安裝:

    1. 打開 VS Code 的 Extensions 面板。
    2. 搜尋 cline,作者為 cline
    3. 點選 Install。

    也可以從 GitHub 直接找到相關安裝說明:https://github.com/cline/cline

    (若未來提供 npm/CLI 版本,可以在 README 看到詳細指引。)

    步驟二:連接你的模型 API

    cline 不自帶模型,你需要自己準備一個:

    常見選項:

    • Claude(Anthropic)
    • OpenAI
    • 本地模型(透過 OpenAI 相容 API,如 Ollama、自架伺服器)

    設定方式(概念流程):

    1. 在 cline 設定面板填入:
    2. API Base URL(例如 https://api.openai.com/v1 或你的本地 endpoint)
    3. API Key
    4. 模型名稱(例如 gpt-4.1claude-3.5、或你自訂的本地模型名)
    5. 測試一個簡單 prompt:

      嗨,幫我列出這個專案的主要資料夾結構。

    6. 確認能讀到檔案與回覆,表示連線成功。

    步驟三:直接可用的「plan-first」工作流程 Prompt

    下面這段可以直接複製,當成你和 cline 的標準開場白,每次要做較大的變更都先貼一次:

    你是一個在 VS Code 裡運行的程式碼 Agent,請嚴格遵守以下工作流程:
    
    1. 先閱讀專案的主要檔案與目錄,理解目前架構。
    2. 針對我提出的需求,先幫我:
       - 列出最多 5 個澄清問題(如果有疑慮)。
       - 擬一份分步計畫(Step 1, Step 2...),每步不超過 2–3 個具體修改。
    3. 把這份計畫寫成 `TODO.md` 放在專案根目錄,內容包含:
       - 任務描述
       - 預計修改檔案清單
       - 預計需要執行的指令(例如 test、build)。
    4. 在我明確回覆「同意計畫」之前,不要修改任何程式碼。
    5. 執行時:
       - 每次只完成 `TODO.md` 中的一個步驟。
       - 修改前先顯示預期變更與影響檔案。
       - 修改後自動幫我執行對應測試指令(若有),並總結結果。
    6. 任務結束後,更新 `TODO.md`(標記完成項目),並用要點方式總結你做了什麼。
    
    請先確認你理解上述流程,然後問我:這次要你幫忙的任務是什麼?
    

    有了這個「plan-first」腳本,你可以避免 Agent 一上來就亂改,先把計畫談好再動手。


    風險控管與實務建議

    最後幾個實際上很重要、但容易被忽略的點:

    • 權限只開專案資料夾:不要在整個 ~/ 或公司共用資料夾上跑;只針對單一 repo。
    • 先在測試 repo 試玩:隨便開一個 new repo,隨便寫一些 demo code,先讓 cline 練習跑 2–3 個任務,熟悉它的行為再用在正式專案。
    • 搭配版本控制:每個大任務都在新 branch 上跑,結束後自己再做一次 diff review。
    • 敏感資訊避免暴露:若你用雲端模型,注意不要讓它讀到含憑證 / 密鑰的設定檔,必要時把這些檔案加入 .gitignore 和 cline 的忽略清單。

    只要這幾個基本安全習慣有做到,cline 就可以很自然地變成你日常開發裡的「安全自動化助手」,從重構到寫測試,幫你把那些重複又耗時間的工作交給 Agent 處理。

    🚀 你現在可以做的事

    • 打開 VS Code 安裝 cline 擴充套件,並在一個測試用 repo 裡試跑 1–2 個小任務
    • 準備好你的模型 API(金鑰與 API Base URL),在 cline 設定面板完成連線測試
    • 建立一個標準的「plan-first」prompt 檔案,之後在每個新專案開頭都先貼給 cline 使用
  • 用 Claude Cookbooks 做出你的第一個 AI 小工具

    用 Claude Cookbooks 做出你的第一個 AI 小工具

    📌 本文重點

    • Claude Cookbooks 是一套可直接照抄的實戰 Notebook
    • 非工程師可當高級提示模板庫直接用
    • 工程師可快速接 API 做聊天機器人與 RAG 助手
    • 最快五步就能跑出自己的 AI 小工具

    用一句話說清楚:Claude Cookbooks 是一套「Claude 實戰菜單」,照著 Notebook 抄一遍,你今天就能做出自己的聊天機器人、文件助手或程式碼助手。

    原始專案連結:👉 anthropics/claude-cookbooks


    核心功能:這套「菜單」可以幫你做什麼?

    1. 清楚的 Repo 結構:先選你要的「菜」

    進到 GitHub 專案後,你大致會看到這幾類資料夾(名稱可能會略有調整,但概念相近):

    • notebooks/:主要範例,都用 Jupyter Notebook 寫好
    • basic_examples/:最簡單的對話、提示工程示範
    • tools_and_workflows/:工具呼叫、工作流程自動化
    • rag/:RAG(檢索增強生成),用你自己的文件做問答
    • agents/ 或類似資料夾:多步驟任務、小型 Agent 範例

    可以做的事,對應你能採取的行動:

    • 如果你完全沒寫過程式 → 先看標題含有 conversationprompting 的 Notebook,當成「高級版提示語模板」,直接複製到 Claude 網頁版使用。
    • 如果你會一點 Python → 跑 basic_examples 裡的 Notebook,先確認你能成功打出第一個 API 回應。
    • 如果你想做內部工具或 Agent → 從 tools_and_workflowsrag 開始,把範例裡的「假資料」換成你公司的文件或 API。

    2. Notebook 類型:從聊天到自動化,一路拆給你

    Cookbooks 裡的 Notebook 大致可以分成四類,每一類都可以直接改成你的專案:

    1. 對話 / 提示工程 Notebook
    2. 示範怎麼寫系統提示(system prompt)、角色設定、回覆風格控制。
    3. 行動:把裡面的 system prompt 複製出來,替換成你的場景,例如:

      • 把「你是一位友善的 AI 助手」改成「你是一位專門回答退貨政策的客服人員」。
    4. 工具調用(Tool Use)Notebook

    5. 示範怎麼讓 Claude 主動呼叫你定義好的函式,例如查訂單、算報表。
    6. 行動:照著 Notebook 裡的結構定義一個簡單工具:

      python
      def get_order_status(order_id: str) -> dict:
      # TODO: 這裡先寫死假資料,之後再接真的 DB
      return {"order_id": order_id, "status": "shipped"}

      然後讓 Claude 根據使用者輸入決定要不要呼叫這個工具。

    7. RAG(文件問答)Notebook

    8. 示範怎麼把 PDF、Markdown、內網文件先「切片 + 向量化」,再讓 Claude 根據搜尋結果回答。
    9. 行動:先不管效果好不好,拿一份你真的會用到的文件(公司 FAQ、課程教材)丟進範例 Notebook,看能不能成功問出答案。

    10. 工作流程自動化 / Agent Notebook

    11. 示範多步驟流程,例如:解析需求 → 查資料 → 產出報告 → 修稿。
    12. 行動:把裡面的流程步驟改成你的工作,例如「整理每日客服問題 → 匯總成報表」。

    💡 關鍵: 這些 Notebook 的真正價值在於「可直接照抄運行」,先跑出結果再改一兩行,就能快速變成你的專案雛形。

    這些 Notebook 的重點不是「看懂內部原理」,而是先照抄跑出結果,再從中挑一兩行改成自己的業務語句


    3. 拿 Cookbooks 當提示工程與 API 練習教材

    你可以把整個 repo 當成一套免費教材:

    • 練提示工程
    • 每次只做一件事:挑一個 Notebook,只改 system prompt,觀察回覆差異。
    • 練習把「模糊指令」改成「具體條件」,例如:

      • 從「請你幫我改寫」改成「請幫我改寫成 300 字以內、用條列式、適合放在 EDM 裡」。
    • 練 API 使用

    • 大多數 Notebook 只需要你把 api_key 換成自己的,就能跑起來。
    • 把官方文件 + Cookbooks Notebook 打開對照看,很快就能理解 messagestools 等欄位用法。

    適合誰用:非工程師、工程師都能上手

    1. 非工程師:直接拿 Prompt 模板做你的專屬助手

    你不用會 Python,也能從 Cookbooks 撈出超實用的提示模板:

    適合的場景與行動:

    • 客服:
    • 找對話範例 Notebook,看 system prompt 區塊,改成:
      • 「你是某某品牌的客服,回答只能根據以下政策文件,不要自己杜撰。」
    • 把這串 prompt 複製到 Claude 官網或任何支援 Claude 的聊天界面使用。

    • 教學 / 內訓:

    • 找「教學型」prompt(通常會強調分步驟解釋),改成你的主題:

      • 例如從「解釋 Python 基礎」改成「解釋公司新制度給新進同仁」。
    • 內容產生:

    • 使用「內容規劃」「格式控制」相關的 prompt,限制輸出格式,例如:
      • 「每篇貼文必須含有標題、三個重點、CTA 一句。」

    你可以完全忽略程式碼,只把 Notebook 當作「可複製的提示語範本庫」。


    2. 工程師:照範例接後端、做簡單 Agent 或內部工具

    如果你會基本的 JavaScript / Python,Cookbooks 就是現成腳手架:

    • 接後端 API
    • 參考工具調用 Notebook,把你現有的 REST API 包成一個 tool,讓 Claude 負責決定何時呼叫。

    • 做簡單 Agent

    • 用工作流程 Notebook,把「找資料 → 分析 → 生報告」這種流程拆成數個函式,交給模型逐步完成。

    • 配合其他工具

    • 例如搭配 gsd-build/get-shit-done 這類 meta-prompting 框架,把你在 Cookbooks 練出來的 prompt 模板,包成可重用的規格驅動開發模組。

    怎麼開始:5 步跑出你的第一個 AI 小工具

    以下示範用「本機 + 最實用 Notebook」的最短上手路徑。

    步驟 0:準備一支 Claude API Key

    1. 前往 Anthropic 官方平台(依區域而定,通常是 Anthropic Console)。
    2. 建立帳號,進入 API 區域,建立一支 API Key。
    3. 暫存好這串金鑰,等等要寫進環境變數或 Notebook。

    步驟 1:Fork 專案 + 下載到本機

    1. 打開 repo:https://github.com/anthropics/claude-cookbooks
    2. 右上角點選 Fork,建立自己的副本,方便之後修改。
    3. 在終端機輸入:

    bash
    git clone https://github.com/<你的帳號>/claude-cookbooks.git
    cd claude-cookbooks

    如果你不想在本機操作,也可以直接用雲端 Notebook(例如 GitHub Codespaces、Colab)打開 repo,步驟類似,只是不用 git clone


    步驟 2:安裝環境 + 設定 API Key

    1. 建議建立虛擬環境:

    bash
    python -m venv venv
    source venv/bin/activate # Windows 用 venv\Scripts\activate

    1. 安裝依賴(專案內通常有 requirements.txtpyproject.toml):

    bash
    pip install -r requirements.txt

    1. 設定環境變數(以 macOS / Linux 為例):

    bash
    export ANTHROPIC_API_KEY="你的_API_Key"

    Windows PowerShell 則是:

    powershell
    setx ANTHROPIC_API_KEY "你的_API_Key"

    💡 關鍵: 只要正確設定 ANTHROPIC_API_KEY 環境變數,大部分 Notebook 幾乎「零修改」就能直接跑起來。


    步驟 3:啟動 Jupyter Notebook

    在專案根目錄啟動:

    jupyter notebook
    

    瀏覽器會打開一個頁面,看到專案檔案結構,接下來只要點進想學的 Notebook 即可。


    實戰示範 1:照抄一個「聊天機器人」 Notebook

    以一個最簡單的對話 Notebook 為例(名稱可能類似 basic_chat.ipynb):

    1. 打開 Notebook,找到這幾段:
    2. 匯入套件(通常是 from anthropic import Anthropic
    3. 建立 client:client = Anthropic()
    4. 呼叫模型的程式碼:

      python
      response = client.messages.create(
      model="claude-3-5-sonnet-latest",
      max_tokens=256,
      messages=[
      {"role": "user", "content": "你好,幫我想三個 IG 貼文主題"}
      ],
      )
      print(response.content[0].text)

    5. 直接執行所有 Cell,確認能拿到一段回覆。

    6. 第一個客製化改動
    7. messages 改成你要的 system + user:

      python
      messages=[
      {
      "role": "system",
      "content": "你是一位專門幫新創品牌寫社群貼文的內容策劃,回覆一律用繁體中文,語氣自然口語。"
      },
      {
      "role": "user",
      "content": "我們是做手沖咖啡器材的,幫我想三個 IG 貼文主題。"
      }
      ]

    8. 再跑一次,這就是你的第一個「內容策劃小幫手」。

    延伸修改方向:

    • 把 user input 改成 input(),讓程式變成簡單的 CLI 聊天機器人。
    • 限制輸出格式:要求 Claude 回傳 JSON,方便之後接到前端或自動排程工具。

    實戰示範 2:照抄一個「文件助手」 RAG Notebook

    找一個 RAG 相關 Notebook(例如 basic_rag.ipynb),你可以這樣照做:

    1. 找到「載入文件」的 Cell,把原來的 sample text 改成你自己的 FAQ 或產品說明。
    2. 跟著 Notebook 步驟做:
    3. 切分文件 → 建立向量索引 → 根據提問檢索相關片段。
    4. 在最後呼叫 Claude 的地方,確認有把「檢索結果」放進 prompt 裡,例如:

    “`python
    prompt = f”””
    根據以下文件內容回答使用者問題,如果文件裡沒有答案,就老實說不知道:

    {retrieved_chunks}

    問題:{user_question}
    “””
    “`

    1. 執行後,你就得到一個最簡單版的「文件問答助手」。

    延伸修改方向:

    • 把檔案來源改成公司內部 SOP 或 Notion 匯出的 Markdown。
    • 在回覆前加上一段「引用來源」,列出這次回答用到哪些文件標題。

    小結:先抄,再改,最後變成你的專屬 Cookbooks

    使用 Claude Cookbooks 有一個簡單心法:

    1. 先選一個最貼近你需求的 Notebook(聊天 / 文件 / 工具調用)。
    2. 照著跑一次,不改任何東西,只確認能成功呼叫 API。
    3. 從 system prompt 開始改成你的場景,再逐步替換資料來源、工具函式。

    💡 關鍵: 當你能順手改兩三個 Notebook,你實際上已經掌握提示設計、API 呼叫與簡單 Agent 的完整流程。

    當你能順手改兩三個 Notebook,你實際上已經會:

    • 寫出能穩定工作的提示語
    • 呼叫 Claude API,做出自己的 AI 小工具
    • 把文件、後端 API、工作流程接進來,做出簡單 Agent

    接下來,你就可以把自己的版本再 push 回 GitHub,變成「你公司的 Claude Cookbooks」。


    🚀 你現在可以做的事

    • 打開 anthropics/claude-cookbooks,先挑一個最貼近你需求的 Notebook
    • 依照文中步驟設定 ANTHROPIC_API_KEY,完整跑通一個聊天或 RAG 範例
    • 把其中一個 Notebook 的 system prompt 改成你的實際場景,存成你自己的第一個 Cookbooks 版本