这是设计稿,这是我们刚刚用 codex 实现的 ios app, 我 们来看一下还原度如何啊?这边也可以上下滚动,然后角色可以左右滚动。这边设计稿也是可以上下滚动,角色左右滚动,然后可以选择一个 角色聊天。这边的话也可以选择一个角色聊天啊。哈喽,大家好,我是温特妙,欢迎来到 web coding app 实战的第十个课时,在这个课时呢,我们就 直接来使用 figma 来生成我们的 ai 聊天 app 的 一个设计稿 啊,并且呢我们会使用 codex 来将这个设计稿实现成一款 ios app, 并且是会接入一个后端 api 的 啊。呃,不管你有没有编程经验,你只要跟着我一起啊,这一个课时你就能够来实现一款这样的一个 app。 ok, 我 们先来看一下我们的一个设计稿的一个效果啊,这是一个引导页面, 我们通过左右滑动啊,这卡片的话是会嗯,有一个这个卡片的一个切换效果的啊,这样的话我们可以来选择我们的一个陪伴角色。嗯,选好之后可以点击聊天, 然后像我们如果第一次没有登录的话呢,会跳入到这个登录页面,登录页面的话呢,呃,这边的话我们直接用测试账号来登一下就好了。幺零零八六验证码一二三四。 好,登录进来之后呢,进入了一个首页啊,首页的话呢,上边的话呢显示的是我们刚刚选择的一个角色,我们可以和他聊天, 然后聊天背景也是这个角色的一个背景图啊,然后这里的话呢,我们也可以和别的角色来聊天。 嗯,然后这边的话呢,还可以重新选择角色啊,大致就是一个这样的一个形态啊,然后我们真实,我们用 codex 实现的真实的 app 呢,我们还会接入一个真实的接口, ok, 那 我们就先来看一下啊啊,这是我们这个这个课程的一个简介, 嗯,然后呢,这是这个课时的一个步骤,我们的话呢会呃,先来看一下我们的一个设计稿是怎么样去实现的, 然后呢,我们会来配置一下 codex mcp 啊,因为我们是要使用 codex 来读取斐格码这个设计稿的,所以的话我们需要在 codex a p p 里面配置一个斐格码 mcp, 可以去读取 figma 上的一个那个素材的一个信息啊。然后呢,我们会用 xcode 的 啊,也就是 ios 的 一个开发工具来创建项目, 然后再接着呢,我们会把一些项目的一些规范呃写入到 agent 点 md 里面去啊,因为 codex 它每次干活的时候呢,它都会来读取 agent 点 md, 所以 的话你可以理解为 agent 点 md, 它就是这个项目 啊需要遵循的一个规范,需要呃一直记住的一个东西,这样的话 code x 在 后面帮我们来进行一些调节的时候,它就不会跑偏。 然后呢,嗯,我们就要用 code x 啊来嗯实现 figma 的 这个设计稿呢啊,并且呢我们还会 嗯来接入通过我们的一个后端 api 的 一个文档啊,来接入后端 api 来实现一个真正的一个 ai 聊天 app。 然后最后呢,我们还会去呃迭代一下功能,因为像我们设计稿上是聊天页面是不可以添加图片的啊,但其实我们的一个后端 api 是 支持添加图片的啊,所以的话,我呢我们再来迭代一下功能,然后呢我们也会去优化一下,因为像聊天 app 的 话呢,有一个体验上最核心的一个东西啊,就是一个输入框, 所以我们可能会针对输入框去调优一下。嗯,那我们先来看一下啊,我们的一个设计稿是怎么实现的? 嗯,来这边看一下啊。嗯,我们这边直接用的就是 figma mac 来帮我们用 ai 生成的一个设计稿,我可以给大家看一下 figma mac 啊,它的一个官方地址就是 figma 点 com 杠 mac 啊,然后我们在这里只需要输入自然语言,它就能够生成一些设计稿啊, 我们来看一下我们给他输的一个语言,是这样的啊,让他帮我设计一个 iphone ai 陪伴聊天 app 的 一个引导页啊,然后主题是这样的,然后有四个角色啊,然后四个预设的。预设的角色呢,使用横向滚动的卡牌形式展示,用户可以左右滑动这些角色 啊,一次展示以一张角色卡片,左右会露出相邻的一个卡片边缘 啊,然后,嗯,页面包括哪些东西,风格的一个要求,以及角色的素材我也给他啊,把角色的这个头像以及角色背景给他啊,这些素材的话呢,我们通过后端 api 都是可以拿到的。 嗯,我们后端 api 的 一个文档是这里啊,也是一个公开的文档,大家也可以跟着我这个照着做就可以了啊。这,嗯,这是我们上个课时完成的一个后端 api 啊,它的文档我已经把它放到 github 的 一个公开页面上去了, 然后像角色获取的话呢,是在。嗯, chat service 啊,在这里,角色获取是这里啊,是不需要健全的, 直接调用就可以了啊。嗯, chat ross 啊,它的一个后缀是这里,我们把它后缀复制一下, 然后再拼接一下它的一个链接。呃, chat service 的 一个链接,我们来看一下啊, chat service 啊, base your ads 啊,在这里。 chat service 的 一个前缀链接在这里啊,把它拼接一下 啊,拼接一下之后呢,就会来得到的是一个 jason 啊,这个 jason 就是 我们的一个角色卡片 啊,角色卡片在这里啊,当然也可以更加简单一点,我们不需要这么复杂啊,我们直接把刚刚拼接好的这个链接 让 check gbt 一 次性把我们做做掉就可以了啊,这是一个更加省事的一个做法,我们直接让 chat gpt 来帮我们生成给 figma mac 的 一个 promote 啊,你看也是。嗯,用非常自然的一个语言描述就可以了啊。我正在开发一款 ai 陪伴聊天 app, 用户可以和不同的角色聊天 api 已经完成了, 这是引导页需要展示的角色接口,请帮我提取数据啊,我让他我把这个 url 给他啊,让切记 b d 帮我来提取数据就可以了啊,然后我还把整个后端 api 文档也给他了,其实这个时候不不用给他也可以啊。 呃,我告诉 chat, 我 说引导页是这样子的啊,然后测试号是这样子的,然后 chat 它就会帮我来生成这个呃, fig 码的一个 promote 啊,其实也就是和这段 promote 是 非常类似的一个生成直接给他就可以了啊,不需要我们自己写。 然后呃 chat 它生成的这 promote 呢?它好像没有把那个 呃角色的一个 u r 角色的一个图片链接带进去啊,那这样的话呢,可能会有些问题,因为你,因为我们是有一个角色的背景卡片和头像卡片的,我们直接带进去的话呢, figma mac 它就它就不需要瞎猜 啊,那直接用我们现成的就可以了。那,那没关系,我们再跟亲爱的 g p t 说,我说还要把这个头像链接和背景链接也带进去就可以了 啊,那那 chat gpt 它最后就给我们生成了最终的一个 promote 啊,最终一个 promote 是 这样的,我们也可以直接复制一下啊,复制一下贴进去就可以了啊。贴进去之后呢? figure 嘛,它会帮我们生成设计稿 啊,生成设计稿之后呢,可能有一些呃要求我们还不满意啊,像像我这边的话呢,我们我是先生成了引导页,引导页是这样子的,然后呢,我再让 fig 嘛,帮我生成了设计首页啊,首页的话呢,我们点进去啊,这边再登一下 啊,再生成首页啊,首页这个东西啊,也是叉 g p t 给我的,嗯,然后包括我有一些地方不满意,我再继续和它调优 啊,你看我和他呃一直调优啊,然后呃一开始聊天背景页面,他不是那个不是这个角色的一个背景,我告诉他聊天背景页要角色背景啊,然后 fig 嘛, 在这边 fig 嘛,就直接帮我来改改,改好最终,嗯,改到这个版本呢,我是还比较满意的,那我们就用这个版本来做 啊。嗯,然后如果 figma 它给你的设计稿改改的不好怎么办?就是上一个版本你很满意啊,那, 那它你让它改了之后改的不满意的,那也没关系。嗯,我们可以比方说我的一个版本六我是很满意的。版本七我不满意,那我点这个版本六,把它 restore this version 就 可以了啊,就是把版本六变到现在的一个版本, 那他就会呃回回滚到版本六,所以的话也是非常方便。然后像这个,嗯,链接的话,我已经公开了的啊,这个链接的话呢,我是公开了。公开了是在哪里呢?也给大家看一下。 这个 fig 码的一个设计稿的一个公开地址是在这里啊。嗯,大家的话呢,需要先保存到自己的一个项目里面去才可以啊,我给大家打开看一下。嗯,在这, 嗯,在这地方你需要把它先加到自己的一个项目里面啊,加到自己的项目里面之后呢,大概就也就是变成类似于我这个样子的,然后你再点一下这个 share 啊。啊,你啊,我们最好先回到首页,回到 default 页面啊,回到 default 页面是这里啊,这边的话可以选择设备的 啊,选择一个预览设备,这个不不影响啊,不影响,就是到时候可得 x 帮我们来还原设计稿啊,最好的话把它切到这个默认的一个页面去,然后点这个分享啊,分享的话这里有个 copy link, 这个链接的话呢,就是我们会让 codex 来读取的一个链接。 ok, 那 我们再看一下,接下来我们要干啥啊?接下来的话呢,我们要来配置 codex 的 一个 mcp。 嗯,我们打开我们的一个 codex app 啊?打开,打开 codex a p p。 呃,在这个设置里面啊?我们登录好了之后在设置里面,设置里面呢?有一个。
粉丝439获赞2223

