Figma MCP + GPT-Codex：新的 Vibe Coding 之王

昨天刷到了新的 Figma 遠(yuǎn)程 MCP 服務(wù)，進(jìn)行了一大堆升級，然后又看到 GPT-5 Codex 有 API 了。

于是就都研究了一下，沒想到這么頂啊，這個美學(xué)表現(xiàn)直接拉滿了，下面這是直接給 GPT-5 Codex 設(shè)計稿的鏈接，只修改了一次得到的結(jié)果。

另外我還用之前的提示詞把 Qwen 3 MAX 的播客文章內(nèi)容給到 GPT-5 Codex 生成了一個網(wǎng)頁，也非常頂。

即使沒有設(shè)計稿，單純的提示詞 Codex 的設(shè)計風(fēng)格也跟其他模型有很大的區(qū)別，這圖片你就讓我照著畫，也需要畫一段時間的。

早上發(fā)了以后很多朋友問怎么用，剛好就寫個教程，主要新的 Figma 遠(yuǎn)程 MCP 服務(wù)這部分需要介紹一下。

GPT-5 Codex 的話因為有了 API 所以常見的 AI IDE 比如 Cursor 等都加上了，選擇后直接用就行。

Figam MCP 這次升級最大的一個更新就是不再需要原來復(fù)雜的添加流程和本地 Figma 客戶端了。

你不需要管之前咋裝，我們直接看現(xiàn)在就行，這里我先按 Cursor 的操作路徑介紹一下。

首先我們需要找到 Cursor 的設(shè)置，在設(shè)置里面找到 MCP 這個 TAB，然后點(diǎn)擊“New MCP Server”將下面的 Json 代碼復(fù)制進(jìn)去保存就行不需要做任何改動。

{
  "mcpServers": {
    "figmaRemoteMcp": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

然后回到設(shè)置頁面你就會看到多了一個 Figam 的 MCP，右邊還有個“Connect”按鈕，我們點(diǎn)擊，系統(tǒng)會詢問是不是要打開外部網(wǎng)站，你選擇打開就行。

然后在打開的頁面里面點(diǎn)擊這個“Allow access”授權(quán)按鈕就行，然后如果你沒有登錄的話需要登錄 Figma 才行。

還有就是這個 Figma 的遠(yuǎn)程 MCP 服務(wù)需要訂閱用戶才行，如果你沒有的話中國暗網(wǎng)“閑魚”會幫你解決。

這時候我們看到設(shè)置里面 Figma 的 MCP 已經(jīng)開啟了，而且還可以看到里面包含的工具。

如果你用的 Claude Code，你可以直接在終端輸入下面的命令。

claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp command in your terminal to add the Figma MCP to Claude Code

然后啟動 Claude Code ，用 /MCP 命令選擇登錄選項，然后也是會彈出一個網(wǎng)頁，點(diǎn)擊授權(quán)按鈕就可以。

然后我們就能找一個設(shè)計稿使用 Figma MCP 了，F(xiàn)igma 社區(qū)有非常多很好的組件庫和設(shè)計稿，你可以找一個你喜歡的打開改一改。

然后頁面最下方切換到開發(fā)者模式，選中你想要復(fù)刻的頁面然后右鍵選擇復(fù)制所選的鏈接。

在之后就可以在 Cursor 里面將模型換成 GPT-5 Codex ，然后讓 Agent 調(diào)用 Figma MCP 查詢對應(yīng)鏈接的設(shè)計信息還原成網(wǎng)頁了。

需要注意的是如果你只是想寫 HTML 的話最好加上 Tailwind CDN 和 Apache ECharts 5 CDN 這種它可以節(jié)省一些 Token。

然后就是 Figma MCP 這次傳輸?shù)男畔⑾喈?dāng)多，連設(shè)計稿素材圖都變成圖片鏈接返回了。

如果你的頁面超級復(fù)雜 AI 會不可避免的偷懶，可以讓他一部分一部分完成，比如先把關(guān)鍵的組件和頁面框架搭出來，然后再填充內(nèi)容，這樣的話不至于上下文一下被擠爆。

另外 Figma MCP 傳輸?shù)男畔⒏O(shè)計稿本身質(zhì)量也有關(guān)系，如果設(shè)計稿本身沒有用自動布局以及層級關(guān)系有誤的話，可能表面上看沒啥問題，但是 Figma 傳給 AI 的內(nèi)容是夠嗆可以生成好的網(wǎng)頁了。

可能很多朋友想要我前面 Qwen 3 那個網(wǎng)頁的的提示詞，我這里也寫一下，另外這個網(wǎng)頁是我用 Codex 的 Cursor 插件寫的，如果你只有 GPT 會員的話，也可以試試用這種方式嘗試 GPT-5。

直接在插件市場搜索 Codex 然后安裝就行，或者點(diǎn)這里（developers.openai.com/codex/ide）這個簡單，然后點(diǎn)擊那個 Open AI 的圖標(biāo)啟用，這時候登錄后走的就是你 GPT 會員的 Token 額度了。

幫我將這個Qwen3 的模型介紹文章生成中文可視化網(wǎng)頁，幫助受眾理解，不要遺漏信息

根據(jù)上面內(nèi)容生成一個 HTML 動態(tài)網(wǎng)頁

1. a.使用Aurora Gradient Hero風(fēng)格的視覺設(shè)計，背景色為，，# 5751D5 作為特殊高亮色
2. b.強(qiáng)調(diào)超大字體或數(shù)字突出核心要點(diǎn)，畫面中有超大視覺元素強(qiáng)調(diào)重點(diǎn)，與小元素的比例形成反差
3. c.中英文混用，中文大字體粗體，英文小字作為點(diǎn)綴
4. d.使用Apache ECharts 5 CDN 版做簡潔的勾線圖形化作為數(shù)據(jù)可視化或者配圖元素
5. e.運(yùn)用高亮色自身透明度漸變制造科技感，但是不同高亮色不要互相漸變
6. f.模仿 apple 官網(wǎng)的動效（段落切屏 & 視差縮放等），向下滾動鼠標(biāo)配合動效
7. g.數(shù)據(jù)可以引用在線的圖表組件，樣式需要跟主題一致
8. h.使用 anime.js （通過CDN引入：jsdelivr.com）
9. i.使用HTML5、TailwindCSS 3.0+（通過CDN引入）和必要的JavaScript
10. j.使用專業(yè)圖標(biāo)庫如Font Awesome或Material Icons（通過CDN引入）
11. k.避免使用emoji作為主要圖標(biāo)
12. l.不要省略內(nèi)容要點(diǎn)

風(fēng)格的具體要求是：

Hero 背景 = Aurora Gradient；

CSS conic-gradient(from 120deg at 50% 50%, 0%, 60%, 100%);

背景層 blur(120px) & opacity 0.8，隨滾動 scale(1.2 → 1)；

前景放置設(shè)備 Mockup / 超大數(shù)字 KPI；

進(jìn)入視口時 GSAP from {y:60, opacity:0} 0.8s ease-out。

今天的教程就到這里了，從這次 Figma MCP 的更新來看，Vibe Coding 的基建還有非常多的增長空間。

無論是成熟的設(shè)計系統(tǒng)設(shè)計稿，還是對應(yīng)的前端組件庫，用好以后配合 MCP 都可以極大的降低 Token 的消耗，將上下文讓給更有意義更需要智能的邏輯和數(shù)據(jù)部分。

同時 AI 接入以后不代表對設(shè)計稿或者對編程的人就沒需求了，只是效率提高了，但是你該有的審美和你需要的基本功知識依然是需要的。