【設計師的 AI 秘笈】程式小白也能懂！用 Cursor 從零搭建專屬 Design System Skill，讓 AI 自動寫出完美 UI

每次請 AI 寫網頁 UI，顏色和間距總是亂七八糟？本文專為非程式背景的新手設計，透過簡單的比喻與 3 個實戰步驟，教你如何用 Cursor 建立專屬的 Design System Skill 。讓 AI 自動記住你的設計語彙，大幅提升開發效率！

為什麼你需要「Design System Skill」？

身為剛接觸 Vibe Coding 的設計師或 PM，你一定遇過這種令人崩潰的場景：

滿懷期待地在 Cursor 的對話框輸入：「幫我寫一個登入頁面的按鈕」。幾秒鐘後，AI 確實吐出了一長串漂亮的 HTML 和 CSS。但是，當你興沖沖地把網頁打開一看——昨天的按鈕是圓角的，今天變成了直角；昨天的主題色是深藍色，今天卻給你一個螢光綠；甚至連滑鼠游標移過去的 Hover 效果都沒有。

這不是因為 AI 笨，而是因為你沒有給它「規則」。

從「單點溝通」升級到「系統化控制」

在我們之前的文章《Figma 結合 Claude Code 的開掛雙向工作流》中，我們探討了如何利用 MCP 打通 Figma 與程式碼之間的橋樑，讓 AI 直接讀取設計稿。

但，現實層面的問題是，如果你今天是有一套規則，想要方便快速的套用規則（例如 Google 的 Material 3 規範，或是你們公司通用的 Design Token），你就需要更底層的控制方法——這就是 Design System Skill 登場的時刻。

想像一下：聘請了一位失憶的「天才實習生」

只要我們把這些規則寫成一份「員工手冊（.cursorrules）」，並丟進這個實習生的辦公桌（專案資料夾）裡。從此以後，這位天才實習生每次動手寫代碼前，都會乖乖翻開這本手冊。你只需要說一句「給我一個主按鈕」，他就會精準無誤地套用標準色碼與完美間距。

這，就是讓 AI 從「指令執行機器」進化為「專屬設計工程師」的關鍵魔法。

我要用的工具是什麼？為什麼選它？

很多教學會用 VS Code 搭配複雜的 AI 外掛（如 Cline），但光是「設定開發環境」就足以讓沒有程式背景的新手崩潰。因此，我強烈建議直接使用 Cursor。它底層跟 VS Code 一模一樣，卻把 AI 深度整合進了編輯器，開箱即用。

對小白來說，選擇 Cursor 有兩大開掛優勢：

1. 原生文檔讀取（@Docs）： 你不需要手動複製貼上幾萬字的網頁設計規範。只要給它一個網址（例如 Material 3 官網），AI 就能瞬間爬取並讀懂整套系統。
2. 專屬大腦規則（.cursorrules）： 這是 Cursor 的殺手鐧，也是我們今天的主角「Design System Skill」。

用一句話解釋 .cursorrules：它就是你專案資料夾裡的「品牌設計白皮書」。

實戰教學：3 步無痛搭建你的第一套 Design Skill

還想看更多嗎？完整內容只對註冊用戶開放喔！
點下方的免費 Subscribe，馬上加入我們～

步驟一：建立基地與規範 (@Docs 的妙用)

可先在電腦桌面新增了一個名為 Design_Skill 的空資料夾。打開 Cursor，點擊畫面上的「Open Project」把這個空房間載入。

接著：

1. 按下快捷鍵 Cmd/Ctrl + L 叫出AI 對話框。
2. 在輸入框打上 @Docs，接著點擊選單中的 「Add new doc」。
3. 在這裡貼上 Material 3 的官方網址（https://m3.material.io/），，並用 @ 呼叫它。

按下確認後，你會看到 Cursor 跑出綠色的 Indexing（索引）進度條。這代表 AI 正在以一目十行的速度，把整本設計規範啃進腦袋裡，建立初步的記憶。

步驟二：產出design-system.md

官方文件通常動輒幾萬字，如果每次寫 Code 都要 AI 重新讀一遍，實在太沒效率。因此，我們要請 AI 幫忙提煉出一份只寫重點的「作弊紙」（Markdown 格式的文件）。

操作指令： 在對話框輸入以下 Prompt（建議使用英文，因為 AI 對程式與設計術語的理解最為精確）：

