Cursor 給設計師。

Cursor 到底是什麼

Cursor 是 Anysphere 打造的 AI 優先程式碼編輯器。它是 VS Code 的一個 fork，所以保留了熟悉的編輯器、擴充套件和快捷鍵，但把整個工作流圍繞一個 AI agent 重建——這個 agent 能讀懂你的整個專案、跨多檔案編輯、執行命令，並和你一起在迴路裡迭代。

對設計工作而言，關鍵的幾個能力是：Agent 模式（你描述想要的結果，Cursor 規劃並跨檔案編輯）、用於快速微調的行內編輯與 Tab 補全、讓你不離開視窗就能看到執行中 UI 的編輯器內建預覽，以及讓它能拉入外部上下文（比如一個實時 Figma 檔案）的 MCP 支援。

• 專案規則: Cursor 會讀取專案指令檔案——`.cursor/rules` 下納入版本管理的 `.mdc` 規則，以及一個純文字 `AGENTS.md`——你可以把設計約定寫在 agent 每次都會讀到的地方。
• 模型: Cursor 在模型上很靈活：訂閱自帶前沿模型，也支援用你自己的模型金鑰（BYOK），所以同一套編輯器工作流背後用哪臺引擎由你定。
• MCP: 它支援 Model Context Protocol，外部 server——最相關的就是 Figma MCP server——可以成為 agent 的一等上下文。

• 廠商：Anysphere
• 憑證：Cursor 賬號 / 訂閱（Hobby / Pro / Business）或你自己的模型金鑰（BYOK）
• 形態：AI 優先的程式碼編輯器（VS Code fork），內建 agent 與預覽

為什麼 Cursor 擅長做設計

Cursor 在設計上的優勢不是某個單一功能，而是“邊寫邊看”這條迴路的緊湊度。有三點讓它更像一個設計工具，而不是一個泛泛的程式碼生成器。

• 緊湊的“邊迭代邊看”迴路: 你給出提示，Cursor 跨檔案編輯，編輯器內建預覽立刻渲染出結果——於是你能在幾秒內調整間距、層級和動效，而不必在另一個終端和瀏覽器之間來回切換。
• 直接的視覺化編輯: 除了對話，Cursor 還允許你在預覽裡選中元素、直接微調樣式，讓小的視覺修正更像設計編輯、而非翻程式碼考古。
• 專案規則與 MCP 上下文: 有了 `.cursor/rules`（或 `AGENTS.md`）和 Figma MCP server，agent 是對著你的 tokens、元件和真實設計規格在工作，而不是靠猜。

結論和每個 agent 教給我們的一樣：Cursor 預設並沒有審美。只有當你給它約束——一套設計系統、一個審美 skill、具體的參考——它才能產出好設計。Open Design 打包的正是這些輸入，這也是兩者天然契合的原因（下文詳述）。

從零把 Cursor 配置成能做設計

下面是從一臺乾淨機器，到一個能對著你的設計系統構建、預覽並驗證 UI 的 Cursor 的完整路徑。

1. 從 cursor.com 安裝 Cursor，用 Cursor 賬號登入，或在設定裡配置你自己的模型金鑰（BYOK）。
2. 開啟你的專案，在對話 / Agent 面板裡選一個模型。
3. 加專案規則：用 `.cursor/rules/*.mdc` 寫結構化、按 glob 作用域生效的約定，或用一個純文字 `AGENTS.md` 寫簡單可讀的指令。
4. 接入 Figma MCP server（可選），讓 agent 能讀取實時設計上下文。
5. 啟動你的 dev server，用編輯器內建預覽邊迭代邊看、邊驗證 UI。

一份最簡的專案規則檔案，就能讓 agent 對著品牌做設計、而不是退回到一個泛泛的樣子。把它放在 Cursor 每次都會讀到的地方：

# .cursor/rules/design.mdc
---
description: Project design conventions
alwaysApply: true
---

- 複用已有的 design-system tokens 和元件；不要寫死 hex 或間距。
- 最多兩種字型、一個強調色。
- 品牌優先的層級；剋制的動效。不要 hero card，不要過大的圓角。
- 預設做響應式；收尾前先在預覽裡驗證桌面端和移動端。

