踐指南：Cursor / CodeBuddy / Knot 智能體與 Figma MCP 的配置與使用)
跨平臺移動開發(fā)前端【免費(fèi)下載鏈接】HippyHippy is designed to easily build cross-platform dynamic apps. 項目地址https://gitcode.com/gh_mirrors/hi/Hippy點(diǎn)擊查看免費(fèi)下載Hippy 團(tuán)隊為開發(fā)者提供了一套完整的 AI 輔助開發(fā)方案覆蓋 IDECursor / CodeBuddy、網(wǎng)頁Knot 智能體與企業(yè)微信AI 小助手機(jī)器人三類入口并配套 Hippy MCP、DeepWiki MCP、Figma MCP 等可插拔工具鏈。本篇指南基于 docs/ai/hippy-ai.md 與 docs/ai/figma-mcp.md 整理從知識來源、工具配置、Prompt 技巧到設(shè)計稿還原給出可直接照做的完整方案讀完即可在自己的 Hippy 項目里落地一套高效的人機(jī)協(xié)作開發(fā)流。一、Hippy AI 的核心知識來源與適用場景Hippy 團(tuán)隊為 AI 工具提供三類知識來源覆蓋快速解答—深度分析—綜合解決三個層次資源類型內(nèi)容訪問方式適用場景團(tuán)隊文檔iwiki 文檔、Oncall 單IDECodeBuddy 導(dǎo)入知識庫快速問題解答框架源碼Hippy 框架源碼IDECursor / CodeBuddy 源碼索引、Deepwiki MCP深度代碼分析組合方案文檔 源碼 RAG網(wǎng)頁Knot 智能體IDE源碼索引、Hippy MCP綜合問題解決四類典型適用場景分別是代碼開發(fā)用 AI 輔助 Hippy 項目開發(fā)、問題排查通過 AI 分析代碼問題和異常、文檔查詢快速獲取 Hippy 框架相關(guān)信息、UI 還原基于設(shè)計稿生成 Hippy 代碼。三種方案的效果差異也需要了解純文檔方案可以解決 Hippy 團(tuán)隊記錄過的問題但覆蓋面有限比如無法分析具體代碼問題Deepwiki 方案效果不錯代碼分析能力強(qiáng)效果接近 Cursor 源碼索引效果組合方案結(jié)合了知識庫和源碼索引適合大部分問題的解答。最佳實(shí)踐IDE 場景下將 Hippy 源碼工程添加到 IDE 工作區(qū)并配置 Hippy MCP網(wǎng)頁場景下通過 Knot 智能體訪問可以快速解答大部分場景的問題。二、Cursor源碼索引 rules MCP 三步配置1. 引入 Hippy 源碼工程到工作區(qū)推薦必須Hippy 團(tuán)隊通過實(shí)際測試發(fā)現(xiàn)把 Hippy 源碼工程引入 IDE 工作區(qū)后Cursor 會為源碼建立索引對問題的解答質(zhì)量有明顯提升能極大提高日常開發(fā)效率。Hippy 倉庫的源碼主體分布在dom/DOM 管理、driver/js/JS 驅(qū)動與 DSL 層、framework/Android / iOS / 鴻蒙三端框架、renderer/渲染器等目錄把倉庫根目錄加入工作區(qū)即可讓 AI 檢索到這些實(shí)現(xiàn)細(xì)節(jié)。2. 配置項目的rules文件推薦必須配置 Cursor 的rules文件在很多場景都能提高開發(fā)效率。Hippy 官方 rules 中包含了Hippy 源碼結(jié)構(gòu)說明常用組件 API 使用方式AI 調(diào)試技巧React / Vue DSL 區(qū)別等。各團(tuán)隊可以根據(jù)自己情況補(bǔ)充 rules例如補(bǔ)充業(yè)務(wù)目錄結(jié)構(gòu)、可以參考的代碼文件目錄、常見問題等。3. 常用 MCP按需配置1Hippy MCP集成 Hippy 的知識庫信息iwiki和 Hippy 框架源碼信息Deepwiki會根據(jù)回答的問題類型給出針對性解答。凡是涉及 Hippy 框架相關(guān)的問題都建議配置hippy-mcp: { timeout: 60, url: https://hippy.woa.com/mcp, headers: { X-Rtx-Username: 自己的企業(yè)微信名 } }2Deepwiki MCPDeepwiki 提供針對 Hippy 框架源碼的解答。如果項目工作區(qū)沒有引入 Hippy 源碼建議添加該 MCPmcpServers: { deepwiki-mcp: { timeout: 60, url: https://mcp.deepwiki.com/mcp } }三、CodeBuddy內(nèi)置知識庫 源碼索引CodeBuddy 內(nèi)網(wǎng)版可以單獨(dú)添加官方 Hippy 知識庫其余大部分配置與 Cursor 相同可參考上文配置。1. 詢問問題時通過 添加「官方 Hippy 知識庫」推薦必須CodeBuddy 已內(nèi)置集成 Knot 的知識庫詢問問題時可以添加 Hippy 知識庫讓回答直接命中團(tuán)隊沉淀的文檔與 Oncall 經(jīng)驗。2. 引入 Hippy 源碼工程到工作區(qū)推薦必須配置方式同上文 Cursor 配置同樣建議把 Hippy 倉庫加入工作區(qū)建立源碼索引。3. 配置項目的rules文件推薦必須配置方式同上文 Cursor 配置。4. 常用 MCP按需配置1Hippy MCP與 Cursor 版本一致但需要顯式聲明type為streamableHttphippy-mcp: { timeout: 60, type: streamableHttp, url: https://hippy.woa.com/mcp, headers: { X-Rtx-Username: 自己的企業(yè)微信名 } }2Deepwiki MCP同樣需要聲明typemcpServers: { deepwiki-mcp: { timeout: 60, type: streamableHttp, url: https://mcp.deepwiki.com/mcp } }四、網(wǎng)頁與企微入口Knot 智能體與企微機(jī)器人1. Knot 智能體在不方便使用 IDE 的場景下可以通過 Knot 智能體網(wǎng)頁入口直接提問。Knot 智能體以Hippy為主題能夠深度思考后結(jié)合知識庫與源碼給出解答使用提示提問后記得點(diǎn)贊 / 點(diǎn)踩 方便團(tuán)隊后續(xù)優(yōu)化助手效果Hippy AI 助手的知識包含iwiki 文檔、Hippy 源碼及開發(fā)文檔、deepwikiHippy AI 助手彈窗可以放大方便查看。2. 企微機(jī)器人在企業(yè)微信中搜索「Hippy AI小助手」即可找到機(jī)器人支持直接提問也可以把機(jī)器人添加到開發(fā)群中在群內(nèi)隨時提問五、Prompt 技巧四類高頻場景的提問范式1. 問題排查類核心要點(diǎn)問題盡量描述清晰明確想了解的平臺、組件、屬性推薦帶上問題代碼。最佳實(shí)踐示例import { View, Text } from hippy/react; function MyComponent() { return ( View style{{ height: 100 }} Text style{{ fontSize: 16 }}Hello Hippy/Text /View ); } 我在 Android 平臺使用 Hippy React 的 Text 組件設(shè)置了 fontSize 屬性為 16 但顯示效果不符合預(yù)期文字顯示過小。請幫忙分析可能的原因。帶上平臺Android / iOS / 鴻蒙、組件名Text、屬性fontSize與可復(fù)現(xiàn)代碼AI 才能精準(zhǔn)定位是樣式換算、平臺差異還是 DSL 用法問題。2. DSL 類型區(qū)分核心要點(diǎn)問題詳情中要區(qū)分使用的是 React DSL 還是 Vue2 / Vue3 DSL。Hippy 同時支持 Hippy React 與 Hippy Vue含 Vue3兩套 DSL 的組件 API 與寫法不同混用會導(dǎo)致 AI 給出錯誤建議。Hippy React 示例Hippy React 中 Text 組件支持長按文本選中嗎Hippy Vue 示例使用 Hippy Vue3 開發(fā)如何實(shí)現(xiàn)一個自定義的組件倉庫中 driver/js/packages/hippy-react 與 driver/js/packages/hippy-vue-next 分別對應(yīng)兩套 DSL 的實(shí)現(xiàn)提問時指明 DSL 類型可讓 AI 檢索正確的源碼目錄。3. MCP 觸發(fā)優(yōu)化核心要點(diǎn)在 Prompt 中帶上相關(guān) MCP 提示提高對應(yīng) MCP 的觸發(fā)概率。Hippy 框架問題涉及到 Hippy 的提問無論是對 Hippy 框架還是業(yè)務(wù)上的訴求建議觸發(fā) Hippy MCP請使用 hippy-mcp 觸發(fā)。框架源碼問題涉及到 Hippy 框架源碼細(xì)節(jié)的問題如果本地沒有引入 Hippy 源碼到工作區(qū)建議觸發(fā) DeepWiki MCP使用 deepwiki-mcp 觸發(fā)。UI 還原問題涉及到 Figma 設(shè)計圖還原的建議觸發(fā) Figma MCP請使用 figma-mcp 觸發(fā)一般情況下只要帶上了 Figma 的設(shè)計鏈接都會觸發(fā) Figma MCP。4. 代碼引用技巧核心要點(diǎn)編寫代碼的問題可以設(shè)置參考已有的 xxx 代碼會提高成功率。倉庫中的 driver/js/examples/hippy-react-demo/src/components 是官方提供的 Hippy React 業(yè)務(wù)組件示例集包含 ListView、Image、TextInput、WaterfallView 等 17 個組件非常適合作為生成代碼的參考樣板。頁面生成示例幫我根據(jù) figma 鏈接xxx實(shí)現(xiàn)一個 Hippy React 頁面圖片組件請使用 driver/js/examples/hippy-react-demo/src/components/Image 這個自定義組件。 頁面實(shí)現(xiàn)可以參考已實(shí)現(xiàn)的 Hippy React 頁面比如 driver/js/examples/hippy-react-demo/src/components/ListView 下的頁面代碼。問題排查示例幫我排查一個問題問題可能和項目中一些代碼有關(guān)可以參考項目中 driver/js/examples/hippy-react-demo/src/components/ListView 這個頁面的代碼來排查。例如 ListView 示例組件 就是官方提供的列表頁實(shí)現(xiàn)把它作為參考代碼能讓 AI 生成的頁面在組件使用、樣式與事件綁定上保持一致components 入口文件 則集中導(dǎo)出了全部示例組件可以作為項目里已有哪些組件的清單喂給 AI。六、Figma MCP把設(shè)計圖直接生成 Hippy 代碼這是 AI 編程鏈路中UI 還原場景的關(guān)鍵一環(huán)完整指引見 docs/ai/figma-mcp.md核心流程分三步。1. Figma 桌面端開啟 MCP Server參考 Figma 官方文檔下載最新版本的 Figma 桌面端應(yīng)用需要申請 Dev Mode 權(quán)限開啟 MCP Server2. 在 IDE 中配置接入 Figma MCP以本機(jī)回環(huán)地址http://127.0.0.1:3845/mcp接入三款主流 IDE 的配置如下。Cursor{ mcpServers: { Figma: { url: http://127.0.0.1:3845/mcp } } }CodeBuddy{ mcpServers: { Figma Dev Mode MCP: { type: http, url: http://127.0.0.1:3845/mcp } } }VSCode需要同時開啟 MCP 發(fā)現(xiàn)與 Agent 能力chat.mcp.discovery.enabled: true, mcp: { servers: { Figma Dev Mode MCP: { type: http, url: http://127.0.0.1:3845/mcp } } }, chat.agent.enabled: true3. Figma MCP 提供的方法Figma Dev Mode MCP Server 暴露了以下方法按需調(diào)用get_code獲取 Figma 根據(jù)設(shè)計圖生成的代碼目前只支持前端后續(xù)會支持 Compose 等目前 Cursor 直接用前端代碼轉(zhuǎn) Hippy效果也還不錯get_variable_defs獲取 Figma 選中的變量和樣式等get_code_connect_map獲取 Figma 節(jié)點(diǎn) id 和代碼組件庫的映射表get_image獲取 Figma 中圖片的鏈接create_design_system_rules創(chuàng)建 Figma 的設(shè)計 rules有助于設(shè)計系統(tǒng)和輸出技術(shù)棧保持一致get_metadata獲取 Figma 根據(jù)設(shè)計圖生成的原始 DSL 信息。4. 使用示例結(jié)合前面的 Prompt 技巧可以這樣讓 AI 完成設(shè)計稿 → Hippy 頁面的完整還原請根據(jù)我提供的 Figma 設(shè)計鏈接使用 Dev Mode MCP 協(xié)議生成高質(zhì)量的 Hippy React 代碼。確保生成的代碼結(jié)構(gòu)清晰、還原度高語義化良好適配當(dāng)前項目的組件體系確保編譯通過 figma 設(shè)計鏈接 代碼生成目錄是 driver/js/examples/hippy-react-demo/src/components/figma-mcp/ 可以參考 driver/js/examples/hippy-react-demo/src/components/ 下的其他頁面代碼設(shè)計鏈接本身就會觸發(fā) Figma MCP而指定參考目錄與生成目錄則能讓新代碼融入現(xiàn)有 Hippy 示例工程的組件體系。七、后續(xù)規(guī)劃Hippy 團(tuán)隊后續(xù)會補(bǔ)充更多 AI 編程實(shí)踐的案例和工具歡迎大家提交建議或貢獻(xiàn)。AI 編程的落地關(guān)鍵在于三件事把 Hippy 源碼加入 IDE 工作區(qū)建立索引、配置好 Hippy / Deepwiki / Figma 三個 MCP、按照本指南的 Prompt 范式提問——三者結(jié)合即可在代碼開發(fā)、問題排查、文檔查詢與 UI 還原四個場景中獲得穩(wěn)定可用的 AI 輔助能力。贊分享跨平臺移動開發(fā)前端【免費(fèi)下載鏈接】HippyHippy is designed to easily build cross-platform dynamic apps. 項目地址https://gitcode.com/gh_mirrors/hi/Hippy點(diǎn)擊查看免費(fèi)下載相關(guān)推薦Cursor AI與Figma終極集成指南免費(fèi)快速配置MCP協(xié)議Cursor AI與Figma終極集成指南免費(fèi)快速配置MCP協(xié)議 在當(dāng)今的設(shè)計開發(fā)工作流中AI輔助設(shè)計已成為提升效率的關(guān)鍵因素。通過Cursor AI與Fi人工智能AI 應(yīng)用MCP 服務(wù)Cursor Talk To Figma MCP 完整配置指南Cursor Talk To Figma MCP 完整配置指南 項目概述 Cursor Talk To Figma MCP 是一個創(chuàng)新的開源項目它通過 Mod人工智能AI 應(yīng)用MCP 服務(wù)如何快速實(shí)現(xiàn)Cursor與Figma智能對話MCP集成完全指南如何快速實(shí)現(xiàn)Cursor與Figma智能對話MCP集成完全指南 Cursor與Figma智能對話Cursor Talk To Figma MCP是一款強(qiáng)大人工智能AI 應(yīng)用MCP 服務(wù)上一篇OpenCompass中的不確定性評估分布外檢測方法下一篇Epoch多軸支持完全指南如何創(chuàng)建復(fù)雜的多維度圖表創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 Hippy AI 編程實(shí)踐指南：Cursor / CodeBuddy / Knot 智能體與 Figma MCP 的配置與使用
跨平臺移動開發(fā)前端【免費(fèi)下載鏈接】HippyHippy is designed to easily build cross-platform dynamic apps. 項目地址https://gitcode.com/gh_mirrors/hi/Hippy點(diǎn)擊查看免費(fèi)下載Hippy 團(tuán)隊為開發(fā)者提供了一套完整的 AI 輔助開發(fā)方案覆蓋 IDECursor / CodeBuddy、網(wǎng)頁Knot 智能體與企業(yè)微信AI 小助手機(jī)器人三類入口并配套 Hippy MCP、DeepWiki MCP、Figma MCP 等可插拔工具鏈。本篇指南基于 docs/ai/hippy-ai.md 與 docs/ai/figma-mcp.md 整理從知識來源、工具配置、Prompt 技巧到設(shè)計稿還原給出可直接照做的完整方案讀完即可在自己的 Hippy 項目里落地一套高效的人機(jī)協(xié)作開發(fā)流。一、Hippy AI 的核心知識來源與適用場景Hippy 團(tuán)隊為 AI 工具提供三類知識來源覆蓋快速解答—深度分析—綜合解決三個層次資源類型內(nèi)容訪問方式適用場景團(tuán)隊文檔iwiki 文檔、Oncall 單IDECodeBuddy 導(dǎo)入知識庫快速問題解答框架源碼Hippy 框架源碼IDECursor / CodeBuddy 源碼索引、Deepwiki MCP深度代碼分析組合方案文檔 源碼 RAG網(wǎng)頁Knot 智能體IDE源碼索引、Hippy MCP綜合問題解決四類典型適用場景分別是代碼開發(fā)用 AI 輔助 Hippy 項目開發(fā)、問題排查通過 AI 分析代碼問題和異常、文檔查詢快速獲取 Hippy 框架相關(guān)信息、UI 還原基于設(shè)計稿生成 Hippy 代碼。三種方案的效果差異也需要了解純文檔方案可以解決 Hippy 團(tuán)隊記錄過的問題但覆蓋面有限比如無法分析具體代碼問題Deepwiki 方案效果不錯代碼分析能力強(qiáng)效果接近 Cursor 源碼索引效果組合方案結(jié)合了知識庫和源碼索引適合大部分問題的解答。最佳實(shí)踐IDE 場景下將 Hippy 源碼工程添加到 IDE 工作區(qū)并配置 Hippy MCP網(wǎng)頁場景下通過 Knot 智能體訪問可以快速解答大部分場景的問題。二、Cursor源碼索引 rules MCP 三步配置1. 引入 Hippy 源碼工程到工作區(qū)推薦必須Hippy 團(tuán)隊通過實(shí)際測試發(fā)現(xiàn)把 Hippy 源碼工程引入 IDE 工作區(qū)后Cursor 會為源碼建立索引對問題的解答質(zhì)量有明顯提升能極大提高日常開發(fā)效率。Hippy 倉庫的源碼主體分布在dom/DOM 管理、driver/js/JS 驅(qū)動與 DSL 層、framework/Android / iOS / 鴻蒙三端框架、renderer/渲染器等目錄把倉庫根目錄加入工作區(qū)即可讓 AI 檢索到這些實(shí)現(xiàn)細(xì)節(jié)。2. 配置項目的rules文件推薦必須配置 Cursor 的rules文件在很多場景都能提高開發(fā)效率。Hippy 官方 rules 中包含了Hippy 源碼結(jié)構(gòu)說明常用組件 API 使用方式AI 調(diào)試技巧React / Vue DSL 區(qū)別等。各團(tuán)隊可以根據(jù)自己情況補(bǔ)充 rules例如補(bǔ)充業(yè)務(wù)目錄結(jié)構(gòu)、可以參考的代碼文件目錄、常見問題等。3. 常用 MCP按需配置1Hippy MCP集成 Hippy 的知識庫信息iwiki和 Hippy 框架源碼信息Deepwiki會根據(jù)回答的問題類型給出針對性解答。凡是涉及 Hippy 框架相關(guān)的問題都建議配置hippy-mcp: { timeout: 60, url: https://hippy.woa.com/mcp, headers: { X-Rtx-Username: 自己的企業(yè)微信名 } }2Deepwiki MCPDeepwiki 提供針對 Hippy 框架源碼的解答。如果項目工作區(qū)沒有引入 Hippy 源碼建議添加該 MCPmcpServers: { deepwiki-mcp: { timeout: 60, url: https://mcp.deepwiki.com/mcp } }三、CodeBuddy內(nèi)置知識庫 源碼索引CodeBuddy 內(nèi)網(wǎng)版可以單獨(dú)添加官方 Hippy 知識庫其余大部分配置與 Cursor 相同可參考上文配置。1. 詢問問題時通過 添加「官方 Hippy 知識庫」推薦必須CodeBuddy 已內(nèi)置集成 Knot 的知識庫詢問問題時可以添加 Hippy 知識庫讓回答直接命中團(tuán)隊沉淀的文檔與 Oncall 經(jīng)驗。2. 引入 Hippy 源碼工程到工作區(qū)推薦必須配置方式同上文 Cursor 配置同樣建議把 Hippy 倉庫加入工作區(qū)建立源碼索引。3. 配置項目的rules文件推薦必須配置方式同上文 Cursor 配置。4. 常用 MCP按需配置1Hippy MCP與 Cursor 版本一致但需要顯式聲明type為streamableHttphippy-mcp: { timeout: 60, type: streamableHttp, url: https://hippy.woa.com/mcp, headers: { X-Rtx-Username: 自己的企業(yè)微信名 } }2Deepwiki MCP同樣需要聲明typemcpServers: { deepwiki-mcp: { timeout: 60, type: streamableHttp, url: https://mcp.deepwiki.com/mcp } }四、網(wǎng)頁與企微入口Knot 智能體與企微機(jī)器人1. Knot 智能體在不方便使用 IDE 的場景下可以通過 Knot 智能體網(wǎng)頁入口直接提問。Knot 智能體以Hippy為主題能夠深度思考后結(jié)合知識庫與源碼給出解答使用提示提問后記得點(diǎn)贊 / 點(diǎn)踩 方便團(tuán)隊后續(xù)優(yōu)化助手效果Hippy AI 助手的知識包含iwiki 文檔、Hippy 源碼及開發(fā)文檔、deepwikiHippy AI 助手彈窗可以放大方便查看。2. 企微機(jī)器人在企業(yè)微信中搜索「Hippy AI小助手」即可找到機(jī)器人支持直接提問也可以把機(jī)器人添加到開發(fā)群中在群內(nèi)隨時提問五、Prompt 技巧四類高頻場景的提問范式1. 問題排查類核心要點(diǎn)問題盡量描述清晰明確想了解的平臺、組件、屬性推薦帶上問題代碼。最佳實(shí)踐示例import { View, Text } from hippy/react; function MyComponent() { return ( View style{{ height: 100 }} Text style{{ fontSize: 16 }}Hello Hippy/Text /View ); } 我在 Android 平臺使用 Hippy React 的 Text 組件設(shè)置了 fontSize 屬性為 16 但顯示效果不符合預(yù)期文字顯示過小。請幫忙分析可能的原因。帶上平臺Android / iOS / 鴻蒙、組件名Text、屬性fontSize與可復(fù)現(xiàn)代碼AI 才能精準(zhǔn)定位是樣式換算、平臺差異還是 DSL 用法問題。2. DSL 類型區(qū)分核心要點(diǎn)問題詳情中要區(qū)分使用的是 React DSL 還是 Vue2 / Vue3 DSL。Hippy 同時支持 Hippy React 與 Hippy Vue含 Vue3兩套 DSL 的組件 API 與寫法不同混用會導(dǎo)致 AI 給出錯誤建議。Hippy React 示例Hippy React 中 Text 組件支持長按文本選中嗎Hippy Vue 示例使用 Hippy Vue3 開發(fā)如何實(shí)現(xiàn)一個自定義的組件倉庫中 driver/js/packages/hippy-react 與 driver/js/packages/hippy-vue-next 分別對應(yīng)兩套 DSL 的實(shí)現(xiàn)提問時指明 DSL 類型可讓 AI 檢索正確的源碼目錄。3. MCP 觸發(fā)優(yōu)化核心要點(diǎn)在 Prompt 中帶上相關(guān) MCP 提示提高對應(yīng) MCP 的觸發(fā)概率。Hippy 框架問題涉及到 Hippy 的提問無論是對 Hippy 框架還是業(yè)務(wù)上的訴求建議觸發(fā) Hippy MCP請使用 hippy-mcp 觸發(fā)。框架源碼問題涉及到 Hippy 框架源碼細(xì)節(jié)的問題如果本地沒有引入 Hippy 源碼到工作區(qū)建議觸發(fā) DeepWiki MCP使用 deepwiki-mcp 觸發(fā)。UI 還原問題涉及到 Figma 設(shè)計圖還原的建議觸發(fā) Figma MCP請使用 figma-mcp 觸發(fā)一般情況下只要帶上了 Figma 的設(shè)計鏈接都會觸發(fā) Figma MCP。4. 代碼引用技巧核心要點(diǎn)編寫代碼的問題可以設(shè)置參考已有的 xxx 代碼會提高成功率。倉庫中的 driver/js/examples/hippy-react-demo/src/components 是官方提供的 Hippy React 業(yè)務(wù)組件示例集包含 ListView、Image、TextInput、WaterfallView 等 17 個組件非常適合作為生成代碼的參考樣板。頁面生成示例幫我根據(jù) figma 鏈接xxx實(shí)現(xiàn)一個 Hippy React 頁面圖片組件請使用 driver/js/examples/hippy-react-demo/src/components/Image 這個自定義組件。 頁面實(shí)現(xiàn)可以參考已實(shí)現(xiàn)的 Hippy React 頁面比如 driver/js/examples/hippy-react-demo/src/components/ListView 下的頁面代碼。問題排查示例幫我排查一個問題問題可能和項目中一些代碼有關(guān)可以參考項目中 driver/js/examples/hippy-react-demo/src/components/ListView 這個頁面的代碼來排查。例如 ListView 示例組件 就是官方提供的列表頁實(shí)現(xiàn)把它作為參考代碼能讓 AI 生成的頁面在組件使用、樣式與事件綁定上保持一致components 入口文件 則集中導(dǎo)出了全部示例組件可以作為項目里已有哪些組件的清單喂給 AI。六、Figma MCP把設(shè)計圖直接生成 Hippy 代碼這是 AI 編程鏈路中UI 還原場景的關(guān)鍵一環(huán)完整指引見 docs/ai/figma-mcp.md核心流程分三步。1. Figma 桌面端開啟 MCP Server參考 Figma 官方文檔下載最新版本的 Figma 桌面端應(yīng)用需要申請 Dev Mode 權(quán)限開啟 MCP Server2. 在 IDE 中配置接入 Figma MCP以本機(jī)回環(huán)地址http://127.0.0.1:3845/mcp接入三款主流 IDE 的配置如下。Cursor{ mcpServers: { Figma: { url: http://127.0.0.1:3845/mcp } } }CodeBuddy{ mcpServers: { Figma Dev Mode MCP: { type: http, url: http://127.0.0.1:3845/mcp } } }VSCode需要同時開啟 MCP 發(fā)現(xiàn)與 Agent 能力chat.mcp.discovery.enabled: true, mcp: { servers: { Figma Dev Mode MCP: { type: http, url: http://127.0.0.1:3845/mcp } } }, chat.agent.enabled: true3. Figma MCP 提供的方法Figma Dev Mode MCP Server 暴露了以下方法按需調(diào)用get_code獲取 Figma 根據(jù)設(shè)計圖生成的代碼目前只支持前端后續(xù)會支持 Compose 等目前 Cursor 直接用前端代碼轉(zhuǎn) Hippy效果也還不錯get_variable_defs獲取 Figma 選中的變量和樣式等get_code_connect_map獲取 Figma 節(jié)點(diǎn) id 和代碼組件庫的映射表get_image獲取 Figma 中圖片的鏈接create_design_system_rules創(chuàng)建 Figma 的設(shè)計 rules有助于設(shè)計系統(tǒng)和輸出技術(shù)棧保持一致get_metadata獲取 Figma 根據(jù)設(shè)計圖生成的原始 DSL 信息。4. 使用示例結(jié)合前面的 Prompt 技巧可以這樣讓 AI 完成設(shè)計稿 → Hippy 頁面的完整還原請根據(jù)我提供的 Figma 設(shè)計鏈接使用 Dev Mode MCP 協(xié)議生成高質(zhì)量的 Hippy React 代碼。確保生成的代碼結(jié)構(gòu)清晰、還原度高語義化良好適配當(dāng)前項目的組件體系確保編譯通過 figma 設(shè)計鏈接 代碼生成目錄是 driver/js/examples/hippy-react-demo/src/components/figma-mcp/ 可以參考 driver/js/examples/hippy-react-demo/src/components/ 下的其他頁面代碼設(shè)計鏈接本身就會觸發(fā) Figma MCP而指定參考目錄與生成目錄則能讓新代碼融入現(xiàn)有 Hippy 示例工程的組件體系。七、后續(xù)規(guī)劃Hippy 團(tuán)隊后續(xù)會補(bǔ)充更多 AI 編程實(shí)踐的案例和工具歡迎大家提交建議或貢獻(xiàn)。AI 編程的落地關(guān)鍵在于三件事把 Hippy 源碼加入 IDE 工作區(qū)建立索引、配置好 Hippy / Deepwiki / Figma 三個 MCP、按照本指南的 Prompt 范式提問——三者結(jié)合即可在代碼開發(fā)、問題排查、文檔查詢與 UI 還原四個場景中獲得穩(wěn)定可用的 AI 輔助能力。贊分享跨平臺移動開發(fā)前端【免費(fèi)下載鏈接】HippyHippy is designed to easily build cross-platform dynamic apps. 項目地址https://gitcode.com/gh_mirrors/hi/Hippy點(diǎn)擊查看免費(fèi)下載相關(guān)推薦Cursor AI與Figma終極集成指南免費(fèi)快速配置MCP協(xié)議Cursor AI與Figma終極集成指南免費(fèi)快速配置MCP協(xié)議 在當(dāng)今的設(shè)計開發(fā)工作流中AI輔助設(shè)計已成為提升效率的關(guān)鍵因素。通過Cursor AI與Fi人工智能AI 應(yīng)用MCP 服務(wù)Cursor Talk To Figma MCP 完整配置指南Cursor Talk To Figma MCP 完整配置指南 項目概述 Cursor Talk To Figma MCP 是一個創(chuàng)新的開源項目它通過 Mod人工智能AI 應(yīng)用MCP 服務(wù)如何快速實(shí)現(xiàn)Cursor與Figma智能對話MCP集成完全指南如何快速實(shí)現(xiàn)Cursor與Figma智能對話MCP集成完全指南 Cursor與Figma智能對話Cursor Talk To Figma MCP是一款強(qiáng)大人工智能AI 應(yīng)用MCP 服務(wù)上一篇OpenCompass中的不確定性評估分布外檢測方法下一篇Epoch多軸支持完全指南如何創(chuàng)建復(fù)雜的多維度圖表創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考