大家好,我是杰杰。 figma mcp 呢,有个非常好的升级,现在你可以直接在 figma 画布上使用 ai agent 进行设计。它呢主要是通过 user figma 的 tool, 让你通过 cc, codex 或者其他 mcp 的 客户端生成修改你的设计系统相关联的设计资源。 figma mcp 呢,已经存在有段时间了, 以前呢,有一个工具是 generate figma design, 可以 将实时应用和网站的 htlm 转化为可编辑的 figma 图层。那全新的 userfigma 工具呢, 就是让 ai 根据你的设计系统直接在它的画布上进行操作。 figma 和它的合作伙伴还分享了九个 skills, 大家可以看一下。 scales 呢,它可以通过自我修复,循环塑造输出的细化方式。当你使用支持视觉的 ai agent 的 时候,它会不停地截图,然后迭代不匹配的地方。而且这次 figma 开放了对 code connect, figma joy, 还有 figma 的 界面的访问。 figma 官方的 mcp 免费用户,它呢是提供最多呃,每月六次工具调用,基本上是不能做些什么的。 如果你想让 ai 在 figma canvas 上做设计,那就需要去啊订阅它的 dev 或者是 for 席位。 figma 的 figma 的 核心功能呢,有这些,那它怎么安装呢?比如我这里用的是 cursor, 那 我就在它的设置里有一个 marketplace, 找到 fake 码,点击一下安装就行了。如果你是在 c c 里,那可以通过这行命令来安装官方的 fake 码。安装后呢,需要你印证一下身份。如果是在 codex 里使用,那先添加各个 skill, 再之后呢,在设置里面添加 mcp server, 并且点击 fake 码服务器的安装并且认证。现在来看一下 fake 码 mcp 各个工具的讲解。 get a design contest, 它可以获取 figma 选择的上下文,默认输出是 react 和 tailwind。 你 可以这样提示 ai generate figma design 呢,它可以将网页捕获,导入或者转化为 figma 的 设计。 get a variable defines 呢, 它是返回设计中使用的变量颜色。 get code connector, 它可以解锁 figma 节点 id 与代码库中 相应代码主键之间的映设。 user config 码,这也是一开始提到的,可以让 ai 在 它的啊 canvas 里面做一些设计。 search design assistant 呢,这也非常好理解,可以搜索所有连接的主键库。 create new file, 你 可以提示 ai 呢,在 config 码里面新建文件, 不需要给它一个既定的链接。使用。 m c p 有 一些最佳实践。飞格玛官方呢,还推荐将飞格玛 mac 和飞格玛 m c p 结合在一起。现在呢,就来介绍一下我通过飞格玛 ai 来帮我做了哪些事情。我在酷狗里面提示 ai 呢,呃,当时用的是 op 的 四点六, 我让他根据一份设计系统的文档来生成可折叠手机应用的新的 figma 设计页面。在这里呢,我选择了 plan 模式 opt。 四点六,在这里呢,做了六个阶段的计划,再接着就让他去开始执行。 我们看到他在呃和 m c p 对 话中,先会解锁一下我这个 figma 有 没有认证过。 然后呢,开始使用啊,创建 new file tool 来创建一个新的文件。 再接着呢,就使用 user 呃 figma tool 在 figma canvas 里面做设计。之后他就开始创建设计 token, 颜色变量集合,检查字体。 再接着呢就创建第一个屏幕了,创建好了之后他还截图验证了一下,我们先不看这个书名和这个作者 啊,它这个其实没有一一对应上,整个截图可以看出它的设计还是比较淡雅的。再接着它创建第二个 screen, 再之后第三个,第四个等等 一次提示,他就帮我创建了这么多页面。创建好了之后呢,也给出我相关的链接,并且告诉我完成了四个中文页面。来到飞克玛的页面,我们可以看到四个图层都是呃 ai 帮我去生成的,他遵循的是我一开始给他的设计系统语言。 我们看到这里的内屏展开的主页,还有书架部分,还有包括沉浸式阅读这一页,其实我特别喜欢它的设计啊配色,包括它这里选的文字也都是非常不错的。外屏呢还有一个折叠态, 它还模仿了这里的 wifi, 还有电量时间,下方呢就显示如果一开始进入这个书架 会最近的活动是什么,还有快捷操作。我觉得 open 四点六在这一点上设计是相当好,我在上一期视频里面有讲到谷歌的 stitch, 我 就是通过谷歌的 stitch 提示它生成可折叠安卓的阅读应用, 它就帮我生成这些我们看到的画面。左边呢是它的设计语言,当我点击右侧有一个画板图标, 选中它,然后有一个 design markdown 复制一下,我将它翻译好呢,然后呢就放在 cursor 里,让 opt 四点六根据这个设计系统来生成我们在 figma 页面上看到的这些页面, 我个人觉得它的整个啊颜色设计语言保持的还是相当不错,包括我们现在在这里看到的这样的一个啊,排版渐距风格 也是非常像啊。一开始 stitch 在 这里设计的样式,换一个模型, 让 ai 通过菲克玛 m c p, 它会设计出什么样子呢?这里是呃 curda 最近推出来的 comproger, 二来设计的它帮我是做了两个简单的页面,这个页面呢,整体是比较简单的, 色彩的话和我一开始给他提供的啊设计语言 markdown 文件还是非常像。再看一下他的折叠台,这里呢,他的设计就不是特别像折叠屏了,折叠屏的话,虽然说他的屏幕也很大,但是左侧这样的一个图标设计还是太小了, 包括它展现的内容也比较少。那我在这里呢,一是用到了 compose 二模型,第二呢,当时是没有通过计划模式来让它多展现一些内容, 所以他一开始呢帮我构建的页面我们看到是非常简单的。现在来看一下如何让斐格玛 m c p 来做出这样的小鸟儿童理发店的 landing page 页面,并且最终呢让 ai 生成一个真实的页面。 我们看到这些图片是 curses 调用 banana 来生成的。下方啊有服务项目,理发流程, 门店环境、家长评价、提前预约等等,包括这里的有常见问题,这个程序我是通过 gpt 五点四 medium 的 推理程度来最终生成的。在做应用之前,我是先找到了多宁国的网页 啊,这里只是作为一个演示,我们可以看到多宁国的这个风格呢啊,它的图标 logo 是 绿色的,整个页面是比较可爱的,会有一些这种圆角的元素。在克尔这里就提示 gpt 五点四, 让它基于多宁国的网站,在飞克码中创建一个完整的设计系统,创建一个包含遍体的主件库,并拉取真实的 logo 文件, 使用真实的字体和颜色系统将所有这些内容创建在一个新的 figma 文件的单页上。它呢,就先获取多灵国的素材,我是参考 啊 factory ai 它的一个提示。然后呢,开始调用 figma mcp, 在 过了一段时间之后,它就提示我, 他已经拿到了这些真实品牌资产。然后我就告诉他,用真实的颜色和官方真实 logo, 同时把字体规范写进设计系统。但主页里的可编辑文字呢,先用别的一个字体来代替, 再接着他就生成了这样的页面,放大一点呢,可以看到他用到哪些色彩, 还有字体真实的官方的 logo, file, 还有可变的主键库,输入框,卡片素材等等。再之后呢,我就提示它参考目前设计风格, 做一个单页小鸟儿童理发网页 fik 码,设计页面需要是中文页面,在 fik 码上它就会呈现这样的页面,并且呢它提示我啊,它可以将这个网页再细化,做成高保证的版本,于是我就让它做成高保证的版本。 有一个卡片呢,用到了橘色的一些元素,那我觉得这个橘色呢跟整个页面不是特别搭, 所以我就手动调整了这个卡片的一些背景字体颜色。那之后就新开一个 cursor agent 页面,将这样的一个链接放这里。这个链接怎么获取呢?就是在左侧 选中一个 layer, 右键选择啊 copy link to selection, 就 可以把这一股整块都选中了。做一个 link, 放在 ctrl 对 话框里, 让 ai 呢根据链接生成 react 应用。然后它就调用 get designcontestinfact 码,开始编辑代码了,很快就将程序写好了。 他说呢,呃,现在这个里面的有些插图和图标用的是 figma mcp 返回的远程资源链接,这类资源通常不是永久的,它可以生成一些图片, 于是我就让它调用图片生成功能,为网页生成合适的配图。它会调用谷歌的生图 nano brother。 啊,我看到他生成的这三张图片呢啊,除了第三张可能没有那么完美,前两张还是非常不错的。接着我就让他把这三张图放到当前的页面里,换现在的远程飞克马图片,并且让他适当的添加一些啊谋选动画效果。 最终呢,就让 gbt 五点四生成了我们现在看到的这样的一个样式。在这里呢,没有调用 flunt and skills, 而是使用了 figma mcp。 啊一开始设计好的一个设计的元素, 然后最终生成了这样的页面。我个人觉得啊,飞格玛 m c p 在 这里应用还是非常好,非常方便的。刚刚介绍的这两个案例呢,都是让啊 ai 通过 user 飞格玛 to 来生成。 那现在呢,再看一个案例,是调用飞格玛 m c p 呢,来根据我现有的一个程序 来做一些啊元素的一些调整。我首先让他看一下我现有的代码文件,问他可以通过 figma m c p 来做哪些?呃,主键之后五点四呢,告诉我建议先做这几个部分,然后呢我就让他 啊做一个 voicerm studio 主键页,并且要深沉到 figma 的 canvas 里。 当时我是给他新建了一个新的页面,即使你不给他创建一个新的页面也是可以的,他是自己会创建一个新的页面。之后就可以看到 ai 呢在 figma 的 页面上去生成了这样的一个页面, ai 在 生成截图发现呢,这里啊高度有些问题, 他又自己去调整了一下,这个就是他当时生成的一个主键库页面,左边是主键集, 右边呢是一个组合视力。再接着我提示 ai 把这些视觉主键呢继续升级成更规范的 figma 设计系统。补一页完整的 memo voice studio web 页面端界面,这是一个 cover, 这是设计系统的基础样式集,那我们可以看到它这里列出了不同的 color 字体, 还有包括字体有不同的大小,这里也展示出来了,还有不同的啊,主键,这是 actions 啊,这是 feedback。 之后呢,他又帮我去做了啊,五个页面,那我们可以看到呢啊不同的 web 端页面, 还有桌面端 setting open 的 状态。最后呢还有手机端展示的一个页面,整体而言做的内容是非常丰富的。最终呢, g p t 呃,给到回复说已补全这些不同的页面。 创建了啊样式集啊,包括变量集合,颜色,羽翼,渐距羽翼,文字样式,阴影样式, 还有这些主键库,他也是帮我拆解出来了,大家帮我们做出这样非常详细的一个拆分,那就非常有利于我们后续啊程序功能的增加调整 啊,不同页面设计语言保持一致。最后再给大家看一下如何让 ai 啊将一开始 啊这样的一个设计,之前是通过飞格玛 ai 做的一个页面,然后让它调整生成右侧我们看到的这样的一个设计。首先呢,我先获取到一开始设计的 url, 让它改成啊瑞士设计风格。 然后呢,它告诉我在读取这个页面之后就触发了 starter plan 的 调用上限,所以它没办法改。 之后呢,我就开始升级 plan 了,包括我们刚刚看到的其他三个案例啊,都是我升级 plan 之后去做的。再接着他就开始设计了,我们看到这边呢有一大块是呃空白的, 于是我就截图让他去调整一下,这是 ar 优化后的, 可以看到有了一些改变,当然这部分内容的话,可能你手动一下会更好一点啊,毕竟调用这些 ai 的 话也不是特别便宜。 最后呢,我还让他把页面呢导航做的更醒目一点,整个页面做成中文,让他确认某个字体可用之后, 瞬间呢就啊切换成了中文这个页面。虽然说目前这个页面呢还是有不少的问题,但是呢,我们可以看到 ai 在 调用 usefigma 啊这个 tool 的 时候,生成效果还是非常好的,它的修改速度也是非常好的。 我个人呢是啊,不怎么会使用 figma 的, 那通过 figma mcp 它可以来帮我们去轻松地来做到这一点。

