【GitHub Copilot】Figma MCP还原设计稿生成前端代码

Ne0inhk

— 7 min read
【GitHub Copilot】Figma MCP还原设计稿生成前端代码

这里写自定义目录标题

Cursor+Figma MCP的教程已经很多了，由于我所在的公司采购的是GitHub Copilot，我研究了一下直接在vscode里利用GitHub Copilot接入Figma MCP进行设计稿还原代码，大获成功，这里分享我的步骤，希望能帮到你。

Step1：让AI给你配置MCP

在vscode中打开你的项目（我的例子是一个微信小程序），呼出github copilot对话框，模式选择Agent，模型建议Claude 3.7 Sonnet，提问：

https://github.com/GLips/Figma-Context-MCP 如何配置能让你在vscode里使用这个mcp

之后跟着提示狂点下一步即可完成配置，如果有什么需要装的vscode插件它会自动帮你装，甚至自动生成了配置说明文档。

在这里插入图片描述


由于不能保证AI每次生成的答案都一致，这里附上我的运行结果作为参考，可以看到它在项目文件夹最外层建了一个.vscode文件夹，在settings.json文件里加上了配置。如果你的项目本来就有这个settings.json文件它应该会加在文件最后面。

{"mcpServers":{"Framelink Figma MCP":{"command":"cmd","args":["/c","npx","-y","figma-developer-mcp","--figma-api-key=这里稍后替换成你自己的密钥","--stdio"]}}}

Step2：替换成自己的Figma密钥

打开Figma的网页点击左上角自己的头像 -> settings -> Security -> Generate new token
设置路径可能会有变化，自己到处点点找到Generate new token就对了
找到点击之后会出现下面这个弹窗，随便起个名字比如mcp，然后把下面的权限列表一个个打开选择读或写，要不然默认是全部No access的。
注意默认是30天过期，30天后需要建一个新的才能继续用。

在这里插入图片描述


都选完之后点右下角的generate token之后会生成一个密钥，这是你唯一一次复制它的机会，没复制好就关掉窗口了就只能重新建了。把这个密钥复制到settings.json文件中–figma-api-key=后面。

Step3：如何使用

我以这个官方电商UI模板里的商品卡片为例，在Figma设计图上选中你要的部分图层，右键后点击Copy link to selection

在这里插入图片描述

之后就可以把链接贴到对话框了，先来测试一下配置是否成功了，确保模式是Agent，提问：

https://www.figma.com/design/GJZhGih0VsGbpevJGkJQ9Z/E-commerce-UI—Figma-Ecommerce-UI-Kit–Demo-Version—Community-?node-id=2804-7985&m=dev 现在你能读到这个设计图了吗
在这里插入图片描述


出现这样的弹窗说明Agent在尝试链接MCP server了，点继续（也可以点击右边的箭头在当前会话中允许操作就不用每次都手动点了），过一会儿可以看到它的描述，说明设计图被读到了，我们的配置生效了。

在这里插入图片描述


现在可以让它写代码了

请根据这个设计图在我的微信小程序里生成商品卡片组件的代码，注意微信小程序中2rpx=1px，要完全还原设计图的UI，再建一个测试页面展示这个组件的调用效果，可以参考微信小程序官方文档https://developers.weixin.qq.com/miniprogram/dev/api/
在这里插入图片描述


继续等AI操作，等它操作完之后到开发者工具里运行，可以看到还原度已经非常高了。

在这里插入图片描述

对比设计图，指出哪里还原度不够，让它进一步优化，客客气气的。

看上去有一些UI细节不够还原，比如卡片的内边距，还有按钮的布局，请你再仔细检查一下。
商品图片上的三个icon按钮应该是水平居中的，learn more按钮应该是水平居左的。另外你能不能直接下载设计图里的icon为svg来使用，这样更还原。

如上描述改了两个版本之后，我们得到了下图版本，我把设计图放在左边，可以看到还原度非常惊人了。

在这里插入图片描述

最后，来人工review一下生成组件代码，可以看到模板层dom设计非常合理，没有多余的嵌套，注释清晰，比我的同事靠谱多了

