Figma agent 現在能自己寫 skill:把設計師的判斷,變成可以傳下去的一句指令

skill 是一份裝著你判斷的 markdown。Figma 讓你直接在畫布上跟 agent 一起寫,把「我覺得這樣比較好」的每個小決定,變成能傳給整隊、還能跨工具跑的個人資產。

Try These 10 Skills—And Show Off Your Own | Figma 官方文章封面

你腦子裡有一套只有自己知道的規矩。這個按鈕的緩動要帶一點 overshoot、這一層命名要照這個規則走、這個元件交付前一定要先補上所有 error 跟 empty state。這些判斷跟了你好幾年,卻只活在你自己的手上。換一個同事接手同一份檔案,出來的東西就是差一點味道。

Figma 這次做的事,是讓 agent 能把這套判斷收進一份 markdown 檔——他們叫它 skill。寫一次,整個團隊叫一個 /指令 就能用。設計師 Miggi Cardona 從社群裡挑了 10 個他最喜歡的,順便公布:從今天起,你可以直接在 Figma 裡跟 agent 一起把自己的 skill 寫出來。

SOURCE · FIGMA BLOG
Try These 10 Skills—And Show Off Your Own
Now you can author skills for our agent, directly in Figma, to put your point of view to work. Here are 10 of our favorites to get you started.
By Miggi Cardona, Designer Advocate · Figma · 2026.08.13
figma.com/blog →
目錄 · CONTENTS
01skill 是什麼:一份裝著你判斷的 markdown
02為什麼這件事更適合設計師,不是工程師
03在 Figma 裡讓 agent 幫你寫 skill 的三步
0410 個社群 skill:從 x-ray 到 usability 訪談稿
05一個 skill 就能解鎖一整條工作流
06同一份 skill,也能接第三方 agent
Community Skills · 六個代表作
/find-animation-opportunities
掃過畫面,指出哪裡該有動態、哪裡動太多,連數值都給你(Emil Kowalski, Linear)。
/component-handoff
選一個元件,直接在畫布上長出一份含變體、狀態、anatomy 的交付文件(Mauro Berteri, Itti Digital)。
/create-color
把每個 fill、stroke、shadow 對回 design token,抓出寫死的顏色(Ian Guisard, Uber)。
/analyze-components
爬一頁抓出孤兒元件、重複、命名錯誤,順手複製主件、換掉每個 instance(Amy Ha, Walmart)。
/ui-state-expander
把一張 happy-path 稿展開成 loading、empty、error、disabled 全套狀態(Linda Ojo, Paystack)。
/usability-test-guide
看過一條測試流程,在每個 frame 旁邊補上情境化的主持訪談題(Neha Kodi, Figma)。
01 / 06

skill 是什麼:一份裝著你判斷的 markdown

按 Figma 的說法,skill 就是一份純文字的 markdown 檔,用來跟 agent 一起工作。它長得像一串排好順序的指令、或是一段引導式的 prompt。第一眼看,很容易以為這是工程師的東西——排好步驟、寫成檔案,這些聽起來就很像寫程式。

真正的用處在另一邊。設計師每天都在做判斷:這裡該留多少呼吸感、這個狀態該怎麼收、這條動態該用哪種緩動。這些判斷平常說不清楚、也交不出去,寫進一份 skill 之後,就變成一個可以被叫用、被同事沿用的東西。

TRY THIS · 動手一次
先把腦中的一條規矩寫下來
挑一件你每次都會檢查、但從沒跟人講清楚的事——例如「交付前每個互動元件都要有 hover、focus、disabled」。用三四句話把它寫成步驟,這就是一份 skill 的雛形。
Try These 10 Skills—And Show Off Your Own | Figma 官方文章配圖
skill 是純文字 markdown,裝的是判斷與流程——Figma 官方配圖
02 / 06

為什麼這件事更適合設計師,不是工程師

工程師寫規則,靠的是明確的邏輯:輸入什麼、回傳什麼。設計師手上的東西更難言傳——它是一種「看到就知道對不對」的品味,藏在無數個小決定裡。skill 好用的地方,正是它擅長收這種模糊的判斷。

文章裡的例子很能說明。Jakub Krehel 把自己對介面工藝的一整套標準寫成 /better-interface,涵蓋字級、排版、無障礙、動態、產品文案。他的說法是,好產品跟頂級產品之間的差距,往往不是單一一件事,是一堆容易被忽略的小地方疊起來的。這種東西過去只能靠資深的人一個個盯,現在能寫成一份檔案讓 agent 幫你盯。

TRY THIS · 動手一次
把「我會 review 什麼」列成一張清單
回想上一次你幫別人看稿,你到底檢查了哪幾件事。對比度、觸控區大小、文案語氣、狀態齊不齊。把這張清單交給 agent,它就能對每份新稿跑同一套標準。
03 / 06

在 Figma 裡讓 agent 幫你寫 skill 的三步

過去 skill 得自己手刻,現在 Figma 把這步接進了畫布。從今天起,你可以直接請 agent 幫你把 skill 寫出來:拿一個設計 frame 當參考、或給它一組你自己的步驟跟準則,它就會草擬一份給你。

