Claude Code介紹和使用建議

Claude Code是由 Anthropic 推出的生成式 AI 程式助理,不僅能幫你寫程式、查文件、修 bug,甚至還能幫你整理 Git 記錄、整合團隊工具,是開發者最佳拍檔。

Cloud Code 可以做什麼

分析 Git 歷史

  • 自動分析 commit 記錄,幫你查出參數是誰加的、為什麼改、相關背景脈絡。
  • 無需額外提示,它會自己「幫你總結」。

整合 GitHub Issue

  • Claude 可以自動拉取 GitHub Issue 資訊,並讀出脈絡,協助你釐清問題或任務內容。

參與 Weekly Standup

  • 你可以問它:「我這週交付了什麼?」
  • Claude 會自動從你的 Git 日誌中整理出成果摘要。

有效使用流程:從 Q&A 到整合工具

  • 新手建議先從 Codebase Q&A 開始:比起直接改程式碼,先問問題(像「這個變數在哪裡定義?」)更容易上手,快速熟悉程式邏輯與架構。
  • 逐步導入工具:等你熟悉後,就可以進一步請 Claude 幫你「編輯程式碼」,並使用其內建工具,例如 bash、測試指令等。
  • 不必一個個指定工具:只要下目標,Claude 會自己判斷該用哪些工具,幫你串成完整流程。
  • 寫功能前先規劃設計:Claude 最強的能力在於「思考」,你可以先請它幫你規劃實作策略,再確認後由它代碼實作。
  • 告訴 Claude 你的 CLI 工具:你只要講「我們團隊有一個叫 build-image 的自定義指令」,它之後就能幫你正確下命令。
  • 一次設定全部工具(建議):在進入一個新專案時,建議一次告訴 Claude 這個專案會用到哪些工具,這樣它在處理任務時會更有效率。

安裝Claude Code

請先確認你的系統符合以下條件:

步驟 1:安裝 Claude Code CLI

開啟 Terminal(Mac/Linux)或 WSL 的 Ubuntu 終端機,執行:

npm install -g @anthropic-ai/claude-code

安裝完成後,輸入以下指令確認版本:

claude --version

步驟 2:設定 API 金鑰驗證

安裝好後,必須連結你的 Anthropic 帳號:

claude auth login

或是將 API 金鑰寫入環境變數(適合自動化流程):

export ANTHROPIC_API_KEY="你的-api-金鑰"

第一次執行 claude auth login 時,系統會開啟瀏覽器讓你登入並授權。

步驟 3:開始第一個專案

  1. 建立新的專案資料夾並切換進去: mkdir my-claude-project cd my-claude-project
  2. 啟動 Claude: claude

善用 CLAUDE.md

在 Claude Code 的運作中,CLAUDE.md 是建立上下文(context)最核心的元素之一。良好的 CLAUDE.md結構設計,能顯著提升 Claude 的理解力與團隊間的協同效率。

建議開發者各自維護 .cloud.local.md,記錄自己常用的 workflow、debug 技巧或指令,不簽入 Git,但可被 Claude 使用。

撰寫原則如下:

  • 保持簡潔明確:寫入常用指令、關鍵檔案與系統架構說明。避免冗長、過度複製 Readme 或歷史資訊,否則會稀釋 Claude 的關注焦點。
  • 依目錄嵌套設計:每個子模組(如 /api, /frontend, /infra)都可以放一份 Cloud.MD,Claude 會在該區域操作時自動讀取該目錄的說明。
  • 保留個人版:建議開發者各自維護 .cloud.local.md,記錄自己常用的 workflow、debug 技巧或指令,不簽入 Git,但可被 Claude 使用。

高階上下文管理技巧

組織層級的共享 CLAUDE.md

  • 公司可建立統一的 enterprise.CLAUDE.md(如專案政策、資安規範、CI/CD 標準),並在每個 repo 中引用。
  • 有助於新進工程師快速了解開發規範。

結合 Slash 指令與情境切換

  • Claude 支援 /commands 格式,例如 /deploy, /check-access,這些可事先存於專案或個人記憶中,讓 prompt 更精準。

