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

每次請 AI 寫網頁代碼，UI 的顏色和間距總是像「抽盲盒」一樣難以預測？其實，你只需要幫 AI 建立一份「專屬設計說明書」。這篇文章專為非程式背景的設計師與 PM 打造，將透過 3 個簡單步驟，教你如何利用 Cursor 的「Design System Skill 」，讓 AI 牢牢記住你的 Material Design 或 Figma 設計規範。告別反覆來回修改的痛點，新手也能讓 AI 一鍵產出完美對齊設計稿的網頁組件！

Joanna Chang

19 Mar 2026 — 10 min read

用 Cursor 從零搭建專屬 Design System Skill

每次請 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 有兩大開掛優勢：

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

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