$ loading_
将界面截图或 Figma 数据转为跨平台设计转代码产物，加速前端实现。
复制安装指令，让 AI 自动完成配置 · 推荐新手
"ui-design-to-code-mcp" 暂无可直接复制的安装信息，请查看页面文档或源码仓库。
请读取这张 UI 截图和对应的 Figma 节点 JSON，生成跨平台设计转代码产物，包括组件结构、样式映射、布局说明与实现建议。
输出可供前端开发使用的组件层级、样式标注、布局规则及代码实现参考。
基于 Figma 数据和页面截图的混合输入，分析视觉元素与结构对应关系，整理成统一的设计转代码中间产物，并指出可能缺失的信息。
输出统一的设计语义结构，并标注尺寸、间距、组件关系及待补充字段。
读取这个界面资源，生成适用于 Web 与移动端的设计转代码产物，重点说明可复用组件、响应式布局策略和平台差异处理建议。
得到面向多端开发的组件拆分方案、适配策略和实现优先级建议。
连接 Figma 获取设计上下文与资源，并将节点高效转换为生产代码。
从 Figma 读取 Tokens Studio 设计令牌，辅助生成与设计一致的代码。
通过 Figma 插件 API 让 AI 直接创建、修改和管理设计稿。
将 Figma 设计系统接入 AI，用于提取、生成与调试设计资源
让 AI 助手直接连接 Figma 画布，生成并编辑布局、图形与界面设计。
自动从任意数据源生成 MCP 服务，让 AI 零代码查询数据库、表格与 API。