階層式配置架構建議

├── CLAUDE.md(全域策略)
├── .CLAUDE.local.md(個人筆記)
├── frontend/
│   └── CLAUDE.md(UI 工具說明)
├── backend/
│   └── CLAUDE.md(API 路由與框架設定)
└── infra/
    └── CLAUDE.md(Terraform、MCP 配置)

MCP 與資源共享建議

  • 集中配置一次,團隊共享:MCP 伺服器(如 puppeteer, PostgreSQL 查詢機器人等)可部署在某一個共用專案中,設定好後所有開發者即可使用。

可用資源範例

  • puppeteer-mcp: 自動產生截圖/ PDF 報告。
  • llm-lint-mcp: 代碼風格與品質審查。
  • qa-mcp: 單元測試結果解析與修復建議。

建議導入流程

階段重點行動
團隊導入初期建立統一的 Cloud.MD 與 MCP server,並教育每位成員撰寫 .CLAUDE.local.md
日常工作中透過 Claude 自動解析 commit、Issue、CI/CD log,提升團隊溝通效率
每週協作在 weekly stand-up 前,使用 Claude 整理每人當週交付與貢獻,快速對齊進度
長期優化定期檢視 Cloud.MD 內容,清理無效資訊、合併重複區段、補充新工具配置

善用 Cloude.MD 與其延伸機制,就像是幫你的 AI 工程夥伴安裝了「專案經驗記憶體」。不僅可以快速上手大型專案、減少重複溝通,還能真正讓 Claude 成為團隊知識管理與效率最佳化的幫手。

codeium的AI編輯器windsurf

VS Code的AI開發助手

官方網址: https://codeium.com/windsurf

使用手冊: https://docs.codeium.com/getstarted/overview

大力推荐文(別人的): https://codelove.tw/@tony/post/xNgR53

Codeium 是一款免費的人工智慧編程助手,支援多種程式語言(如 Python、JavaScript、TypeScript、Java、Go 等),並提供程式碼補全、聊天互動及智能搜索等功能。

Codeium 的主要功能

1. 程式碼補全與重構

利用其深度的上下文感知功能,Windsurf 能夠掃描整個程式碼庫,識別所有相關的程式碼片段。
開發者只需在 Cascade 模式中輸入指令,例如「將所有函式名稱改為駝峰式命名」,Windsurf 即可自動完成多個檔案的修改,並確保程式碼的一致性。
同時,Windsurf 提供即時的重構建議,協助優化程式碼結構並提升可讀性。

2. 自動生成測試案例

開發者在 Cascade 中輸入指令,例如「為 calculate_interest 函式生成單元測試,涵蓋所有邊界條件」。
Windsurf 會自動產生多個測試案例,並根據函式的邏輯自動檢查可能的異常情況。
測試案例生成後,開發者還可以進一步要求 Windsurf 優化測試邏輯,或新增更多測試場景,以確保應用的穩定性與可靠性。

3. 跨文件的依賴分析與優化

Windsurf 能夠自動掃描專案中的 package.json 或其他依賴檔案,生成模組之間的依賴圖,幫助開發者清楚掌握各模組的關聯性。
開發者可以要求 Windsurf 提供優化建議,例如「減少模組 A 和模組 B 之間的耦合」,Windsurf 會自動分析並建議重構方案,以降低系統的相依性並提升可擴充性。
此外,Windsurf 也支援自動更新依賴版本,確保專案始終使用最新的穩定版本,降低潛在的安全風險與相容性問題。

4. 自然語言生成程式碼

開發者在 Cascade 中輸入指令,例如:「建立一個使用 React 的網頁應用,包含用戶註冊和登入功能」。
Windsurf 隨即自動生成專案結構、前端介面程式碼以及後端 API,並內建基本的安全性驗證機制(如密碼加密與登入令牌處理)。
此外,在夜間啟用自動優化功能後,Windsurf 進一步改進資料庫查詢效能,優化 API 響應速度,並額外添加密碼強度檢測機制,以提升應用的安全性與使用者體驗。

5. 即時錯誤修復與優化

