kiro怎么连接figma mcp

现在飞格玛刚更新的这个 m c p 的 服务，它可以直接在我们的 ai 代码工具里边生成原生的设计内容，我们这里边也可以看到它支持这个 m c p 的 工具都有哪些，可以查看完整的名单。有了这个支持，我们就可以直接在拷定的工具里边 从代码跟设计的图稿进行无缝的连接，可以直接让编程工具直接在 figma 的 画布里边直接画设计稿也可以。呃，编程工具读取 figma 里边的画布，比之前发截图去沟通要好很多。然后我这里边使用的是 codex， 在技能的这个列表里边，我们就可以直接看到有 m c p 相关的服务。啊，我把这些功能就全都添加上了。如果你不会安装 m c p， 你 也可以直接问他是吧，让他教你去怎么装。装上 m c p 了之后，我们就可以直接复制一个斐格玛的链接，他就可以直接 舞曲 figma 链接里边的内容。呃，在复制链接的时候，我们直接选中这个页面，点击右键这个 copy， copy 里边我们要选择这个按钮，选择这个链接了之后，我们就可以直接在聊天框里边发送过去，然后初次使用的时候，你直接发上去那个链接之后，它可能会有一些失败的提示， 在它运行的这个浏览器上没有进行登录或者一些什么样的原因，其实没有关系，它可以进行自查的，它查出来这些问题之后就直接这样说， 我就直接给他说，你去帮我执行，然后他就会去修改对应的配置，配置修改好了之后会直接提供给你这个登录授权的链接，你点进去登录一下，然后回复他，是吧？我登录好了，然后就会读取你刚才发的那个链接， 当这个 m c p 接通好了之后，并且拿到了你的这个授权，还有这个设计稿的链接，它就会帮你把这个 figma 的 节点去实现成代码，它运行好了之后，它会直接在这个本地文件进行保存，我们可以直接打开那个 html 文件去看它的这个视觉效果， 这就是它给我们从飞格玛设计稿里边去复刻出来的这个界面就是拿代码去写的，当然也会有一些小瑕疵，因为它这全是用这个，应该是用 svg 的 格式去写的， 肯定没有图片设计的那么好看。然后当我们再想修改和调整的时候，我们可以再把它开发的这个设计稿去直接复制到我们飞格玛的界面中，也就是说设计稿的原型它也可以帮助我们直接产出， 然后只需要用到一个这个简单的指令，他就可以直接帮助我们去生成，然后他在生成前就只给我简单确认了一下这个文件所属的团队在那里就行，很快他就把我们这个设计稿生成出来了，我们可以去看一下。 然后现在这个界面就是完全是可编辑的，这个设计稿的模式有所有的内容我都是可以去修改和调试的，然后在这里边去编辑内容的话，就比如说我把这个按钮去改一个颜色，我改好了之后，我想把这个样式去复刻到我的代码中，我要去怎么做？ 就还是刚才的那个步骤，复制他的链接，就是他这个链接不只是页面可以复制，我单个的这个设计元素、设计组件都是可以复制的。我复制完这个链接了之后，然后让他根据这个设计稿里边的样式进行更改，然后他就会锁定我这个按钮的位置， 然后把代码里边的那个样式去更改掉，然后代码里边的这个按钮也就同步改变了这个样式。也就是说现在 figma 跟这个抠定工具连接的非常丝滑，所以我们现在可以完全从设计开始，我们先做设，先让 ai 帮助我们做设计，然后再根据设计稿去开发我们的代码，这样就会更稳定一点， 同学们可以看啊，我尝试了一下，就是直接让他根据刚才那个页面的风格，继续帮我在 figma 里面生成一套设计系统，他也是可以完成的。你看他先文字去分析了这个视觉的风格，在 figma 里边新加了一页设计风格的页面，然后把这个页面帮我添加进去了， 我们可以看一下实际的效果，这个就是他给我产出的设计系统的这个样式，我觉得效果还是很不错的。就目前来说，他的这个组建可能稍微简单了一点，因为我给他提供的内容就比较简单，这个就是纯我做测试用的， 大家就可以看它的衔接程度是什么样子的，够不够通畅。后续我们再扩展更多的好玩的玩法，包括我后面也测试了一下它根据这套设计系统能不能延展出其他的这个分支页面，并且它保持这套设计系统的样式是什么样子的， 有没有很完整？然后在这里边我们可以看一下这是它做的一些表格图的一些这个设置的页面，我感觉基本的样式， 它的字体的结构、卡片的布局还有色调都是比较统一的，跟我们这个设计系统来说没有什么太大的差异，所以我建议大家赶紧接上 m c p 的 服务，赶紧去试一试。

