AI导哈

Figma元数据搜索服务

一款为前端开发者提供的Figma元数据搜索与学习服务，通过自然语言查询快速获取设计资源并自动存储学习结果。

  • by dananote
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 dananote/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

相关 MCP