打开任意一个网页,然后在这里输入这段脚本,它就可以直接把整个网址都爬下来。我们再打开 figma, 按下粘贴, 它就变成了一个可编辑的设计稿了。哈喽大家,我是派大星啊。今天我在测试 figma 跟扣 d s 它们的联动的时候,我发现 figma 的 m c p 它一直在调用一个 js 文件呢。 打开看,它是一个获取网页布局的 js 文件,所以我就把它分装了。分装成一个脚本,就是我刚刚开始演示的脚本,你只要按在控制台粘贴以后,它就会直接读取整个网页。同时它还有个功能,就是你点击区域选择, 它就会出现一个选择框,你只要按下复制,在这里粘贴一下,它就能直接取下来了。但是有些用户我发了出去之后,有很多人都不知道怎么配置这个脚本,所以我又把它做成了一个插件,对, 叫 web to figure mark, 你 只要安装以后在任意一个网页,我这里用阿里云的网页测试一下,你只要点击插件图标 ok, 它就能直接整个网页都拉取下来了, ok, 然后再直接粘贴,稍微等一下,因为它图片的资源比较多,它就会慢一点啊,可以你看它实现出来的效果,我觉得基本跟 网页显示的效果一样,而且他最好的点是什么呢?他直接变成了一个自动布局的形式啊,我看一下他的文件在哪里,你看他有一个自动布局,同时你看可以看到他这里是一个雪碧图,是因为他网页他这里是一个会动的图标, 所以他这里就是水墨图。如果你这里是 svg 的 话,他这里显示的就是一个 svg 的 文件。对,然后我已经把整个插件已经分装好放在这里了,你们可以有需要的话就直接来找我。那好了,就这样,拜拜。关注我带你解锁更多 ai 体校技巧。

想用 ai 快 速生成可编辑的 figma 设计稿,那么我推荐你用它。 hello, 大家好,我是南瓜,今天教大家如何用 ai 快 速生成可编辑的 figma 设计稿。 今天我们的主角是 codex, 没有下载 codex 的 小伙伴可以先来到它的官网进行下载。下载完成之后,我们来到 codex 的 首页,我们点击技能往下滑,找到 figma, 点击加号,显示技能已安装。接着我们来到左下角的设置, 点击 m p p 服务,找到 fig 码,点击安装。接着我们点击进行身份验证,它会弹出这个弹窗,我们点击同意, 同意之后如果页面显示这句话,就说明已经安装成功。我们回到 codex, 现在我们来开始进行创作,让 ai 帮你生成一个 codex, 生成完之后,我们根据他提供的网址进行查看,双击进入我们就能看到他提他生成的一个官网。如果觉得风格还不错,我们先到 figma 新建一个设计,首先点击右上方的分享,再将模式改成可编辑。 接着来到左边右键,点击复制链接,再跟 ai 说。 上传完之后,我们来到 fig 码,我们就能在我们的 fig 码里看到已经可以编辑的 fig 码文件啦。好的,以上就是今天的分享,如果您喜欢我的内容,麻烦给个免费的关注和赞吧,感谢您的观看,我们下次再见!