今天主要就是想跟大家分享一下 figma 它的 m c p 现在到底有多猛？呃，我们看到当前这个设计系统还有这些页面都是我拿 ai 工具连接 figma 的 m c p 了之后 ai 生产的， 也就是说我人工一点也没有干预，它就直接在 figma 的 原声文件里边帮助我生成了这些设计的内容，然后我们怎么使用，其实也是非常简单的。然后在这里面我是推荐大家直接使用这个 codex， 因为它的安装真的是非常简单，只需要我们来到这个技能和应用的这个部分 后，我们就可以直接看到 figma 的 这个插件，我们点击这个连接，它会有一套连接的流程，我们直接一直点确认，确认确认，然后它就能够给我们添加成功。这个插件呢就是直接把我们 figma 的 这个 m c p 的 服务还有 skill 的 技能包就打包成一块了， 就相当于安装了这个插件之后，你 m c p 的 服务也有了，它内置的这个 skill 技能你也有了，就用起来会很方便。而连接成功了之后，我们去使用它的时候，基本上就是两个方向，一个是让编程工具直接去看我们的设计稿去生成代码，还有一个就是 bigmail 去看我们 web 定出来的内容去生成设计稿，主要就是两这两个使用的方向，那让他参考我们的设计稿去生成页面，我们就只需要在 bigmail 里边选中我们想要生成代码的页面 copy 这个链接， copy 了之后我们直接把这个链接发送给这 codex， 它就可以直接连接 m c p 的 服 服务去帮助我们去运行，他会先读取我们的页面，帮助我们自动开发成对应代码文件。那如果说我们想要让他参考我们的这个已经生成的这个代码文件，去生成对应的 figma 原生的文件，我们也只需要用这么简单的一句话，他跟我们确认一下这个文件所属的团队是什么， 就会自动生成对应的设计稿。我们可以看一下这个是他给我生成的 figma 的 原文件，这个是我们之前的这个设计稿，当然这里边也会有一些偏 叉，就比如说他拿 svg 直接画的图形，肯定是不如我们手动画的那种图片要精致的，所以我们需要想要去有调整的地方的时候， 就比如说调整一些细节的这种图案，我们可以直接对应复制组建的这个链接，给它提供一些修改意见，让它改它就能够定位到我们 figma 里边的对应的这个组建他也可以去参考，就相比到之前我们去截图去定位的话，要方便很多，也会准确很多。然后后面的测试就是我直接让他生成页面的一些操作，比如说我让他根据当前页面的风格去设计套设计系统，还有一些根据设计系统去 开发一些延展的一些页面，在 figma 里边执行的效果都是很不错的。这些内容就是我们刚开始给他去展示的。 当然这个设计系统相对来说是比较简单的，包括一些组建的展示，因为我给他的内容就比较简单，只给了他一张页面去做参考， 所以他生成的内容相对简单，我们如果说有丰富的页面参考，可以让他去尝试一下，生成复杂的设计系统都是可以被我们去开发的。从我目前的这个简单的测试的流程来看，我觉得他执行效果还是非常好的，而且很稳定。

