feat: add ai doc

docs/README.md

@@ -4,7 +4,7 @@
 
 更新时间：2025-2-14
 
-SDK介绍：Hippy 是 TDSF 腾讯端框架（Tencent Device-oriented Service Framework）下的开源跨平台应用开发解决方案。Hippy 可以理解为一个精简版的浏览器，从底层做了大量工作，抹平了 iOS、Android、Ohos 三端差异，提供了接近 Web 的开发体验，目前上层支持了 React 和 Vue 两套界面框架，前端开发人员可以通过它，将前端代码转换为终端的原生指令，进行原生终端 App 的开发。同时，Hippy 从底层进行了大量优化，在启动速度、渲染性能、动画速度、内存占用、包体积等方面都提供了业内顶尖的性能表现。
+SDK介绍：Hippy 是腾讯端框架（Tencent Device-oriented Service Framework）下的开源跨平台应用开发解决方案。Hippy 可以理解为一个精简版的浏览器，从底层做了大量工作，抹平了 iOS、Android、Ohos 三端差异，提供了接近 Web 的开发体验，目前上层支持了 React 和 Vue 两套界面框架，前端开发人员可以通过它，将前端代码转换为终端的原生指令，进行原生终端 App 的开发。同时，Hippy 从底层进行了大量优化，在启动速度、渲染性能、动画速度、内存占用、包体积等方面都提供了业内顶尖的性能表现。
 
 更新日志：[Change log](https://github.com/Tencent/Hippy/releases)
 

docs/_navbar.md

@@ -1,6 +1,7 @@
 * [简介](/)
 * [开发指引](development/demo.md)
 * [API](api/hippy-react/introduction.md)
+* [AI编程](ai/hippy-ai.md)
 * [特性](feature/feature3.0/vfs.md)
 * [架构](architecture/introduction.md)
 * [版本日志](https://github.com/Tencent/Hippy/releases)

docs/_sidebar.md

@@ -2,6 +2,7 @@
 * [简介](/)
 * [开发指引](development/demo.md)
 * [API](api/hippy-react/introduction.md)
+* [AI编程](ai/hippy-ai.md)
 * [特性](feature/feature3.0/vfs.md)
 * [架构](architecture/introduction.md)
 * [版本日志](https://github.com/Tencent/Hippy/releases)

docs/ai/_sidebar.md

@@ -0,0 +1,5 @@
+<!-- docs/hippy-vue/_sidebar.md -->
+
+* [Hippy AI编程](ai/hippy-ai.md)
+* [Hippy Figma-MCP使用指引](ai/figma-mcp.md)
+

docs/ai/figma-mcp.md

@@ -0,0 +1,66 @@
+# 其他工具(一): Figma MCP
+
+如何直接把 Figma 的设计图生成 Hippy 代码？
+
+1.  **Figma 开启 MCP Server**
+    1.  参考 figma 文档下载最新版本的 figma 桌面端应用。
+    2.  需要申请 dev mode 权限。
+
+     ![figma_dev](./img/figma_dev.png)
+    3.  开启 MCP Server。
+
+     ![figma_mcp_enable](./img/figma_mcp_enable.png)
+
+2.  **Cursor/Codebuddy/Vscode 等配置接入 MCP**
+    *   可以参考：[配置使用教程](https://km.woa.com/articles/show/632094?kmref=search&from_page=1&no=2)
+    *   **Cursor**:
+        ```json
+        {
+          "mcpServers": {
+            "Figma": {
+              "url": "http://127.0.0.1:3845/mcp"
+            }
+          }
+        }
+        ```
+    *   **CodeBuddy**:
+        ```json
+        {
+          "mcpServers": {
+            "Figma Dev Mode MCP": {
+              "type": "http",
+              "url": "http://127.0.0.1:3845/mcp"
+            }
+          }
+        }
+        ```
+    *   **Vscode**:
+        ```json
+         "chat.mcp.discovery.enabled": true,
+         "mcp": {
+           "servers": {
+             "Figma Dev Mode MCP": {
+               "type": "http",
+               "url": "http://127.0.0.1:3845/mcp"
+             }
+           }
+         },
+         "chat.agent.enabled": true
+        ```
+
+3.  **Figma MCP 方法**
+    *   参考：[Figma MCP官方文档](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-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**:
+        > 请根据我提供的 Figma 设计链接，使用 Dev Mode + MCP 协议生成高质量的 Hippy 代码。确保生成的代码结构清晰、还原度高，语义化良好，适配当前项目的组件体系，确保编译通过:
+        > @https://www.figma.com/design/CMXiU5b0y7DWLF6oVpjyqm/Figma-Basics?node-id=0-495&t=7dr4gc6Ig2o3UwRg-4
+        > 代码生成目录是 driver/js/examples/hippy-react-demo/src/components/figma-mcp/
+        > 可以参考 driver/js/examples/hippy-react-demo/src/components/ 下的其他页面代码
+

docs/ai/hippy-ai.md

@@ -0,0 +1,138 @@
+# Hippy AI 编程指引
+
+## 前言
+
+Hippy 团队目前能提供给 AI 的是 iwiki 文档、Hippy源码、Hippy源码生成的知识库。
+
+1.  **团队文档**:
+    *   团队早期写了比较多的文档，也把历史 Oncall 单都转化成 iwiki 文档，但是效果一般：
+        *   文档很难覆盖全面，框架逻辑细节、平台差异性、兼容性等涉及范围太广。
+        *   有些问题类型文档是无法解答的，比如分析代码问题原因。
+
+2.  **源码 RAG 方案**:
+    *   后面调研了源码 RAG 方案，比如 deepwiki、工蜂 wiki 等。
+
+    [deepwiki评测](https://doc.weixin.qq.com/sheet/e3_ANsAsgZ1ACcCNxwVgy2g4Q3qHbB7S?scode=AJEAIQdfAAoNwvFu2gANsAsgZ1ACc&newPad=1&newPadType=clone&tab=zkgs2j)
+
+    [deepwiki的Hippy项目](https://deepwiki.com/Tencent/Hippy)
+
+3.  **组合方案**:
+    *   在提供了 deepwiki 基础上，文档知识库也能在确定答案情况下快速返回结果，需要组合两个内容。
+    *   基于 Knot 平台的方案（示例）：
+    <img src="ai/img/knot.png" alt="基于 Knot 平台的方案"/>
+
+## 总结
+
+deepwiki + 文档知识库的组合方案，比纯文档知识库要好不少，但比 Cursor codebase 效果差点。目前还是建议大家写代码时，直接把 Hippy 源码引入到 IDE 的 workspace。
+
+下面分几个场景介绍 Hippy AI 使用指引：
+
+---
+
+## 一、Cursor
+
+1.  **建议源码引入 Hippy codebase**
+    *   在业务项目中添加 workspace。 Hippy 团队通过实际测试发现，引入 Hippy codebase，让 Cursor 去建立源码的索引，能比较好的对很多 Hippy 的问题解答，也能极大的提交日常开发的效率。
+
+    <img src="ai/img/codebase.png" alt="codebase" width="80%"/>
+
+2.  **添加 deepwiki mcp**
+    ```json
+    "mcpServers": {
+        "deepwiki-sse": {
+             "url": "https://mcp.deepwiki.com/sse"
+        },
+        "deepwiki-mcp": {
+             "url": "https://mcp.deepwiki.com/mcp"
+        }
+      }
+    ```
+    *   强烈建议添加 deepwiki mcp，deepwiki 是把代码信息转换为知识库的方案。Hippy 作为一个开源框架，大量的信息都在代码中。
+
+3.  **Hippy MCP**
+    *   会集成 Hippy 的知识库信息, 后续提供一些生成代码的能力等。
+    ```json
+       "hippy-mcp": {
+          "url": "https://hippy.woa.com/mcp",
+          "headers": {
+            "X-Rtx-Username": "zealotchen" // 修改为自己的企业微信名
+          }
+        }
+    ```
+
+4.  **Prompt 技巧**
+    *   问题尽量描述清晰，推荐可以带上问题代码，让 Cursor 协助排查。
+    *   问题尽量区分用的 React DSL 还是 Vue2/Vue3 DSL。
+    *   涉及代码原理的问题，可以带上 “请使用 deepwiki 的 ask_question”，强制触发 deepwiki。
+    *   编写代码的问题，可以设置参考 xxx 代码，会提高成功率。
+
+---
+
+## 二、CodeBuddy
+
+CodeBuddy 内网版可以单独添加 官方 Hippy 知识库：
+
+1.  **询问问题时，通过 @ 可以添加「官方 Hippy 知识库」**
+    *   CodeBuddy 已经内置集成 Knot 的知识库，大家在询问问题时，可以添加 Hippy 知识库。
+
+    <img src="ai/img/codebuddy_wiki.png" alt="codebuddywiki" width="80%"/>
+
+2. **Hippy MCP**
+    ```json
+       "hippy-mcp": {
+            "timeout": 60,
+            "type": "streamableHttp",
+            "url": "https://hippy.woa.com/mcp",
+            "headers": {
+                "X-Rtx-Username": "zealotchen" // 修改为自己的企业微信名
+            }
+        }
+    ```
+---
+
+## 三、网页/企微入口
+
+
+1.  **Knot 智能体**
+
+    ![knot_agent](./img/knot_agent.png)
+
+    [Knot 智能体](https://knot.woa.com/chat?web_key=8292b4273a9549d8bbefa5ddb699cdca)
+
+    **使用提示**
+    *   大家提问后，记得点赞👍/👎，方便后续优化。
+    *   Hippy AI 助手的知识包含：iwiki 文档、Hippy 源码及开发文档、deepwiki。
+    *   Hippy AI 助手弹窗可以放大，方便查看。
+
+   **Prompt技巧：**
+    *   问题尽量描述清晰，明确想了解的平台、组件、属性，也可以带上问题代码，。
+    *   问题尽量区分用的 React DSL 还是 Vue2/Vue3 DSL。
+
+
+2.  **企微机器人**
+    *   建设中
+
+---
+
+## 四、单独知识库集成
+
+   知识库集成了 Hippy 团队积累的文档，和历史 Oncall 数据，大家可以通过 Hippy 文档、Knot 智能体直接使用，或者集成到自己的系统中。
+
+1.  **Knot 知识库**
+    *   [Knot 知识库](https://knot.woa.com/knowledge/detail/7dd3b112147846c298b88ee102132de0)
+
+2.  **iWiki 知识库**
+    * [Hippy官方知识库](https://iwiki.woa.com/p/4013486752)
+    * [Hippy历史Oncall数据](https://iwiki.woa.com/p/4015817597)
+
+## 五、其他好用的工具
+
+### (一) Figma MCP
+
+[Figma MCP接入指引](ai/figma-mcp.md)
+
+## 六、后续规划
+
+Hippy 团队后续会补充更多 AI 编程实践的案例和工具, 欢迎大家提交建议或者贡献。
+
+

docs/api/feedback.md

@@ -34,7 +34,7 @@ hippy本质上使用的还是客户端原生组件 以及一部分自绘组件
 
 [Hippy iOS 曝光上报指引](https://iwiki.woa.com/p/589637144)
 
-腾讯内部有疑问可以咨询企业微信 TDSF 小助手
+腾讯内部有疑问可以咨询企业微信 端框架小助手
 
 
 ## 5. 启动时, Hippy 如何从终端获取参数

docs/api/hippy-vue/feedback.md

@@ -23,6 +23,6 @@ b. 因为现在 hippy 没有提供换行组件 br标签 或者 white-space 的 c
 
 ## 4. Hippy 是否支持 Vite 构建
 
-已支持，目前只有腾讯内部版，腾讯业务可联系 TDSF 小助手
+已支持，目前只有腾讯内部版，腾讯业务可联系 端框架小助手
 
 

docs/api/performance.md

@@ -79,7 +79,7 @@ Performance API 冷启动打点指标：
 
 监控方式：
 
-​            1.     Hippy 3.x版本：可以接入最新 aegis-sdk （腾讯内部咨询 TDSF 小助手），已经基于 performance api，可以直接获取打点数据 
+​            1.     Hippy 3.x版本：可以接入最新 aegis-sdk （腾讯内部咨询 端框架小助手），已经基于 performance api，可以直接获取打点数据 
 
 
 

docs/development/report.md

@@ -16,6 +16,6 @@ hippy本质上使用的还是客户端原生组件 以及一部分自绘组件
 
 [Hippy iOS 曝光上报指引](https://iwiki.woa.com/p/589637144)
 
-腾讯内部有疑问可以咨询企业微信 TDSF 小助手
+腾讯内部有疑问可以咨询企业微信  小助手