hello, 大家好, figma mcp 今天有了重大更新,可以与各个 id 大 模型互通了,我们一起来看看吧。 首先我们可以看到这次更新所支持的产品基本覆盖了现在国外的主流了,并且这次与当初的 ai 能力不同,大多数的人都已经开通了一个功能了,如果你真的还没开通,那可以尝试点击这里后补。 关于 mcp 服务,我们就不过多介绍了,我们直接来看如何配置 figma mcp。 这里我们可以先看一下本次 mcp 更新的介绍以及支持的功能。 以前的 cloud code figma 仅支持 html 写入,这次支持了直接在画布上写入生成代码上下文 figma make 和设计系统。 接下来我们来看如何配置 figma mcp。 远程 mcp 服务器对于教育版用户一个月好像只能调用六次,所以我们主要看本地版。首先你要下载 figma 的 本地客户端,并且在使用的时候要保证客户端处于打开状态。 然后我们在客户端中打开 mcp 功能,这里官方文档给了流程,我们也一起演示一遍。打开 figma 任意画布,在底部选择开发者模式, 在右侧就可以看到有 m c p 选项,打开 m c p, 看到绿点就可以了。接下来我们回到文档,在 figma m c p 支持的产品中配置 m c p, 我 们以 cursor 为例, 复制这段 johnson, 然后打开 cursor, 点击右上角 serions, 选择 m c p, 新建 m c p, 将刚刚复制的那段 jason 粘贴进去保存。 这时候我们就可以看到 figma m c p 配置成功了。因为我使用 cloud 比较多,所以我们再来配置一下 cloud, 也是复制这段命令,然后直接粘贴到 cloud 终端中即可。 配置完成后,我们来验证一下,问一下新的 figma m c p 都能做些什么? 这时候 cloud 给我们输出答案了,基本与 figma 官方文档描述一致。然后我们回到 figma, 打开一个画布,把画布链接权限改为可编辑。 然后我们回到 cloud, 让 cloud 使用 figma mcp 帮我们做一个电影网站的首页,再粘贴 figma 画布的链接。 经过了漫长的等待,网站做好了,我们写入成功了,我们继续测试另外的功能,能不能让 ai 调用我们的组建库进行设计呢?我现在为这个设计文件添加了一个组建库, 然后让 cloud 读取我们添加的组建库,并且根据组建库的规范设计一个仪表盘。 在我快要等到崩溃的时候,页面终于是出来了, 我们一起来看一下这个页面吧。问题其实挺多的,没有自动布局,没有调用组件儿,部分使用了组件变量,这种质量肯定是无法使用的, 我不甘心,所以我们换一种方法,我从调用的组件库中复制了一张仪表盘,把这张图的链接丢给 cloud, 让 cloud 参考这张图,重新设计之前的图。 把这段素材放出来,是想告诉大家,目前的 figma m c p 出图非常慢,并且特别费偷看, 我们已经能看到修改后的图了,在有了参考之后,明显一致性提升很多。还有一些小问题,我们手动修改一下,修改过程中,我们看到无论是组件还是变量都已经使用上了。 修改完成后,我们让 cloud 把代码敲出来看看怎么样吧,对比更新前的 m c p 有 没有进步? 在 ai 干活的时间,我来讲一下时间和 token 的 消耗吧。本次演示 ai 在 跑的时间超过了一个小时, cloud sun 的 token 消耗约十五美金。总结就是虽然很强,但是又慢又贵。 最后我们来一起看一下实现的界面吧,还原度基本百分之一百,对比更新前的 m c p 简直天壤之别,直接给到吭! 那么今天的视频就到此结束了,如果您觉得视频对您有帮助,可以点赞收藏加关注,这对我很重要,谢谢!