幫助開發者重構程式碼、添加注釋或精簡程式碼

  • 程式碼中選擇需要重構的部分,然後在聊天界面中輸入需求,例如「請重構這段程式碼」。
  • Codeium 會提供優化建議,並解釋修改原因。

Codeium 的優勢

  • 免費使用:Codeium 對個人用戶完全免費,且無使用次數限制。
  • 多語言支持:支援超過 70 種程式語言,包括 Python、JavaScript、TypeScript、Java、Go 等。
  • 高效開發:通過程式碼補全、聊天和搜索功能,顯著提升開發效率。

如何提高程式碼補全的準確性

1. 提供清晰的上下文

Codeium 的程式碼補全功能依賴於上下文感知,因此提供清晰且完整的上下文是提升準確性的關鍵:

  • 打開相關文件:Codeium 的上下文引擎會分析當前打開的文件以及專案中的其他文件,確保建議與整體程式碼邏輯一致。
  • 使用註解描述需求:在程式碼中添加清晰的註解,例如「# 寫一個計算斐波那契數列的函數」,Codeium 會根據註解生成相應的程式碼
  • 保持程式碼整潔:清晰的變數命名、結構化的程式碼和有意義的註解能幫助 Codeium 更準確地理解上下文。

2. 善用提示工程(Prompt Engineering)

提示工程是與 AI 工具互動的核心,以下是一些實用技巧:

  • 具體化需求:在提示中明確描述需求,例如「為函數 calculate_sum 寫一個單元測試,涵蓋所有邊界條件」。
  • 分步操作:對於複雜任務,將需求拆解為多個簡單步驟,逐步向 Codeium 提出請求。例如,先生成函數框架,再補充細節。
  • 使用 Codeium Chat:如果補全結果不符合預期,可以通過內建的聊天功能進一步詢問或要求修改。

3. 使用插件的高級功能

Codeium 提供多種功能來提升補全準確性,熟悉並善用這些功能可以顯著改善體驗:

  • 多選建議:按下快捷鍵(如 Alt + ]Alt + [)切換不同的補全建議,選擇最符合需求的版本。
  • 上下文固定(Context Pinning):在需要時固定特定的上下文,確保 Codeium 將其作為補全的參考。
  • 自定義上下文:對於專案中特定的 API 或內部庫,可以手動提供相關文檔或示例程式碼,幫助 Codeium 更好地理解。

4. 定期更新與設置優化

保持插件的最新版本並進行適當的設置調整,有助於提升補全效果:

  • 更新插件:Codeium 團隊會定期優化模型和功能,確保使用最新版本以獲得最佳性能。
  • 調整補全觸發條件:如果覺得補全建議出現過早或過晚,可以在設置中調整觸發條件。
  • 啟用語言伺服器:確保語言伺服器正常運行,這是 Codeium 提供高質量建議的基礎。

5. 適應專案需求的最佳實踐

根據專案特性採取針對性的措施:

  • 多語言支持:Codeium 支援超過 70 種程式語言,確保在專案中選擇正確的語言模式。
  • 程式碼風格一致性:Codeium 會嘗試匹配專案的程式碼風格,開發者應保持專案內部的命名規範和格式一致。
  • 小型專案與大型專案的區別:對於小型專案,Codeium 的單文件補全效果最佳;而在大型專案中,應充分利用其多文件上下文感知功能。

雛型程式開發AI工具介紹

v0 by Vercel

官方網站:https://v0.dev/

v0 by Vercel 是由 Vercel 推出的一個開發工具,旨在幫助開發者快速構建和部署各種網頁應用和元件。該工具的核心功能是提供一個開放的社群平台,開發者可以從中獲取靈感、分享項目,並基於現有的範例進行快速開發。

這個平台提供了大量由社群貢獻的範例項目,這些項目涵蓋了多種應用場景,例如: AI SDK 聊天機器人、加密貨幣儀表板、3D 登陸頁面、動態背景生成、卡片生成器、音樂播放器等。 每個範例都可以被 Fork(複製)並用於自己的項目,大大降低了開發的門檻。可以快速將範例或自定義項目部署到線上,並即時查看效果。

