這個vibe design工具，可能是我見過最接近"設計代碼一體化"的存在
整理版優先睇
Paper 讓 AI Agent 直接讀寫設計文件，實現設計與代碼雙向打通，MCP 功能可同步設計系統、使用真實內容、生成網站代碼。
大家好，我係朝朝。之前我測評完 Vibe Design 工具，有讀者問我有冇設計同代碼雙向打通嘅工具。我話有，今日重點介紹 Paper。Paper 唔係普通嘅 AI 生成工具，而係可以讓 AI Agent 直接讀寫你嘅設計文件，設計可以直接變代碼，代碼都可以反寫回設計。呢個概念好激進，我用咗一日時間徹底試勻佢嘅 MCP 功能。
MCP 即係 Model Context Protocol，一個讓 LLM 訪問你數據嘅認證 API。透過 MCP，Agent 可以讀取設計、修改設計、從 Figma 同步設計系統、從 Notion 拉真實內容，甚至直接將設計生成 React+Tailwind 網站。我逐個場景測試咗：從 Figma 同步顏色同文字樣式大約 1 分鐘，但有注意事項；用 Notion 真實內容替換佔位符，仲可以翻譯成多語言；設計變網站，我用一個 hero section，3 分鐘就生成本地項目，結構基本還原。
整體結論：Paper 唔係畀新手嘅工具，你要識設計又識代碼先玩得轉。佢最適合設計師同開發者深度協作嘅團隊，或者需要設計同代碼雙向同步嘅項目。如果你係呢類人，呢個工具可能會顛覆你嘅工作流程。
- Paper 嘅核心係 MCP，讓 AI Agent 直接讀取同修改設計文件，唔使每次重新描述需求，節省大量時間。
- 可以從 Figma 同步設計系統（顏色、文字樣式），但要注意 SVG fills 會變成圖片、spacer 會被忽略、代碼組件可能失敗。
- 可以從 Notion 拉真實內容替換佔位符，仲可以翻譯成多語言，測試設計嘅適應性。
- 設計可以直接生成 React+Tailwind 代碼，建議用 flex layout 同從小 frame 開始，方便 Agent 理解。
- Paper 唔適合新手，需要同時識設計同代碼，最適合設計師+開發者協作團隊，或者需要雙向同步嘅項目。
Paper 係咩？AI Agent 直接讀寫設計文件
Paper 嘅官方標語係『A real space to design in the age of agents』——智能體時代嘅真實設計空間。佢同其他 Vibe Design 工具最大嘅分別係：其他工具係『你→AI→設計』，而 Paper 係『AI Agent ↔ 設計文件』，Agent 可以直接讀取你之前嘅設計，理解你嘅風格，然後喺呢個基礎上修改。
AI Agent 直接讀寫設計文件
「AI Agent ↔ 設計文件」
MCP 核心功能一覽
MCP 即係 Model Context Protocol，一個讓 LLM 訪問你數據嘅認證 API。透過 MCP，Agent 可以做以下幾件事：
- 1 Agent 能讀取你嘅設計，將設計文件作為上下文
- 2 Agent 能修改你嘅設計，用自然語言命令佢畫
- 3 從 Figma 同步設計系統——顏色、文字樣式直接拉過嚟，唔使重新定義
- 4 從 Notion 拉真實內容，唔再用佔位符
- 5 設計直接變網站——揀一個 frame，直接生成 React+Tailwind 代碼
MCP = Model Context Protocol，一個讓LLM訪問你數據嘅認證API
實戰測試：四個場景報告
第一個場景係從 Figma 同步設計系統。只要你喺 Figma 建立好顏色變量同文字樣式，打開 Paper 同 Figma 都連接 MCP，然後叫 Agent：『create a design system in Paper that matches the Figma file』，大約 1 分鐘就同步完。
- 同步顏色變量同文字樣式，大概 1 分鐘
- 注意：SVG fills 會變成圖片，spacer 會被忽略，代碼組件可能同步失敗
- 大型文件建議分批處理
第二個場景係用真實內容（Notion）。連上 Notion MCP 後，揀一個區域，叫 Agent 將 Notion 數據庫嘅內容同步過嚟，唔再用 Lorem Ipsum。仲可以叫 Agent 翻譯成唔同語言，測試多語言設計。
- 拉真實客戶評價
- 翻譯成多語言測試
第三個場景係設計直接變網站，呢個最離譜。喺 Paper 裏揀一個 frame（建議用 flex layout），叫 Agent 根據設計加入響應式斷點，佢就會讀取設計、創建本地項目、生成 React+Tailwind 代碼、運行 npm run dev，然後畀你一個網址。
- 建議設計用 flex layout，方便 Agent 理解
- 從小 frame 開始，唔好一次搞整站
- 記得用 git 保存版本
第四個場景係從 0-1 設計頁面。作者測試太多觸發限額，結果寫唔入畫布，但 Agent 竟然仲用 HTML 實現咗。另外仲有個 Snapshot 插件，可以將任意網頁元素截圖到 Paper，方便參考競品設計。但係動效同複雜元素就摳唔到。
同步設計系統
用真實內容
設計直接變網站
從 0-1 設計
Snapshot 插件
適合邊個？真實使用感受
用咗一星期，我覺得 Paper 唔係畀新手嘅。你要識設計，又要識代碼，先玩得轉。佢最適合設計師+開發者深度協作嘅團隊，或者需要設計同代碼雙向同步嘅項目。
唔係畀新手嘅
大家好，我係朝朝。
上次評測完Vibe Design工具，後台有人問我：有冇嗰種設計同代碼可以雙向打通嘅工具？
我話有，仲唔止一個。
今日重點講一個：Paper。
佢唔係嗰種「你描述需求，佢幫你生成一個設計」嘅工具。佢做嘅嘢更加激進——讓你嘅AI Agent直接讀寫你嘅設計文件，設計可以直接變成代碼，代碼都可以反寫返去設計。
聽起嚟有啲玄。我用咗一日，將佢嘅MCP功能摸咗個透。今日將真實體驗分享出嚟。
Paper係咩？
一句講曬：一個可以同AI Agent深度綁定嘅設計工具。
官網slogan係「A real space to design in the age of agents」——智能體時代嘅真實設計空間。
佢同其他工具最大嘅分別係：其他工具係「你→AI→設計」，佢係「AI Agent↔設計文件」。
咩意思呢？
其他工具，你每次都要重新描述需求。Paper唔一樣——你可以讓Agent直接讀取你之前嘅設計，理解你嘅風格，然後喺呢個基礎上改。
而且佢基於Web技術。咩意思呢？佢本質上係一個DOM結構，LLM可以直接讀得明。呢個就好恐怖啦——Agent唔係「估」你嘅設計，而係真係「理解」你嘅設計。
MCP到底可以做啲咩？
先解釋嚇MCP係咩。
MCP = Model Context Protocol。你可以理解為，一個讓LLM可以訪問你數據嘅「認證API」。
喺Paper入面，MCP可以讓你做呢幾件事：
- 1.Agent可以讀你嘅設計 - 將你設計文件作為上下文
- 2.Agent可以改你嘅設計 - 用自然語言叫Agent幫你畫
- 3.從Figma同步設計系統 - 顏色、文字樣式直接拉過嚟
- 4.從Notion拉真實內容 - 唔使用佔位符啦
- 5.設計直接變成網站 - 揀一個frame，直接生成React+Tailwind代碼
我逐個試咗一次。
點樣連接？
Paper支援好多AI工具。我試咗Cursor同Codex，同你哋整理好咗：
連接Cursor
- 1.下載Cursor：https://cursor.com/download
- 2.下載Paper Desktop：https://paper.design/downloads
- 3.打開Paper Desktop任意一個文件
- 4.連接MCP後，喺Cursor入面會自動識別
其他嘅可以睇官網。
我試咗嘅幾個場景
場景1：從Figma同步設計系統
呢個功能太正啦。
你喺Figma入面整咗一套設計系統，顏色、字體、間距都定義好咗。而家想將呢啲同步到Paper入面繼續用，唔使重新畫過。
操作流程：
- 1.同時打開Figma同Paper，都連上MCP
- 2.喺Figma揀中一個有variable嘅元素
- 3.同Agent講：「create a design system in Paper that matches the Figma file」
- 4.等Agent操作
我試了：同步咗顏色變量同文字樣式，大概1分鐘搞掂。
注意：
場景2：用真實內容（Notion）
以後都唔使用佔位符啦。
操作流程：
- 1.連上Notion MCP
- 2.喺Paper揀中一個區域（例如testimonial卡片）
- 3.同Agent講：「將Notion推薦數據庫入面嘅內容同呢個框架同步」
佢就會用Notion入面嘅真實內容取代你嘅Lorem Ipsum。
我試咗拉一組真實客戶評價，仲可以叫Agent翻譯成唔同語言測試多語言設計。
場景3：設計直接變成網站
呢個係我覺得最離譜嘅功能。
操作流程：
- 1.喺Paper入面（建議用flex佈局，方便代碼理解）揀中呢個frame
- 2.同Agent講：
您能否根據我在 Paper 中選擇的框架，為網站添加一些響應式斷點？每個框架對應一個不同的斷點。- 4.Agent會：
- 5.訪問網址睇結果
我試了：
用一個細hero section，大概3分鐘生成完畢。似模似樣嘅一個落地頁，結構基本還原。
建議：
場景4: 由0到1設計頁面
主要係我測試太多觸發咗限額，我都以為生成唔到啦，結果只係寫唔入畫布，佢竟然仲用HTML實現咗。
仲有個有意思嘅功能：Snapshot
Paper Snapshot係一個瀏覽器插件，可以將任意網頁元素截圖到Paper入面。
使用方法：
- 1.固定到瀏覽器工具欄
- 2.打開目標網頁
- 3.點擊插件，↑↓精確定位
- 4.捕獲，然後⌘V貼到Paper
適合快速參考競品設計，或者將喜歡嘅網頁元素「摳」落嚟。但係一啲動效同複雜嘅元素，摳唔到。
我都將我哋嘅提示詞網站，複製到paper入面，用paper mcp嚟優化網頁設計。
但我發現第一版只係優化咗配色。
然後我再畀咗一個新嘅提示詞
幫我優化成咁樣
然後我叫佢再優化一輪
呢個係優化後嘅，會更跟從指令一啲，但係都係一般般。
適合邊個？
用咗一個星期，我嘅感受係：
Paper唔係俾新手嘅。 你要識少少設計，都要識少少代碼，先玩得掂。
它適合：
你用緊咩設計工具？設計同代碼雙向打通呢個需求，對你嚟講痛唔痛？
留言區傾嚇。
大家好，我是朝朝。
上次測評完Vibe Design工具，後台有人問我：有沒有那種設計和代碼能雙向打通的工具？
我說有，還不止一個。
今天重點聊一個：Paper。
它不是那種"你描述需求，它給你生成一個設計"的工具。它做的事情更激進——讓你的AI Agent直接讀寫你的設計文件，設計可以直接變代碼，代碼也能反寫回設計。
聽起來有點玄。我用了一天，把它的MCP功能摸了個遍。今天把真實體驗分享出來。
Paper是什麼？
一句話：一個可以跟AI Agent深度綁定的設計工具。
官網slogan是"A real space to design in the age of agents"——智能體時代的真實設計空間。
它和別的工具最大的區別是：別的工具是"你→AI→設計"，它是"AI Agent↔設計文件"。
什麼意思呢？
別的工具，你每次都要重新描述需求。Paper不一樣——你可以讓Agent直接讀取你之前的設計，理解你的風格，然後在這個基礎上改。
而且它基於Web技術。啥意思呢？它本質是一個DOM結構，LLM能直接讀懂。這就很恐怖了——Agent不是"猜"你的設計，而是真的"理解"你的設計。
MCP到底能做什麼？
先解釋一下MCP是啥。
MCP = Model Context Protocol。你可以理解為，一個讓LLM能訪問你數據的"認證API"。
在Paper裏，MCP可以讓你做這幾件事：
- 1.Agent能讀你的設計 - 把你設計文件作為上下文
- 2.Agent能改你的設計 - 用自然語言讓Agent幫你畫
- 3.從Figma同步設計系統 - 顏色、文本樣式直接拉過來
- 4.從Notion拉真實內容 - 不用佔位符了
- 5.設計直接變網站 - 選一個frame，直接生成React+Tailwind代碼
我逐個試了一遍。
怎麼連接？
Paper支持一堆AI工具。我試了Cursor和Codex，給你們整理好了：
連接Cursor
- 1.下載Cursor：https://cursor.com/download
- 2.下載Paper Desktop：https://paper.design/downloads
- 3.打開Paper Desktop隨便一個文件
- 4.連接MCP後，在Cursor裏會自動識別
其他的可以看官網。
我試了的幾個場景
場景1：從Figma同步設計系統
這功能太香了。
你在Figma裏搭了一套設計系統，顏色、字體、間距都定義好了。現在想把這些同步到Paper裏接着用，不用重新畫一遍。
操作流程：
- 1.同時打開Figma和Paper，都連上MCP
- 2.在Figma選中一個有variable的元素
- 3.告訴Agent："create a design system in Paper that matches the Figma file"
- 4.等待Agent操作
我試了：同步了顏色變量和文本樣式，大概1分鐘搞定。
注意：
場景2：用真實內容（Notion）
再也不用佔位符了。
操作流程：
- 1.連上Notion MCP
- 2.在Paper選中一個區域（比如testimonial卡片）
- 3.告訴Agent："將 Notion 推薦數據庫中的內容與此框架同步"
它就會用Notion裏的真實內容替換掉你的Lorem Ipsum。
我試了拉一組真實客戶評價，還可以讓Agent翻譯成不同語言測試多語言設計。
場景3：設計直接變網站
這是我覺得最離譜的功能。
操作流程：
- 1.在Paper裏（建議用flex佈局，方便代碼理解）選中這個frame
- 2.告訴Agent：
您能否根據我在 Paper 中選擇的框架，為網站添加一些響應式斷點？每個框架對應一個不同的斷點。- 4.Agent會：
- 5.訪問 網址 看結果
我試了：
用一個小hero section，大概3分鐘生成完畢。像模像樣的一個落地頁，結構基本還原。
建議：
場景4: 從0-1設計頁面
主要是我測試太多觸發限額了，我都以為生成不了了，結果只是寫不進畫布了，它竟然還用HTML實現了。
還有個有意思的功能：Snapshot
Paper Snapshot是一個瀏覽器插件，可以把任意網頁元素截圖到Paper裏。
使用方法：
- 1.固定到瀏覽器工具欄
- 2.打開目標網頁
- 3.點擊插件，↑↓精確定位
- 4.捕獲，然後⌘V粘貼到Paper
適合快速參考競品設計，或者把喜歡的網頁元素“摳”下來。但是一些動效和一些複雜的元素，摳不了。
我也把我們的提示詞網站，複製到paper中，用paper mcp來優化網頁設計。
但是我發現第一版只優化了配色。
然後我新給了一個提示詞
幫我優化成這樣了
然後我讓它再優化一輪
這是優化後的，會更遵循指令一些，但還是一般般。
適合誰？
用了一週，我的感受是：
Paper不是給新手的。 你得懂一點設計，也得懂一點代碼，才能玩得轉。
它適合：
你在用什麼設計工具？設計和代碼雙向打通這個需求，對你來說痛不痛？
評論區聊聊。