• 把設計規則寫下來: 把你的 tokens、基礎元件和約定放進 `.cursor/rules` 或 `AGENTS.md`，並讓 Cursor 指向它們，這樣產出會貼合品牌、而不是退回到泛泛的樣子。
• 讓提示保持小而聚焦: Cursor 的緊湊迴路偏愛聚焦的請求——一次只迭代一個元件或一種狀態，每一輪之間都盯著預覽看。

從預覽到 UI 的工作流

用 Cursor 做設計，槓桿最高的迴路就是把一張參考變成能跑、且響應式的 UI，並在編輯器裡一直盯著實時預覽迭代到匹配為止——而不是靠猜。

1. 從你手上最清晰的視覺參考開始——並且要包含多種狀態（桌面與移動、hover、空態、載入態），而不只是一張主視覺。
2. 提示要具體；含糊的提示只會產出泛泛的 UI。
3. 準備好設計系統，並告訴 Cursor tokens 和標準基礎元件都在哪裡。
4. 讓編輯器內建預覽開著、dev server 跑著，這樣每次編輯都能在你關心的斷點上立刻渲染出來。
5. 透過把渲染出的 UI 和參考反覆比對來迭代——小的視覺修正就直接在預覽裡選中元素來調。

把圖片附到對話裡來喂參考，然後用具體約束給出提示：

用 React + Vite + Tailwind + TypeScript 實現這個設計。
複用我已有的 design-system 元件和 tokens。
匹配間距、佈局和層級；做成響應式。
預覽一直開著——驗證桌面端和移動端都和參考一致，
迭代到一致為止。

好的迭代就提交，壞的就回退（回退時告訴 Cursor 一聲），讓每一輪都建立在乾淨的基礎上——這是讓任何 agent 迴路不跑偏的同一條紀律。

Cursor + Figma：經 MCP 的設計 ↔ 程式碼往返

Cursor 透過官方的 Figma MCP server 連線 Figma，讓 agent 對一個實時 Figma 檔案有結構化訪問，而不是隻拿到一張扁平截圖。這就把交接裡的猜測成分去掉了。

• 設計 → 程式碼: 在 Figma 裡複製某個 frame 的連結，粘進 Cursor，讓它去實現這個設計。MCP server 暴露的是真實的設計上下文——元件、變數、佈局資料、tokens——所以生成的程式碼是貼合原始檔的，而不是近似。
• 保持對齊: 只要在 Figma 裡一致地使用設計 tokens、樣式和元件（有 Code Connect 時用上），Cursor 的產出就會對映到你真實的設計系統，而不是重新發明一套基礎元件。

遠端 Figma MCP server 配一次，就能作為一等上下文供 Cursor 使用。由於 MCP 是開放標準，同一個 server 可以在 Cursor、Claude Code、Codex 和 VS Code 之間複用——這正是 Open Design 生來要去編排的那種可移植、多 agent 能力。

Cursor vs Codex vs Claude Code：做設計怎麼選

做設計沒有唯一贏家——每個 agent 各有所長，有經驗的團隊會把它們疊著用。一個公允的總結：

社群反覆得出的結論是：審美來自人。三者在沒有 skill、參考和約束時都會退回到一個泛泛的樣子。那才是真正要解決的問題——而它是“設計工具”形狀的，不是“模型”形狀的。

常見坑，以及如何避開“AI 味”觀感

對 Cursor 生成設計最常見的抱怨，是它看著很泛——柔和漸變、懸浮面板、過大的圓角、誇張陰影，一股“Inter 字型加紫色”的味道，“一看就是 AI 做的”。其他被反映的問題還包括移動端佈局錯亂、指令文字洩漏進 UI 文案裡。

