AI 开发

AI 调用Figma

以codex为例:

Figma 插件安装

codex 搜索插件安装,常用功能:

  • Pull Figma content:复制Figma Frame链接,它帮你转成代码
  • Generate Figma design:直接发指令,它帮你在Figma新建文件,画好界面,同时生成对应的代码。
根据设计稿链接生成代码

修改设计稿后,回到CodeX,输入 Inspect a Figma design and implement it in code:Figma Frame链接,生成一个本地的预览地址,就可以查看是否调整,再进行细节优化和调整。

根据设计稿XML和效果图生成代码

Figma Mcp 调用次数不够时,可以通过设计稿XML和效果图来调整页面,节省Mcp的调用次数:

  • 安装 Figma 插件 FigML - Figma XML Exporter Plugin
  • 导出XML结构文件和PNG效果图
  • 回到CodeX,上传XML结构文件和PNG效果图,简单描述,调整页面代码
相关推荐
倾听醉梦语1 小时前
React/Vite/Next.js 前端开发工具 SpotPatch:点击页面元素精准定位 JSX/TSX 源码
javascript·react·ai编程·vite·next.js·前端开发工具
zandy10112 小时前
8款主流编程软件,五个维度深度解析——2026年AI编程工具技术选型
agent·ai编程
火云牌神2 小时前
如何用项目规则给 AI 划定编码边界
人工智能·系统架构·ai编程·vibecoding
神奇霸王龙2 小时前
MCP 微软教材背书:5 国产基座 Agent 承接力实测
microsoft·ai·ai作画·agent·ai编程·ai写作·mcp
呆呆敲代码的小Y3 小时前
awesome-llm-apps 开源项目详解:100+ AI Agent 与 RAG 模板一键复用
人工智能·ai·开源·ai编程·ai agent·awesome·llm应用
全栈技术负责人3 小时前
Ollama + Open WebUI 搭建本地大模型
人工智能·ai·ai编程
小虎AI生活4 小时前
一人公司出海实战:用 ASR + LLM + TTS 零成本将中文视频翻译为英文
ai编程
全栈弄潮儿4 小时前
ChatGPT、Codex、Cursor 怎么选?AI 编程工具入门指南
chatgpt·openai·ai编程