AI工作流搭建

拥抱AI，重塑产品研发流程

需求整理

将需求文档进行文档结构化，便于大模型的理解

架构文档

prd+技术文档

prompt

知识库

灵感来源：https://joycode.jd.com/docs/case/case4/

将私有模版业务组件库封装成一个MCP服务，提供标准化工具和Prompt模块，实现高效查询和代码获取。

你的私有组件库类似 Ant Design。让我解释 Ant Design 是如何解决开发者使用组件的问题，以及如何为你的组件库建立类似的解决方案：

是的！MCP (Model Context Protocol) 工具正是解决这个问题的完美方案！

MCP 工具的作用

MCP 工具可以让大模型：

直接访问你的私有组件库源码
读取 API 文档和 demo 示例
分析组件结构和类型定义
提供准确的使用指导

为你的组件库创建 MCP 工具

1. 组件库 MCP 工具可以提供这些功能：

typescript 复制代码

// MCP 工具示例
{
  "name": "component-library-server",
  "resources": [
    {
      "uri": "component://button/api",
      "name": "Button组件API文档",
      "mimeType": "text/markdown"
    },
    {
      "uri": "component://button/demo", 
      "name": "Button组件示例代码",
      "mimeType": "text/typescript"
    },
    {
      "uri": "component://all-components",
      "name": "所有组件列表",
      "mimeType": "application/json"
    }
  ],
  "tools": [
    {
      "name": "get_component_info",
      "description": "获取指定组件的详细信息"
    },
    {
      "name": "search_components", 
      "description": "根据功能搜索组件"
    },
    {
      "name": "generate_usage_code",
      "description": "生成组件使用代码"
    }
  ]
}

2. 实际使用场景：

你可以这样询问：

"帮我查找一个带图标的按钮组件"
"生成一个表单页面的代码，包含输入框和提交按钮"
"Button 组件支持哪些主题颜色？"

MCP 工具会：

自动读取你的组件库源码
分析组件 API 和类型定义
提供准确的代码示例
生成符合你项目规范的代码

3. 创建 MCP 工具的步骤：

创建 MCP 服务器配置
连接到你的组件库代码仓库
定义工具和资源接口
在 IDE 中启用 MCP 服务器

4. 现在可用的 MCP 资源：

我可以查看当前可用的 MCP 服务器：

让我检查当前可用的 MCP 服务器：

MCP 工具的优势

通过 MCP 工具，你的私有组件库可以实现：

智能代码生成

根据需求自动选择合适的组件
生成符合项目规范的代码
自动处理组件依赖关系

准确的 API 指导

实时读取最新的组件 API
提供准确的 props 类型说明
显示组件使用示例和最佳实践

文档和示例访问

直接访问组件文档
查看 demo 代码
了解设计规范和使用原则

下一步建议

如果你已经有 MCP 工具：告诉我工具名称，我可以直接使用
如果要创建 MCP 工具：我可以帮你设计配置方案
临时解决方案：你可以先提供组件库的关键信息，我帮你创建使用示例

你的组件库是否已经有 MCP 工具？或者你希望我帮你设计一个 MCP 工具方案？

告诉我你的具体情况，我会提供最适合的解决方案。

UI2Code

参考：https://joycode.jd.com/docs/case/case3

figma mcp

将知识库和UI2Code封装到一起形成一个新的MCP

1、读取组件库索引

2、告诉它要使用的组件

3、提供figma链接