最近 open ui 呢发布了一个 collect 插件,那这个插件呢,是在 curl code 使用的,不是在 collect 使用,而且它主要的能力就是在 curl code 的 编码过程中使用 collect 的 能力去进行代码的 view 是 不是觉得很新奇?那本期视频呢,就来介绍一下这款 collect 插件,以及怎么来使用,哪些场景下用不同的命令。那首先我们在使用 curl code 进行编码或进行方案设计的时候,有的时候是不是特别想 有另外一个好的模型来对我们代码变更进行一个 review, 或者对我们的方案进行一个更全不同角度的这个审视。那市面上其实也有一些方案,或者说工具也好,插件也好去解决这个问题,那么你也可以设置不同的子代理,不同的模型来去做 review。 但是呢,这也设限于 curl code 只能用某一个供应商的模型啊,没办法用多个供应商,比如说你没办法同时使用 jimmy 三,没办法同时使用这个 curl x 或者其他的模型去做同样的事情。那虽然说你可以双开啊,你可以打开 curl code, 可以 打开 curl x 去做 这个 review, 但是呢,会存在你在 curl code 里面的上下文对话,没办法平移到 curl kyle kyle x 里面去使用。那么有了这个插件之后,你就可以使用 kyle x 的 一些能力了,比如说 对我们的代码进行 review 啊,对我们的方案进行一个深入的一个判断,是不是合理,是不是实现有问题。所以呢,这个插件解决最大问题就是在 codex 的 这个维度上去给你去做 review。 那 么怎么安装呢? 打开 qq, 然后输入这个命令啊,就是安,先安装 markspace, 然后再安装这个插件,然后再进行一个 reload, 就是 重新加载一下它这个插件,然后运行这个。那前提是你自己本身就是 codex 的 用户啊, 你你有这个 class 的 账号,能正常用 class 进行编程,那么你就可以使用那这个 setup, 它会进行一个健全啊,如果你没有安装 class c i, 它会帮你去安装好,所以说你只要执行这个命令 ok, 通过之后,那么你就可以使用接下来的命令了。 那么它提供哪些命令呢?那这里我重点要讲的是两个命令,第一个就是 collex review, 那 这个命令是非常基础的,它是一个只读的命令,那它做的最主要的事情就是阅读你当前 get 里面没有提交的所有的代码变更, 或者说你可以指定一个分支,然后去对比,去审查你这个代码里面有没有啊,质量问题啊,就是从一个很正常的角度来审视你这个代码的这个问题啊,它是不会去改代码,只会去做审查。那我们可以看一个例子啊,就是我在我这里边的话,使用这个 flex review, 那么他就会去评估我这个,最近这个啊,提交了啊,最近这个 git 变化里面的代码来进行一个审查,审查完之后他就得了个结果说,哎,我这边有个 pr 的 问题啊,这个配置有有这个问题, 大家可以看到,就是我们在做这个 review 的 时候,它并不是说是 review 哪个需求有没有实现,它是站在代码这个角度,就是来看你的代码结构,你的代码有没有问题?是站在这个角度,不是站在业务的角度,那业务就比如说你做一个登录的功能,你的业务流程是 a、 b、 c, d, e, f, g, 那么他有没有完成 a, b, c, d, e, f, g, 他 是这个滤镜是不在这个范围之内的,他只会滤镜的是你这个登录这个逻辑,登录的这个代码里面有没有比如说什么空指针啊?有没有这种啊?隐藏了这个设计问题啊?有没有什么这些东西就是很技术化的这个审查, 所以呢过滤镜它是一个很常规的一个检查,它的上下文是你的 get 里面的所有的未提交的这个变化, 那么它它的命令是啊 close view, 然后呢也可以你也可以设置一个这样的一个 base 的 分支啊,你也可以设置让它去后台去运行那 close view, 它有个特别重注意的点,就是它没办法指定就是让它去 view 什么具体的内容 啊,我们可以看到我们在执行这个命令的时候,在后面是没有输入任何内容的,没有说让它去 view 一下哪块东西,就是它不建议在执行这个命令的时候去告诉它,就关注了点, 不是这个命令啊需要的,那这个命令就是做一个比较普通的一个啊代码的一个常规的检查,那么第二个就是更加专业的,那么它比这个 review 呢,就是更加挑刺, 那普通的 review 更具体的是有没有用代码的 bug, 有 没有风险,有没有质量问题,那它这个 review 呢?我们可以叫它叫做对抗性的 review, 就是 它会从方向上来判断 你这个东西设计的是否合理?刚刚我说的登录的这个代码,比如说 a、 b、 c、 d、 f、 g 这个流程是不是设计的有问题,那么它就可以指定它要利用的一个方向,所以呢它的这个利用的深度是很深的, 它是更像一个老的价格师来看你这个整个的价格设计是不是有问题?所以呢,它是用来挑战实现方案和设计决策的 比较适合。就是那种比较重要的啊,就是一个比较复杂的,涉及到模块比较多的,并且你希望他重点去 review 的 这种有具体业务场景的,那么你就用这个命令,我们可以来看一下啊,就是他这个命令的一个详细的流程,比如说他是支持自定义 focus task, 也就是说支持你去在这个命令触发的时候告诉他要去 review 什么具体的场景。 那别说我这个例子里面,我自己也举这个例子啊,我让他去 review 一下我这个 cloudbase 里面的设计数据库设计是不是合理,那么他就会去阅读所有跟数据库相关的代码,设计相关的代码,然后去看一下啊,这个表设计啊,或者干嘛,然后最后得出一个结论,就说我这里面可能是有个密钥暴露的风险, 所以他是更偏向于就更深的去挖掘,从源头上去利用一下方案的这个方向有没有问题。 那么他 view 的 这个维度呢?有七个维度啊,啊,他这边 view 的 话有七个维度,比如说认证权限隔离, 还有这个数据丢失回滚啊,这些都是比较深的,就他会以这种七个这种攻击面这种方式去看你的这个方案的设计的是不是有问题?接下来我们来对比一下这两个 view 啊。那 close view 我 们可以认为它是普通的 代码 view, 那 这个呢?就是对抗式的这种 view, 那 第一种审查风格就是标准代码审查,就是我们写了一个小功能啊,进 改了一些代码,那么你就可以让他去做 review, 那 这个就是会站在更高的角度去看你整个设计的方向,你的这个架构啊什么的,定具体的这个方案去进行一个审查, 然后自定义重点,也就是说你是不是可以指定要 review 的 方向,那么 collins review 普通模式是不支持的,那么这个那么这个对抗式的 review 是 支持的, 那审查的目标也就是他们要审查的范围和上下文都是基于 get 你 的代码变更的范围。运行模式都支持后台 前台,也就说你在执行这个命令的时候,他会根据这个审查的目标大小,建议你是后台运行还是前台运行,那如果是后台运行的话,那你就可以继续往下做你自己的事情,那如果是前台运行的话,他是必须要等他运行完,你看到结果之后,你才能继续算一个任务审查的深度 啊。普通的 review 那 就是找缺陷,那么这个对抗式的 review 呢?就是政委方案,也就说你要他要看你的方案,看你的这个设计是不是一开始就选错了,特别像一个这种老的架构师,用专业的眼光来看你整个的设计方案。所以试用的场景呢?就是啊代码的常规检查,选完一个功能,提交前扫一遍, 这个不错吧,提交前扫一遍就是你执行提交 pr 的 时候去进行进行一个 review, 改了一改了一改了,很多文件啊,先做常规验收准备, tpr 也是一样,都是一些比较常规的,那么这个就是关键变更,上线前的深度审视,发版前怀疑方向是不是最优,或者说你做完整个方案之后,你还再拿 collect 去做一个对抗式的这种 review, 改了这种缓存重试、并发状态流转等复杂的逻辑。我们知道这些都是在我们开发中最难最深的一些东西了, 还有包括做健全支付数据一致性这种高风险模块式。那这些场景啊,都是官方建议的这个使用场景,所以说我们可以来可以去使用一下。 ok, 那 本期视频就到这,希望这个视频对你有所帮助,祝您生活愉快。

今天主要就是想跟大家分享一下 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 里边执行的效果都是很不错的。这些内容就是我们刚开始给他去展示的。 当然这个设计系统相对来说是比较简单的,包括一些组建的展示,因为我给他的内容就比较简单,只给了他一张页面去做参考, 所以他生成的内容相对简单,我们如果说有丰富的页面参考,可以让他去尝试一下,生成复杂的设计系统都是可以被我们去开发的。从我目前的这个简单的测试的流程来看,我觉得他执行效果还是非常好的,而且很稳定。

anthropic 和 codex 的 分歧这次是真的公开了,同样都在做 coding agent, 但他们对 harness 的 判断正在走向两条完全不同的路。一边是 anthropic 前几天刚发工程博课系统展示他们怎么把 harness 做得更强更厚。另一边是 codex 的 开源负责人 michael bolin 最近在一场访谈里给出了几乎相反的信号,一个在继续加厚,一个却在努力作薄。所以现在真正的问题已经不是 harness 重不重要,而是它到底是终局,还是一个过渡阶段的中间态。先把 harness 讲清楚,如果用最简单的话说, harness 就是 模型外面的那套控制结构,模型负责生成,但 harness 决定任务怎么拆,工具怎么调,上下文怎么传,结果谁来验,流程怎么往下走。所以它不是单个 prompt, 也不只是工具调用,它更像是 agent 真正能跑起来的那套工程外骨骼。而现在最有意思的地方就在于, anthropic 和 codex 都承认 harness 很 重要,但它们对 harness 的 未来判断已经开始明显分叉。 anthropic 的 路线是把 harness 做厚,这点我们前面其实已经拆过了。它们在最新工程簿里,为了让 cloud code 能长时间构建完整应用,加了很多非常重的结构。 比如 planner, 把一句话,需求扩成完整规格。比如 generator, 负责真正实现功能,比如 evalerer, 像真实用户一样去测页面接口、数据库状态。 再比如 contact reset, 就是 上下文快脏掉的时候直接清空,重新起一个新 agent, 再通过结构化交接文件把状态接过去,你会发现, anthropic 这套思路的核心是模型本身还不够稳的时候,要靠更强的外部编排去兜住长任务里的跑偏风险。说白了就是模型做事, harness 保证特别失控, 所以 answer pact 的 判断其实很明确,复杂任务之所以能落地,靠的不是单次深层能力,而是整套控制结构够不够强。但 codex 这边, michael bolin 在 最近访谈里给出的信号儿几乎是反过来的,他说的很直接,他们理想中的 harness 应该尽可能小,尽可能轻。 什么意思?就是不要把太多决策硬编码进外部框架里,不要疯狂堆专用工具,不要把流程做得越来越重,不要让模型每走一步都被人类写好的规则牵着走。 codex 的 思路更像是尽量给模型一个真实环境, 比如终端,比如沙箱,比如必要的上下文连接能力,但探索路径、调用方式、执行策略,尽量让模型自己决定。你可以把这理解成两种完全不同的工程哲学。 antropic 更像是在说模型还不够稳,所以我们要先把脚手架搭起来。而 codex 更像是在说,脚手架可以有,但别把它做成一栋楼,因为模型早晚会涨到能自己处理更多东西。这就是两边真正的分歧, 不是要不要 harness, 而是 harness 到底应该越来越强,还是应该随着模型变强不断收缩?所以这个问题为什么值得我们认真看?因为它背后其实决定了未来 coding agent 的 产品形态。如果 entropy 这条路是对的,那未来的核心竞争力就会越来越像系统工程,谁的 planner 更强, 谁的 evalerer 更稳,谁的 handoff 更完整,谁的流程控制更严密,最后拼的会是整个 agent 框架本身。也就是说,未来的竞争可能是 harness 之战。但如果 codex 这条路是对的,那现在很多复杂的外部编排本质上都只是过渡期补丁。随着模型的推理、记忆 工具使用,还有长期执行能力继续变强,这些重型框架里的一大部分可能都会被模型自己内化掉。到最后真正留下来的,可能不是一个很厚的编排系统,而是一个相对轻量的运行环境,比如 sandbox, 比如 memory, 比如 connector, 比如少量但足够强的工具入口。如果真走到这一步,那 harness 就 不是中矩,它更像一个中间态,是模型还不够强的时候,人类替它补上的那层结构。但这里最有意思的是, michael 也没有说 harness 会彻底消失, 它其实保留了一个底线,就是环境和安全不会退场。这点特别重要。因为这说明,哪怕在最做薄 harness 的 路线里,也不是完全没有 harness, 它只是会从流程控制层慢慢收缩成运行环境层。这才是这场分歧最值得看的地方。 anthropic 在 回答的是模型还不够稳的时候,怎样让复杂任务真的能跑起来。 codex 在 回答的是模型越来越强之后,哪些外部结构还值得保留。所以如果把这两条路线放在一起看,我觉得真正值得记住的一句, where anthropic or codex 谁对, 而是 harness 现在当然重要,但它最终会不会成为主角这件事还没有定论,它有可能是 ai coding 的 终局, 也有可能只是模型能力跃迁之前被快速放大的中间态。而这个问题一旦想明白,你看今天很多 a 阵的产品视角就会完全不一样,你就不会只问这个产品加了多少工具,做了多少编排,有多少 a 阵在写作。你会开始问另一个更关键的问题, 这些结构到底是长期护城河,还是只是在替今天的模型补短板?如果是前者,那你应该继续把 harness 做强。如果是后者,那你就得非常警惕,别把过渡期脚手架做成未来的长期负担。所以我自己的结论是, entropic 和 codex 的 分歧, 表面上看是在讨论一件更根本的事,未来 coding agent 的 核心竞争力到底会停留在框架层, 还是重新回到模型层?这也是为什么我觉得这个问题不是技术细节,而是路线判断。我最后留一个问题,你觉得 harness 最后会变成 ai coding 的 终局,还是只是一个被迅速放大的中间态?评论区聊聊,关注我,下期继续带你拆。

