[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-figma-opens-canvas-to-ai-agents-zh":3,"tags-figma-opens-canvas-to-ai-agents-zh":34,"related-lang-figma-opens-canvas-to-ai-agents-zh":49,"related-posts-figma-opens-canvas-to-ai-agents-zh":53,"series-tools-c9cc07b0-df41-413a-820a-75e66cf9df39":90},{"id":4,"title":5,"content":6,"summary":7,"source":8,"source_url":9,"author":10,"image_url":11,"keywords":12,"language":22,"translated_content":10,"views":23,"is_premium":24,"created_at":25,"updated_at":25,"cover_image":11,"published_at":26,"rewrite_status":27,"rewrite_error":10,"rewritten_from_id":28,"slug":29,"category":30,"related_article_id":31,"status":32,"google_indexed_at":33,"x_posted_at":10,"tweet_text":10,"title_rewritten_at":10,"title_original":10,"key_takeaways":10,"topic_cluster_id":10,"embedding":10,"is_canonical_seed":24},"c9cc07b0-df41-413a-820a-75e66cf9df39","Figma 把 AI 代理拉進畫布","\u003Cp>Figma 這次很直接。AI 代理可以直接寫進畫布。它透過 beta \u003Ca href=\"https:\u002F\u002Fwww.figma.com\u002Fmcp\" target=\"_blank\" rel=\"noopener\">MCP server\u003C\u002Fa> 開放這件事。\u003C\u002Fp>\u003Cp>更猛的是，這段 beta 目前免費。之後才會改成用量計費。講白了，Figma 給團隊一個試跑窗口，看代理到底能不能真的照著設計系統做事。\u003C\u002Fp>\u003Cp>這次更新還綁上 \u003Ca href=\"https:\u002F\u002Fwww.figma.com\u002Fblog\u002Fintroducing-our-mcp-server-bringing-figma-into-your-workflow\u002F\" target=\"_blank\" rel=\"noopener\">Figma MCP server\u003C\u002Fa> 的 skills。它們是 markdown 指令。用來告訴代理，怎麼在檔案、元件、變數裡工作。\u003C\u002Fp>\u003Ch2>Figma 到底開了什麼權限\u003C\u002Fh2>\u003Cp>這次不是只讀橋接。Figma 用新的 \u003Ccode>use_figma\u003C\u002Fcode> 工具，讓代理能直接建立和修改設計資產。它會吃團隊既有的元件和變數。這代表代理不必從零亂猜。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1775113457571-of9t.png\" alt=\"Figma 把 AI 代理拉進畫布\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>你可能會想問，這有什麼差。差很多。很多 AI 生成畫面看起來怪，就是因為它不知道團隊怎麼定義層級、間距、字級和互動規則。模型會畫。它不一定懂你的系統。\u003C\u002Fp>\u003Cp>Figma 的做法，是把畫布變成可編輯的上下文。不是把設計當成截圖。也不是把設計當成交付終點。代理可以直接在同一套結構裡動手。\u003C\u002Fp>\u003Cul>\u003Cli>beta 現在免費，之後會改成用量計費。\u003C\u002Fli>\u003Cli>可搭配 \u003Ca href=\"https:\u002F\u002Fclaude.ai\u002Fcode\" target=\"_blank\" rel=\"noopener\">Claude Code\u003C\u002Fa>、\u003Ca href=\"https:\u002F\u002Fopenai.com\u002Fcodex\" target=\"_blank\" rel=\"noopener\">Codex\u003C\u002Fa>、\u003Ca href=\"https:\u002F\u002Fcursor.com\" target=\"_blank\" rel=\"noopener\">Cursor\u003C\u002Fa>。\u003C\u002Fli>\u003Cli>Figma 說之後會補齊更多能力，先從圖片和自訂字型開始。\u003C\u002Fli>\u003Cli>範圍也涵蓋 \u003Ca href=\"https:\u002F\u002Fwww.figma.com\u002Ffigjam\u002F\" target=\"_blank\" rel=\"noopener\">FigJam\u003C\u002Fa>、\u003Ca href=\"https:\u002F\u002Fwww.figma.com\u002Ffigma-draw\u002F\" target=\"_blank\" rel=\"noopener\">Figma Draw\u003C\u002Fa>、\u003Ca href=\"https:\u002F\u002Fwww.figma.com\u002Fcode-connect\u002F\" target=\"_blank\" rel=\"noopener\">Code Connect\u003C\u002Fa>。\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>為什麼 skills 比新 API 更重要\u003C\u002Fh2>\u003Cp>這次最有意思的，不是傳輸層。是 skills。Figma 把它做成 markdown 檔。內容會定義代理該怎麼做事。步驟順序、規則、限制，都能寫進去。\u003C\u002Fp>\u003Cp>這聽起來很樸素，但很實用。因為代理就算看得到檔案，也還是要知道團隊怎麼看待層級、可讀性、無障礙、元件重用。skills 的價值，就是把這些知識變成可讀規則。\u003C\u002Fp>\u003Cp>Figma 也推了一個內建 skill，叫 \u003Ccode>\u002Ffigma-use\u003C\u002Fcode>。另外還有社群範例。內容包含元件生成、token 同步、間距規則、無障礙規格，還有多代理工作流。\u003C\u002Fp>\u003Cblockquote>“Teams at OpenAI use Figma to iterate, refine, and make decisions about how a product comes together,” says Ed Bayes, design lead at Codex. “Now, Codex can find and use all the important design context in Figma to help us build higher quality products more efficiently.”\u003C\u002Fblockquote>\u003Cp>這段話很直白。重點不是 AI 會不會畫。重點是它能不能找到正確上下文。沒有上下文，代理就只是在湊 UI。看起來像樣，實際上很空。\u003C\u002Fp>\u003Ch2>跟其他 AI 設計工具比，差在哪\u003C\u002Fh2>\u003Cp>很多 AI 設計工具是從零生圖。速度快。問題也很快出現。它們常常不知道 token、元件、可及性規範。結果就是一個看起來不錯，但很難落地的 \u003Ca href=\"\u002Fnews\u002Fmimosa-evolving-multi-agent-science-workflows-zh\">mo\u003C\u002Fa>ckup。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1775113474148-v4gn.png\" alt=\"Figma 把 AI 代理拉進畫布\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>Figma 的路線不一樣。它不是叫模型自己幻想一個介面。它是要模型在既有系統裡工作。這比較難，但也更接近真實產品團隊的日常。\u003C\u002Fp>\u003Cp>Figma 也提到舊的 \u003Ccode>generate_figma_design\u003C\u002Fcode> 工具。它能把 live app 或網站的 HTML 轉成可編輯的 Figma layers。新的 \u003Ccode>use_figma\u003C\u002Fcode> 更進一步。它能直接用團隊元件和變數去改設計。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>一般圖片生成：\u003C\u002Fstrong> 很快，但常和設計系統脫鉤。\u003C\u002Fli>\u003Cli>\u003Cstrong>Figma MCP + skills：\u003C\u002Fstrong> 設定較多，但能貼著真實元件和規範走。\u003C\u002Fli>\u003Cli>\u003Cstrong>Code-first 代理：\u003C\u002Fstrong> 寫程式很強，但常要補設計上下文。\u003C\u002Fli>\u003Cli>\u003Cstrong>人工流程：\u003C\u002Fstrong> 判斷最好，但重複改版很花時間。\u003C\u002Fli>\u003C\u002Ful>\u003Cp>還有一個現實面。Figma 說這套能力是原生接在 MCP server 上，不是單純掛個外掛。這對權限、檔案完整性、和行為可預測性都比較重要。企業團隊會在意這個，不是只看 demo 漂不漂亮。\u003C\u002Fp>\u003Ch2>對設計團隊和工程團隊的影響\u003C\u002Fh2>\u003Cp>如果你是設計師，這件事不是叫你下班。它是叫你把規則寫清楚。元件結構、變數命名、間距標準，這些會變得更重要。因為代理真的會去讀，也真的會去改。\u003C\u002Fp>\u003Cp>如果你是工程師，這會讓 c\u003Ca href=\"\u002Fnews\u002Fclaude-code-harness-engineering-design-zh\">ode\u003C\u002Fa> 和 canvas 的距離更短。Figma 說，團隊可以從 code、Figma、或 command line 開始，再在不同介面間切換。上下文不容易掉。這點很實際。\u003C\u002Fp>\u003Cp>如果你在做產品流程，問題就變成一個：你的設計規則夠不夠明確。規則寫得越清楚，代理越能幫忙。規則都藏在腦袋裡，那就只能一直人工補洞。\u003C\u002Fp>\u003Cp>Figma 也給了幾個例子，像 \u003Ccode>\u002Fcreate-voice\u003C\u002Fcode>、\u003Ccode>\u002Fapply-design-system\u003C\u002Fcode>、\u003Ccode>\u002Fsync-figma-token\u003C\u002Fcode>。這些不是炫技。它們是在處理重複工作。重複改字、重複套 token、重複對齊版型，這些才是日常。\u003C\u002Fp>\u003Ch2>產業脈絡：這波不是單點事件\u003C\u002Fh2>\u003Cp>Figma 這次踩進來的，其實是 AI 與工作流整合的大方向。過去一年，很多工具都在做同一件事。把模型從聊天框拉進真正的工作環境。像是編輯器、雲端文件、設計軟體、內部知識庫。\u003C\u002Fp>\u003Cp>原因很簡單。LLM 很會補字。可是真正的工作，不是補字而已。它還要懂結構、懂權限、懂版本、懂團隊慣例。MCP 這類協定，就是在補這個洞。它讓模型不只會說，還能碰得到資料和工具。\u003C\u002Fp>\u003Cp>從台灣團隊的角度看，這件事很實際。很多新創和產品團隊都在做 design system。也很多團隊同時用 Figma、GitHub、Cursor、\u003Ca href=\"\u002Fnews\u002Fclaude-code-source-leak-npm-sourcemap-zh\">Clau\u003C\u002Fa>de。若工具能共享上下文，來回溝通就少很多。少掉的不是一句話，是一堆修正工時。\u003C\u002Fp>\u003Cp>但我也不想講得太浪漫。代理一旦能直接改檔案，風險也會上來。權限控管、審核流程、版本回溯，這些都要跟上。否則代理不是幫忙，是幫你製造更多待辦事項。\u003C\u002Fp>\u003Ch2>接下來值得盯的事\u003C\u002Fh2>\u003Cp>Figma 說接下來會擴充圖片支援和自訂字型。它也會把 skills 做得更好分享。這代表設計流程可能會開始像套件一樣流通。不是只分享元件，連工作方法都能分享。\u003C\u002Fp>\u003Cp>我的判斷很直接。接下來 3 到 6 個月，真正重要的不是 demo 多炫。是團隊會不會拿它做重複任務。像是批次改文案、同步 token、補 accessibility 標記、更新多頁介面。這些才是能量化的地方。\u003C\u002Fp>\u003Cp>如果 Figma 能讓代理穩定改檔，還不把設計系統搞爛，那它就不只是多一個 AI 功能。它會變成設計流程裡的一個新入口。你覺得呢，你們團隊的設計規則，現在夠不夠讓代理直接照做？\u003C\u002Fp>","Figma 推出 beta MCP server，讓 AI 代理直接改畫布。搭配 skills 與設計系統脈絡，目標是讓輸出更貼近團隊規範。","www.figma.com","https:\u002F\u002Fwww.figma.com\u002Fblog\u002Fthe-figma-canvas-is-now-open-to-agents\u002F",null,"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1775113457571-of9t.png",[13,14,15,16,17,18,19,20,21],"Figma","MCP server","AI agents","設計系統","Claude Code","Cursor","Codex","skills","design workflow","zh",1,false,"2026-04-02T05:33:29.574869+00:00","2026-04-02T05:33:29.55+00:00","done","fcf9c303-927b-4eaf-9a24-e1bb85536c02","figma-opens-canvas-to-ai-agents-zh","tools","66f14a19-e09a-42ae-9216-f091e8ccd97d","published","2026-04-09T09:00:51.494+00:00",[35,37,39,40,42,44,46,47],{"name":14,"slug":36},"mcp-server",{"name":18,"slug":38},"cursor",{"name":16,"slug":16},{"name":17,"slug":41},"claude-code",{"name":19,"slug":43},"codex",{"name":21,"slug":45},"design-workflow",{"name":20,"slug":20},{"name":15,"slug":48},"ai-agents",{"id":31,"slug":50,"title":51,"language":52},"figma-opens-canvas-to-ai-agents-en","Figma Opens Its Canvas to AI Agents","en",[54,60,66,72,78,84],{"id":55,"slug":56,"title":57,"cover_image":58,"image_url":58,"created_at":59,"category":30},"d058a76f-6548-4135-8970-f3a97f255446","why-gemini-api-pricing-is-cheaper-than-it-looks-zh","為什麼 Gemini API 定價其實比看起來更便宜","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1778869845081-j4m7.png","2026-05-15T18:30:25.797639+00:00",{"id":61,"slug":62,"title":63,"cover_image":64,"image_url":64,"created_at":65,"category":30},"68e4be16-dc38-4524-a6ea-5ebe22a6c4fb","why-vidhub-huiyuan-hutong-bushi-quan-shebei-tongyong-zh","為什麼 VidHub 會員互通不是「買一次全設備通用」","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1778789450987-advz.png","2026-05-14T20:10:24.048988+00:00",{"id":67,"slug":68,"title":69,"cover_image":70,"image_url":70,"created_at":71,"category":30},"7a1e174f-746b-4e82-a0e3-b2475ab39747","why-buns-zig-to-rust-experiment-is-right-zh","為什麼 Bun 的 Zig-to-Rust 實驗是對的","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1778767879127-5dna.png","2026-05-14T14:10:26.886397+00:00",{"id":73,"slug":74,"title":75,"cover_image":76,"image_url":76,"created_at":77,"category":30},"e742fc73-5a65-4db3-ad17-88c99262ceb7","why-openai-api-pricing-is-product-strategy-zh","為什麼 OpenAI API 定價是產品策略，不是註腳","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1778749859485-chvz.png","2026-05-14T09:10:26.003818+00:00",{"id":79,"slug":80,"title":81,"cover_image":82,"image_url":82,"created_at":83,"category":30},"c757c5d8-eda9-45dc-9020-4b002f4d6237","why-claude-code-prompt-design-beats-ide-copilots-zh","為什麼 Claude Code 的提示設計贏過 IDE Copilot","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1778742645084-dao9.png","2026-05-14T07:10:29.371901+00:00",{"id":85,"slug":86,"title":87,"cover_image":88,"image_url":88,"created_at":89,"category":30},"4adef3ab-9f07-4970-91cf-77b8b581b348","why-databricks-model-serving-is-right-default-zh","為什麼 Databricks Model Serving 是生產推論的正確預設","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1778692245329-a2wt.png","2026-05-13T17:10:30.659153+00:00",[91,96,101,106,111,116,121,126,131,136],{"id":92,"slug":93,"title":94,"created_at":95},"de769291-4574-4c46-a76d-772bd99e6ec9","googles-biggest-gemini-launches-in-2026-zh","Google 2026 最大 Gemini 盤點","2026-03-26T07:26:39.21072+00:00",{"id":97,"slug":98,"title":99,"created_at":100},"855cd52f-6fab-46cc-a7c1-42195e8a0de4","surepath-real-time-mcp-policy-controls-zh","SurePath 推出即時 MCP 政策控管","2026-03-26T07:57:40.77233+00:00",{"id":102,"slug":103,"title":104,"created_at":105},"9b19ab54-edef-4dbd-9ce4-a51e4bae4ebb","mcp-in-2026-the-ai-tool-layer-teams-use-zh","2026 年 MCP：團隊真的在用的 AI 工具層","2026-03-26T08:01:46.589694+00:00",{"id":107,"slug":108,"title":109,"created_at":110},"af9c46c3-7a28-410b-9f04-32b3de30a68c","prompting-in-2026-what-actually-works-zh","2026 提示工程，真正有用的是什麼","2026-03-26T08:08:12.453028+00:00",{"id":112,"slug":113,"title":114,"created_at":115},"05553086-6ed0-4758-81fd-6cab24b575e0","garry-tan-open-sources-claude-code-toolkit-zh","Garry Tan 開源 Claude Code 工具包","2026-03-26T08:26:20.068737+00:00",{"id":117,"slug":118,"title":119,"created_at":120},"042a73a2-18a2-433d-9e8f-9802b9559aac","github-ai-projects-to-watch-in-2026-zh","2026 必看 20 個 GitHub AI 專案","2026-03-26T08:28:09.619964+00:00",{"id":122,"slug":123,"title":124,"created_at":125},"a5f94120-ac0d-4483-9a8b-63590071ac6a","claude-code-vs-cursor-2026-zh","Claude Code 與 Cursor 深度對比：202…","2026-03-26T13:27:14.279193+00:00",{"id":127,"slug":128,"title":129,"created_at":130},"0975afa1-e0c7-4130-a20d-d890eaed995e","practical-github-guide-learning-ml-2026-zh","2026 機器學習入門 GitHub 實用指南","2026-03-27T01:16:49.712576+00:00",{"id":132,"slug":133,"title":134,"created_at":135},"bfdb467a-290f-4a80-b3a9-6f081afb6dff","aiml-2026-student-ai-ml-lab-repo-review-zh","AIML-2026：像課綱的學生實驗 Repo","2026-03-27T01:21:51.467798+00:00",{"id":137,"slug":138,"title":139,"created_at":140},"80cabc3e-09fc-4ff5-8f07-b8d68f5ae545","ai-trending-github-repos-and-research-feeds-zh","AI Trending：把 AI 資源收成一張表","2026-03-27T01:31:35.262183+00:00"]