特別適合需要靈感或快速原型開發的開發者。其社群驅動的範例庫和快速部署功能是其主要亮點。然而,對於需要更高自定義或複雜功能的項目,可能需要搭配其他工具使用。

bolt

官方網站:https://bolt.new/

bolt.new 是一個專注於快速構建、運行、編輯和部署全棧網頁應用的平台。該網站的核心功能是提供一個簡化的開發環境,讓用戶能夠快速實現從構想到部署的完整流程。其目標用戶可能包括開發者、設計師以及需要快速原型開發的團隊。這是一款創新的 AI 驅動全端開發工具,特別適合需要快速構建原型或 MVP 的開發者和團隊。其零配置、即時預覽和一鍵部署功能大幅簡化了開發流程。然而,對於需要更高穩定性和複雜功能的專案,Bolt.new 可能仍需進一步完善。

網站首頁的標語為「Prompt, run, edit, and deploy full-stack web apps」,這表明該平台的主要特點是:

  • Prompt:快速啟動項目。
  • Run:運行應用程式。
  • Edit:即時編輯代碼。
  • Deploy:快速部署應用。

這樣的功能設計適合需要快速迭代和測試的開發場景。

Replit

使用心得的文章:https://blog.creatorhome.tw/ai-hackathon/

文章中介紹了他利用 AI 的協助,實現了兩大主要功能:一個是透過問卷內容和 AI API 推薦禮物的功能,另一個是客製化祝福卡片並提供可下載的信件圖片和語音轉換功能的功能。

官方網站:https://replit.com

Replit是一款具有多人協作和開發者社群功能的寫程式工具,且用戶不必在電腦設定複雜的環境安裝或程式下載,直接在瀏覽器中打開網站,就能開始寫程式、發作品。從2016年上線至今,用戶累積突破1,000萬人。這是一個線上集成開發環境(Integrated Development Environment,IDE),支援Python、Java、C++等50多種程式語言,並可將寫好的程式碼即時更新在GitHub儲存庫中,讓開發應用程式從無到有的過程,都能直接在Replit一站完成。

Replit還能像Google Docs一樣邀請多位用戶協作,學程式的過程可以不再孤單。Replit 更適合用來打造小型應用程式,使用體驗上可能不如本地開發環境順暢,且運行速度較慢。

主要功能:

  • 多語言支援: Replit 支援多種程式語言,讓開發者能夠在同一平台上進行不同語言的開發。
  • 即時協作: 多位使用者可以同時編輯同一專案,類似於 Google 文件的協作方式,方便團隊合作。
  • 一鍵部署: 使用者可以快速將應用程式部署並獲取公開連結,方便分享和展示專案。
  • AI 助手: 透過 Replit Agent,使用者只需描述需求,AI 即可自動生成程式碼並完成部署,適合沒有程式設計經驗的初學者。

21st.dev

官方網址:https://21st.dev/

21st.dev 是一個專為設計工程師打造的開源 React UI 元件平台,靈感來自 shadcn/ui。 21ST.DEV 該平台提供多樣化的預建元件和頁面模板,協助開發者快速構建高品質的使用者介面。 HUNTSCREENS.COM 使用者只需透過一條命令即可安裝所需元件,顯著提升開發效率。

主要功能:

  • 專業元件(Pro Components): 提供專業級的 React 與 Tailwind CSS 元件,協助開發者快速構建精緻的使用者介面。 21st.dev
  • 登陸頁面(Landing Pages): 包含多種頁面模板,如公告、背景、邊框、行動呼籲、客戶展示、比較、功能介紹、頁尾、英雄圖、圖片、地圖、導航選單、定價、捲動區域、推薦詞、文字、影片等,方便快速搭建網站。
  • UI 元素(UI Elements): 提供豐富的 UI 元素,如手風琴、AI 聊天、警示、頭像、徽章、按鈕、日曆、卡片、輪播、核取方塊、日期選擇器、對話框、下拉選單、空狀態、檔案樹、檔案上傳、表單、圖示、輸入框、連結、選單、通知、數字、分頁、彈出視窗、單選群組、選擇器、側邊欄、登入、註冊、滑桿、載入器、表格、標籤頁、標籤、文字區域、提示、切換、工具提示等,滿足不同的設計需求。
  • Hooks: 提供 React Hooks,簡化狀態管理和副作用處理。

