#Figma代码生成

5天前

朋友问我对于 Figma 生成代码有没有好的方法，他目前做法是：Figma 导出 HTML 代码，然后把导出的代码让 GitHub Copilot 按照代码库中的组件格式重写。他觉得这样还要复制粘贴代码，再写一堆提示词让 Copilot 重写很麻烦。我对 Figma 不是很熟悉，建议他可以试试把 Figma 的结果直接截图或者导出 PNG，然后把截图发给 Copilot，让 Copilot 根据截图一步到位生成 UI 代码。他说这样得到的样式不如从 Figma 导出的准确，毕竟 Figma 上有精准的颜色、尺寸，而 AI 生成的就没那么精准。我建议他可以考虑两者结合一下，同时导出代码和生成截图，然后把截图、Figma 导出代码和组件说明一起发给 AI（提示词中用 XML 标签隔开），这样就可以兼顾 UI 生成和样式准确性了。参考提示词如下： [UI 设计截图] <Figma导出代码> [Figma 代码……] </Figma导出代码> <UI组件说明> [React UI组件说明……] </UI组件说明> 上面是 UI 设计图、相应的 Figma 代码，请参考UI组件说明，使用我提供的 UI 组件重新生成 UI 代码。

#Figma代码生成 #GitHub Copilot #UI组件 #AI辅助编程 #设计工具