• 加一個設計 skill: 一個精選的審美 skill 會逼 Cursor 選定一個真實方向，而不是用預設那套。
• 用預覽來驗證: 在編輯器內建預覽裡跨斷點渲染並自檢，這樣佈局就不會在移動端悄悄崩掉。
• 提供 tokens 和參考: 真實的設計 tokens 和參考截圖，是對產出質量影響最大的那個槓桿。
• 把規則寫進 `.cursor/rules`: 把“不要 hero card、最多兩種字型、品牌優先層級”這類規則，放在 agent 每次都會讀到的地方。

注意到沒有：每一條緩解措施都是在給 agent 一份精選的設計上下文。逐個專案、用手去維護這份上下文，正是 Open Design 幫你省掉的苦活。

在 Open Design 裡用 Cursor 做設計

Open Design 就是上面這套工作流一直在要的那一層開源設計層。它把 Cursor 當作一等介面卡，外面裹上一個精選的 skill 與 design-system 庫、一條結構化的渲染流水線，以及一個本地桌面端 UI——讓那份讓 Cursor 變好用的設計上下文，從第一次執行就在那兒，而不是每次都手工拼。

1. 安裝 Open Design，選 Cursor 作為你的 agent。
2. 用你的 Cursor 賬號或你自己的模型金鑰（BYOK）認證——憑證留在你的機器上，絕不經我們代理。
3. 挑一套設計系統和一個 skill，然後生成審美一致的演示稿、原型和落地頁。
4. 每一份產物和 DESIGN.md 都存在你自己的 repo 裡，而不是某個託管雲。

同一個 Cursor agent、同一把金鑰——外面再加一套真實、可移植、開源的設計工作流。它本地優先、Apache-2.0 授權，所以你的工作和憑證沒有任何東西會離開你的機器。

常見問題

1. 01 Cursor 真的能做設計嗎？ +

   能——只要上下文裡有一個設計 skill、一套設計系統和真實參考圖，Cursor 就能產出生產級、響應式的 UI，而它的編輯器內建預覽讓你能在視覺上驗證並打磨。缺了這份上下文，它就容易退回到泛泛的樣子，而這正是 Open Design 補齊的缺口。

2. 02 這是 Cursor 官方產品嗎？ +

   不是。Open Design 是一個獨立的開源專案，把 Cursor 作為 agent 整合進來。它用一個本地優先、開源的 skill 與 design-system 庫來補充 Cursor。

3. 03 用 Cursor 做設計需要 Cursor 訂閱嗎？ +

   你可以用 Cursor 賬號 / 訂閱，也可以用自己的模型金鑰（BYOK）。無論哪種方式，Open Design 都不會代理你的憑證——它們由你的 agent 直接使用。

4. 04 前端設計選 Cursor 還是 Claude Code？ +

   兩者都很強。Claude Code 以具體、懂程式碼庫的設計決策著稱；Cursor 的優勢是編輯器裡“邊寫邊看”的緊湊迴路加實時預覽。很多團隊兩個都用——Open Design 讓你切換 agent 時無需改動設計工作流。

5. 05 怎麼把 Cursor 連到 Figma？ +

   在 Cursor 里加上官方 Figma MCP server，然後把一個 Figma frame 連結粘進對話，讓 Cursor 去實現它。該 server 暴露真實的元件、變數和佈局資料，讓生成的程式碼貼合源設計。

6. 06 怎麼避開泛泛的“AI 味”觀感？ +

   加一個設計 skill、提供真實的設計 tokens 和參考截圖、把品牌規則寫進 `.cursor/rules` 或 `AGENTS.md`，並在預覽裡跨斷點驗證。Open Design 把這些做成一個精選庫，讓你省掉逐專案的搭建。

7. 07 Open Design 和 Cursor 或 Anysphere 有關聯嗎？ +

   沒有。Cursor 是 Anysphere 的產品；Open Design 是一個獨立的開源專案，把它作為一等介面卡來支援。Cursor 和 Anysphere 是 Anysphere, Inc. 的商標。

8. 08 我的檔案和憑證安全嗎？ +

   安全——Open Design 本地優先。你的檔案、產物和 DESIGN.md 都留在你自己的 repo 裡，你的 Cursor 或模型憑證由你的 agent 直接使用，絕不經 Open Design 的伺服器中轉。