shadcn/ui

官方網站:https://ui.shadcn.com/

shadcn/ui 是一個開源的 React 元件集合,專為開發者提供設計精美且可高度客製化的 UI 元件。 與傳統的元件庫不同,shadcn/ui 採用「複製貼上」的方式,開發者可以直接將所需的元件程式碼複製到自己的專案中,進行深度客製化。

主要功能:

  • 多樣化的元件: 提供多種常見的 UI 元件,如按鈕、表單、對話框等,滿足不同的開發需求。
  • 基於 Tailwind CSS: 所有元件均使用 Tailwind CSS 構建,方便開發者進行樣式調整和主題設定。
  • 無障礙設計: 元件設計時考慮了無障礙性,確保應用程式對所有使用者友善。

許多開發者讚賞 shadcn/ui 的客製化能力,認為它提供了更大的靈活性,特別適合需要精細控制元件行為和樣式的專案。然而,也有使用者指出,對於僅需基本功能的專案,傳統的元件庫可能更為方便,因為它們提供了開箱即用的解決方案。

Lovable

官方網站:https://lovable.dev/

Lovable 是一款由人工智慧(AI)驅動的全端應用程式構建工具,旨在透過自然語言處理技術,讓使用者能夠以對話的方式快速建立網站和 Web 應用程式。 使用者只需描述想要的功能,Lovable 即可自動生成對應的程式碼,簡化了軟體開發流程,讓非技術人員也能輕鬆構建高品質的軟體。Lovable 的主要功能特點包括後端功能實現、精確編輯和支持大型代碼庫,這些特點使得 Lovable 在 AI 全栈應用程序構建器中具有獨特的優勢。

主要功能:

  • 自然語言生成程式碼: 使用者以自然語言描述所需功能,Lovable 會將其轉換為實際的程式碼。
  • 構建和部署網站/應用程式: 透過對話,使用者可以構建並部署完整的網站和 Web 應用程式。
  • 與 Supabase 整合: 支援與 Supabase 整合,方便使用者連接 Postgres 資料庫,處理資料儲存和使用者身份驗證。
  • GitHub 同步: 使用者可以將生成的程式碼同步至 GitHub,進行版本控制和程式碼管理。
  • 處理大型程式碼庫: Lovable 能夠處理包含超過 100,000 行程式碼的大型專案。

軟體工程師如何善用AI提升生產力

由於我本身是軟體工程師,同時也對AI工具的使用很擅長,本身由於過去主要在做概念驗證以及新技術研究,

對於軟體工程師如何利用AI提升生產力真的非常有心得,歡迎有以了解或者是期待更多利用AI來提升生產力邀約分享^^

簡報分享

活動剪影

介紹 OpenAI o1-preview

官網介紹o1-preview

介紹 OpenAI o1-preview:https://openai.com/index/introducing-openai-o1-preview

首次瞭解:探索 GitHub Copilot 中的 OpenAI o1:
https://github.blog/news-insights/product-news/openai-o1-in-github-copilot/

在2024/9/12,OpenAI推出了o1-preview的模型,這個模型的最大特色就是具備有先進推理能力,可解決難題。測試顯示o1-preview在程式碼分析和優化方面效果良好。該模型能思考挑戰並能夠將複雜任務分解為步驟,這可以優化程式碼以解決性能問題,加速開發工作流程。

透過這樣的思考流程,ChatGPT可以完成更複雜的程式撰寫任務,過去,我們仍會需要透過人的思考將任務拆細後一步一步請ChatGPT幫忙完成,再由工程師將任務功能組合起來,而現在o1-preview則自己就能夠具備有將複雜任務拆細的能力。