hi， 大家好， figma make 在 上周支持了 skill 的 功能，然后呢，这一次这个视频我们就大家一起来体验一下这个 skill 到底怎么用，好不好用。 我们打开 figma make， 点击前面的加号，会发现多了一个 skills， 然后这里有创造 skill 还有管理 skill。 我 们先从习 skill 开始， 点开之后有两个选项，一个呢，一个是从电脑本地导入，还有一个就是写，那我们就直接先从写开始啊，这里呢会有一个 skill 名称， skill 描述，还有 skill 的 内容，让我们先随便填一下。 到了 skill 内容这里呢，我们肯定是不要自己写，然后我们接着还是打开 codex， 然后让 gpt 来给我们写一个 ui skills。 这里呢，我还是以嗯晒思恩为例，就是我们之前视频里有推荐过这套组建库，然后我也还是用这一套组建库来写一个 skill， 我 们来应用一下试一试。 在等待了一段时间之后呢，呃， codex 已经把 skill 帮我们写好了，这个时候呢，我们过来预览一下看一看。因为这个时候其实我们也找不出什么问题，因为我们并没有提出什么特别的要求，我们就只是让它来应用这套组件库而已。 那我们就看一下，然后直接复制粘贴到 fake 码中去， 粘贴完成后，我们直接去点击保存即可。这时候我们再回到 figma make， 然后点击加号 skills， 发现有一个 use skills， 然后刚刚我们创建的 skill 已经出现在这里了。 接下来我们就来测试一下这个 skill 它到底有没有生效。然后呢，我让 figma make 给我做一个宠物社交类的产品，包含 web 端和移动端， 然后呢给了它一些嗯主要的功能，比如说呃电商啊，社交啊，还有个人宠物的这样一些界面，然后让它来给我去完善，就是我只提出一个非常模糊的需求，然后这里在模型上我选择了 cloud cloudsonnet 四点六，因为 oppo 的 四点七它所费的点数会非常的多。 然后在 figma 干活的期间呢，我就给大家再次安利一下这套组件裤，它是一套 开源的组件库，免费的，而且呃它所适配的场景啊也非常的多，大家可以看到现在这我在看它的组件列表，反正这些组件基本上已经覆盖了我们常用的一些功能， 然后我们就可以一起简单的看一下它的样式啊，代码呀，然后安装方式啊，链接就在这里。如果说前端想要使用或者我们自己想要使用这套组建项目的话，可以直接点击右上角到它的 github 链接，然后从 github 上直接下载就可以了。 如果想要在 figma 中使用这套组建的话，其实到社区里面，然后直接输入呃组建库的名称，就会发现其实在呃我们的社区里面有非常非常非常多的这个组建的资源，我们可以直接拿来用就行。 在又等了一段时间后呢， figma 终于把我们的需求给做出来了，我们来一起看一下吧。 首先要说一点，就是呃 fake mac 打出来的东西的质量其实还是跟模型有正相关的，然后我们通过 skill 来约束之后，其实更多是在设计和审美层面 给它做一个规范化的约束，但是像我刚刚给了一个非常模糊的需求，然后它具体能把这个需求完善成什么样，还是需要根据模型能力来看的。 呃，我们快速的浏览点击一下，我们的现在完成这个产品好像是还不错，它把功能完善的很闭环，而且呃界面呀，组件使用也完全遵循了这套组件库的规范， 并且它还做了移动端。这时候我们看一下这个卡片规范是不是和它组件库中的组件规范完全一致，是完全一致的，没有问题， 接下来呢，我们来说一下很多设计师忽略的问题，就是 figma make 完成设计之后里面的这个代码， 这个代码其实它是已经是一个完整的前端项目文件了，如果说你所使用的 skill 里面的组建库和前端使用的组建库是一致的话，那这套代码其实可以完全直接拿给前端来用，那我们先把它下载下来， 下载完成之后呢，我把这个文件直接丢给 codex， 然后让 codex 把这个项目在我本地的前端跑起来，我们来看一看它是不是能跑成功。 codex 跑完之后，我们一起来看一下啊，这个项目已经在我们的浏览器中跑起来了，并且外部段和移动段也都做了适配，所以呢，我们的设计师在 fake map make 升完图之后，千万不要直接把它当做图无赖用了，它还有更多的用处，代码也是完全可用的。 那第一种直接在 fake mark 里面写 skill 的 方式我们已经尝试过了，接下来我们来试一试。第二种从本地导入 skill 的 这个方式，看看怎么样？ 我们再次打开 fake， mark make， 然后点击前面的加号，然后去找到创建 skill 的 这个地方。接下来呢，我们使用一个之前视频里有用到的我们写的 on the design 的 skill。 呃，看过之前视频的同学应该还记得，在这个 skill 里面，我把主题色的蓝色改成了橙色，所以呢，当这个 skill 上传上去之后，它是否生效，我们是很容易进行验证的，所以我们把里面的 skill 文件，然后直接去 呃上传到 facebook 里面，然后我们再来试一下。为了方便区分这里，我直接就叫 ant 点赞杠 ui， 然后杠 orange。 然后呢，我们点击加号，然后 skills use skills， 然后选择我们刚刚创建的这个 skill。 为了能更好地看到效果啊，所以我是让它去做了一个弊端的流量使用和 token 使用的这样一个项目，因为这种项目来说，它所用的图标会比较多，然后验证我们这个 skill 中成色有没有生效的。呃， 视觉辨别方式也更简单。好，现在我们的项目已经构建完成了，让我们可以看到我们的 skill 生效了，它是以 ant 组建为基础，然后以我们的成色为主要颜色。 那其实，呃，在今天我们一起调研完这个之后呢，我们会发现，这个 skill 无论是在 figma 中还是在大模型中，它们所完成的工作是一样的，都是对模型所输出的结果进行一个控制和约束。 但是我们会发现它的交互逻辑是完全不一样的， figma 还是更偏向于设计师层面的交互，让你直接能看到你所出的东西是不是符合 skill 预期的， 而且这个东西其实在 figma 中它更多的还是我们最开始所说的 u i skill， 而不是说像大冒险中它可以用 skill 去做任何任何更多的事情。