figma 正式把设计稿直接为进了 code code 控制器这类编程工具里。 我配置好 m c p 后,给他了一个网页设计稿,然后让他帮我复刻出来。稍等一会儿,我们来看一下效果。效果真不错,基本完全复刻。甚至 ai 写完代码还能反向推回 figma 画布上迭代前端。 ai 正是从看图写页面 进化到了吃透上下文做页面。以前我们用 ai 写前端,为啥总感觉差一口气?因为 ai 拿不到真实上下文。过去的 ai 是 看图写代码,本质上是图像模仿,但现在 figa 放大招了, 通过 m c p 协议, figa 不 再只是一张张给人看的视觉图,而是变成了 cursor cloudmen 能直接读懂的结构化数据源。 ai 现在拿到的是你真实的组建信息,精确的变量约束和布局数据。甚至 ai 写完代码还能反向推回 figma, 划过上迭代。

windows 的 windows 桌面端已经出来了,我深度体验了三天,接下来就跟大家录一个视频,说一下我在使用的过程中遇到的一些问题。首先这个页面就是我们下载的这个页面,直接点进去就可以下载,它是直接连接 微软的软件商店的,所以我下载的时候遇到的一个问题就是我的版本跟这个商店他不符合,因为我的电脑版本我是 win 十,我没有升级到 win 十一,所以说我在下载的时候他就说跟版本不符,我这个时候就准备了一个这样的升级,就是关闭系统防护的升级,还有一个是这里升级的一个文件,就做了一个升级就可以下载了。 下载之后我看到有朋友说下载之后有闪白的问题,所以我没有遇到闪白的问题, 下载了之后就进入到这个界面,其实因为我是代码的小白,我不知道这个界面之后应该怎么去按嘛,我看网上的教程大部分都直接是这个界面了,所以我当时还研究了半天这个地方直接添加项目就好了,添加项目它会让你选择一个文件夹, 我就建建了一个这样的文件夹,再添加项目,选中这个文件夹之后就能来到这样的一个界面。这样一个界面之后,主要我是看一下我们的左下角,它这个地方有一个剩余的额度好像,因为我 gpt 开的是 plus 版本,好像是可以额外再给两倍,反正这个剩余的额度,比如说百分之百,百分之七十六,这个是一周的,每天会给你多少小时,这个就是剩余的额度反,每天都非常的够用, 我看遇到最多的一个问题,包括我自己也遇到,你给他发了一个东西之后,他一直在思考,你看我这个,我三天之前发的,他一直在思考,我又开了一个新的任务,他仍然在思考,这个是怎么解决的呢?我换了一个节点,把 gpt 的 网页版,网页版打开,打开 gpt 的 网页版,打开了之后,换一个节点,我们可以在新建一个新县城,相当于是在这里去给它输入新的任务,最新的应该一一的,它就可以正常的去操作了。 好,下一个就是关于怎么能更好地使用它,其实我是一个代码的小白,我不知道该怎么去使用,有人说这个地方会有一些 skills, 我 没有额外的安装,我觉得基础的就够了。我这里其实主要是想说不要把它当成一个 ai 工具,就把它当成一个纯写代码的一个东西。那么其他的我建议要跟一些 ai 的 工具去做一些搭配着使用。比如说我最开始是搭配着 gpt 去使用的,就相当于用 gpt 给我的一些指令,我再导入到 codex 里面,让它去给我运行。 但是我深度测试了三两天,我发现 gpt 出来的东西仍然不能看,最后出来的这个效果不尽如人意。我在昨天下午我又深度的去换了一下,我换了一个 germanlab juma 之后,我用的 pro 的 模式,虽然我的 gpt 也是 plus 版本的,但是出来的效果不太好。我又用到了 pro 的 这个版本,就 juma pro 的 版本,给它输出我想要的东西, juma 会把它翻译成机器能读懂的这个代码语言,我再导入到这个 codex 里面,让它去给我运行,最后花了半天的时间,昨天满打满算应该是一天的时间,我最终把这个东西给研究出来了,当然 最后的结果是失败了,我开发的这个东西它是失败了,但是我建议大家如果要去使用它的软件搭配着用,就用其他 ai 工具搭配着用,不要直接在 codex 里面去提问。你看我之前就是遇到一部,我就问那个 codex 它该怎么弄,它就给我弄得很乱,因为我不知道怎么写,所以我就跟着它的步骤去, 但是他给我的步骤就又长,他会你问他一句,他说一句,他就不站在那种能完完全全解决这个事情的基础之上。但是 german 呢?给我的感觉就是他想他能够对准我们的这一个核心的目标去给你拆解,因为这是我整体使用 codex 的 一个感想,如果大家有其他的问题,也可以积极的去交流。

现在飞格玛刚更新的这个 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 的 服务,赶紧去试一试。

openai 刚刚为 codex 发布了史诗级的插件生态,这次更新彻底颠覆了以往的开发体验。全新的插件系统让 codex 进化成了能用工具的全能助手,你只需输入指令,从 note 提取文档,用 flagma 生成网页,最后到 clik 向团队汇报,它自动去拉取资料。 李瞬间排版出一张高质感的设计稿,最后连带链接发送了一份完美的图文报告。为了让大家尽情折腾这些王炸插件,官方直接大设天下,重置了所有订阅计划中的 codex 使用限制,大家现在可以无限量白嫖测试了。

