Data Extractor MCP
从TS/JS代码中提取数据并生成JSON和SVG文件的工具
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Data Extractor MCP。 它的用途是：从TS/JS代码中提取数据并生成JSON和SVG文件的工具 完整的 Skill 内容见：https://321skill.com/skills/data-extractor-mcp/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请使用Data Extractor MCP，帮我从这个`src/components/icons.ts`文件中提取所有SVG图标组件，并生成单独的SVG文件。”，它会解析该文件，识别出每个以React组件或函数形式定义的SVG，然后为每个图标创建一个对应的.svg文件。或者你可以说：“从`data/models.ts`里提取`Product`和`User`这两个接口定义的数据结构，并生成JSON Schema。”，它会分析接口类型，并输出结构化的JSON Schema文件。
介绍
Data Extractor MCP 是一款专为开发者设计的工具，它解决了从TypeScript或JavaScript代码中手动提取结构化数据和SVG组件时效率低下、容易出错的问题。通过解析代码文件，它能自动识别并抽取出定义好的数据对象和SVG组件，显著提升数据迁移和组件复用的效率。
使用方式非常直接：开发者只需将包含目标数据或SVG组件的TS/JS文件路径提供给该Skill，它便会自动分析代码结构，提取出指定的数据模型或SVG定义，并分别生成易于使用的JSON数据文件和独立的SVG图像文件。整个过程无需手动复制粘贴，也避免了因格式转换可能引入的错误。
这个Skill非常适合前端开发、全栈开发和智能体开发者，尤其是那些需要频繁在代码库与设计稿、文档或不同项目之间同步数据和UI组件的场景。它帮助开发者将代码中“沉睡”的数据和组件快速转化为可独立使用和分发的资产。
建议在代码结构相对清晰、数据定义明确的项目中使用。对于高度动态生成或结构极其复杂的代码，可能需要预先进行一定的代码整理以确保提取的准确性。同时，生成的文件建议进行二次校验，以确保符合目标格式的要求。
核心特点
与通用代码解析工具不同，它深度聚焦于TS/JS代码中的数据对象和SVG组件提取，并能一键生成可直接使用的JSON和SVG文件，实现了从代码到可用资产的快速转换。
注意事项
不适合处理运行时动态生成或结构极其松散、难以静态分析的代码数据。
常见问题
它能处理React组件中的SVG吗？
可以，它能识别并提取JSX/TSX中定义的SVG组件，生成独立的.svg文件。
提取的JSON数据格式是怎样的？
会根据源代码中对象或数组的结构，生成对应的、格式规范的JSON文件。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/data-extractor-mcp/raw/index.md 读取 Data Extractor MCP 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/data-extractor-mcp/raw/index.md（查看排版版本）