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效果图,简单描述,调整页面代码
相关推荐
心易行者2 小时前
从零搭建完整Web应用:7步走完全流程,配合web应用托管零门槛上线
人工智能·python·ai编程
全栈弄潮儿2 小时前
从零搭建你的 AI 编程工作流
aigc·openai·ai编程
却尘2 小时前
Agent Framework(1):会聊天的模型不值钱:微软用 7 步,把 LLM 从嘴替做成能上岗的 Agent
ai编程
Web3_Basketball2 小时前
从0到1落地MCP连接器企业工具:踩坑全记录
ai编程
十一捉一3 小时前
挑战在 Coding Agent 时彻底推翻之前的方案
agent·ai编程
大模型丫丫3 小时前
如何高效部署开源AI编程助手:OpenCode实战指南
开源·ai编程
OriginCoding3 小时前
用 AI Agent 协作完成一个 Android TOTP 应用:从需求边界到 v1.0.0
android·ai编程
zhangfeng11336 小时前
WebIDE 容器中 AtomCode 报 `ATOMCODE_SIG_STALE` 排查实录:一次由 8 小时时钟偏差引发的“悬案”
编辑器·ai编程·atomcode
星核0penstarry6 小时前
HICOOL 2026深度解读:从四大仪式看北京硬科技生态的底层逻辑
大数据·人工智能·科技·ai·创业创新·ai编程
wabil8 小时前
[AI-Talk] codx制作xmind文件技巧
ide·ai编程·myeclipse·xmind