$ loading_
将 Figma 设计映射到真实 React 组件库,帮助 AI 生成可直接落地的前端代码。
复制安装指令,让 AI 自动完成配置 · 推荐新手
"Component MCP Server" 暂无可直接复制的安装信息,请查看页面文档或源码仓库。
请根据这个 Figma 设计节点,匹配我们现有的 React 组件库,生成可直接使用的页面代码,并保留正确的 import 路径与组件属性。
输出基于现有组件库的 React 代码,包含正确导入、组件结构与主要属性映射。
分析该 Figma 页面中使用的按钮、表单和卡片样式,并映射到我们的组件库实现,列出对应关系与建议替换代码。
输出设计元素与代码组件的对应清单,并附上推荐的替换实现代码片段。
根据多个 Figma 画板,分别生成对应的 React 组件文件,优先复用已有组件,保持命名规范,并指出缺失的组件依赖。
输出多个可复用的 React 组件草稿,并标注缺失组件、依赖项和复用建议。
连接 Figma 接口读取设计稿,帮助在 AI 编码流程中实现设计到代码转换。