"Please analyze the @Material Design documentation and summarize the core design system into a structured guide.
Key focus areas: > 1. Core Principles (核心原則)
2. Color System (色彩系統定義)
3. Interaction Logic (交互邏輯，如 Hover/Pressed 的變化)
Please save it as a file named design-system.md in my workspace."

⚠️ 新手避坑指南（極度重要）：檔案怎麼不見了？ 很多剛接觸 Cursor 的朋友在這裡會遇到一個大魔王關卡：看著 AI 在聊天框裡劈哩啪啦寫完一堆漂亮規範，然後疑惑：「檔案呢？資料夾清單怎麼還是空的？」

請記住一個鐵則：在 Cursor 裡，「AI 說話」跟「AI 存檔」是兩回事。 當 AI 生成代碼塊後，你必須留意該區塊右上角或下方的 「Save」 或 「Keep」 按鈕。

唯有你親自點擊那個按鈕，這份 design-system.md 才會真正「具象化」，出現在你畫面最左側（點擊兩張紙圖示打開）的檔案總管裡。

步驟三：植入大腦，頒布規則

有了作弊紙還不夠，我們要讓這張紙變成這個資料夾裡不可違逆的「系統法律」。這就是封裝成 Skill 的最後一步。

操作指令： 繼續對著 AI 下達最後一道指令：

"Now, encapsulate the rules from design-system.md into a .cursorrules file. Instruct the AI to ALWAYS follow these color roles and interaction states when generating UI code in this project."

同樣地，等待 AI 生成完畢後，按下 「Save」 按鈕。

當你看到左側檔案清單出現了 .cursorrules 這個檔案時，恭喜你，已經制定好規則了。從這一刻起，這個資料夾裡的 AI 已經不再是那個會亂配色的菜鳥，而是被植入了你的設計系統 DNA、死心塌地遵守品牌規範的專屬工程師。

讓 AI 一鍵產出 Material 風格按鈕

規則建立好了，我們要把剛才辛苦建立的 .cursorrules 拿出來遛一遛。

實戰測試： 請於對話匡中，輸入這句話：

「幫我用 HTML/CSS 寫一個符合 Material 3 規範的登入按鈕，並包含 Hover 和 Pressed 的交互效果。」

你會看見什麼？

如果你沒設定 Skill，AI 可能會隨便給你一個藍底白字的按鈕。但在有 .cursorrules 的情況下，你會發現 AI 變聰明了：

1. 變數自動化： 它會自動使用 --m3-color-primary 這種你在規範中定義的變數名稱。
2. 細節滿分： 它會自動幫你寫好 transition: 200ms ease-in-out 的動態效果，甚至連按下時的微縮放（Scale）都幫你考慮到了。

FAQ：新手實作常見的 3 個卡關點

在我的實測與教學經驗中，程式小白最常在以下三個地方「原地打轉」，請務必筆記下來：

Q1：為什麼我左側的檔案清單找不到生成的 HTML？

A： 這通常是因為你還沒把檔案清單「拉出來」。請點擊視窗最左上角那兩張紙疊在一起的圖示（Explorer）。如果清單裡還是沒有 index.html，請檢查剛才 AI 寫完 Code 時，你有沒有按下 「Save」。

Q2：我可以同時套用多個設計系統嗎？

A： 建議一個資料夾（專案）只放一套 .cursorrules。AI 就像大腦，如果同時給它兩套法律（例如 Material Design 和 Ant Design），它會產生衝突。如果你有不同專案，請分別建立不同的資料夾來管理。

Q3：如果我改了 Figma 裡的設計，該怎麼更新 Skill？

A： 這是最棒的部分！你不需要重寫程式碼。你只需要把新的規範文字貼給 AI，請它更新 design-system.md 和 .cursorrules。存檔後，下次你請 AI 寫新的元件，它就會自動用「新版法律」來執行了。

結語：讓 AI 成為你的專屬設計工程師

看到這裡，你可能已經學會了如何讓 AI 寫出符合規範的代碼，但驚喜還沒結束！

在下一篇文章中，我將帶大家進入更高級的自動化領域：我們將揭秘如何利用這套搭好的 Design System Skill，結合 Figma MCP 連結 。只要輸入一個指令（例如：製作一個購物網站 Home Page），AI 就會自動打開你的 Figma，按照你的規範「畫」出每一個可編輯的元件，甚至連 Auto Layout 和交互動效都幫你設定好 ！

別讓你的設計規範只停留在文字，下週，我們一起見證 AI 如何幫你完成整個產品流程的驚喜。