昨天刷到了新的 Figma 遠程 MCP 服務，進行了一大堆升級，然后又看到 GPT-5 Codex 有 API 了。

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

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

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

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

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

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

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

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

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

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

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

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

這時候我們看到設置里面 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)頁，點擊授權按鈕就可以。

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

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

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

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

然后就是 Figma MCP 這次傳輸?shù)男畔⑾喈敹啵B設計稿素材圖都變成圖片鏈接返回了。

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

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

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

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

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

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

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

風格的具體要求是：

Hero 背景 = Aurora Gradient；

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

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

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

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

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

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

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