草稿出來後先預覽、丟進 chat 試跑,再一路調——改步驟、改格式、請它給建議,或直接打開 markdown 編輯器手動改。整個過程不用離開 Figma,也不用先會寫程式。

這條工作流 · 三個節拍
01
給參考
拿一個 frame 當範例,或直接給 agent 你的步驟與規則
02
預覽試跑
agent 草擬後先看一次,丟進 chat 實際跑跑看
03
邊測邊改
改步驟、改格式,或打開 markdown 編輯器手動微調
Figma agent skills 官方配圖
同一套判斷,寫一次就能被整個團隊重複叫用——Figma 官方配圖
04 / 06

10 個社群 skill:從 x-ray 到 usability 訪談稿

Miggi 翻了 Figma Community,挑出 10 個他最喜歡的。範圍很廣:Adele Ix 的 /xray-scan 把照片變成 X 光片般的透視圖;Mallory Dean 的 /camera-pan-and-zoom 幫你搭一組虛擬攝影機,做出運鏡般的 pan、zoom、roll,卻不用動到任何 frame。

更偏日常的也不少。Joey Primiani 的 /superfuture-design-review 把一份檔案照 UX 啟發式、無障礙、視覺層級跑一遍,再用紅黃綠三色分級:紅色是阻擋、黃色是建議修、綠色是已經做對的。上面那張圖表列了其中六個,每一個背後都是一位設計師把自己的做事方法打包了出來。

TRY THIS · 動手一次
先借別人的 skill 跑一次
還沒想好要寫什麼,就先從 Community 抓一個現成的來用。拿 `/ui-state-expander` 對你手上一張 happy-path 稿跑跑看,感受一下一份 skill 能幫你補多少東西。
05 / 06

一個 skill 就能解鎖一整條工作流

Miggi 講了自己的 aha moment。他在做一支 motion 教學時,替 agent 寫了一份 skill,把他慣用的緩動曲線套到手上的 keyframe,取名 /ease-like-miggi。後來團隊在各自的檔案裡叫這個指令,做出來的動態就都帶著他的手感。到這一刻他才真正買單。

這件事的份量在於:一份 skill 傳出去的不是一個檔案,是一個人的做法。緩動這種很吃直覺的東西,過去只能靠帶人、靠看久了才學得起來,現在能濃縮成一句 /指令 直接複製給別人。

TRY THIS · 動手一次
把你最常被問的那件事寫成 skill
團隊裡有沒有一件事同事老是來問你?「這個間距抓多少」「這種按鈕怎麼命名」。那件事,就是最值得寫成 skill 的第一個候選。
06 / 06

同一份 skill,也能接第三方 agent

skill 不綁死在 Figma 內。Miggi 特別提到,很多 skill 也能透過 Figma 的 MCP server 在第三方 agent 裡跑,Figma 也在 GitHub 開了一個 repo,專門放給 MCP server 用的 skill。

對正在把 AI 塞進工作流的設計師,這一點很關鍵。你在 Figma 裡累積的判斷,不會只留在 Figma。同一份 markdown,能跟著你到別的 agent、別的工具,變成一套跨環境都認得的個人資產。這也是 Figma design agent 目前開放的範圍:Professional、Organization、Enterprise 方案的 Full seat 使用者能在 open beta 用,beta 期間免費。

整體觀察

把這篇放在這一兩年的脈絡裡看,方向很清楚。當 agent 讓做東西這件事變便宜,值錢的就不再是「會不會操作工具」,而是「你有什麼判斷值得被複製」。skill 剛好把後者變成一個可以打包、可以傳遞、可以跨工具的東西。

對還在學 Figma 的人來說,這反而是個好消息。你不用先變成十年經驗的資深設計師,才有東西能沉澱。你今天每一次「我覺得這樣比較好」的小決定,只要寫下來,就是一份能一直長大的資產。

“I eventually realized the checklist in my head should be a skill anyone, human or agent, can run.”
— Linda Ojo, Designer, Paystack
KEY POINTS · 重點整理
skill 是一份純文字 markdown,用來把設計師難言傳的判斷收成可叫用的 `/指令`。
從今天起可直接在 Figma 裡跟 agent 一起寫 skill:給參考、預覽試跑、邊測邊改三步。
Miggi 從社群挑了 10 個,涵蓋 x-ray、運鏡、元件交付、狀態展開、design review、usability 訪談稿。
一份 skill 傳的不是檔案,是一個人的做法——`/ease-like-miggi` 讓整隊的動態都帶上同一種手感。
skill 也能透過 Figma MCP server 在第三方 agent 跑,判斷力變成跨工具的個人資產。
100 種 Figma 設計的方法|UI/UX 線上課程
FIGMA 全攻略
skill 能收住你的判斷,前提是你先有一套扎實的設計判斷
從元件命名、design token 到互動狀態,把值得寫進 skill 的那套判斷力先練起來。
AI 覺醒設計應用攻略|RAR 設計攻略訂閱方案
AIWAKEN 訂閱制
AI 覺醒設計應用攻略
✦ AI 工具實測與工作流分享
✦ 設計師角度的 Prompt 技巧
✦ 每週精選 AI × 設計新知