[{"data":1,"prerenderedAt":955},["ShallowReactive",2],{"search-dialog-posts":3,"post-\u002Fposts\u002Fmcp-basics":316,"post-surround-\u002Fposts\u002Fmcp-basics":948},[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":281,"body":318,"category":228,"description":282,"draft":937,"extension":938,"image":939,"meta":940,"navigation":941,"path":280,"publishedAt":942,"relatedExperiments":943,"seo":944,"stem":945,"tags":946,"updatedAt":939,"__hash__":947},"posts\u002Fposts\u002F20260909.mcp-basics.md",{"type":319,"value":320,"toc":921},"minimark",[321,325,336,339,345,348,356,359,364,367,373,376,383,386,392,395,398,404,407,410,416,419,422,424,428,431,433,439,445,451,457,460,465,468,475,477,481,484,490,493,496,502,505,511,514,521,523,529,531,535,538,544,547,550,556,559,565,568,574,577,580,583,590,592,598,601,607,609,615,620,626,629,635,638,640,644,647,650,653,659,661,667,670,676,679,685,688,690,694,696,702,705,711,714,717,723,726,729,731,735,738,743,746,748,754,757,760,766,769,772,774,778,781,787,790,796,799,802,809,812,814,818,821,827,829,835,841,847,853,856,858,861,864,869,872,879,882,888,891,897,900,902,908,911,918],[322,323,324],"p",{},"前面整理過：",[326,327,333],"pre",{"className":328,"code":330,"language":331,"meta":332},[329],"language-text","Rules\nSkills\nCommands\nAgents\n","text","",[334,335,330],"code",{"__ignoreMap":332},[322,337,338],{},"這些功能大多是在處理：",[340,341,342],"blockquote",{},[322,343,344],{},"AI 應該怎麼工作？",[322,346,347],{},"而 MCP 比較像是在處理另一件事情：",[340,349,350],{},[322,351,352],{},[353,354,355],"strong",{},"AI 還可以使用哪些工具？",[357,358],"hr",{},[360,361,363],"h2",{"id":362},"mcp-是什麼","MCP 是什麼？",[322,365,366],{},"MCP 全名：",[326,368,371],{"className":369,"code":370,"language":331,"meta":332},[329],"Model Context Protocol\n",[334,372,370],{"__ignoreMap":332},[322,374,375],{},"可以先簡單理解成：",[340,377,378],{},[322,379,380],{},[353,381,382],{},"讓 AI 用一套共同的方式連接其他工具或資料來源。",[322,384,385],{},"原本 Coding Agent 主要是在專案裡工作：",[326,387,390],{"className":388,"code":389,"language":331,"meta":332},[329],"AI\n↓\n目前專案\n↓\n程式碼 \u002F 檔案\n",[334,391,389],{"__ignoreMap":332},[322,393,394],{},"有了 MCP 之後，就可以再連接其他工具。",[322,396,397],{},"例如：",[326,399,402],{"className":400,"code":401,"language":331,"meta":332},[329],"AI\n│\n├─ Browser\n├─ GitHub\n├─ Database\n├─ 設計工具\n└─ 其他服務\n",[334,403,401],{"__ignoreMap":332},[322,405,406],{},"所以 MCP 本身不是某個特定工具。",[322,408,409],{},"比較像是：",[326,411,414],{"className":412,"code":413,"language":331,"meta":332},[329],"AI\n↓\nMCP\n↓\n其他工具\n",[334,415,413],{"__ignoreMap":332},[322,417,418],{},"讓 AI 多一些原本沒有的能力。",[322,420,421],{},"Claude Code 與 Codex 都支援 MCP。",[357,423],{},[360,425,427],{"id":426},"mcp-可以拿來做什麼","MCP 可以拿來做什麼？",[322,429,430],{},"這要看接上的 MCP 提供什麼功能。",[322,432,397],{},[326,434,437],{"className":435,"code":436,"language":331,"meta":332},[329],"Browser MCP\n↓\n操作瀏覽器\n",[334,438,436],{"__ignoreMap":332},[326,440,443],{"className":441,"code":442,"language":331,"meta":332},[329],"GitHub MCP\n↓\n取得 Issue \u002F PR 等資料\n",[334,444,442],{"__ignoreMap":332},[326,446,449],{"className":447,"code":448,"language":331,"meta":332},[329],"Database MCP\n↓\n取得 Database Schema 或資料\n",[334,450,448],{"__ignoreMap":332},[326,452,455],{"className":453,"code":454,"language":331,"meta":332},[329],"設計工具 MCP\n↓\n讀取或修改設計內容\n",[334,456,454],{"__ignoreMap":332},[322,458,459],{},"所以不是：",[340,461,462],{},[322,463,464],{},"裝了 MCP，AI 就什麼都會。",[322,466,467],{},"而是：",[340,469,470],{},[322,471,472],{},[353,473,474],{},"接上的 MCP 提供什麼能力，AI 才能使用什麼能力。",[357,476],{},[360,478,480],{"id":479},"我實際有使用過的例子pencil-mcp","我實際有使用過的例子：Pencil MCP",[322,482,483],{},"我目前實際有使用過的是：",[326,485,488],{"className":486,"code":487,"language":331,"meta":332},[329],"Pencil MCP\n",[334,489,487],{"__ignoreMap":332},[322,491,492],{},"也就是讓 Claude Code 或 Codex 可以連接設計工具。",[322,494,495],{},"現在官方產品名稱已經改為：",[326,497,500],{"className":498,"code":499,"language":331,"meta":332},[329],"pen.dev\n",[334,501,499],{"__ignoreMap":332},[322,503,504],{},"但在 MCP Client 裡，目前仍可能看到：",[326,506,509],{"className":507,"code":508,"language":331,"meta":332},[329],"pencil\n",[334,510,508],{"__ignoreMap":332},[322,512,513],{},"這是正常的。",[322,515,516,517,520],{},"官方目前也支援 Claude Code CLI、Codex CLI 等 Client 透過 MCP 連接正在開啟的 ",[334,518,519],{},".pen"," 文件。",[322,522,375],{},[326,524,527],{"className":525,"code":526,"language":331,"meta":332},[329],"Claude Code \u002F Codex\n↓\nPencil MCP\n↓\n.pen 設計文件\n",[334,528,526],{"__ignoreMap":332},[357,530],{},[360,532,534],{"id":533},"使用-pencil-mcp-後有什麼差別","使用 Pencil MCP 後有什麼差別？",[322,536,537],{},"如果沒有 MCP，和 AI 討論設計時可能比較像：",[326,539,542],{"className":540,"code":541,"language":331,"meta":332},[329],"我看著設計畫面\n↓\n用文字描述給 AI\n↓\nAI 根據描述工作\n",[334,543,541],{"__ignoreMap":332},[322,545,546],{},"但接上 Pencil MCP 後，AI 可以透過 MCP 取得或修改目前的設計文件。",[322,548,549],{},"例如可以請它：",[326,551,554],{"className":552,"code":553,"language":331,"meta":332},[329],"建立一個登入畫面\n",[334,555,553],{"__ignoreMap":332},[322,557,558],{},"或：",[326,560,563],{"className":561,"code":562,"language":331,"meta":332},[329],"調整這個區塊的 Layout\n",[334,564,562],{"__ignoreMap":332},[322,566,567],{},"甚至：",[326,569,572],{"className":570,"code":571,"language":331,"meta":332},[329],"修改目前的設計內容\n",[334,573,571],{"__ignoreMap":332},[322,575,576],{},"AI 就可以透過 MCP 操作設計文件，而不只是回傳一段「應該怎麼設計」的文字。",[322,578,579],{},"pen.dev 官方目前的 MCP Tools 也確實提供讀取目前文件狀態以及執行設計操作等能力。",[322,581,582],{},"這也是我目前最容易理解 MCP 的地方：",[340,584,585],{},[322,586,587],{},[353,588,589],{},"讓 AI 多一個它原本不能直接操作的工具。",[357,591],{},[360,593,595,597],{"id":594},"pen-是什麼",[334,596,519],{}," 是什麼？",[322,599,600],{},"Pencil \u002F pen.dev 的設計檔使用：",[326,602,605],{"className":603,"code":604,"language":331,"meta":332},[329],".pen\n",[334,606,604],{"__ignoreMap":332},[322,608,397],{},[326,610,613],{"className":611,"code":612,"language":331,"meta":332},[329],"my-project\u002F\n├─ src\u002F\n├─ package.json\n└─ design.pen\n",[334,614,612],{"__ignoreMap":332},[322,616,617,619],{},[334,618,519],{}," 就是設計文件。",[322,621,622,623,625],{},"官方目前也支援將 ",[334,624,519],{}," 文件放在專案中，並透過 Desktop App 或 IDE Extension 開啟。",[322,627,628],{},"所以在開發專案時，可以出現：",[326,630,633],{"className":631,"code":632,"language":331,"meta":332},[329],"程式碼\n+\n設計文件\n",[334,634,632],{"__ignoreMap":332},[322,636,637],{},"都放在同一個專案裡的情況。",[357,639],{},[360,641,643],{"id":642},"mcp-跟-skill-有什麼不同","MCP 跟 Skill 有什麼不同？",[322,645,646],{},"前一篇整理過 Skill。",[322,648,649],{},"這兩個我一開始也很容易混在一起。",[322,651,652],{},"可以先這樣理解：",[326,654,657],{"className":655,"code":656,"language":331,"meta":332},[329],"Skill\n↓\n告訴 AI\n「這件事情怎麼做」\n\n\nMCP\n↓\n提供 AI\n「做事情可以使用的工具」\n",[334,658,656],{"__ignoreMap":332},[322,660,397],{},[326,662,665],{"className":663,"code":664,"language":331,"meta":332},[329],"Skill\n↓\n告訴 AI 建立 UI 時要遵循哪些步驟\n",[334,666,664],{"__ignoreMap":332},[322,668,669],{},"而：",[326,671,674],{"className":672,"code":673,"language":331,"meta":332},[329],"Pencil MCP\n↓\n讓 AI 真的可以操作設計文件\n",[334,675,673],{"__ignoreMap":332},[322,677,678],{},"所以：",[326,680,683],{"className":681,"code":682,"language":331,"meta":332},[329],"Skill\n=\n工作方法\n\n\nMCP\n=\n工具能力\n",[334,684,682],{"__ignoreMap":332},[322,686,687],{},"兩個解決的是不同問題。",[357,689],{},[360,691,693],{"id":692},"skill-和-mcp-也可以一起使用","Skill 和 MCP 也可以一起使用",[322,695,397],{},[326,697,700],{"className":698,"code":699,"language":331,"meta":332},[329],"Skill\n↓\n告訴 AI\n設計畫面時要怎麼做\n\n\nPencil MCP\n↓\n讓 AI\n真的可以操作設計畫面\n",[334,701,699],{"__ignoreMap":332},[322,703,704],{},"組合起來就可能變成：",[326,706,709],{"className":707,"code":708,"language":331,"meta":332},[329],"我提出需求\n↓\nAI 依照 Skill 的流程工作\n↓\n透過 MCP 操作設計工具\n↓\n完成設計\n",[334,710,708],{"__ignoreMap":332},[322,712,713],{},"但也不是用了 Skill 就一定要搭配 MCP。",[322,715,716],{},"很多工作只需要：",[326,718,721],{"className":719,"code":720,"language":331,"meta":332},[329],"AI\n+\nSkill\n+\n目前專案\n",[334,722,720],{"__ignoreMap":332},[322,724,725],{},"就可以完成。",[322,727,728],{},"只有真的需要操作其他工具時，才需要 MCP。",[357,730],{},[360,732,734],{"id":733},"mcp-不需要全部裝","MCP 不需要全部裝",[322,736,737],{},"知道 MCP 可以接很多工具之後，很容易產生：",[340,739,740],{},[322,741,742],{},"那是不是全部接起來比較方便？",[322,744,745],{},"其實沒有必要。",[322,747,397],{},[326,749,752],{"className":750,"code":751,"language":331,"meta":332},[329],"GitHub\nBrowser\nDatabase\n設計工具\n其他 API\n...\n",[334,753,751],{"__ignoreMap":332},[322,755,756],{},"不代表每個專案都需要。",[322,758,759],{},"比較自然的方式是：",[326,761,764],{"className":762,"code":763,"language":331,"meta":332},[329],"先正常使用 AI\n↓\n發現需要操作某個外部工具\n↓\n確認它有沒有適合的 MCP\n↓\n真的需要再接上\n",[334,765,763],{"__ignoreMap":332},[322,767,768],{},"像我目前有使用 Pencil MCP，就是因為確實有設計工具與 AI 協作的需求。",[322,770,771],{},"如果完全沒有 Database 操作需求，就沒有必要為了「看起來完整」再裝一個 Database MCP。",[357,773],{},[360,775,777],{"id":776},"mcp-也要注意權限","MCP 也要注意權限",[322,779,780],{},"因為 MCP 是把其他工具的能力提供給 AI，所以還是要注意：",[326,782,785],{"className":783,"code":784,"language":331,"meta":332},[329],"這個 MCP 可以做什麼？\n↓\n它可以讀什麼？\n↓\n它可以修改什麼？\n",[334,786,784],{"__ignoreMap":332},[322,788,789],{},"尤其如果 MCP 會接觸：",[326,791,794],{"className":792,"code":793,"language":331,"meta":332},[329],"帳號\nDatabase\nGitHub\n檔案\n第三方服務\n",[334,795,793],{"__ignoreMap":332},[322,797,798],{},"就更需要確認來源。",[322,800,801],{},"所以我目前會把原則保持得很簡單：",[340,803,804],{},[322,805,806],{},[353,807,808],{},"真的需要才安裝，而且優先使用來源清楚、可信任的 MCP。",[322,810,811],{},"不用因為某個 MCP 看起來功能很多就全部接上。",[357,813],{},[360,815,817],{"id":816},"rules-skills-agent-mcp-怎麼分","Rules \u002F Skills \u002F Agent \u002F MCP 怎麼分？",[322,819,820],{},"整理到這裡，可以先簡單記成：",[326,822,825],{"className":823,"code":824,"language":331,"meta":332},[329],"Rules\n↓\n工作時必須遵守什麼\n\n\nSkills\n↓\n某件事情應該怎麼做\n\n\nAgent \u002F Subagent\n↓\n誰負責做某一部分工作\n\n\nMCP\n↓\nAI 還可以使用哪些工具\n",[334,826,824],{"__ignoreMap":332},[322,828,397],{},[326,830,833],{"className":831,"code":832,"language":331,"meta":332},[329],"Rule\n↓\n不要任意加入新的 Dependency\n",[334,834,832],{"__ignoreMap":332},[326,836,839],{"className":837,"code":838,"language":331,"meta":332},[329],"Skill\n↓\n功能完成後要怎麼檢查與收尾\n",[334,840,838],{"__ignoreMap":332},[326,842,845],{"className":843,"code":844,"language":331,"meta":332},[329],"Subagent\n↓\n把某個獨立調查工作交出去\n",[334,846,844],{"__ignoreMap":332},[326,848,851],{"className":849,"code":850,"language":331,"meta":332},[329],"MCP\n↓\n讓 AI 可以操作 Pencil 等其他工具\n",[334,852,850],{"__ignoreMap":332},[322,854,855],{},"這樣我覺得比較容易區分。",[357,857],{},[360,859,860],{"id":860},"最後簡單整理",[322,862,863],{},"MCP：",[326,865,867],{"className":866,"code":370,"language":331,"meta":332},[329],[334,868,370],{"__ignoreMap":332},[322,870,871],{},"我目前會先把它理解成：",[340,873,874],{},[322,875,876],{},[353,877,878],{},"讓 AI 可以連接並使用其他工具的一種方式。",[322,880,881],{},"原本：",[326,883,886],{"className":884,"code":885,"language":331,"meta":332},[329],"AI\n↓\n目前專案\n",[334,887,885],{"__ignoreMap":332},[322,889,890],{},"加入 MCP 後：",[326,892,895],{"className":893,"code":894,"language":331,"meta":332},[329],"AI\n│\n├─ 目前專案\n├─ Browser\n├─ GitHub\n├─ Database\n├─ Pencil\n└─ 其他工具\n",[334,896,894],{"__ignoreMap":332},[322,898,899],{},"但不需要一開始就研究或安裝很多 MCP。",[322,901,759],{},[326,903,906],{"className":904,"code":905,"language":331,"meta":332},[329],"先正常使用 AI\n↓\n真的遇到外部工具需求\n↓\n再確認有沒有適合的 MCP\n↓\n有需要才加入\n",[334,907,905],{"__ignoreMap":332},[322,909,910],{},"我目前實際使用過 Pencil MCP 後，對 MCP 最直接的理解就是：",[340,912,913],{},[322,914,915],{},[353,916,917],{},"原本 AI 只能跟我討論設計，接上 MCP 後，它開始有能力直接操作設計工具。",[322,919,920],{},"其他像 GitHub、Database、Browser 等 MCP，等到真的有使用需求時，再針對那個工具進一步研究即可。",{"title":332,"searchDepth":922,"depth":922,"links":923},3,[924,926,927,928,929,931,932,933,934,935,936],{"id":362,"depth":925,"text":363},2,{"id":426,"depth":925,"text":427},{"id":479,"depth":925,"text":480},{"id":533,"depth":925,"text":534},{"id":594,"depth":925,"text":930},".pen 是什麼？",{"id":642,"depth":925,"text":643},{"id":692,"depth":925,"text":693},{"id":733,"depth":925,"text":734},{"id":776,"depth":925,"text":777},{"id":816,"depth":925,"text":817},{"id":860,"depth":925,"text":860},false,"md",null,{},true,"2026-09-09",[],{"title":281,"description":282},"posts\u002F20260909.mcp-basics",[230,284,231,232,285],"q3JjmxKbq51GwCmgBMMMAchMz6Qvxyzr3semrvzXmls",[949,952],{"title":288,"path":287,"stem":950,"description":289,"category":228,"publishedAt":951,"children":-1},"posts\u002F20260910.ai-coding-agent-concepts-summary","2026-09-10",{"title":274,"path":273,"stem":953,"description":275,"category":228,"publishedAt":954,"children":-1},"posts\u002F20260908.claude-codex-agents-subagents","2026-09-08",1791786900543]