如何快速上手编程？编程学习这一块，那么这里今天给带来大家带来几个编辑 idea 的 应用场景。好，一个是 pillow， pillow 这里大家看到用到的是 cloud 四点五，然后我们另外一个是 caution， cortex 的 话现在用到的是 auto 模型，在运行。开发好，我们先把 winsole 打开另外一个编辑器，当然还有 vscode， 在 cortex 右边这个对话栏里面是用到的 cortex 插件。 好，我们使用五点五 g b d 五六模型，那么这个是 windows 啊，这几个编辑器的话都是比较主流的一个编辑器，除了国产的讲确 q order 啊这些 e 这几个编辑器是用的比较多的啊，选择性比较多的， 大家看到好， kilo 已经在运行，那么这边好选择软件上 quarter， kilo 和 coser 这几个都是能够使用的，那么我们把 主要是就是一个日常如何持续的进行开发的一个问题，持续运行，大家如果是有更好的推荐途径，或者说有需要获取到更多的一些 教学内容，可以关注我啊，关注主播意见善联。

大家好，我们这一小节来对我们本次所讲的使用批量这个 ai 开发工具，开发一个公司网站，首先演示一下这个项目，那么使用的是前端 view， 那 么是后台 load， 那 么数据库是 my sql。 八， 那么本身的话，我们最终啊会有一个开发文档需求文档，那么我们也会是教大家怎么去做这样一个需求文档，然后根据这个需求文档生成我们这个页面。 开发工具使用时的是 kilo 啊，那么我们首先看一下啊，我们本身整个项目运行，那么最终运行以后，在开发过程中会讲我们运行的这个是后端啊，我们先退出登录，那么我们整个项目运行在 local horse 冒号八零八零，那么它有 我们整个公司 logo， 这个是轮播图，那么我们结合后台来看一下，然后是管理员账号而得名账呃账号而得名密码而得名一二三，那么我们后面讲课程的时候会告诉大家这里 点登录啊？登录成功以后，那么整个项目我们告诉一下它有产品多少新闻多少留言数，产品数，那么快捷入口 公司信息，那么我们可以看一下，首先是网站有个公司简介，然后还有关于我们这里面有公司简介，企业文化这些对应的在后端看到没有公司简介，企业文化发展历程， 它这里可以修改，而且它这里面可以添加内容，比如企业文化，这里啊我们在家它有在线编辑器，它是可以上传图片的，我们上传一个图片，然后保存一下在前端啊，我们在关于我们这个页面好就可以看到了，当然说你可以把整个区域美化漂亮一点， 然后我们接下来看一下，然后第二个板块是轮播图管理，轮播图我们给它换一下 啊操作，那么我们点一下选择图片，轮播图，图片，那么我们找一张，呃，黑色的啊，比较黑色的，看见没有？然后点一下保存，然后回到首页刷新一下轮播图是不是？当然这个轮播图的高度宽度我们这里是演示程序， 具体的话按照宽度来做，它就会漂亮，那么首页那么看一下啊。接下来是产品的分类管理，我们在首页的话是轮播图简介， 热门商品，那么商品的话可以点进去啊，商品在后台可以管理，然后我们看一下产品管理，那么在后台可以添加产品名称分类好在线编辑器，那么这个我就不演示了。在后台，然后前端，那么是关于我们 产品中心，是不是啊？这个可以筛选，那么它也可以全部的，那么有分页实现，分页实现，那么也可以搜索产品，那么产品的详情，大家说这里的话，你也可以调整居中，然后再写更详细一点的内容就可以了，这是产品，然后是新闻管理，那么我们在后台 这里可以添加新闻，新闻的图片都有，然后在首页，那么我们下面有公司的最新动态，可以点阅读查看公司新闻，新闻的话图片可以上传的啊，大家说你可以再美化一下它，然后我们可以看一下留言管理，留言管理的话，我们在前端在 联系我们的时候可以有联系方式，当然说这里可以更详细一点的写的啊，那么这里就可以提交留言，提交留言以后在后段，那么在这里就可以查看，那么这是我们实现的，我们本次课程会教大家使用 kilo 这个 ai 开发工具 怎么去写，这从零开始建啊，准备开发环境，准备素材，然后写需求文档，根据需求文档来生成，然后如何去修改它的 bug， 然后美化页面，然后实现整个这样一个项目啊，课程会提供这个原码，还有大家主要也学一下开发的一个过程啊，给大家说到这里。

