SuperAPI AI 工具集

figma-generate-component

设计与创作

查看项目

更新于 10-16 03:36

技能介绍

用途:把 Figma 中的组件或画板转换为生产就绪的框架代码,可选用 React、Vue、HTML/CSS 等目标语言,用于设计到代码的交付流程。

主要能力:通过 Figma Desktop MCP 服务器(HTTP 传输,地址 http://127.0.0.1:3845/mcp)访问所选画板或 Figma URL 中的节点 ID;提取画板结构、组件、布局、样式与内容;识别设计令牌与变量;在存在 Code Connect 映射时优先复用设计系统组件而非从零生成;产出语义化、可访问的组件代码,并附带关键决策注释。

使用方式:用户可在 Figma 桌面应用中选中一个画板,或提供带节点 ID 的 Figma URL;若两者都未提供,需先选中画板或提供 URL。工具随后询问目标框架或语言,再生成对应代码。若 MCP 服务器未连接,会给出配置指引。

适用场景:设计系统组件落地、把 Figma 设计快速转成前端组件、需要遵循无障碍与语义化规范的界面开发。

限制与说明:依赖 Figma Desktop MCP 服务器连接;画板过于复杂时会建议拆分为多个组件;需先确认目标框架偏好;生成后建议在不同视口与屏幕尺寸下验证,并检查代码语法、布局匹配、交互可访问性与设计令牌引用;缺失资源需另行说明。具体支持情况、收费、价格、平台与效果等资料暂未提供。