Anthropic 如何在 Product Engineering 中使用 Claude

🧑‍🏫 這支影片裡，一位 Anthropic 工程師示範怎麼用 AI 幫自己寫出 Claude.ai 裡的 Excel 預覽功能。AI 在過程中會先看現況、再動手，最後自己檢查。講者也談到有 AI 幫忙之後，工程師的工作重心怎麼改變。就算你不寫程式，也能從這裡學到怎麼把一件事交給 AI 做好。

• 00:00 講者說能用 Claude Code 工作就像有超能力，可以派一個助手（sidekick）去花時間把事情搞清楚，再回來報告
  ↳ Claude Code 是 Anthropic 做的 AI 寫程式助手，能在電腦上讀程式、改程式。講者的意思是：可以把「去查清楚這件事」交給它，自己不用一直盯著，等它整理好回來報告就行。
• 00:00 講者常聽到別人的反應是：「你根本活在未來」
  ↳ 旁人看講者這樣工作，會覺得像在看未來的畫面。意思是這種「派 AI 去做事」的工作方式對很多人還很新鮮，還沒變成大家的日常。
• 00:00 講者剛進 Anthropic 時，加入的團隊負責 Claude.ai 裡的 code execution 和 file generation 功能
  ↳ code execution（執行程式碼）是讓 Claude 在對話裡真的把程式跑起來；file generation（產生檔案）是讓它直接做出檔案給你。講者一進公司就負責這一塊。
• 00:00 這個功能等於給 Claude 一台電腦，讓它能產生檔案，包括 Excel 檔
  ↳ Claude 原本只能回文字，有了這個功能，就像多了一台自己的電腦，可以實際動手算，做出 Excel 這種真的能打開的檔案，不再只是教你怎麼做。
• 00:30 專案有截止日期，團隊要在一個半月內推出
  ↳ 一個半月大約六週，要從頭做出一個新功能，時間很趕。這也是講者需要靠 Claude Code 加快速度的背景。
• 00:30 講者主要是 backend 工程師，但這個專案是 front end；以前要熟悉新的 codebase 很花時間，這次用 Claude Code 快速上手
  ↳ backend（後端）管使用者看不到的伺服器運作，front end（前端）管使用者看到的畫面。codebase 是一個專案的全部程式碼。換到陌生領域又要接手別人的程式碼，通常上手很慢，這次靠 Claude Code 很快就進入狀況。
• 00:30 講者覺得最酷的一件事，是發現可以把 Claude Code 接上 Playwright MCP
  ↳ Playwright 是能自動操作瀏覽器的工具，會自己開網頁、點按鈕。MCP 是讓 AI 接上外部工具的標準接法。兩個接起來以後，Claude Code 不只會寫程式，還能自己打開網頁看結果。
• 01:00 示範 prompt：要求實作 Claude.ai 的 Excel renderer 功能，閱讀內含規格的設計文件 EXCEL_RENDERER_DESIGN.md，並使用 Playwright MCP
  ↳ prompt 就是給 AI 的指令。講者一次交代三件事：要做什麼、照哪份設計文件裡的規格（spec，也就是功能該達到的具體要求）來做、用什麼工具檢查。
• 01:00 prompt 裡說明這個功能要讓使用者能預覽 Excel、CSV 和 TSV 檔案
  ↳ renderer 在這裡指把檔案內容顯示成畫面的預覽功能。CSV、TSV 是用逗號或 Tab 鍵分隔欄位的純文字表格。目標是讓使用者在 Claude.ai 裡就能直接看到這些表格的內容。
• 01:00 Claude Code 先讀 codebase，再用 Playwright MCP 啟動 Claude.ai app
  ↳ Claude Code 沒有一拿到任務就開始寫，而是先讀懂現有的程式碼，再真的把 Claude.ai 打開來看，確認自己要在什麼基礎上動工。
• 01:30 這一步是為了在功能還沒實作前，準確掌握目前畫面長什麼樣子
  ↳ 先看清楚「改之前」的畫面，之後才有東西可以對照，知道要改哪裡、改完是不是真的變對了，免得 AI 憑想像亂寫。
• 01:30 準備開始寫程式時，Claude Code 會先徵求修改檔案的權限，講者按下同意
  ↳ Claude Code 要動你的檔案之前會先問，人按了同意它才會改。主控權還是在人手上，AI 不會自作主張亂改東西。
• 01:30 接著 Claude 會搭配 Playwright 反覆循環：修改程式、驗證、再調整
  ↳ 改完程式就用 Playwright 開網頁看實際效果，不對就再改，一直到符合規格為止。以前工程師要自己一遍遍手動測，現在這段交給 AI 自己跑。
• 02:01 完成後 Claude Code 列出所有修改的摘要，交給講者做 code review
  ↳ code review 是由人檢查一段程式寫得對不對、有沒有問題。Claude 做完會整理出改了哪些地方，講者再一項一項把關，最後負責的還是人。
• 02:01 講者說自己還是能做喜歡的事：寫程式、做東西；想的話也可以從頭自己寫
  ↳ 用了 AI 不代表講者就不寫程式了。寫程式、做東西的樂趣都還在，想從零自己寫也隨時可以。AI 是多出來的選擇，不是拿來取代自己。
• 02:01 現在講者能把心力放在更高層的決策，例如整個系統怎麼組合起來
  ↳ 瑣碎的實作交給 Claude Code 之後，講者有更多時間想大方向，像是各個部分要怎麼組在一起、整體的設計合不合理。
• 02:01 拿到需要的資料後，講者可以思考策略、要做哪些取捨、怎麼跟其他團隊配合，以及工作中「人」的部分
  ↳ Claude 負責把資料查好、把狀況摸清楚，講者再根據這些做判斷：怎麼取捨、跟哪些團隊協調、怎麼溝通。這些需要判斷力、要跟人打交道的事，還是得由人來做。
• 02:32 Claude Code 讓講者敢想得更大：以前總覺得被自己熟悉的程式語言限制住，現在能做的事多了很多
  ↳ 以前講者只敢做自己熟悉的程式語言範圍內的事。現在遇到陌生的語言或領域，可以靠 Claude Code 補上，所以敢接更大的題目。

影片示範的 Excel renderer 功能，讓使用者可以預覽哪些檔案類型？