零元订阅 k 二 pro 会员白嫖 club 的 四点七首先需要一个新的账号，你可以通过谷歌或者 github 来登录，然后直接点击升级到 pro， 等待跳转到订阅界面，你就能看到付款金额为零，然后填上银行卡信息即可。使用国内的信用卡和地址也是可以的， 主包这边没有信用卡，所以用了别的渠道。订阅成功之后就可以看到这里有一千的额度。然后我们就可以愉快地和 club 的 四点七对话了。

如果你最近重新登录 codex， 经常遇到手机号验证，可以试试 cockpit tools， 它的核心作用很简单，把常用的 ai 编程账号放在本地统一管理，尽量减少反复登录。对经常切换 codex、 cursor co pilot、 winsole 的 人来说，这会省很多事。 下载时一定注意只从官方 github 页面拿安装包。 windows 用户一般选 msi， micros 用户选 dmg。 第一次打开后，不建议一上来就导入所有账号。先用一个最常用的 codex 账号跑通流程，先确认首页正常，再添加账号，然后看账号状态和额度能不能读出来。如果第一次添加，可以走 off 认证。完成授权后，回到 copy tools 就 能看到账号信息， 确认没问题后再测试切换账号。切换 codex 前，建议先关掉 codex， 再在 copy tools 里切换，最后重新打开，这样更不容易遇到状态没刷新、切换不生效的问题。最后提醒一下，这个工具管理的是账号登录信息，所以安全要放在前面， 不要用别人转发的安装包，不要把账号文件发给别人，截图前也要记得打码、邮箱和 token。 一 句话总结，如果你经常换账号、换工具， cockpit tools 能让登录和切换这件事少折腾很多。

openai 刚刚开源了 codex 的 插件系统，用 ai 写代码的人越来越多，但每个团队的工作流都不一样，有人用 figma 设计，有人用 notion 管需求，有人做 ios， 有 人做 web ai 编码工具，一直在单打独斗。 open ai 这次给出的答案是，统一的插件架构， 每个插件都有一个标准清单文件，支持七种扩展方式，技能 m c p 连接应用接口、代理命令、钩子资源，一个 manifest 文件搞定一切。你可能以为这就是一堆势力代码， 但仔细看每个插件，它们是完整的工作流解决方案。 figma 插件能做 code to canvas 和设计系统桥接。 notion 插件覆盖规划和知识管理。更猛的是平台覆盖， ios、 mac os、 web 三端都有专用插件， xbox 跨平台开发， netify 一 键部署， remote 视频制作，甚至 google slides 都有。这不是势力仓库，这是生态基础设施。前端开发者用 figma 插件直接设计转代码，移动开发者，三端插件一次搞定， 团队负责人拿官方架构建立标准，每个插件都是完整势力代码，学完就能开发自己的 ai 编码的插件时代已经到来，这个项目还在快速增长。完全开源免费关注我，下期继续带你发现好项目。