從下圖可看見,ChatGPT的程式撰寫能力瞬間從11分進步到89分(圖片來源: https://openai.com/index/learning-to-reason-with-llms/)

o1-preview 模型的新功能總覽

隨著 o1-preview 模型的推出,這個模型在性能、功能和未來更新方向上展現了許多新亮點。

  • 模型大小與性能
    o1 系列的模型中,o1-mini 和 o1-preview 各有特色。o1-mini 相較於 o1-preview 體積更小,速度更快,預計將來會提供給免費用戶使用。o1-mini 雖然在世界知識上較有限,但在 STEM 任務和編碼相關任務上表現出色,且能探索更多的思考鏈。而 o1-preview 則作為一個早期檢查點,位於性能和大小之間,能夠處理更開放的任務,並支持長鏈思考過程。
  • 輸入 Token 與上下文處理能力
    o1 的輸入 token 與 GPT-4o 採用相同的 tokenizer 且能夠處理更長的上下文,在未來版本中還會進一步擴展輸入上下文的長度,減少對輸入內容的分塊需求。儘管目前無法在連鎖思考(CoT)期間暫停推理來添加更多上下文,但這項能力有望在未來實現。
  • 工具與功能更新
    目前 o1-preview 尚未開放工具使用,但未來將支持函數調用、代碼解釋器與瀏覽功能。此外,將加入工具支持、結構化輸出與系統提示等增強功能。用戶將來可能還能控制思考時間和 token 限制,並支援流式傳輸。
  • 連鎖思考推理
    o1 模型在推理時會生成隱藏的思考鏈,這使得它能夠在處理複雜問題時展現更強的推理能力。目前 CoT token 會被摘要,尚未開放給 API 用戶,但隨著強化學習技術的加入,模型的連鎖思考能力將進一步提升
  • API 與使用限制
    o1-mini 在 ChatGPT Plus 用戶中設有每週 50 次提示的限制,並計劃推出更多 API 訪問層級和更高的速率限制。提示緩存是用戶的熱門需求,未來可能會加入此功能。
  • 價格、微調與擴展
    o1 的定價將遵循每 1-2 年降價的趨勢,並支持批量 API 定價。模型的微調尚無具體時間表,但研究與工程人才的限制可能會影響未來的推理擴展計劃。
  • 模型開發與研究亮點
    o1 模型在創造性思維、哲學推理及複雜任務處理上展現了強大能力,甚至內部測試中也表現出色。未來版本將進一步擴展世界領域知識,並更新數據以提升性能。
  • 提示技術與最佳實踐
    o1 模型對於提示的接受度高,尤其是在檢索增強生成(RAG)技術的輔助下,能夠進一步改善推理性能。提供相關上下文有助於提高表現,而無關的內容可能會降低其效果。
  • 未來展望
    o1-preview 正處於早期測試階段,未來將繼續優化延遲和推理時間,並大幅增強模型的創造性與推理能力。

o1-preview 模型功能實測

先說結論,真的非常的強,不論是產生程式、理解程式、修改程式,都和過去是完全不同等級的狀況!非常的厲害。

這是我今天使用o1-preview 來製作一個HTML的俄羅斯方塊的對話紀錄,可以看到ChatGPT完美的完成任務,真的是沒有BUG的完整的遊戲,而且修改的動作也都非常的完美,真的可以靠指令達到我的許多要求。我覺得這樣的程度的模型是真的會影響到許多工程師的未來性。

對話紀錄在此:https://chatgpt.com/share/66e6bcf1-4254-8005-a573-a250e1b51702

我們可以看見現在的o1-preview會有著更多細緻的思考流程,為我們將一個很大的指令拆分成許多個步驟,並重新檢視、整個整個程式碼,接著則是設置遊戲的玩法。

接著我請他增加計分板和顯示下一個方塊的功能也完美達成

請他幫忙調整版面也非常完美的完成功能

這個是成果:https://claire-chang.com/wp-content/uploads/2024/09/test.html

操作說明:

  • 使用 左箭頭鍵右箭頭鍵 控制方塊左右移動。
  • 使用 下箭頭鍵 加速方塊下落。
  • 使用 上箭頭鍵 旋轉方塊。
  • 使用空白鍵直接下降。