跨平台移动开发前端【免费下载链接】HippyHippy is designed to easily build cross-platform dynamic apps. 项目地址https://gitcode.com/gh_mirrors/hi/Hippy点击查看免费下载Hippy 团队为开发者提供了一套完整的 AI 辅助开发方案覆盖 IDECursor / CodeBuddy、网页Knot 智能体与企业微信AI 小助手机器人三类入口并配套 Hippy MCP、DeepWiki MCP、Figma MCP 等可插拔工具链。本篇指南基于 docs/ai/hippy-ai.md 与 docs/ai/figma-mcp.md 整理从知识来源、工具配置、Prompt 技巧到设计稿还原给出可直接照做的完整方案读完即可在自己的 Hippy 项目里落地一套高效的人机协作开发流。一、Hippy AI 的核心知识来源与适用场景Hippy 团队为 AI 工具提供三类知识来源覆盖快速解答—深度分析—综合解决三个层次资源类型内容访问方式适用场景团队文档iwiki 文档、Oncall 单IDECodeBuddy 导入知识库快速问题解答框架源码Hippy 框架源码IDECursor / CodeBuddy 源码索引、Deepwiki MCP深度代码分析组合方案文档 源码 RAG网页Knot 智能体IDE源码索引、Hippy MCP综合问题解决四类典型适用场景分别是代码开发用 AI 辅助 Hippy 项目开发、问题排查通过 AI 分析代码问题和异常、文档查询快速获取 Hippy 框架相关信息、UI 还原基于设计稿生成 Hippy 代码。三种方案的效果差异也需要了解纯文档方案可以解决 Hippy 团队记录过的问题但覆盖面有限比如无法分析具体代码问题Deepwiki 方案效果不错代码分析能力强效果接近 Cursor 源码索引效果组合方案结合了知识库和源码索引适合大部分问题的解答。最佳实践IDE 场景下将 Hippy 源码工程添加到 IDE 工作区并配置 Hippy MCP网页场景下通过 Knot 智能体访问可以快速解答大部分场景的问题。二、Cursor源码索引 rules MCP 三步配置1. 引入 Hippy 源码工程到工作区推荐必须Hippy 团队通过实际测试发现把 Hippy 源码工程引入 IDE 工作区后Cursor 会为源码建立索引对问题的解答质量有明显提升能极大提高日常开发效率。Hippy 仓库的源码主体分布在dom/DOM 管理、driver/js/JS 驱动与 DSL 层、framework/Android / iOS / 鸿蒙三端框架、renderer/渲染器等目录把仓库根目录加入工作区即可让 AI 检索到这些实现细节。2. 配置项目的rules文件推荐必须配置 Cursor 的rules文件在很多场景都能提高开发效率。Hippy 官方 rules 中包含了Hippy 源码结构说明常用组件 API 使用方式AI 调试技巧React / Vue DSL 区别等。各团队可以根据自己情况补充 rules例如补充业务目录结构、可以参考的代码文件目录、常见问题等。3. 常用 MCP按需配置1Hippy MCP集成 Hippy 的知识库信息iwiki和 Hippy 框架源码信息Deepwiki会根据回答的问题类型给出针对性解答。凡是涉及 Hippy 框架相关的问题都建议配置hippy-mcp: { timeout: 60, url: https://hippy.woa.com/mcp, headers: { X-Rtx-Username: 自己的企业微信名 } }2Deepwiki MCPDeepwiki 提供针对 Hippy 框架源码的解答。如果项目工作区没有引入 Hippy 源码建议添加该 MCPmcpServers: { deepwiki-mcp: { timeout: 60, url: https://mcp.deepwiki.com/mcp } }三、CodeBuddy内置知识库 源码索引CodeBuddy 内网版可以单独添加官方 Hippy 知识库其余大部分配置与 Cursor 相同可参考上文配置。1. 询问问题时通过 添加「官方 Hippy 知识库」推荐必须CodeBuddy 已内置集成 Knot 的知识库询问问题时可以添加 Hippy 知识库让回答直接命中团队沉淀的文档与 Oncall 经验。2. 引入 Hippy 源码工程到工作区推荐必须配置方式同上文 Cursor 配置同样建议把 Hippy 仓库加入工作区建立源码索引。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: 自己的企业微信名 } }2Deepwiki MCP同样需要声明typemcpServers: { deepwiki-mcp: { timeout: 60, type: streamableHttp, url: https://mcp.deepwiki.com/mcp } }四、网页与企微入口Knot 智能体与企微机器人1. Knot 智能体在不方便使用 IDE 的场景下可以通过 Knot 智能体网页入口直接提问。Knot 智能体以Hippy为主题能够深度思考后结合知识库与源码给出解答使用提示提问后记得点赞 / 点踩 方便团队后续优化助手效果Hippy AI 助手的知识包含iwiki 文档、Hippy 源码及开发文档、deepwikiHippy AI 助手弹窗可以放大方便查看。2. 企微机器人在企业微信中搜索「Hippy AI小助手」即可找到机器人支持直接提问也可以把机器人添加到开发群中在群内随时提问五、Prompt 技巧四类高频场景的提问范式1. 问题排查类核心要点问题尽量描述清晰明确想了解的平台、组件、属性推荐带上问题代码。最佳实践示例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 组件设置了 fontSize 属性为 16 但显示效果不符合预期文字显示过小。请帮忙分析可能的原因。带上平台Android / iOS / 鸿蒙、组件名Text、属性fontSize与可复现代码AI 才能精准定位是样式换算、平台差异还是 DSL 用法问题。2. DSL 类型区分核心要点问题详情中要区分使用的是 React DSL 还是 Vue2 / Vue3 DSL。Hippy 同时支持 Hippy React 与 Hippy Vue含 Vue3两套 DSL 的组件 API 与写法不同混用会导致 AI 给出错误建议。Hippy React 示例Hippy React 中 Text 组件支持长按文本选中吗Hippy Vue 示例使用 Hippy Vue3 开发如何实现一个自定义的组件仓库中 driver/js/packages/hippy-react 与 driver/js/packages/hippy-vue-next 分别对应两套 DSL 的实现提问时指明 DSL 类型可让 AI 检索正确的源码目录。3. MCP 触发优化核心要点在 Prompt 中带上相关 MCP 提示提高对应 MCP 的触发概率。Hippy 框架问题涉及到 Hippy 的提问无论是对 Hippy 框架还是业务上的诉求建议触发 Hippy MCP请使用 hippy-mcp 触发。框架源码问题涉及到 Hippy 框架源码细节的问题如果本地没有引入 Hippy 源码到工作区建议触发 DeepWiki MCP使用 deepwiki-mcp 触发。UI 还原问题涉及到 Figma 设计图还原的建议触发 Figma MCP请使用 figma-mcp 触发一般情况下只要带上了 Figma 的设计链接都会触发 Figma MCP。4. 代码引用技巧核心要点编写代码的问题可以设置参考已有的 xxx 代码会提高成功率。仓库中的 driver/js/examples/hippy-react-demo/src/components 是官方提供的 Hippy React 业务组件示例集包含 ListView、Image、TextInput、WaterfallView 等 17 个组件非常适合作为生成代码的参考样板。页面生成示例帮我根据 figma 链接xxx实现一个 Hippy React 页面图片组件请使用 driver/js/examples/hippy-react-demo/src/components/Image 这个自定义组件。 页面实现可以参考已实现的 Hippy React 页面比如 driver/js/examples/hippy-react-demo/src/components/ListView 下的页面代码。问题排查示例帮我排查一个问题问题可能和项目中一些代码有关可以参考项目中 driver/js/examples/hippy-react-demo/src/components/ListView 这个页面的代码来排查。例如 ListView 示例组件 就是官方提供的列表页实现把它作为参考代码能让 AI 生成的页面在组件使用、样式与事件绑定上保持一致components 入口文件 则集中导出了全部示例组件可以作为项目里已有哪些组件的清单喂给 AI。六、Figma MCP把设计图直接生成 Hippy 代码这是 AI 编程链路中UI 还原场景的关键一环完整指引见 docs/ai/figma-mcp.md核心流程分三步。1. Figma 桌面端开启 MCP Server参考 Figma 官方文档下载最新版本的 Figma 桌面端应用需要申请 Dev Mode 权限开启 MCP Server2. 在 IDE 中配置接入 Figma MCP以本机回环地址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 发现与 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 暴露了以下方法按需调用get_code获取 Figma 根据设计图生成的代码目前只支持前端后续会支持 Compose 等目前 Cursor 直接用前端代码转 Hippy效果也还不错get_variable_defs获取 Figma 选中的变量和样式等get_code_connect_map获取 Figma 节点 id 和代码组件库的映射表get_image获取 Figma 中图片的链接create_design_system_rules创建 Figma 的设计 rules有助于设计系统和输出技术栈保持一致get_metadata获取 Figma 根据设计图生成的原始 DSL 信息。4. 使用示例结合前面的 Prompt 技巧可以这样让 AI 完成设计稿 → Hippy 页面的完整还原请根据我提供的 Figma 设计链接使用 Dev Mode MCP 协议生成高质量的 Hippy React 代码。确保生成的代码结构清晰、还原度高语义化良好适配当前项目的组件体系确保编译通过 figma 设计链接 代码生成目录是 driver/js/examples/hippy-react-demo/src/components/figma-mcp/ 可以参考 driver/js/examples/hippy-react-demo/src/components/ 下的其他页面代码设计链接本身就会触发 Figma MCP而指定参考目录与生成目录则能让新代码融入现有 Hippy 示例工程的组件体系。七、后续规划Hippy 团队后续会补充更多 AI 编程实践的案例和工具欢迎大家提交建议或贡献。AI 编程的落地关键在于三件事把 Hippy 源码加入 IDE 工作区建立索引、配置好 Hippy / Deepwiki / Figma 三个 MCP、按照本指南的 Prompt 范式提问——三者结合即可在代码开发、问题排查、文档查询与 UI 还原四个场景中获得稳定可用的 AI 辅助能力。赞分享跨平台移动开发前端【免费下载链接】HippyHippy is designed to easily build cross-platform dynamic apps. 项目地址https://gitcode.com/gh_mirrors/hi/Hippy点击查看免费下载相关推荐Cursor AI与Figma终极集成指南免费快速配置MCP协议Cursor AI与Figma终极集成指南免费快速配置MCP协议 在当今的设计开发工作流中AI辅助设计已成为提升效率的关键因素。通过Cursor AI与Fi人工智能AI 应用MCP 服务Cursor Talk To Figma MCP 完整配置指南Cursor Talk To Figma MCP 完整配置指南 项目概述 Cursor Talk To Figma MCP 是一个创新的开源项目它通过 Mod人工智能AI 应用MCP 服务如何快速实现Cursor与Figma智能对话MCP集成完全指南如何快速实现Cursor与Figma智能对话MCP集成完全指南 Cursor与Figma智能对话Cursor Talk To Figma MCP是一款强大人工智能AI 应用MCP 服务上一篇OpenCompass中的不确定性评估分布外检测方法下一篇Epoch多轴支持完全指南如何创建复杂的多维度图表创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考