$ loading_
增强 Figma 接口上下文信息,帮助 AI 更准确理解布局并生成设计代码。
复制安装指令,让 AI 自动完成配置 · 推荐新手
"Figma Context MCP" 暂无可直接复制的安装信息,请查看页面文档或源码仓库。
读取这个 Figma 文件的页面与元素位置信息,分析各组件的层级、间距和对齐关系,并生成对应的 React + CSS 代码。
输出基于布局关系生成的前端组件代码,并尽量还原设计结构与样式。
获取该 Figma 画板中所有元素的坐标与尺寸,说明页面分区、主要模块之间的相对位置,以及可能的栅格系统。
输出一份清晰的布局分析,帮助团队快速理解设计组织方式。
对比 Figma 设计中的元素位置关系与现有页面实现,指出间距、对齐、层级或结构上的主要偏差,并给出修正建议。
输出设计还原偏差清单及可执行的优化建议。
连接 Figma 设计稿,支持读取编辑、生成多框架代码与无障碍检查。