oke front MCP

oke前mcp

内部前端开发人员在Cursor聊天中使用自然语言查询时，可以快速查找Figma规划信息，并将查询结果学习存储在本地元数据中的MCP服务器。

______________________________________________________________________

项目背景

以前，为了开发屏幕，需要分别打开以下源进行验证。

• Figma计划书
• 发布交付项/存储库
• 设计系统文档
• UI组件文档

此结构将大大增加“信息浏览时间”，并使您重复同样的问题。\ oke-front-mcp旨在通过以问题为中心的开发流程减少此问题。

______________________________________________________________________

核心目标

1. 减少分布式开发资源（Figma、公共代码、设计策略）的浏览成本
2. 用自然语言进行企划搜索
3. 通过选择候选/版本安全地处理模糊查询
4. 通过自动学习一次找到的信息，提高下一个查询的速度
5. 确保操作稳定性，即使重新收集失败也能保留现有数据

______________________________________________________________________

当前实施范围（步骤1:Figma）

目前，围绕Figma步骤实现了以下内容：

• 直接查看屏幕ID（CONT-XX_YY_ZZ)
• 自然语言搜索（项目/版本/功能关键字）
• 未指定版本时重新提问（防止自动确定）
• 提示候选人+选择编号（1, 2번, 3 번기획)
• 描述延迟加载
• 本地错误Figma fallback搜索
• 保存查询结果自动学习
• 安全重新收集（merge+backup+原子存储）

步骤2（Publisher）完成第一次实施

• search_publisher_code 添加tool
• 同步混合存储

- 自动clone/pull优先 - 失败时 PUBLISHER_REPO_PATH 后备方案

• 公共代码索引（data/publisher-index.json）创建/更新
• 基于屏幕/功能关键字的component bundle响应

- 主真空吸尘器 - 相关脚本 - 相关样式（sass/scs/css） - 共享组件(src/components)

______________________________________________________________________

如何操作

默认流：

1. 解析查询（screenId/project/version/keywords）
2. 本地索引（data/screen-index.json）搜索
3. 只要是单件就确定，提出复数面候选人
4. 需要详细信息时查看Figma（lazy loading）
5. 将结果保存到索引（学习）
6. 如果本地错误，则Figma fallback后重新保存

核心是“快速本地搜索+缺少时实时补充+学习补充结果”。

______________________________________________________________________

主要文件

• src/index.ts

- MCP tool注册/路由

• src/tools/search-figma-spec.ts

- Figma查询处理编排

• src/tools/search-publisher-code.ts

- Publisher查询和捆绑响应

• src/services/search.ts

- 检索/保存Figma元数据

• src/services/figma.ts

- Figma API集成

• src/services/publisher.ts

- 同步/索引/搜索公共存储库/捆绑包

______________________________________________________________________

按版本实施摘要

第一阶段

• Figma API连接
• 直接查看屏幕ID

第2阶段

• 元数据索引
• 引入自然语言搜索

第2.5阶段

• 增强候选选择UX
• 稳定版本重新询问和编号选择

第三期

• fallback搜索+自动学习

阶段4

• 轻量级收集+lazy loading
• 增强存储路径/重新收集的稳定性

______________________________________________________________________

技术堆栈

• Node.js
• TypeScript
• @modelcontextprotocol/sdk
• axios
• 节点 fs/path 模块（本地索引操作）

选择原因：

• 在遵循MCP标准结构的同时，我们使用了TypeScript+MCP SDK组合来保持类型稳定的搜索/存储逻辑。

______________________________________________________________________

目录/文档结构

代码：

• src/index.ts：MCP服务器入口点
• src/tools/search-figma-spec.ts：查询处理编排
• src/services/search.ts：本地搜索/保存
• src/services/figma.ts：Figma API
• src/scripts/collect-metadata.ts：收集脚本

文档（5个固定）：

• docs/SEARCH_FLOW.md
• docs/DEVELOPMENT.md
• docs/DEBUG.md
• docs/PLAN.md
• docs/SETUP_GUIDE.md

______________________________________________________________________

快速入门

npm install
npm run build
npm run collect-metadata

Cursor查询示例：

@oke-front-mcp 콘트라베이스 3.0.6 볼륨 수정 기획 찾아줘
@oke-front-mcp 리스너 생성 퍼블 코드 찾아줘

______________________________________________________________________

当前状态和后续步骤

当前：

• Step 1（Figma）正在升级
• 完成搜索一致性/学习稳定性改进

下一个：

• Step2（Publisher集成）
• 步骤3（设计系统/集成/组件指南）

oke前mcp