[{"data":1,"prerenderedAt":1589},["ShallowReactive",2],{"search-dialog-posts":3,"post-\u002Fposts\u002Fclaude-code-codex-cli-init-basics":316,"post-surround-\u002Fposts\u002Fclaude-code-codex-cli-init-basics":1583},[4,12,21,29,37,47,57,67,77,85,96,104,112,121,129,137,147,155,164,173,181,188,195,207,215,224,236,241,247,254,260,266,272,279,286,291,298,304,310],{"path":5,"title":6,"description":7,"category":8,"tags":9},"\u002Fposts\u002Fgit-commands-cheatsheet","Git 常用指令與終端機筆記","2018 年整理的 Git 學習筆記，包含基本終端機指令、Git 操作、分支、reset、SourceTree、Vim 與一些常用設定。","notes",[10,11],"Git","版本控制",{"path":13,"title":14,"description":15,"category":16,"tags":17},"\u002Fposts\u002Fjs-prototype-inheritance","JavaScript 物件導向：建構函式、prototype 與繼承三步驟","整理 ES5 時代用建構函式加 prototype 手刻物件導向的完整流程——封裝屬性與方法、共用函式為什麼要掛在 prototype 上、以及繼承的三個步驟（call 借用母類別建構子、Object.create 接上原型鏈、修正 constructor 指向），並附上物件縮寫與計算屬性這兩個順便學到的 ES6 寫法。","frontend",[18,19,20],"JavaScript","物件導向","prototype",{"path":22,"title":23,"description":24,"category":16,"tags":25},"\u002Fposts\u002Fflexbox-notes","Flexbox 對齊與彈性尺寸筆記","記錄 Flexbox 的主軸與交錯軸對齊、flex-direction、flex-wrap，以及 flex-grow、flex-shrink、flex-basis 等常用屬性。",[26,27,28],"CSS","Flexbox","版面",{"path":30,"title":31,"description":32,"category":16,"tags":33},"\u002Fposts\u002Fscreen-orientation-api","screen.orientation：現在判斷與鎖定螢幕方向的做法","整理現在 JavaScript 判斷螢幕方向的方式，包括 screen.orientation、change 事件與 lock()，並說明 RWD 使用 matchMedia 或 CSS orientation 會更適合。",[18,34,35,36],"RWD","螢幕方向","PWA",{"path":38,"title":39,"description":40,"category":16,"tags":41},"\u002Fposts\u002Fpinia-vuex-state-management","Pinia \u002F Vuex 狀態管理及差異","紀錄 Vuex、Pinia 的狀態管理概念、差異與用法。",[42,43,44,45,46],"Pinia","Vuex","Vue3","狀態管理","Nuxt",{"path":48,"title":49,"description":50,"category":8,"tags":51},"\u002Fposts\u002Fpyenv-python-version-management","Python 多版本管理 pyenv","紀錄 macOS 與 Windows 使用 pyenv 管理 Python 版本的方式。",[52,53,54,55,56],"Python","pyenv","macOS","Windows","版本管理",{"path":58,"title":59,"description":60,"category":8,"tags":61},"\u002Fposts\u002Fnpm-publish-vue2-component","npm 發布流程","紀錄 Vue 2 元件的 npm 發布、dist-tag 與打包流程。",[62,63,64,65,66],"npm","Vue2","Vue CLI","套件發布","MIT",{"path":68,"title":69,"description":70,"category":8,"tags":71},"\u002Fposts\u002Fmobile-debugging-today","現在怎麼 debug 手機網頁：從裝一堆工具到幾乎不用裝","對照 2022 年那套 scoop、iTunes、remotedebug-ios-webkit-adapter 的繁瑣設定，整理現在偵錯手機網頁的做法：Android 無線偵錯、iOS 的實際選項、on-device console、Playwright 裝置模擬，以及本機 HTTPS 的處理。",[72,73,74,75,76],"debug","iOS","Android","Chrome DevTools","Playwright",{"path":78,"title":79,"description":80,"category":16,"tags":81},"\u002Fposts\u002Fplaywright-vs-cypress","E2E 測試現在選什麼：Playwright 與 Cypress 的實際差異","對照幾年前用 Cypress 的做法，說明 Playwright 為什麼變成多數新專案的預設選擇：真正的多瀏覽器支援、免費的平行執行、trace viewer 除錯，以及兩者在架構上的根本差異與各自仍然適合的場景。",[76,82,83,84],"Cypress","E2E","測試",{"path":86,"title":87,"description":88,"category":89,"tags":90},"\u002Fposts\u002Fjs-encoding-today","現在處理編碼：TextEncoder、Uint8Array 的 Base64 方法與 URLSearchParams","整理 JavaScript 現代編碼方式，使用 TextEncoder、TextDecoder 與 Uint8Array 處理 UTF-8 與 Base64，並說明 Base64URL、URLSearchParams 與 encodeURIComponent 的差異。","research",[91,92,93,94,95,18],"編碼","TextEncoder","Base64","URLSearchParams","Uint8Array",{"path":97,"title":98,"description":99,"category":16,"tags":100},"\u002Fposts\u002Fdart-sass-migration","Dart Sass 遷移筆記：node-sass 之後怎麼裝 Sass","node-sass 與 LibSass 已停止維護，現在改用 Dart Sass。整理 webpack 與 Vite 的安裝方式，以及為什麼不再像 node-sass 一樣容易遇到 Node.js 版本與原生編譯問題。",[101,102,103],"Sass","Webpack","Vite",{"path":105,"title":106,"description":107,"category":16,"tags":108},"\u002Fposts\u002Fdayjs-vue3-computed","day.js 搭配 Vue 3 的日期格式化","整理 Vue 3 日期格式化的常見做法，使用 day.js 取代舊專案常見的 moment.js，並以 method 或 computed 取代 Vue 2 filter，也補充原生 Intl.DateTimeFormat 的使用方式。",[44,109,110,111],"day.js","日期","Intl",{"path":113,"title":114,"description":115,"category":16,"tags":116},"\u002Fposts\u002Fes-modules-today","ES Module 現在的樣子：Node ESM、exports 與 import maps","整理現代 JavaScript ES Module 的常見用法，包括 Node.js 原生 ESM、package.json exports、瀏覽器 import maps、JSON import attributes，以及 Vite 動態載入的注意事項。",[117,118,119,120,103,18],"ES Module","Node.js","import maps","exports",{"path":122,"title":123,"description":124,"category":89,"tags":125},"\u002Fposts\u002Fstructured-clone","structuredClone()：終於有內建的深層拷貝","整理 JavaScript structuredClone() 的深層拷貝用法，說明 Date、Map、Set、循環參考的處理方式，以及 Function、class 與 Vue reactive Proxy 的注意事項。",[18,126,127,128],"structuredClone","深拷貝","Vue",{"path":130,"title":131,"description":132,"category":16,"tags":133},"\u002Fposts\u002Fdynamic-import","JavaScript 動態載入：import() 與 Vue 非同步元件","整理靜態 import、動態 import() 與 Vue defineAsyncComponent 的使用方式，並簡單補充 Vite import.meta.glob 的用途。",[18,134,135,103,136],"ES Modules","Vue 3","Code Splitting",{"path":138,"title":139,"description":140,"category":16,"tags":141},"\u002Fposts\u002Fscreen-wake-lock-api","Screen Wake Lock API：不用套件也能讓頁面保持亮著","整理 Screen Wake Lock API 的基本用法，說明 HTTPS、頁面可見性、切換分頁後重新取得 wake lock，以及 Vue／Nuxt 計時器使用時的注意事項。",[142,128,143,144,145,146],"Wake Lock","Nuxt4","行動裝置","計時器","Web API",{"path":148,"title":149,"description":150,"category":16,"tags":151},"\u002Fposts\u002Fhtml-meta-boilerplate-today","現在的 HTML meta 標籤怎麼寫","整理現在一個新頁面該有的 meta 標籤骨架——viewport 補上 viewport-fit=cover 因應瀏海與圓角螢幕、color-scheme 讓表單控制項跟著深色模式換色、theme-color 決定行動瀏覽器工具列顏色，以及基本的 SEO 與 Open Graph 標籤。",[152,153,154],"HTML","meta","SEO",{"path":156,"title":157,"description":158,"category":8,"tags":159},"\u002Fposts\u002Fdocker-node-postgres","把 Node + PostgreSQL 的 backend 裝進 Docker：Dockerfile、.dockerignore 與 compose","從「本機裝了就跑」到打包成容器的通用做法——Dockerfile 每一行的理由與 layer cache 為什麼決定了指令順序、.dockerignore 漏掉 node_modules 對原生模組是災難級的問題、容器之間為什麼不能用 localhost 互相找到對方，以及怎麼驗證資料真的寫進了 volume。",[160,161,118,162,163],"Docker","Docker Compose","PostgreSQL","Express",{"path":165,"title":166,"description":167,"category":16,"tags":168},"\u002Fposts\u002Fnuxt-server-proxy","Nuxt 3 \u002F 4 用 Server API 做代理與轉發","整理 Nuxt 3 與 Nuxt 4 使用 server\u002Fapi 轉發第三方 API 的方式，可以避免瀏覽器 CORS 問題、隱藏 API Key，也能在伺服器端加入快取。",[169,143,170,171,172],"Nuxt3","CORS","Nitro","API",{"path":174,"title":175,"description":176,"category":16,"tags":177},"\u002Fposts\u002Fnuxt4-project-setup","Nuxt 4 建立專案：和 Nuxt 3 有哪些不同","整理 Nuxt 4 建立專案的基本流程與目錄結構，並對照 Nuxt 3 的差異，包括 app\u002F 目錄、路徑別名、TypeScript，以及目前常用的 ESLint 與 Tailwind CSS 4 設定。",[143,44,178,179,180],"TypeScript","ESLint","Tailwind CSS 4",{"path":182,"title":183,"description":184,"category":16,"tags":185},"\u002Fposts\u002Fnuxt3-route-middleware","Nuxt 3 \u002F 4 的 Route Middleware：進頁面前先做判斷","整理 Nuxt 3 與 Nuxt 4 的 Route Middleware，用 defineNuxtRouteMiddleware 在進入頁面前檢查登入狀態，搭配 navigateTo 重新導向，並說明一般 middleware、global middleware 與 definePageMeta 的用法。",[169,143,186,187],"Middleware","驗證",{"path":189,"title":190,"description":191,"category":16,"tags":192},"\u002Fposts\u002Fnuxt-route-rules-redirect","Nuxt 3 \u002F 4 的 routeRules：重新導向與頁面設定","整理 Nuxt 3 與 Nuxt 4 的 routeRules 用法，可以依照不同網址設定重新導向、預渲染、SSR 與快取，並簡單對照 Nuxt 2 的舊做法。",[169,143,193,194],"routeRules","重新導向",{"path":196,"title":197,"description":198,"category":16,"tags":199},"\u002Fposts\u002Fios-iframe-google-login-blank-page","iOS iframe 串接 Google 登入出現空白頁：Popup 與頁面回收問題排查紀錄","記錄 iframe 內串接 Google 第三方登入時，部分 iOS 裝置因背景頁面遭到回收並重新載入，導致 Popup 登入流程中斷，以及最後透過 Redirect 分流與登入狀態接回機制處理的過程。",[73,200,201,202,203,204,205,206],"Safari","iframe","Google Login","GIS","OAuth","Popup","Redirect",{"path":208,"title":209,"description":210,"category":16,"tags":211},"\u002Fposts\u002Fios-login-tab-return-behavior","iOS 第三方登入後回不到原頁？分頁開啟關係與回頁行為實測","記錄 iOS Safari 與 Chrome 在多分頁第三方登入流程中，登入頁關閉後不一定回到原頁的實測，以及分頁開啟關係、window.close 與 window.focus 的限制。",[73,200,212,202,204,201,213,214],"Chrome","window.close","window.focus",{"path":216,"title":217,"description":218,"category":16,"tags":219},"\u002Fposts\u002Fgoogle-app-about-blank-placeholder","Google App 內建瀏覽器：about:blank 佔位頁被關閉的排查紀錄","記錄 iOS Google App 內建瀏覽器在非同步開啟外部頁面時，about:blank 佔位分頁被自動關閉，導致第三方登入或外部導轉失敗的排查與解法。",[73,220,221,222,204,223],"Google App","window.open","about:blank","WebView",{"path":225,"title":226,"description":227,"category":228,"tags":229},"\u002Fposts\u002Fclaude-code-codex-cli-init-basics","AI 相關紀錄 v1｜Claude Code \u002F Codex CLI 初始化與基本概念","從 Claude Code 與 Codex CLI 開始，整理 CLI、Coding Agent、Context、\u002Finit 與 CLAUDE.md／AGENTS.md 這幾個一開始最容易搞混的概念，以及在既有專案中的安裝與啟動方式。","ai",[230,231,232,233,234,235],"AI","Claude Code","Codex CLI","Coding Agent","CLAUDE.md","AGENTS.md",{"path":237,"title":238,"description":239,"category":228,"tags":240},"\u002Fposts\u002Fclaude-agents-md-project-guidelines","AI 相關紀錄 v2｜CLAUDE.md \u002F AGENTS.md 怎麼寫？專案規範與實際範例","整理 CLAUDE.md 與 AGENTS.md 的用途、適合記錄的專案規範，以及可直接參考的設定範例。",[230,231,232,234,235],{"path":242,"title":243,"description":244,"category":228,"tags":245},"\u002Fposts\u002Fclaude-codex-config-locations","AI 相關紀錄 v3｜Claude Code `.claude\u002F` \u002F Codex CLI 設定位置：全域與專案設定基本概要介紹","整理 Claude Code 與 Codex CLI 的使用者層級、專案層級設定位置，以及 rules、skills、agents 等目錄的用途。",[230,231,232,246],"設定檔",{"path":248,"title":249,"description":250,"category":228,"tags":251},"\u002Fposts\u002Fclaude-settings-codex-config","AI 相關紀錄 v4｜Claude Code settings \u002F Codex config 基本設定","整理 Claude Code settings.json 與 Codex config.toml 的設定層級、權限控制和常見基本設定。",[230,231,232,252,253],"settings.json","config.toml",{"path":255,"title":256,"description":257,"category":228,"tags":258},"\u002Fposts\u002Fclaude-codex-rules-structure","AI 相關紀錄 v5｜Rules：專案規則多了之後怎麼拆？","整理 Claude Code Rules 與 Codex AGENTS.md 的拆分方式，說明何時該拆、怎麼依目錄管理專案規則。",[230,231,232,259,235],"Rules",{"path":261,"title":262,"description":263,"category":228,"tags":264},"\u002Fposts\u002Fclaude-codex-slash-commands","AI 相關紀錄 v6｜Commands \u002F Slash Commands：CLI 裡的 `\u002F` 指令是什麼？","介紹 Claude Code 與 Codex CLI 的 Slash Commands，整理常用內建指令、自訂指令與 Skills 的差異。",[230,231,232,265],"Slash Commands",{"path":267,"title":268,"description":269,"category":228,"tags":270},"\u002Fposts\u002Fclaude-codex-skills","AI 相關紀錄 v7｜Skills：把重複工作流程整理起來","介紹 Claude Code 與 Codex Skills，整理適合保存成 Skill 的重複流程、基本結構與使用方式。",[230,231,232,271],"Skills",{"path":273,"title":274,"description":275,"category":228,"tags":276},"\u002Fposts\u002Fclaude-codex-agents-subagents","AI 相關紀錄 v8｜Agent \u002F Subagent：什麼時候真的需要分工？","整理 Agent、Subagent 與 Custom Agent 的用途，說明何時適合分工，以及它們和 Rules、Skills 的差異。",[230,231,232,277,278],"Agent","Subagent",{"path":280,"title":281,"description":282,"category":228,"tags":283},"\u002Fposts\u002Fmcp-basics","AI 相關紀錄 v9｜MCP：讓 AI 使用其他工具與資料","介紹 MCP 如何讓 AI 使用外部工具與資料，並以 Pencil MCP 說明實際用途、權限風險及與 Skill 的差異。",[230,284,231,232,285],"MCP","Pencil",{"path":287,"title":288,"description":289,"category":228,"tags":290},"\u002Fposts\u002Fai-coding-agent-concepts-summary","AI 相關紀錄 v10｜基本概念小結論","用一篇快速整理 CLAUDE.md、AGENTS.md、設定檔、Rules、Commands、Skills、Agent 與 MCP 的角色和差異。",[230,231,232,284,271,277],{"path":292,"title":293,"description":294,"category":228,"tags":295},"\u002Fposts\u002Fclaude-code-codex-model-selection","Claude Code 與 Codex：不同模型怎麼選？","比較 Claude Code 與 Codex 不同模型的速度、能力與成本取捨，依工作難度整理實用的選擇方向。",[230,231,296,297],"Codex","模型選擇",{"path":299,"title":300,"description":301,"category":228,"tags":302},"\u002Fposts\u002Fclaude-model-selection","Claude 模型簡單怎麼選？","整理 Claude 各模型在速度、能力與使用情境上的差異，提供從輕量工作到複雜任務的選擇方向。",[230,231,303,297],"Claude",{"path":305,"title":306,"description":307,"category":228,"tags":308},"\u002Fposts\u002Fcodex-model-selection","Codex 模型簡單怎麼選？","整理 Codex 各模型在速度、能力與使用情境上的差異，提供從簡單修改到大型端到端任務的選擇方向。",[230,296,309,297],"OpenAI",{"path":311,"title":312,"description":313,"category":228,"tags":314},"\u002Fposts\u002Fclaude-code-codex-cli-command-cheatsheet","Claude Code \u002F Codex CLI 常用指令速查表","整理 Claude Code 與 Codex CLI 的常用斜線指令、快捷操作與進階功能，方便需要時快速查找。",[230,231,232,265,315],"速查表",{"id":317,"title":226,"body":318,"category":228,"description":227,"draft":1574,"extension":1238,"image":1575,"meta":1576,"navigation":1251,"path":225,"publishedAt":1577,"relatedExperiments":1578,"seo":1579,"stem":1580,"tags":1581,"updatedAt":1577,"__hash__":1582},"posts\u002Fposts\u002F20260901.claude-code-codex-cli-init-basics.md",{"type":319,"value":320,"toc":1543},"minimark",[321,325,328,362,368,371,433,436,441,444,454,457,462,465,471,474,480,483,486,488,491,494,515,520,525,527,531,534,537,539,543,546,552,555,558,573,576,585,587,591,594,597,603,606,609,611,617,622,624,628,631,637,640,642,646,649,655,658,664,667,673,676,682,685,691,696,699,701,704,706,711,713,719,722,728,731,734,744,746,750,753,756,762,765,771,774,779,782,788,791,794,796,800,803,809,812,818,823,826,831,837,840,846,849,851,855,858,861,877,882,884,887,890,893,899,901,906,926,929,936,938,942,958,960,967,969,972,991,994,1012,1014,1017,1020,1033,1036,1044,1047,1053,1055,1058,1060,1070,1072,1080,1083,1089,1091,1098,1101,1107,1112,1117,1119,1125,1131,1137,1140,1142,1148,1151,1157,1160,1166,1169,1175,1181,1183,1187,1192,1195,1215,1218,1223,1229,1231,1234,1281,1287,1289,1295,1298,1303,1306,1312,1315,1321,1323,1327,1332,1335,1358,1361,1368,1371,1376,1378,1381,1413,1419,1421,1424,1430,1436,1439,1445,1451,1457,1460,1465,1467,1470,1473,1479,1485,1491,1497,1503,1506,1512,1515,1518,1524,1527,1530,1536,1539],[322,323,324],"p",{},"這個系列主要記錄目前我正在學習與實際使用的 AI 相關內容。",[322,326,327],{},"這篇先從 Claude Code 與 Codex CLI 開始，整理一開始比較容易搞混的幾個概念：",[329,330,331,335,338,341,344,347,354],"ul",{},[332,333,334],"li",{},"CLI 是什麼？",[332,336,337],{},"Coding Agent 跟一般網頁聊天有什麼不同？",[332,339,340],{},"AI 是怎麼知道專案內容的？",[332,342,343],{},"Context 是什麼？",[332,345,346],{},"Agent 是什麼？",[332,348,349,353],{},[350,351,352],"code",{},"\u002Finit"," 做了什麼？",[332,355,356,358,359,361],{},[350,357,234],{}," 與 ",[350,360,235],{}," 又是什麼？",[363,364,365],"blockquote",{},[322,366,367],{},"這裡主要是我目前學習與實際使用後的整理紀錄。AI 工具更新速度很快，如果後續功能或使用方式有所改變，也會再持續調整。",[322,369,370],{},"本文主要會使用以下工具與名稱：",[372,373,374,393],"table",{},[375,376,377],"thead",{},[378,379,380,384,387,390],"tr",{},[381,382,383],"th",{},"工具",[381,385,386],{},"正式名稱",[381,388,389],{},"終端機啟動指令",[381,391,392],{},"主要專案指示檔",[394,395,396,416],"tbody",{},[378,397,398,402,407,412],{},[399,400,401],"td",{},"Anthropic",[399,403,404],{},[405,406,231],"strong",{},[399,408,409],{},[350,410,411],{},"claude",[399,413,414],{},[350,415,234],{},[378,417,418,420,424,429],{},[399,419,309],{},[399,421,422],{},[405,423,232],{},[399,425,426],{},[350,427,428],{},"codex",[399,430,431],{},[350,432,235],{},[434,435],"hr",{},[437,438,440],"h2",{"id":439},"關於-sdd","關於 SDD",[322,442,443],{},"SDD 全名：",[445,446,452],"pre",{"className":447,"code":449,"language":450,"meta":451},[448],"language-text","Spec-Driven Development\n規格驅動開發\n","text","",[350,453,449],{"__ignoreMap":451},[322,455,456],{},"可以先簡單理解成：",[363,458,459],{},[322,460,461],{},"在讓 AI 開始寫程式之前，先把「要做什麼」整理清楚，再進一步產生實作計畫與可以執行的工作項目。",[322,463,464],{},"以 GitHub Spec Kit 的核心 SDD 流程為例，可以簡化成：",[445,466,469],{"className":467,"code":468,"language":450,"meta":451},[448],"Spec\n定義需求\n  ↓\nPlan\n規劃怎麼做\n  ↓\nTasks\n拆成可以執行的任務\n  ↓\nImplement\n開始進行實作\n",[350,470,468],{"__ignoreMap":451},[322,472,473],{},"也就是先處理：",[445,475,478],{"className":476,"code":477,"language":450,"meta":451},[448],"我要做什麼？\n↓\n打算怎麼做？\n↓\n需要完成哪些事情？\n↓\n開始實作\n",[350,479,477],{"__ignoreMap":451},[322,481,482],{},"SDD 並不是使用 Claude Code 或 Codex CLI 的必要條件，而是一種讓 AI Coding 開發流程更有結構的方法。",[322,484,485],{},"這部分之後再另外整理實際使用方式。",[434,487],{},[437,489,490],{"id":490},"軟體環境",[322,492,493],{},"這篇主要以我目前實際使用的開發環境進行紀錄。",[329,495,496,506,509,512],{},[332,497,498,499],{},"編輯器：",[500,501,505],"a",{"href":502,"rel":503},"https:\u002F\u002Fcode.visualstudio.com\u002F",[504],"nofollow","Visual Studio Code",[332,507,508],{},"Node.js：JavaScript 執行環境",[332,510,511],{},"npm：Node.js 套件管理工具",[332,513,514],{},"Terminal：用來透過命令列操作 Claude Code \u002F Codex CLI",[363,516,517],{},[322,518,519],{},"以上主要記錄我自己的使用環境，不代表只能使用上述工具。",[363,521,522],{},[322,523,524],{},"Claude Code \u002F Codex CLI 的實際支援環境與安裝方式，仍以官方文件為準。",[434,526],{},[437,528,530],{"id":529},"claude-code-codex-cli-初始化","Claude Code \u002F Codex CLI 初始化",[322,532,533],{},"這部分紀錄如何在既有專案中開始使用 Claude Code \u002F Codex CLI，以及一開始比較容易遇到的幾個基本概念。",[322,535,536],{},"這些 AI Coding 工具到底是怎麼進入專案、理解專案，並開始工作的？",[434,538],{},[540,541,334],"h3",{"id":542},"cli-是什麼",[322,544,545],{},"CLI 全名：",[445,547,550],{"className":548,"code":549,"language":450,"meta":451},[448],"CLI = Command Line Interface\n    = 命令列介面\n",[350,551,549],{"__ignoreMap":451},[322,553,554],{},"簡單來說，就是透過 Terminal 輸入指令操作程式，而不是使用一般網頁上的按鈕或圖形介面。",[322,556,557],{},"例如啟動 Claude Code：",[445,559,563],{"className":560,"code":561,"language":562,"meta":451,"style":451},"language-bash shiki shiki-themes github-light github-dark-default","claude\n","bash",[350,564,565],{"__ignoreMap":451},[566,567,570],"span",{"class":568,"line":569},"line",1,[566,571,561],{"class":572},"sYRkA",[322,574,575],{},"啟動 Codex CLI：",[445,577,579],{"className":560,"code":578,"language":562,"meta":451,"style":451},"codex\n",[350,580,581],{"__ignoreMap":451},[566,582,583],{"class":568,"line":569},[566,584,578],{"class":572},[434,586],{},[540,588,590],{"id":589},"claude-code-codex-cli-跟網頁版-ai-差在哪","Claude Code \u002F Codex CLI 跟網頁版 AI 差在哪？",[322,592,593],{},"在一般網頁聊天情境下，如果 AI 無法直接存取本機專案，通常需要由使用者提供程式碼、檔案或其他相關 Context。",[322,595,596],{},"例如：",[445,598,601],{"className":599,"code":600,"language":450,"meta":451},[448],"使用者提供程式碼 \u002F 檔案\n        ↓\nAI 讀取內容\n        ↓\nAI 分析並回答\n",[350,602,600],{"__ignoreMap":451},[322,604,605],{},"如果 AI 不知道其他檔案的內容，就需要再提供程式碼、上傳檔案，或補充相關資訊。",[322,607,608],{},"Claude Code、Codex CLI 這類 Coding Agent 則可以直接在被允許的專案工作環境中使用工具。",[322,610,596],{},[445,612,615],{"className":613,"code":614,"language":450,"meta":451},[448],"專案\n  ↓\nClaude Code \u002F Codex CLI\n  ↓\n搜尋需要的檔案\n  ↓\n讀取程式碼\n  ↓\n分析問題\n  ↓\n需要時修改檔案 \u002F 執行指令\n",[350,616,614],{"__ignoreMap":451},[363,618,619],{},[322,620,621],{},"最大的差異之一，是 Claude Code \u002F Codex CLI 可以直接在開發環境中工作，並主動尋找完成目前任務所需要的資訊。",[434,623],{},[540,625,627],{"id":626},"ai-是怎麼知道我的專案內容的","AI 是怎麼知道我的專案內容的？",[322,629,630],{},"假設在某個專案目錄中啟動 Coding Agent：",[445,632,635],{"className":633,"code":634,"language":450,"meta":451},[448],"在某個專案目錄啟動 AI\n          ↓\n知道目前所在的工作目錄\n          ↓\n根據任務搜尋需要的檔案\n          ↓\n讀取相關內容\n          ↓\n逐步建立對目前任務與專案的理解\n",[350,636,634],{"__ignoreMap":451},[322,638,639],{},"它並不是一開始就把整個專案全部「記住」。",[434,641],{},[643,644,645],"h4",{"id":645},"範例",[322,647,648],{},"假設專案結構是：",[445,650,653],{"className":651,"code":652,"language":450,"meta":451},[448],"my-project\u002F\n├─ package.json\n├─ nuxt.config.ts\n├─ components\u002F\n├─ pages\u002F\n├─ composables\u002F\n├─ server\u002F\n└─ ...\n",[350,654,652],{"__ignoreMap":451},[322,656,657],{},"使用者告訴 AI：",[445,659,662],{"className":660,"code":661,"language":450,"meta":451},[448],"幫我看看登入功能在哪。\n",[350,663,661],{"__ignoreMap":451},[322,665,666],{},"AI 可能會先搜尋：",[445,668,671],{"className":669,"code":670,"language":450,"meta":451},[448],"login\nauth\nsignin\noauth\n",[350,672,670],{"__ignoreMap":451},[322,674,675],{},"找到相關內容後，再進一步查看：",[445,677,680],{"className":678,"code":679,"language":450,"meta":451},[448],"pages\u002Flogin.vue\ncomposables\u002FuseAuth.ts\nserver\u002Fapi\u002Flogin.ts\nnuxt.config.ts\n",[350,681,679],{"__ignoreMap":451},[322,683,684],{},"也就是：",[445,686,689],{"className":687,"code":688,"language":450,"meta":451},[448],"收到任務\n↓\n搜尋可能相關的內容\n↓\n找到相關檔案\n↓\n讀取需要的程式碼\n↓\n繼續分析\n",[350,690,688],{"__ignoreMap":451},[363,692,693],{},[322,694,695],{},"Coding Agent 不需要一開始就把整個專案全部塞進 Context，而是可以透過工具逐步尋找完成任務所需要的資訊。",[322,697,698],{},"這些被讀取的資訊，會成為 AI 處理目前任務時所使用的 Context。",[434,700],{},[540,702,343],{"id":703},"context-是什麼",[322,705,456],{},[363,707,708],{},[322,709,710],{},"AI 目前用來理解這次任務的資訊。",[322,712,596],{},[445,714,717],{"className":715,"code":716,"language":450,"meta":451},[448],"Context\n│\n├─ 目前的對話內容\n│\n├─ AI 已經讀取的程式碼\n│\n├─ 搜尋得到的資訊\n│\n├─ 工具執行結果\n│\n├─ 專案指示\n│   ├─ CLAUDE.md\n│   └─ AGENTS.md\n│\n└─ 其他與目前任務相關的資訊\n",[350,718,716],{"__ignoreMap":451},[322,720,721],{},"其中：",[445,723,726],{"className":724,"code":725,"language":450,"meta":451},[448],"Claude Code → CLAUDE.md\n\nCodex CLI → AGENTS.md\n",[350,727,725],{"__ignoreMap":451},[322,729,730],{},"這些檔案可以提供比較持續性的專案工作指示。",[322,732,733],{},"但要注意：",[363,735,736],{},[322,737,738,740,741,743],{},[350,739,234],{}," \u002F ",[350,742,235],{}," 是 Context 的來源之一，不等於 Context 本身。",[434,745],{},[540,747,749],{"id":748},"ai-可以讀什麼修改什麼","AI 可以讀什麼、修改什麼？",[322,751,752],{},"Claude Code \u002F Codex CLI 並不是只能回答程式問題。",[322,754,755],{},"它們在被允許的環境中，可以使用不同工具完成工作。",[445,757,760],{"className":758,"code":759,"language":450,"meta":451},[448],"          Claude Code \u002F Codex CLI\n                    │\n          ┌─────────┼─────────┐\n          ↓         ↓         ↓\n        讀檔案     改檔案     執行指令\n",[350,761,759],{"__ignoreMap":451},[322,763,764],{},"例如可能會：",[445,766,769],{"className":767,"code":768,"language":450,"meta":451},[448],"查看 package.json\n\n搜尋某個 function\n\n讀取 Vue Component\n\n新增檔案\n\n修改程式碼\n\n執行 npm test\n\n執行 npm run build\n\n查看 git diff\n",[350,770,768],{"__ignoreMap":451},[322,772,773],{},"不過：",[363,775,776],{},[322,777,778],{},"AI 具備操作工具的能力，不代表所有操作都能直接執行。",[322,780,781],{},"實際可以操作到什麼程度，還會受到：",[445,783,786],{"className":784,"code":785,"language":450,"meta":451},[448],"Permission\nSandbox\nApproval\nSettings\n",[350,787,785],{"__ignoreMap":451},[322,789,790],{},"等權限與環境設定影響。",[322,792,793],{},"這部分會在後續紀錄中另外整理。",[434,795],{},[540,797,799],{"id":798},"所謂-agent-到底是什麼","所謂 Agent 到底是什麼？",[322,801,802],{},"一般 AI 聊天的流程比較像：",[445,804,807],{"className":805,"code":806,"language":450,"meta":451},[448],"你：這段程式碼哪裡錯？\n\nAI：\n分析\n↓\n回答\n",[350,808,806],{"__ignoreMap":451},[322,810,811],{},"但 Agent 的工作方式可能會變成：",[445,813,816],{"className":814,"code":815,"language":450,"meta":451},[448],"你：\n幫我找出為什麼登入會失敗\n\nAI：\n\n搜尋專案\n↓\n找到登入相關程式碼\n↓\n讀取檔案\n↓\n找到相關 API\n↓\n查看設定\n↓\n判斷問題\n↓\n修改程式\n↓\n執行測試\n↓\n查看測試結果\n↓\n如果仍有問題繼續修正\n↓\n再次驗證\n",[350,817,815],{"__ignoreMap":451},[363,819,820],{},[322,821,822],{},"Agent 不只是「回答問題」，而是可以為了完成任務使用工具、觀察執行結果，並根據目前狀況決定下一步要做什麼。",[322,824,825],{},"可以先簡化理解成：",[363,827,828],{},[322,829,830],{},"LLM 提供推理與生成能力，而 Agent 系統在 LLM 之外，再結合 Tools、Context 與執行流程，讓 AI 不只回答問題，也可以採取行動完成任務。",[445,832,835],{"className":833,"code":834,"language":450,"meta":451},[448],"              Agent\n                │\n        ┌───────┼───────┐\n        ↓       ↓       ↓\n       LLM     Tools   Context\n        │       │        │\n      推理     讀檔      對話\n      判斷     搜尋      程式碼\n      生成     改檔      專案指示\n               Shell     執行結果\n",[350,836,834],{"__ignoreMap":451},[322,838,839],{},"這裡先把 Agent 理解成：",[445,841,844],{"className":842,"code":843,"language":450,"meta":451},[448],"模型\n+\n工具\n+\nContext\n+\n執行流程\n",[350,845,843],{"__ignoreMap":451},[322,847,848],{},"即可。",[434,850],{},[540,852,854],{"id":853},"在既有專案中啟動-claude-code-codex-cli","在既有專案中啟動 Claude Code \u002F Codex CLI",[322,856,857],{},"開始前需要先安裝 Claude Code 或 Codex CLI，並登入對應帳號。",[322,859,860],{},"完整安裝方式可以參考官方文件，這裡只記錄我自己實際使用的 npm 安裝方式。",[329,862,863,870],{},[332,864,865],{},[500,866,869],{"href":867,"rel":868},"https:\u002F\u002Fcode.claude.com\u002Fdocs\u002Fzh-TW\u002Fquickstart",[504],"Claude Code 官方文件",[332,871,872],{},[500,873,876],{"href":874,"rel":875},"https:\u002F\u002Fdevelopers.openai.com\u002Fcodex\u002Fcli",[504],"Codex CLI 官方文件",[363,878,879],{},[322,880,881],{},"Claude Code 官方也提供 Native Installer 等其他安裝方式，並較推薦使用 Native Installer；本文只記錄我自己實際使用的 npm 方式。",[434,883],{},[643,885,886],{"id":886},"安裝",[322,888,889],{},"如果本機已經安裝 Node.js 與 npm，可以透過 npm 進行全域安裝。",[322,891,892],{},"先簡單認識：",[445,894,897],{"className":895,"code":896,"language":450,"meta":451},[448],"Node.js\n→ JavaScript 執行環境\n\nnpm\n→ Node.js 套件管理工具\n\nnvm\n→ Node.js 版本管理工具\n",[350,898,896],{"__ignoreMap":451},[434,900],{},[902,903,905],"h5",{"id":904},"claude-code-安裝指令","Claude Code 安裝指令",[445,907,909],{"className":560,"code":908,"language":562,"meta":451,"style":451},"npm install -g @anthropic-ai\u002Fclaude-code\n",[350,910,911],{"__ignoreMap":451},[566,912,913,915,919,923],{"class":568,"line":569},[566,914,62],{"class":572},[566,916,918],{"class":917},"sNbzA"," install",[566,920,922],{"class":921},"sPgVT"," -g",[566,924,925],{"class":917}," @anthropic-ai\u002Fclaude-code\n",[322,927,928],{},"npm：",[322,930,931],{},[500,932,935],{"href":933,"rel":934},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@anthropic-ai\u002Fclaude-code",[504],"@anthropic-ai\u002Fclaude-code",[434,937],{},[902,939,941],{"id":940},"codex-cli-安裝指令","Codex CLI 安裝指令",[445,943,945],{"className":560,"code":944,"language":562,"meta":451,"style":451},"npm install -g @openai\u002Fcodex\n",[350,946,947],{"__ignoreMap":451},[566,948,949,951,953,955],{"class":568,"line":569},[566,950,62],{"class":572},[566,952,918],{"class":917},[566,954,922],{"class":921},[566,956,957],{"class":917}," @openai\u002Fcodex\n",[322,959,928],{},[322,961,962],{},[500,963,966],{"href":964,"rel":965},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@openai\u002Fcodex",[504],"@openai\u002Fcodex",[434,968],{},[322,970,971],{},"安裝完成後可以先檢查版本：",[445,973,975],{"className":560,"code":974,"language":562,"meta":451,"style":451},"claude --version\ncodex --version\n",[350,976,977,984],{"__ignoreMap":451},[566,978,979,981],{"class":568,"line":569},[566,980,411],{"class":572},[566,982,983],{"class":921}," --version\n",[566,985,987,989],{"class":568,"line":986},2,[566,988,428],{"class":572},[566,990,983],{"class":921},[322,992,993],{},"也可以查看 CLI 提供哪些參數：",[445,995,997],{"className":560,"code":996,"language":562,"meta":451,"style":451},"claude --help\ncodex --help\n",[350,998,999,1006],{"__ignoreMap":451},[566,1000,1001,1003],{"class":568,"line":569},[566,1002,411],{"class":572},[566,1004,1005],{"class":921}," --help\n",[566,1007,1008,1010],{"class":568,"line":986},[566,1009,428],{"class":572},[566,1011,1005],{"class":921},[434,1013],{},[643,1015,231],{"id":1016},"claude-code",[322,1018,1019],{},"先進入專案：",[445,1021,1023],{"className":560,"code":1022,"language":562,"meta":451,"style":451},"cd my-project\n",[350,1024,1025],{"__ignoreMap":451},[566,1026,1027,1030],{"class":568,"line":569},[566,1028,1029],{"class":921},"cd",[566,1031,1032],{"class":917}," my-project\n",[322,1034,1035],{},"啟動 Claude Code：",[445,1037,1038],{"className":560,"code":561,"language":562,"meta":451,"style":451},[350,1039,1040],{"__ignoreMap":451},[566,1041,1042],{"class":568,"line":569},[566,1043,561],{"class":572},[322,1045,1046],{},"第一次使用時依照畫面指示完成登入後，就可以開始使用。",[445,1048,1051],{"className":1049,"code":1050,"language":450,"meta":451},[448],"進入專案\n↓\n啟動 claude\n↓\n完成登入\n↓\n開始使用 Claude Code\n",[350,1052,1050],{"__ignoreMap":451},[434,1054],{},[643,1056,232],{"id":1057},"codex-cli",[322,1059,1019],{},[445,1061,1062],{"className":560,"code":1022,"language":562,"meta":451,"style":451},[350,1063,1064],{"__ignoreMap":451},[566,1065,1066,1068],{"class":568,"line":569},[566,1067,1029],{"class":921},[566,1069,1032],{"class":917},[322,1071,575],{},[445,1073,1074],{"className":560,"code":578,"language":562,"meta":451,"style":451},[350,1075,1076],{"__ignoreMap":451},[566,1077,1078],{"class":568,"line":569},[566,1079,578],{"class":572},[322,1081,1082],{},"第一次使用時依照畫面指示完成登入。",[445,1084,1087],{"className":1085,"code":1086,"language":450,"meta":451},[448],"進入專案\n↓\n啟動 codex\n↓\n完成登入\n↓\n開始使用 Codex CLI\n",[350,1088,1086],{"__ignoreMap":451},[434,1090],{},[540,1092,1094,1095,1097],{"id":1093},"第一次進入專案需要-init-嗎","第一次進入專案需要 ",[350,1096,352],{}," 嗎？",[322,1099,1100],{},"不一定。",[322,1102,1103,1104,1106],{},"即使沒有執行 ",[350,1105,352],{},"，Coding Agent 仍然可以依照目前的任務搜尋、讀取與理解專案內容。",[322,1108,1109,1111],{},[350,1110,352],{}," 比較重要的用途是：",[363,1113,1114],{},[322,1115,1116],{},"替目前專案建立一份之後工作時可以持續參考的專案指示。",[322,1118,684],{},[445,1120,1123],{"className":1121,"code":1122,"language":450,"meta":451},[448],"沒有 \u002Finit\n\nAI\n↓\n還是可以搜尋專案\n↓\n讀取程式碼\n↓\n完成任務\n",[350,1124,1122],{"__ignoreMap":451},[322,1126,1127,1128,1130],{},"但執行 ",[350,1129,352],{}," 後，可以多一份：",[445,1132,1135],{"className":1133,"code":1134,"language":450,"meta":451},[448],"專案工作指示\n",[350,1136,1134],{"__ignoreMap":451},[322,1138,1139],{},"讓 Coding Agent 之後進入專案工作時，可以取得一些應該持續知道的資訊。",[434,1141],{},[540,1143,1145,1146,353],{"id":1144},"claude-code-的-init-做了什麼","Claude Code 的 ",[350,1147,352],{},[322,1149,1150],{},"在 Claude Code 中執行：",[445,1152,1155],{"className":1153,"code":1154,"language":450,"meta":451},[448],"\u002Finit\n",[350,1156,1154],{"__ignoreMap":451},[322,1158,1159],{},"Claude Code 會分析目前的 Codebase，並建立一份起始的：",[445,1161,1164],{"className":1162,"code":1163,"language":450,"meta":451},[448],"CLAUDE.md\n",[350,1165,1163],{"__ignoreMap":451},[322,1167,1168],{},"流程可以簡化成：",[445,1170,1173],{"className":1171,"code":1172,"language":450,"meta":451},[448],"分析目前專案\n↓\n整理重要資訊\n↓\n建立 \u002F 改善 CLAUDE.md\n↓\n讓之後的 Claude Code Session\n可以取得持續性的專案工作指示\n",[350,1174,1172],{"__ignoreMap":451},[322,1176,1177,1178,1180],{},"如果原本已經存在 ",[350,1179,234],{},"，則會以分析與改善現有內容為主，而不是單純把原本的檔案覆蓋掉。",[434,1182],{},[643,1184,1186],{"id":1185},"claudemd-是什麼","CLAUDE.md 是什麼？",[322,1188,1189,1191],{},[350,1190,234],{}," 是提供 Claude Code 使用的持續性專案指示文件。",[322,1193,1194],{},"它的用途不是把整份專案文件全部塞進去，而是記錄：",[329,1196,1197,1200,1203,1206,1209,1212],{},[332,1198,1199],{},"專案架構的重要資訊",[332,1201,1202],{},"Build \u002F Test 指令",[332,1204,1205],{},"Coding Convention",[332,1207,1208],{},"使用的套件管理工具",[332,1210,1211],{},"重要開發流程",[332,1213,1214],{},"AI 容易弄錯，但每次工作都應該知道的規則",[322,1216,1217],{},"可以用一個問題來判斷：",[363,1219,1220],{},[322,1221,1222],{},"如果今天有一個新的工程師加入專案，有哪些事情是他在開始工作前最好先知道的？",[322,1224,1225,1226,1228],{},"這些資訊通常就是很適合整理進 ",[350,1227,234],{}," 的內容。",[434,1230],{},[902,1232,1233],{"id":1233},"簡單範例",[445,1235,1239],{"className":1236,"code":1237,"language":1238,"meta":451,"style":451},"language-md shiki shiki-themes github-light github-dark-default","# 專案\n\n## 技術\n\n## 常用指令\n\n## 開發規則\n","md",[350,1240,1241,1247,1253,1259,1264,1270,1275],{"__ignoreMap":451},[566,1242,1243],{"class":568,"line":569},[566,1244,1246],{"class":1245},"sNGiL","# 專案\n",[566,1248,1249],{"class":568,"line":986},[566,1250,1252],{"emptyLinePlaceholder":1251},true,"\n",[566,1254,1256],{"class":568,"line":1255},3,[566,1257,1258],{"class":1245},"## 技術\n",[566,1260,1262],{"class":568,"line":1261},4,[566,1263,1252],{"emptyLinePlaceholder":1251},[566,1265,1267],{"class":568,"line":1266},5,[566,1268,1269],{"class":1245},"## 常用指令\n",[566,1271,1273],{"class":568,"line":1272},6,[566,1274,1252],{"emptyLinePlaceholder":1251},[566,1276,1278],{"class":568,"line":1277},7,[566,1279,1280],{"class":1245},"## 開發規則\n",[322,1282,1283,1284,1286],{},"後續會再另外整理 ",[350,1285,234],{}," 實際可以怎麼寫。",[434,1288],{},[540,1290,1292,1293,353],{"id":1291},"codex-cli-的-init-做了什麼","Codex CLI 的 ",[350,1294,352],{},[322,1296,1297],{},"在 Codex CLI 中執行：",[445,1299,1301],{"className":1300,"code":1154,"language":450,"meta":451},[448],[350,1302,1154],{"__ignoreMap":451},[322,1304,1305],{},"Codex 可以為目前專案建立：",[445,1307,1310],{"className":1308,"code":1309,"language":450,"meta":451},[448],"AGENTS.md\n",[350,1311,1309],{"__ignoreMap":451},[322,1313,1314],{},"流程可以先簡化成：",[445,1316,1319],{"className":1317,"code":1318,"language":450,"meta":451},[448],"分析 \u002F 理解目前專案\n↓\n建立 AGENTS.md\n↓\n記錄專案工作指示\n↓\nCodex 後續工作時使用\n",[350,1320,1318],{"__ignoreMap":451},[434,1322],{},[643,1324,1326],{"id":1325},"agentsmd-是什麼","AGENTS.md 是什麼？",[322,1328,1329,1331],{},[350,1330,235],{}," 是 Codex 使用的專案指示文件。",[322,1333,1334],{},"可以記錄：",[329,1336,1337,1340,1343,1346,1349,1352,1355],{},[332,1338,1339],{},"專案架構",[332,1341,1342],{},"開發規範",[332,1344,1345],{},"常用指令",[332,1347,1348],{},"測試方式",[332,1350,1351],{},"Coding Style",[332,1353,1354],{},"需要避免的操作",[332,1356,1357],{},"專案特殊限制",[322,1359,1360],{},"容易搞混的一點是：",[363,1362,1363],{},[322,1364,1365,1367],{},[350,1366,235],{}," 雖然名字裡有 Agent，但它並不是用來「建立一個 Agent」的檔案。",[322,1369,1370],{},"在這裡可以先把它理解成：",[363,1372,1373],{},[322,1374,1375],{},"Codex Coding Agent 的專案工作說明書。",[434,1377],{},[902,1379,1233],{"id":1380},"簡單範例-1",[445,1382,1383],{"className":1236,"code":1237,"language":1238,"meta":451,"style":451},[350,1384,1385,1389,1393,1397,1401,1405,1409],{"__ignoreMap":451},[566,1386,1387],{"class":568,"line":569},[566,1388,1246],{"class":1245},[566,1390,1391],{"class":568,"line":986},[566,1392,1252],{"emptyLinePlaceholder":1251},[566,1394,1395],{"class":568,"line":1255},[566,1396,1258],{"class":1245},[566,1398,1399],{"class":568,"line":1261},[566,1400,1252],{"emptyLinePlaceholder":1251},[566,1402,1403],{"class":568,"line":1266},[566,1404,1269],{"class":1245},[566,1406,1407],{"class":568,"line":1272},[566,1408,1252],{"emptyLinePlaceholder":1251},[566,1410,1411],{"class":568,"line":1277},[566,1412,1280],{"class":1245},[322,1414,1415,1416,1418],{},"後續也會再另外整理 ",[350,1417,235],{}," 可以怎麼使用。",[434,1420],{},[540,1422,1423],{"id":1423},"初始化前後的專案差異",[322,1425,1426,1427,1429],{},"如果同一個專案分別使用 Claude Code 與 Codex CLI 執行 ",[350,1428,352],{},"，專案中可能會同時存在：",[445,1431,1434],{"className":1432,"code":1433,"language":450,"meta":451},[448],"my-project\u002F\n├─ CLAUDE.md     \u002F\u002F Claude Code 使用\n├─ AGENTS.md     \u002F\u002F Codex CLI 使用\n├─ package.json\n├─ nuxt.config.ts\n├─ components\u002F\n├─ pages\u002F\n└─ server\u002F\n",[350,1435,1433],{"__ignoreMap":451},[322,1437,1438],{},"要注意：",[445,1440,1443],{"className":1441,"code":1442,"language":450,"meta":451},[448],"Claude Code \u002Finit\n↓\nCLAUDE.md\n",[350,1444,1442],{"__ignoreMap":451},[445,1446,1449],{"className":1447,"code":1448,"language":450,"meta":451},[448],"Codex CLI \u002Finit\n↓\nAGENTS.md\n",[350,1450,1448],{"__ignoreMap":451},[322,1452,1453,1454,1456],{},"並不是執行一次 ",[350,1455,352],{}," 就會同時產生兩個檔案。",[322,1458,1459],{},"它們的共同目的，可以先理解成：",[363,1461,1462],{},[322,1463,1464],{},"持續告訴 Coding Agent：「這個專案應該怎麼工作。」",[434,1466],{},[540,1468,1469],{"id":1469},"小結",[322,1471,1472],{},"這篇先整理幾個最基本的概念。",[445,1474,1477],{"className":1475,"code":1476,"language":450,"meta":451},[448],"CLI\n↓\n在 Terminal 中透過命令列操作程式\n",[350,1478,1476],{"__ignoreMap":451},[445,1480,1483],{"className":1481,"code":1482,"language":450,"meta":451},[448],"Claude Code \u002F Codex CLI\n↓\n可以直接在開發環境工作的 Coding Agent\n",[350,1484,1482],{"__ignoreMap":451},[445,1486,1489],{"className":1487,"code":1488,"language":450,"meta":451},[448],"Agent\n↓\n不只回答問題\n也可以使用工具執行任務\n",[350,1490,1488],{"__ignoreMap":451},[445,1492,1495],{"className":1493,"code":1494,"language":450,"meta":451},[448],"Context\n↓\nAI 目前理解與處理任務所使用的資訊\n",[350,1496,1494],{"__ignoreMap":451},[445,1498,1501],{"className":1499,"code":1500,"language":450,"meta":451},[448],"CLAUDE.md\n↓\nClaude Code 的持續性專案指示\n\nAGENTS.md\n↓\nCodex CLI 的持續性專案指示\n",[350,1502,1500],{"__ignoreMap":451},[322,1504,1505],{},"整體流程可以先理解成：",[445,1507,1510],{"className":1508,"code":1509,"language":450,"meta":451},[448],"進入專案\n↓\n啟動 Coding Agent\n↓\nAgent 根據任務搜尋與理解專案\n↓\n使用 \u002Finit 建立專案指示\n↓\n檢查並調整 CLAUDE.md \u002F AGENTS.md\n↓\n開始進行實際開發任務\n",[350,1511,1509],{"__ignoreMap":451},[322,1513,1514],{},"第一次使用不需要急著把所有 AI Coding 相關功能都學完。",[322,1516,1517],{},"目前先搞懂：",[445,1519,1522],{"className":1520,"code":1521,"language":450,"meta":451},[448],"CLI\nAgent\nContext\n\u002Finit\nCLAUDE.md\nAGENTS.md\n",[350,1523,1521],{"__ignoreMap":451},[322,1525,1526],{},"這幾個概念，就已經足夠開始讓 Claude Code \u002F Codex CLI 進入專案工作。",[322,1528,1529],{},"後續再繼續整理：",[445,1531,1534],{"className":1532,"code":1533,"language":450,"meta":451},[448],"CLAUDE.md \u002F AGENTS.md\nSettings \u002F Config\nRules\nSkills\nAgent \u002F Subagent\nMCP\n",[350,1535,1533],{"__ignoreMap":451},[322,1537,1538],{},"等相關功能。",[1540,1541,1542],"style",{},"html pre.shiki code .sYRkA, html code.shiki .sYRkA{--shiki-default:#6F42C1;--shiki-dark:#FFA657}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sNbzA, html code.shiki .sNbzA{--shiki-default:#032F62;--shiki-dark:#A5D6FF}html pre.shiki code .sPgVT, html code.shiki .sPgVT{--shiki-default:#005CC5;--shiki-dark:#79C0FF}html pre.shiki code .sNGiL, html code.shiki .sNGiL{--shiki-default:#005CC5;--shiki-default-font-weight:bold;--shiki-dark:#79C0FF;--shiki-dark-font-weight:bold}",{"title":451,"searchDepth":1255,"depth":1255,"links":1544},[1545,1546,1547],{"id":439,"depth":986,"text":440},{"id":490,"depth":986,"text":490},{"id":529,"depth":986,"text":530,"children":1548},[1549,1550,1551,1554,1555,1556,1557,1562,1564,1568,1572,1573],{"id":542,"depth":1255,"text":334},{"id":589,"depth":1255,"text":590},{"id":626,"depth":1255,"text":627,"children":1552},[1553],{"id":645,"depth":1261,"text":645},{"id":703,"depth":1255,"text":343},{"id":748,"depth":1255,"text":749},{"id":798,"depth":1255,"text":799},{"id":853,"depth":1255,"text":854,"children":1558},[1559,1560,1561],{"id":886,"depth":1261,"text":886},{"id":1016,"depth":1261,"text":231},{"id":1057,"depth":1261,"text":232},{"id":1093,"depth":1255,"text":1563},"第一次進入專案需要 \u002Finit 嗎？",{"id":1144,"depth":1255,"text":1565,"children":1566},"Claude Code 的 \u002Finit 做了什麼？",[1567],{"id":1185,"depth":1261,"text":1186},{"id":1291,"depth":1255,"text":1569,"children":1570},"Codex CLI 的 \u002Finit 做了什麼？",[1571],{"id":1325,"depth":1261,"text":1326},{"id":1423,"depth":1255,"text":1423},{"id":1469,"depth":1255,"text":1469},false,null,{},"2026-09-10",[],{"title":226,"description":227},"posts\u002F20260901.claude-code-codex-cli-init-basics",[230,231,232,233,234,235],"q8uY9bhJKb5wZWj53ylqzGIOSWXwOaVV2PWeaDY4yo8",[1584,1587],{"title":293,"path":292,"stem":1585,"description":294,"category":228,"publishedAt":1586,"children":-1},"posts\u002F20260911.claude-code-codex-model-selection","2026-09-11",{"title":288,"path":287,"stem":1588,"description":289,"category":228,"publishedAt":1577,"children":-1},"posts\u002F20260910.ai-coding-agent-concepts-summary",1791786900485]