用通義靈碼全新智能體+MCP實(shí)現(xiàn)從設(shè)計(jì)稿到前端代碼,個(gè)人免費(fèi)用
近期,通義靈碼全新升級(jí):阿里云發(fā)布國(guó)內(nèi)首個(gè)支持「自主決策+工具鏈閉環(huán)」的編程智能體,面向個(gè)人免費(fèi)!
網(wǎng)址:https://lingma.aliyun.com/
【最新黑科技功能】
1?? 通義靈碼新增智能體模式,具備自主決策、環(huán)境感知、工具使用等能力。
2?? 支持國(guó)內(nèi)首個(gè)混合推理模型 Qwen3。
3?? 全面支持 MCP 能力,深度集成國(guó)內(nèi)最大 MCP 中文社區(qū),涵蓋十大熱門(mén)領(lǐng)域 2400+ MCP 服務(wù)。
4?? 新增長(zhǎng)期記憶能力。
今天,就讓我們一起 了解通義靈碼本次發(fā)布又帶來(lái)了哪些新的亮點(diǎn),并以將 MasterGo 設(shè)計(jì)稿轉(zhuǎn)化為前端代碼的實(shí)踐為例,學(xué)習(xí)如何在通義靈碼中調(diào)用 MCP 服務(wù)。
通義靈碼全新升級(jí)亮點(diǎn)速覽
通義靈碼編程智能體上線
通義靈碼新增智能體模式,具備自主決策、環(huán)境感知、工具使用等能力,可以根據(jù)開(kāi)發(fā)者的編碼訴求,使用工程檢索、文件編輯、終端等工具,可以端到端地完成編碼任務(wù)。同時(shí),支持開(kāi)發(fā)者配置 MCP 工具,編碼更加貼合開(kāi)發(fā)者工作流程。原AI程序員功能更名為“文件編輯”模式。

支持國(guó)內(nèi)首個(gè)混合推理模型 Qwen3
通義靈碼現(xiàn)在已全面支持 Qwen3,Qwen3 采用混合專家(MoE)架構(gòu),參數(shù)量?jī)H為 DeepSeek-R1 的1/3,也是國(guó)內(nèi)首個(gè)“混合推理模型”,“快思考”與“慢思考”集成進(jìn)同一個(gè)模型,對(duì)簡(jiǎn)單需求可“秒回”答案,對(duì)復(fù)雜問(wèn)題可多步驟“深度思考”,在 ChatBot Arena 等榜單中性能全面超越 R1、OpenAI-o1 等全球頂尖模型,登頂全球最強(qiáng)開(kāi)源模型。

全面支持 MCP 能力,深度集成國(guó)內(nèi)最大 MCP 中文社區(qū)
通義靈碼編程智能體支持 MCP 工具使用,根據(jù)用戶需求描述,通過(guò)模型自主規(guī)劃,實(shí)現(xiàn) MCP 工具調(diào)用,并深度集成國(guó)內(nèi)最大的 MCP 中文社區(qū)——魔搭 MCP 廣場(chǎng),涵蓋開(kāi)發(fā)者工具、文件系統(tǒng)、搜索、地圖等十大熱門(mén)領(lǐng)域 2400+ MCP 服務(wù),全面拓寬 AI 編碼助手能力邊界,更加貼合開(kāi)發(fā)者工作流程。