<viewclass="product-card"><!-- 图片区域 --><viewclass="fixed-height"><viewclass="product-cover"style="background-image:url('{{product.coverImage}}');"></view><!-- 产品操作按钮 --><viewclass="product-actions"><viewclass="action-button like"><viewclass="icon"><imageclass="icon-image"src="/images/icons/like-icon.svg"></image></view></view><viewclass="action-button basket"><viewclass="icon"><imageclass="icon-image"src="/images/icons/basket-icon.svg"></image></view></view><viewclass="action-button share"><viewclass="icon"><imageclass="icon-image"src="/images/icons/share-icon.svg"></image></view></view></view><!-- 标签 --><viewclass="tag"wx:if="{{product.tag}}"><text>{{product.tag}}</text></view></view><!-- 产品信息区域 --><viewclass="product-info"><!-- 类别和评分 --><viewclass="row category-rating"><viewclass="category-container"><textclass="category">{{product.category}}</text></view><viewclass="rating-container"><imageclass="star-icon"src="/images/icons/star-icon.svg"></image><textclass="rating">{{product.rating}}</text></view></view><!-- 产品标题 --><textclass="product-title">{{product.title}}</text><!-- 产品描述 --><textclass="product-description">{{product.description}}</text><!-- 销售信息 --><viewclass="sales"><viewclass="icon"><imageclass="sales-icon"src="/images/icons/sales-icon.svg"></image></view><textclass="sales-text">{{product.sales}} Sales</text></view><!-- 价格信息 --><viewclass="prices"><textclass="original-price"wx:if="{{product.originalPrice}}">¥{{product.originalPrice}}</text><textclass="current-price">¥{{product.price}}</text></view><!-- 颜色选项 --><viewclass="product-colors"><viewclass="color-dot"wx:for="{{product.colors}}"wx:key="index"style="background-color:{{item}};"></view></view><!-- 产品特性 --><viewclass="product-features"><viewclass="feature"><viewclass="icon"><imageclass="feature-icon"src="/images/icons/calendar-icon.svg"></image></view><textclass="feature-text">{{product.duration}}</text></view><viewclass="feature"><viewclass="icon"><imageclass="feature-icon"src="/images/icons/lessons-icon.svg"></image></view><textclass="feature-text">{{product.lessons}} Lessons</text></view><viewclass="feature"><viewclass="icon"><imageclass="feature-icon"src="/images/icons/progress-icon.svg"></image></view><textclass="feature-text">Progress</text></view></view><!-- 了解更多按钮 --><buttonclass="learn-more-button"hover-class="button-hover"><text>Learn More</text><imageclass="arrow-icon"src="/images/icons/arrow-right-icon.svg"></image></button></view></view>

调用组件的示例页面给的例子也一目了然

<viewclass="container"><viewclass="title">商品卡片组件展示</view><viewclass="card-container"><product-cardproduct="{{productData}}"></product-card></view></view>

Read more

JavaSE基础-Java字符串转整数与拼接实战指南

JavaSE基础-Java字符串转整数与拼接实战指南

目录 Java 核心知识点：字符串转整数与字符串相加 一、 字符串转整形数字 1.1 精简版（快速上手） 1.2 详细版（机制与陷阱） 1.3 关键陷阱总结表 二、 字符串相加 2.1 精简版（性能核心） 2.2 详细版（编译器优化与陷阱） 2.3 性能选择决策树 💡 一句话总结 本文总结Java中字符串转整数和字符串相加的核心知识点：1. 字符串转整数：推荐使用Integer.parseInt()方法，需注意处理NumberFormatException异常，对带空格的字符串要先trim()，大数值可使用Long.parseLong()或BigInteger。2. 字符串相加：编译期常量可使用+运算符（会被优化），但循环中必须使用StringBuilder以避免性能问题（性能差距可达200倍），多线程场景用StringBuffer，

By Ne0inhk
从0到1：我的飞算JavaAI实战之旅，效率飙升10倍不是梦！

从0到1：我的飞算JavaAI实战之旅，效率飙升10倍不是梦！

🧑 博主简介：现任阿里巴巴嵌入式技术专家，15年工作经验，深耕嵌入式+人工智能领域，精通嵌入式领域开发、技术管理、简历招聘面试。ZEEKLOG优质创作者，提供产品测评、学习辅导、简历面试辅导、毕设辅导、项目开发、C/C++/Java/Python/Linux/AI等方面的服务，如有需要请站内私信或者联系任意文章底部的的VX名片（ID：gylzbk） 💬 博主粉丝群介绍：① 群内初中生、高中生、本科生、研究生、博士生遍布，可互相学习，交流困惑。② 热榜top10的常客也在群里，也有数不清的万粉大佬，可以交流写作技巧，上榜经验，涨粉秘籍。③ 群内也有职场精英，大厂大佬，可交流技术、面试、找工作的经验。④ 进群免费赠送写作秘籍一份，助你由写作小白晋升为创作大佬。⑤ 进群赠送ZEEKLOG评论防封脚本，送真活跃粉丝，助你提升文章热度。有兴趣的加文末联系方式，备注自己的ZEEKLOG昵称，拉你进群，互相学习共同进步。

By Ne0inhk
Java IO详解：File、FileInputStream与FileOutputStream

Java IO详解：File、FileInputStream与FileOutputStream

文章目录 * 引言：Java IO体系与文件操作 * 第一章：IO流基础概念 * 1.1 什么是流（Stream） * 1.2 Java IO流的分类 * 1.3 文件IO的核心类 * 第二章：File类深度剖析 * 2.1 类的定义与核心字段 * 2.2 构造方法：创建File对象 * 2.3 常用API详解 * 2.3.1 获取文件和目录基本信息 * 2.3.2 判断功能 * 2.3.3 列出目录内容 * 2.3.4 创建与删除 * 2.3.5 重命名与移动 * 2.

By Ne0inhk
Java Map常用方法和实现类深度详解

Java Map常用方法和实现类深度详解

文章目录 * 前言 * 第一章 Map接口概述 * 1.1 Map的继承体系 * 1.2 Map的核心特性 * 1.3 存储结构的理解 * 第二章 HashMap：最常用的Map实现 * 2.1 底层数据结构演进 * 2.2 核心源码深度解析 * 2.2.1 重要成员变量 * 2.2.2 设计哲学解读 * 2.3 put方法执行流程 * 2.4 扩容机制（resize） * 2.5 线程安全问题 * 第三章 LinkedHashMap：保持插入顺序 * 3.1 数据结构特点 * 3.2 两种排序模式 * 3.

By Ne0inhk