以前 codex 像个坐在你旁边疯狂输出建议的天才实习生,想法很猛,但真要他帮我把这个需求同步到 slack, 再见个 no show 涅灭,他只能摊手,哥我没权限。现在他直接揣着你所有工具的钥匙,能读能写能执行, 一键跑完整个工作流插件系统的本质,给 ai 装上手和脚。这次 codex 的 插件不是简单的功能扩展,而是一次角色跃迁。插件把三样东西打包成了可附用工作流 skills 不是 代码,是做事的 s o p。 比如写屁 r 描述这个技能, codex 知道要先读 commit, 再查一视,最后按团队模板生成文案 apps, 直接打通 slack。 figma, ocean, gmail, google drive 相当于给 ai 发了各系统的员工账号, mcp service。 这个更狠,让 codex 能连你公司内部的系统数据库 e p i。 本地项目之外的世界,他也能摸得着。真正可怕的点,他开始吃写代码之前和写代码之后的活官,放那句,以后你不用自己当人肉路由器,在需求方设计文档、代码 测试之间来回传话了。举个真实场景,产品经理在 notion 写了需求拆任务, at 相关人设计师在 figma 更新稿子, codex 同步变更到 gera 加生成前端组建草稿。你写代码时问这个接口文档在哪? codex 直接去 google drive 翻最新版,顺便检查有没有被评论过。代码合入后, codex 自动写 release note, 发 slack 通知更新 notion 进度表。

好,今天我们接下来学 codex, 在 前两天 codex 又进行了一次更新,可以看到旁边多了一个技能和应用,那这个技能也就是 skills, 我 们理解了,但这个应用啥意思呢?所以这节我们一起来学习一下。那我们可以看到应用呢,其实相当于我们之前安装过的一些,呃,像 github, 像这个,呃 几秒,对吧?那这些应用都可以直接在这边通过安装安装这个插件或者应用,那我们安装好了完成之后呢,那这时候我们就可以和这个应用进行对话了,这也是和 skills 最大的不同, 看到这里呢,会自动的选择当前我自己的所有 get up 仓库。那很多小伙伴可能疑惑说,我安装了应用和安装插件有什么区别呢?那唯一的区别可能在于它一个应用是一个整体,整个整体里面包含了它提供的功能,比如说它包含哪些呢?包含我们整个仓库的所有权限一宿, 包括提交 pr 以及进行什么,进行这个 push, 对 吧?你可以看到,对吧?还有 revenue, 还有这个啊,这个相当于它把一堆的这个 skills 呢作为一个整体给变成一个应用给到你,相当于你不需要一个一个去安装 skills 了,你只需要,哎,直接走安装我这个应用就相当于安装了这么多个 skills 以及这么多个操作,对吧?而且这是官方提供的,是更加的啊精确。那这时候我们可以在这里面去对话,比如说,哎,帮我合并一个 pr, 对 不对?通过这样的方式可以更加的啊准确去对我们应用进行操作。那你安装好了之后呢?在 manage 这里呢,也有一个分类,对吧?比如说告诉你插件在这里 啊, app 在 这里, mcp 在 这里, sku 在 这里,对吧?看出你的具体数量, ok, 让我安装了三十六个 sku, 四个 mcp, 是 不是通过这样的方式,是不是很清晰 那?呃,其实这一次它提出来,除了这个点之外呢,它还提出了一个 create plugin, 对 吧?之前是有一个 create skills, 是 不是?而且有一个 create plugin, 就是 说你可以在你的创建你自己的插件,它提供了这么一个啊,提供了这么一个 skills 帮助你创建插件,比如说你可以创建一外部的插件来去帮助你访问一些数据,对吧?通过这样的方式,但是你分类也分得很清楚,比如说像 抠点相关的,对吧?它跟 face。 那 当我们选择去安装某一个应用的时候,我们比如说点击安装啊,再点点击安装某一个应用,它会自动弹起一个授权,比如这个对不对?你看就是安装它,这时候它会选择安装它安装的过程中会弹起一个授权去关联你线上的这个 os, 你 看 不管什么就会相当于关联你自己线上的一个东西,让你选择认证,这时候呢就会把授权的信息给到 codex 啊, codex 就 安装好了,相当于能够获取你所有的这些权限啊,这是我们的这一次的一个简单的更新。好,那这一次我们继续还来学习一下,就是 codex 呢,我们已经知道,对吧?它这一次 还加了一个这个应用,是不是加了这么一个应用这个东西,那其实我们在使用 codex 的 时候还有一个 mcp, 对 吧?之前我忘记讲了,这个 mcp 我 想呃,很多小伙伴都提过,是一个老生常谈的东西,但是 codex 这里我也是第一次提,所以今天给大家讲一下,那 这里面可以看到这个学习,这里也提出了非常多的和这个 codex mcp 相关的。 如果说你想要去哎,把你的服务器上的 mcp 登录一下,授权一下,你可以通过这个命令这边授权一下,你也可以在这里面去配置你自己的 mcp, 比如说我现在在里面打开了他的目录,对吧?在这里面我配了一个 mcp, 对 吧?他在这个目录下面配置成 mcp, 叫 mcp server 点 fish, 对 吧? 这是我的 mcp, 它会执行一个这个命令,然后并且开启了 mcp, 所以呢,我在这里呢配置好 mcp 之后呢,在这个 codex 里面就可以去呃加载 mcp, 加载 m c p, 可以 让这边你通过 m c p 的 方式哎去把这个东西吊起来,哎,就告诉你,哎,我现在确实开启了这么多 m c p, 或者你也可以像我一样,对吧?通过啊,直接吊 kill 的 方式,比如说我想安装某一个这个 m c p, 你 就直接跟他说,对吧?啊,帮我安装这个 m c p 安装,那他安装了,实际上就是会把这个安装的这个结果哎写入到这个啊这个里面来,然后从而去调用当前这个目录下面这个啊,这个工具,是吧?就完成了 m c p 的 调用,好吧,嗯,那我们现在已经知道了 m c p, 也知道 skill, 对 吧? 那所以呢,我们就相当于把 skill 变成一个整体,变成了所谓的应用,大家都明白了吧?就很清晰的一个东西,我觉得 啊,并没有很复杂,所以这是它的更新那,呃,大家可以灵活的去把这个 skills 和 m c p 整合起来的,灵活去用啊。当然这里县城这里呢,也加了一些简单的排序,比如说这里你可以全部全部折叠,全部展开, 也可以按时间去排序啊,我觉得这也是它的一个改动,之前的话可能没那么细啊,对,对吧,是吧。好了,那就本期视频全部内容啦,我是小刘,我们下期再见。

刷到很多 ai 应用的工具介绍,但从来没有人演示过他怎么用 ai 做一个东西出来。 接下来我给大家试一下吧。我们就从最简单的一个外贸独立站开始,我给大家演示一下怎么用了一分钟教你做一个自己的 独立站点,非常简单。我们打开了 figma 软件输入,我想建立一个电商独立站,用来销售和管理我的商品。 点击 make it, 大家可以看到它已经开始在 thinking and build your idea, 那 其实这是一个 figman 的 make 模式,它其实是默认会调用很多模型。如果说玩过 ai 的 朋友应该知道,我点开这个默认设置,大家可以看到所有的主流模型, cloudsonnet 四点六 up 四点六,然后 gmail 三点 gmail 三和 gmail 三点一 pro, 然后它会默认帮我推荐模式,因为我想省一些积分,它这个也是有积分的,它自己会帮我把整个网站的前端 建立起来,大家可以看一下,那后面的内容我可能会加速播放一些。好了,这基本上我们网站的出行就已经完成了, 具体要卖什么,其实是完全可以在这里你直接跟他讲哪里要调整,包括订单管理里面他有多少订单,比如说后面我们要接入支付,你可以让他直接在这里输入,我要加支付 首页这里你可以看到他具体的展示。如果说很简单,比如说我想做的跟苹果一样,那么你告诉他,我希望做成一个苹果主站风格的那种电商网站, 也是完全可以支持的。好了,这里还有一个问题,如果说我们需要修复,他是一个警告,玩窝你就是一个警告,如果我们需要让他更完美一些,可以点修复, ai 还是会犯错,他犯错的时候你要告诉你哪里错,他会给你修复,不需要你再去查查资料,然后他可以完全理解你的需求,而且最关键的是你的需求可以一天变好几次,不会有程序员跟你抱怨说你想好了再来。

