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

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

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

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

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

GPT-5 Codex 的話因?yàn)橛辛?API 所以常見的 AI IDE 比如 Cursor 等都加上了，選擇后直接用就行。

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

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

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

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

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

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

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

這時(shí)候我們看到設(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

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

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

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

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

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

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

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

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

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

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

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

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

1. a.使用Aurora Gradient Hero風(fēng)格的視覺設(shè)計(jì)，背景色為，，# 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 版做簡(jiǎn)潔的勾線圖形化作為數(shù)據(jù)可視化或者配圖元素
5. e.運(yùn)用高亮色自身透明度漸變制造科技感，但是不同高亮色不要互相漸變
6. f.模仿 apple 官網(wǎng)的動(dòng)效（段落切屏 & 視差縮放等），向下滾動(dòng)鼠標(biāo)配合動(dòng)效
7. g.數(shù)據(jù)可以引用在線的圖表組件，樣式需要跟主題一致
8. h.使用 anime.js （通過CDN引入：jsdelivr.com）
9. i.使用HTML5、TailwindCSS 3.0+（通過CDN引入）和必要的JavaScript
10. j.使用專業(yè)圖標(biāo)庫(kù)如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，隨滾動(dòng) scale(1.2 → 1)；

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

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

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

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

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