新增記憶能力(超酷?。。?/h3>
新增長(zhǎng)期記憶能力,在開(kāi)發(fā)者與靈碼的對(duì)話過(guò)程,會(huì)逐漸形成針對(duì)開(kāi)發(fā)者個(gè)人、工程、問(wèn)題等相關(guān)的豐富記憶,并自動(dòng)進(jìn)行相關(guān)的記憶整理和更新。記憶能力可以幫助通義靈碼更好地和開(kāi)發(fā)者互動(dòng),隨著時(shí)間流逝,也能夠讓通義靈碼越來(lái)越懂開(kāi)發(fā)者。

保姆教程:用通義靈碼將 MasterGo 設(shè)計(jì)稿轉(zhuǎn)化為前端代碼
效果預(yù)覽:設(shè)計(jì)稿與生成結(jié)果對(duì)比

下載安裝:主流 IDE 兼容
通義靈碼插件兼容以下 IDE 版本和操作系統(tǒng):
- JetBrains IDEs: IntelliJ IDEA等2020.3及以上版本。
- Visual Studio Code: 1.68.0及以上版本。
- Visual Studio: 2022 17.3.0及以上版本。
- 操作系統(tǒng):Windows 7及以上、macOS、Linux。
JetBrains IDEs 插件市場(chǎng)安裝指南
我們以在 IntelliJ IDEA 中安裝通義靈碼為例:
- 打開(kāi) IntelliJ IDEA 設(shè)置窗口,在插件市場(chǎng)中搜索 Lingma,找到通義靈碼后單擊安裝。
- 安裝完成后,重啟 IntelliJ IDEA。

- 重啟 IntelliJ IDEA 后,單擊側(cè)邊導(dǎo)航的通義靈碼,在通義靈碼助手的窗口單擊登錄按鈕。

4.單擊登錄后,將前往登錄頁(yè)面,完成登錄后可進(jìn)入 IDE 客戶端開(kāi)始使用。
Visual Studio Code 插件市場(chǎng)安裝指南
- 打開(kāi) Visual Studio Code 擴(kuò)展窗口,搜索 Lingma,找到通義靈碼后單擊安裝。
- 安裝完成后,請(qǐng)重啟 Visual Studio Code。

- 安裝完成后,重啟 Visual Studio Code。
- 重啟 Visual Studio Code 后,單擊側(cè)邊導(dǎo)航的通義靈碼,在通義靈碼助手的窗口單擊登錄按鈕。

- 單擊登錄后,將前往登錄頁(yè)面,完成登錄后可進(jìn)入 IDE 客戶端開(kāi)始使用。
Visual Studio 插件市場(chǎng)安裝指南
- 打開(kāi) Visual Studio 頂部擴(kuò)展-管理擴(kuò)展窗口,搜索 Lingma,找到通義靈碼后單擊安裝。
- 安裝完成后,重啟 Visual Studio。

- 重啟 Visual Studio 后,單擊頂部導(dǎo)航工具

- 單擊登錄后,將前往登錄頁(yè)面,完成登錄后可前往 IDE 客戶端開(kāi)始使用
如何選擇會(huì)話模式
通義靈碼新版本提供智能問(wèn)答、文件編輯、智能體三種模式,支持同一個(gè)會(huì)話流中切換智能問(wèn)答、文件編輯、智能體模式,開(kāi)發(fā)者在會(huì)話過(guò)程中,無(wú)需新建會(huì)話即可根據(jù)訴求自由切換會(huì)話模式:


如何選擇模型
通義靈碼 IDE 插件在智能會(huì)話中支持選擇推理服務(wù)模型。在智能會(huì)話窗口的輸入框中,單擊模型選擇的下拉菜單即可選擇所需模型。目前支持最新 Qwen3 系列模型,可選模型為:qwen3、qwen3-thinking、qwen2.5-max、deepseek-r1、deepseek-v3。

MCP 服務(wù)配置與使用實(shí)踐
添加 MCP 服務(wù)
1.進(jìn)入 MCP 服務(wù)頁(yè)面
單擊通義靈碼歡迎語(yǔ)中的 MCP 工具鏈接,或在右上角頭像處進(jìn)入個(gè)人設(shè)置,單擊條形框,進(jìn)入 MCP 服務(wù)頁(yè)面。

2.添加服務(wù)
方式一:通過(guò) MCP 廣場(chǎng)完成添加
- 單擊 MCP 廣場(chǎng) 標(biāo)簽,可以看到推薦的 MCP 服務(wù)列表以及魔搭社區(qū)提供的全部 MCP 服務(wù)。
- 在 MCP 廣場(chǎng) 中,瀏覽或搜索所需 MCP 服務(wù),單擊 安裝 完成一鍵自動(dòng)安裝。
- 安裝完成后,返回我的服務(wù)頁(yè)面,即可看到新安裝的服務(wù)。圖標(biāo)顯示為
,表示連接成功可正常使用。展開(kāi)詳情,可以看到 MCP 提供的工具列表。

方式二:通過(guò)手動(dòng)方式完成添加
-
在 MCP 服務(wù)頁(yè)面右上角單擊“+”選擇以下方式完成添加:
-
手工添加:
- STDIO 類型:填寫(xiě)名稱、命令、參數(shù)和環(huán)境變量(選填)。
- SSE 類型:填寫(xiě)名稱和服務(wù)地址。
-
配置文件添加:
- 在 JSON 配置文件中增加服務(wù)對(duì)應(yīng)的JSON配置信息。
-
-
添加完成后,即可看到新安裝的服務(wù)。圖標(biāo)顯示為
,表示連接成功可正常使用。展開(kāi)詳情,可以看到 MCP 提供的工具列表。

使用實(shí)踐:使用 MCP 工具實(shí)現(xiàn)通義靈碼官網(wǎng)從設(shè)計(jì)稿到頁(yè)面開(kāi)發(fā)
在 UI 設(shè)計(jì)到前端代碼的轉(zhuǎn)化場(chǎng)景中(如通過(guò) MasterGo 平臺(tái)實(shí)現(xiàn)設(shè)計(jì)稿智能生成代碼),傳統(tǒng)開(kāi)發(fā)模式常面臨樣式還原度低、多端適配繁瑣及代碼維護(hù)成本高等挑戰(zhàn)。MCP服務(wù)通過(guò)智能解析設(shè)計(jì)稿結(jié)構(gòu)與樣式規(guī)則,自動(dòng)生成符合企業(yè)設(shè)計(jì)規(guī)范的前端代碼,實(shí)現(xiàn)高保真視覺(jué)還原與多端適配,減少人工編寫(xiě)重復(fù)代碼的工作量,保障代碼可維護(hù)性。
MCP 配置與設(shè)計(jì)稿
{
"mcpServers": {
"mastergo-magic-mcp": {
"command": "npx",
"args": [
"-y",
"@mastergo/magic-mcp",
"--token=<MG_MCP_TOKEN>",
"--url=https://mastergo.com"
],
"env": {}
}
}
}
設(shè)計(jì)稿與 MasterGo MCP 源碼
- 靈碼官網(wǎng)設(shè)計(jì)稿示例:https://mastergo.com/file/157557668024262?page_id=1%3A1303&layer_id=1%3A1500
- MasterGo MCP 源碼:https://github.com/mastergo-design/mastergo-magic-mcp?tab=readme-ov-file
添加 MCP 服務(wù)
- 進(jìn)入個(gè)人設(shè)置中的 MCP 服務(wù),然后在 MCP 服務(wù)頁(yè)面,完成 MCP 服務(wù)連接配置。

-
在 MCP 服務(wù)面板填寫(xiě)參數(shù)信息如下:
- 名稱:mastergo
- 類型:STDIO
- 命令:npx
- 參數(shù):請(qǐng)獲取您的 MasterGo 個(gè)人 token(獲取方式:https://github.com/mastergo-design/mastergo-magic-mcp?tab=readme-ov-file#obtaining-mg_mcp_token),并將其替換為實(shí)際值。
- 環(huán)境變量(選填)
-y @mastergo/magic-mcp --token=<MG_MCP_TOKEN> --url=https://mastergo.com

- 配置完成后,開(kāi)關(guān)默認(rèn)打開(kāi)狀態(tài),并且圖標(biāo)顯示為
,表示連接成功可正常使用。

使用 MCP工具
- 在通義靈碼的 IDE 對(duì)話框左下角切換為智能體模式,并在對(duì)話框中輸入提示詞。
需替換提示詞中的 URL 為您的實(shí)際設(shè)計(jì)稿地址。
根據(jù)這個(gè)mastergo的設(shè)計(jì)圖實(shí)現(xiàn)前端代碼:https://mastergo.com/file/157557668024262?page_id=1%3A1303&layer_id=1%3A1500

- 如果需要調(diào)用 MCP 工具系統(tǒng)提示等待您的確認(rèn)再繼續(xù)執(zhí)行。

- 問(wèn)答交互完成后,您可以審查生成的代碼結(jié)果,確保其符合預(yù)期并滿足您的需求。

以前,搭建一個(gè)網(wǎng)頁(yè)至少需經(jīng)歷項(xiàng)目初始化、組件開(kāi)發(fā)、狀態(tài)管理、交互實(shí)現(xiàn)、響應(yīng)式布局、性能優(yōu)化等步驟。
今天,只需一句話——“幫忙根據(jù)設(shè)計(jì)稿開(kāi)發(fā)頁(yè)面”,通義靈碼就能調(diào)用 MCP 工具讀取設(shè)計(jì)稿,根據(jù)用戶的編碼習(xí)慣,選擇合適的技術(shù)棧、自動(dòng)創(chuàng)建好工程文件、定義開(kāi)發(fā)規(guī)范,實(shí)時(shí)反饋生成效果,甚至生成研發(fā)文檔。整個(gè)過(guò)程用戶只需要一句話和點(diǎn)幾個(gè)確認(rèn)鍵即可。
點(diǎn)擊此處,用通義靈碼探索無(wú)限可能。

,表示連接成功可正常使用。展開(kāi)詳情,可以看到 MCP 提供的工具列表。
,表示連接成功可正常使用。
浙公網(wǎng)安備 33010602011771號(hào)