好,这节我们继续来学习 codex 的 部署,那 codex 呢,提供了非常多的部署技能,那接下来呢,我给大家举一个很简单的例子,这是我开发了一个简单的静态元型图, 但这个元型图呢,我们现在只能在本地去访问它,如果我想分享给我的领导,或者分享给我的同事,对吧?我做出一个怎样的项目,他是看不到的,只能把我的电脑拿过去给他看,所以这个时候我们就要把它部署到线上去,对不对? 所以呢, codex 呢,也提供了对应的公开的技能,就是我们的 vsail 和 skills, 这个 skills, 那 我现在已经部署好了,给大家看一下,对吧?第一个是这个 vsail, vsail, 那 这个,呃,部署文件相当于哎,它这里面给你声明好了,我现在要部署这个脚本,该执行哪些文件,该执行哪些命令,它的作用就是这样子,就是相当于哎,可以帮助你去哎,告诉你如何部署,然后呢,你需要使用它的话,非常简单,按一个斜杠,然后选择这个 vsail, 选择这个 vsail 部署, 然后帮我部署一下,注意一定要切到你刚刚的项目上面去,对吧?然后部署完成之后呢,他会给你一个链接,我们点一下, ok, 看到他已经帮我们部署好了,对不对?这个链接现在是即使是领导也可以访问,并且他是 https 的, 也是安全的啊,也就是说现在不仅是你可以看到,你的同学都可以看到,当然呢,在国内也需要做一个转发啊,当然这种涉及的啊,讲解了好,我们再看另外一种方式啊,就是这个叫做 cloud flair 的, 这个方式也是一样的,我们需要用到一个叫做 cloud 这个 cloud file 桌面,对不对?然后我们点这个,这个也是一样的,它也是提供了一个一系列的文件,哎,它更像是一个什么应用,对不对?你看它帮你部署好了,我们点一下试试,点一下,哎,三二一,你看也可以访问了,那有小伙伴说了,我学习第一种 file 的 部署就可以了,那为什么还选第二种 cloud file 呢?对吧?我们用一个键就可以了。 首先你需要搞清楚一个点,程序员讲究的是一个,就是 back up, 比如说 cloud file, 对 不对? 这时候我们提供了这个链接呢,就有一个啊,随时随地的切换的一个备用的一个情况,对不对?其实一个访问不了,另外一个还可以访问。那我在讲其实 skills 这个东西啊,我觉得非常神奇,就如果说大家找不到什么是 skills 呢?我们就可以使用这个 find skills, 比如说我想找一个 ui 美化的,对不对?你就跟他说我要查找, 帮我找一个 ui 美化的 skills, 相当于有一类人已经把这个标准封装好了,我们就可以直接使用这一类 skills, 比如说我们这种比喻跟他说帮我查找一个 ui 美化的 skills, 我 就要直接用到我的项目当中 啊,这个时候呢,我们可以看到它这个泛的 skills, 它是作用的时候帮助我们查找这个 skills, 那 目前使用的人数是非常的多。那我知道了,下面去看的话都有啊,七八十万的一个使用量,大家可以自行去使用这个 skills 非常好用啊,就是它可以帮助你,相当于去帮你找什么样的 skills 适合你这个项目。那我刚刚跟他说,那我帮他找一个, 我让他帮我找一个 u i 美化的,他就会去帮我找 u i 美化的,并且呢,找到之后呢,我就可以直接让他帮我安装好这个 skills, 就是 完全一系列流程了,对不对?那顺便讲猜一嘴,就是这个地方 cloud 的 这个 codex 呢,他实际上 最近啊他又加了个新权限,就这个沙盒权限之前是默认和完全,现在补了个沙盒,就相当于,哎,你在你的这个呃 这个项目当中给你建一个啊保护,相当于,诶,你做一些危险的操作的时候,他会进,就在这个沙盒里面去执行,你看他会帮我去查,他会执行这个命令查 ui 的 赞,你看 ui 美化的是不是 ui 设计,是不是他会帮你查有没有对应的这个 skills, 诶?发现有是不是,那就直接帮你呃,安装一下,是不是,你看 帮我查,有非常非常多啊,因为我之前是安装了好几个,第一个是这个,呃,这个 skill 我 给大家看一下 这个 fr, 你 看是不是这是前端设计的,包括这个 ui 啊, pro max 我 之前讲过,是不是这些都是我之前安装的,但是你通过这个方法安装,你看它可以帮你找非常非常多,然后你给自己一个一个就是找到真正适合你的那一个 skills, 然后呢,大家可以发现没有,这个自动化最近其实也改了很多,你看官方提供给你的一些自动化的建议,就是说,哎,有哪一类人用的最多的自动化?我推荐你去用,比如第一个是状态报告,你看是不是他希望哎定时定点的给你生成一个报告,你可以直接使用他这个模板,是不是昨天的一个结果,你看是不是告诉你,哎,我是否可以去 根据昨天提到的 p r 或者文件,是不是还可以生成一个工作报告,这样可以每天看到你的工作是什么样的,对吧?包括可以帮你查 bug, 也可以帮你去做一些啊,一些 分字系的一些操作,你看是不是非常的分类非常清晰啊,相当于他也提供一些自动化的,你也可以选择创建自己的相当于一个周报,是吧?一般我用的最多的就是怎样呢?就是哎收集最近的 ai 信息,帮助你哎去汇总就最近的一些前沿的 ai 里面的信息,你看还是找到了,哎,找到了,是不是这个,你看官方提供了一个哎前端的是不是,你看 有二百一十三 k, 相当于哎有二十多万人在使用这个,这个 skill 是 不是这样子,对吧?所以呢, 大家可以非常方便的通过这个 find skill 去查,也可以非常方便的通过这个 versale 或者这个 cloud flair 的 这个部署的这个啊方式去帮助你把这东西呢给它推到线上去,而且是一种非常好的形式,大家可以去尝试一下。好吧,那本期视频全部内容呢?我是小刘,我们下期再见。

codex 原声版来了, windows 开发者告别复杂配置,那个时代结束了,那么这次的原声版到底强在哪呢?首先,它不是简单的套壳,这是一个为 windows 全新设计的底层架构,核心就是速度和安全。 以前的网页插件设置麻烦,性能也总感觉差点意思,现在完全不一样了。它是个真正的原声应用,在独立的沙盒里运行,跟系统深度集成。这意味着什么呢? 简单说,这个沙盒就像一个给 codex 准备的专属空间,它在里面怎么运行都不会影响你的系统,既保证了速度,又保证了安全。 而原生性的关键就是它直接在 pro shell 上跑,这就意味着它能调用最底层的 windows 系统能力,性能自然是原汁原味的。好的架构最终还是为了提升效率。我们来看看它具体怎么改变你的开发工作哟, 你是不是也烦了?同时开好几个项目窗口,来回切换,思路总被打断。现在好了,一个界面就能管理你所有的项目,再也不用痛苦地切换上下文了。实现这个的关键就是工作树, 它能让一个项目里同时开好几个互不干扰的任务空间。想象一下,这边的工作树专心修一个紧急 bug, 另一边的工作树同时开发一个新功能, 逻辑清楚,互不干扰。还有一个亮点是自动化,你在专心写核心代码的时候, codex 已经在后台默默帮你搞定代码格式化、写文档这些杂我了,让你能真正专注。 除了工作流, codex 还带来了一整套专为 windows 开发者打造的生态工具,比如能不断扩展的记忆能库,专门给桌面开发用的 winui 技能,甚至能一键切换终端,可以说每个功能都非常懂。 windows 开发者 特别要说说这个 win u i 技能,如果你开发 windows 桌面应用,这个功能简直就是为你量身定制的。 当然,如果你习惯用 linux 环境也完全没问题,它的编码代理和终端可以一键切换到 wsl, 无缝衔接你的工作习惯。说了这么多,肯定想问这么好的工具怎么拿到?非常简单,直接去微软商店或者官网下载,然后用你的账户或者 api 密钥登录就行。 最方便的一点是,你不需要重新注册你手头现有的 chad gpt 账号或者 api 秘诀,直接就能用,没有任何门槛。所以总结成一句话就是,入门的门槛更低了,但效率的天花板却更高了。对所有 windows 开发者来说,一个全新的时代可能真的来了。