$ loading_
将 Figma 设计映射到真实 React 组件库,帮助 AI 生成可直接落地的前端代码。
复制安装指令,让 AI 自动完成配置 · 推荐新手
"Component MCP Server" 暂无可直接复制的安装信息,请查看页面文档或源码仓库。
请连接这个 Figma 页面,并根据我们的 React 组件库生成对应页面代码。要求使用真实组件、正确 import、可直接在项目中运行。
输出基于现有组件库的 React 页面代码,包含正确组件引用与项目可用的导入语句。
分析这个 Figma 按钮区域,判断应使用组件库中的哪些 Button 变体,并生成示例代码,包含不同状态和尺寸。
返回设计元素与组件变体的映射结果,并附带可复用的 React 示例代码。
对比这个 Figma 模块与我们的 React 组件库,指出哪些设计可直接映射,哪些需要新组件或调整,并给出实现建议。
输出设计与组件库的一致性分析,列出可复用组件、缺口组件及具体实现建议。
连接 Figma 设计稿,支持读取编辑、生成多框架代码与无障碍检查。
让 AI 读取 Figma 设计数据并生成代码、模板或提示词
连接 Figma REST API,检查设计文件结构并导出图像或发布评论。
将 Figma 设计转为结构化语义 JSON 与截图,支持 AI 设计转代码流程。
扫描 React 与 Vue 项目并提取组件元数据,供 AI 编码代理准确调用。
将 Figma 设计稿高保真转换为 React 与 Tailwind 前端组件代码。