codex和figma联动教程

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

天天跟开发在飞格玛里面对稿的应该不止我一个吧？前几天我摸索出一套绝杀连招，你看这个 ai 写的代码页面，直接往飞格玛里面一丢，它就变成可编辑的设计稿，更炸裂的是回程成代码，你看这还原度，我直接惊了，而且我还拿它直接读需求出交互稿， 连主健库都能一键帮我搞定。这几天扣的跟科森轮番兼青，我研究了好几天，这三招特别好用，一定要试试。先说好，这期没有恰饭分，个人经验，我自己玩了好几天，该踩的坑基本踩了一遍，操作步骤和提示词我都给你整理好了，求个小关小注，我直接发给你。 废话不多说，直接开始。先说 figma 和代码之间的双向同步，我专门挑了一个复杂一点的 app 页面来演示。其实设计搞转代码这类的功能， 之前有类似的插件，但说实话用过的朋友都知道，基本没法用，布局错乱，元素乱飘，跟原稿根本对不上。但是磕碜昨天更新了一个逆天功能， 直接可以读取这个码里面的设计稿生成代码。把同样的车库页面丢进去试了一下，你看这页面效果，布局颜色全都对的上，基本都能对的上，这还原九十高的我当时直接惊了，你有病！但是当我扒开这个代码页面一看，这底下居然全是图片截图！ 所以实际的情况是，它确实会比以前那些插件好那么的一丢丢，但不多。 虽然 figma 转代码这个确实是有一点取巧，但反过来也就是 code 转回 figma 这个方向导入的效果倒是相当的不错，直接说一声，界面就直接可以推送到 figma 的 画布上，变成可编辑的设计稿，图层全是可编辑自动布局，也有，连命名也挺规范的。单向的还原度确实是非常能打的， nice！ 虽然所谓的双向互动目前确实还是有点水分，但是这套代码一键生成设计稿的单项功能就已经足够我们搞很多事情了。比起以前我们纯属说设计稿，有了这些功能，你完全可以换一个较为打击的工作流程。 但这还没完，还有两招，压箱底的技能，你有没有接触过这种需求？文档看一眼头都大，还要去啃业务，拆页面化交互，累死累活搞个两三天，结果产品来一句再改改，我直接原地爆炸啊！ 现在呢？别管这个文档有多糙，直接丢给他，他会先理解你的需求，把功能和页面自己拆好，你看就几分钟， 全部页面一键给你生成出来。我们来检查一下需求，问页面能不能对得上。注意看这登录页，校车信息、排班、 五 g 报表，文档里的功能点全部都能跟你对得上，逻辑也没有跑偏哦，拉回这个码直接就能编辑的，你自己爱怎么改就怎么改。重点来了，同样的文档，换一个指令，直接能出一个可以交互的原型，甚至他也给你加了点小逗笑， 厉害，没灵感或者感兴趣的时候，先让他出个出版，真的是能救我狗命啊！还有，千万不要让产品知道这个套路， 哈哈哈，压轴这一招呢，是懒人必备的，之前从零搭建一套主件裤，少说也得死磕个两三天吧。颜色规范、字体层级、交互状态，一个个手调，眼睛都快废掉了。现在把这一张设计稿丢给他，告诉他我要哪些主件就行了。你看字体、颜色、 图标、按钮，不到五分钟全部给你做出来了，连交互状态的样子都给你做好。这圆角配色阴影跟圆稿的风格完全对得上，有些地方不满意也没有关系，还是一样直接让 ai 改就行了。 搞定之后我发回这个码，你也搞进去一整套出来，我就问你好不好用？我的天呐，这三招配合体验下来，我自己的感受是，以前那些手搓主键，一点点还原设计稿的体力活真的是可以省掉了， 咱们只负责想脏活累活就交给 ai 来，视频里面用到的所有提示词、操作文档，连怎么安装我都给你们写好了，相信我，真的很好用！觉得有用的话记得点个赞，我是专注 ai 体校的木马，下次再带你们体验实用又好玩的 ai 工具。

这是设计稿，这是我们刚刚用 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。 呃，在这个设置里面啊？我们登录好了之后在设置里面，设置里面呢？有一个。

大家好，我是杰杰。 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 它可以来帮我们去轻松地来做到这一点。

欢迎收看九零后 ui 设计师早九晚六御妞航票工作 plus 之前三月初出了个 ai 撮组件库视频，大家很喜欢，但是 figma、 mcp 和 skill 更新啦，所以新的工作流来啦！今天用两种方式带大家从零到一， 在 figma 中生成设计规范组件库加变量库工具，我们还是用 codex 安装教程可以看这个视， 如果出现不能写入 figma 的 问题，可以根据这几项进行排查，一般都是第四个问题导致的，这时候我们打开 code 写息，现场使用我提供的句式进行输入即可。解决方法一， md 一 次生成我们先用 ai 输入需求，让它给你生成 md 文档，把 md 文档发给 codex 复制，想要它生成到对应文件的 link， 输入需求句式一定要参考我的来，这样基本不会出问题。这个句式优点就是不用自己使用 skill， codex 会帮你使用，然后你就可以看到 ai 在 你定的 file 文件中生成设计规范， 中间有 a lot， 直接选就好。它先是把分页放进去，然后放入了变量库，版本样式、效果样式等内容，按顺序对设计规范进行补充。 整个过程只用点 alo 就 好了。它生成的每个组建都给你做了变体，属性也写的清清楚楚，方便直接用，发现没有生成图标相关内容，检查了下是 md， 没有细节描述，于是直接通过对话让 codex 生成。建议大家先检查下 md 文档，再生成 这套流程优点就在于零到一搭建很快，而且过程中不用做什么，只要 md 文档写清楚，就可以跑出一个还不错的设计规范组建库方法二，结构化生成组建库用 ai 把我们的 md 文档拆成结构化的方式，直接放在本地，然后让 ai 给你每一步骤的提示词，在 codex 中选 add， 再选中对应文件夹，然后按步骤输入提示词即可。可以看到 ai 提示词，就让 codex 帮我们在 figma 中建立了一个文件，我们用提示词就可以看到 codex 正在工作的文件，继续输入提示词， 达到 ai 提示的效果，就说明成功啦。我们后续如果想要往里面补充内容，其实可以参考 ai 书的这种形式来进行局部更新，这种方式适合长期维护。老规矩，今天的视频也总结成文档啦，需要的粉丝宝字自取。近期我的教程大部分是可以跑通零到一的入门工作流， 只是提供一个思路，大家可以跟着走一遍后，再多往前走几步，加上自己的思考，结合到工作中。并不是说我视频中做到什么程度 代表这个工作流只能做到这个程度，相当于这个工作流是搭建了个一，具体后面是一百还是一千，就要看大家自己啦。今天呢，你也辛苦啦，我们下期视频再见，拜拜！关注我，解锁更多 ai 加 u i 技巧，主页还有更多 u i 提效教程！

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

下班了吧，该学 ai 啦，各位观众老爷们下午好啊！今天我们来讲讲 codex 到底该怎么上手。 codex 支持 gpt 五点一到五点四的所有模型，并且允许各位观众老爷自定义推理强度，对于不同难度的任务可以随意调节推理强度，这样就不会浪费 token 啦。 codex 也可以更改权限，可以让 codex 完全接管电脑，但是各位观众老爷还是要慎重选择，注意信息安全保护哦！ codex 内置了很多应用和技能，可以在应用页面直接添加，比如这个网页 app 的 应用，我们直接点击加号进行授权就可以直接使用了，非常方便。 除此以外， codex 也内置了像 kanva、 figa 这些设计应用，对于需要进行 ui 设计的观众老爷来讲也是较为便利。 skills 方面， codex 也有像 play ray 这类的内置 skills， 可以 自行配置，也支持通过第三方方式添加自定义 skills。 同时 codex 也支持自动化定时任务，比如这里小卡想让他每天审查我的代码有没有问题并给我汇报，就可以自定义一个任务让他来完成哦。 设置方面，值得一提的是， codex 允许用户修改模型运行速度这个地方，如果我们调成 fast 模式，模型就会以一点五倍速工作，但是同时要注意 token 的 消耗也是翻倍的哦。 实操方面，对于小白来讲，和小卡之前讲过的其他软件区别不大。我们打开计划模式，输入我们的想法，就可以让 codex 开始工作啦。依旧是会根据我们的需求提出几个问题，确定好执行计划，然后开始写代码就好了。 值得一提的是， codex 允许将所有代码在 cursor vs code 等软件中打开，打开后各位观众老爷想用其他的模型来继续工作也是完全没问题的。 那 cursor 和 codex 以及 cloud code 到底有什么区别呢？嘿嘿，我们下次再说。

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

以前 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 进度表。

上下滑动呢，顶部这个导航栏的部分有状态的反馈，那接下来呢是垂直方向啊，就是内容划上去呢？导航栏的部分隐藏 figma 的 原型，它没有提供像 prince super 这种软件当中的联动的功能，所以这个效果呢，我们要用两个界面来实现， 先给这个勾选上啊， 然后来调整一下图层的结构，这些部分我是要让它们能够滑动的，所以我给它们套一个容器， 然后调整一下顺序，覆盖在导航栏的上面， ctrl d 复制一个界面，这个命名我简单改一下吧啊，让大家有一个区分就可以了，那这个界面我们要做什么呢？它的作用呢？就是模拟我们划上去之后这个界面的状态， 这个部分划上去，它是隐藏的，所以不透明度呢，调为零。然后底下的这一个部分 划上去，那触发的方式呢？ 就是拖动，这一部分上去的时候会进入到这样的一个状态，那吹格触发条件就是 on drag 拖拽，然后动效这里呢选择 smart animates 智能动画。 同样啊，那在这个状态呢，拖拽回来，它也可以回到这个界面， 我们看一下效果 没什么问题，对吧？因为我们这个首页的内容有限啊，他不是特别的长，如果特别的长的话呢，可以做一个什么效果？就是我们这一个部分 在移上去之后，整个的这一块可以让他吸顶，然后下面这一个部分呢，可以往上继续的滚动。那我们现在这个界面，因为其实就两个大模块啊，所以他没必要做那样的效果，这样就够了。 那不知道大家有没有看懂这个过程啊？嗯，我做一个更简单的演示吧， 可能用更简单的元素更容易看懂这个原理啊。因为上面的这个界面它还是图层有点多，所以这个担心大家看不懂。 那我这个部分呢，就是模拟这个导航栏，然后下面的这一块呢，就是我们界面当中滑动的那一部分内容， 那目标的状态就是这个界面，然后同样，哎在这它的不透明度呢调为零，然后这一个部分划上去，回到原形 触发条件拖动 smartenames。 啊，没有问题，它拖一个回来， 然后来看一下这个啊，其实跟我们那个上面的界面是一样的，一样的原理， 这个应该更好懂一点，对吧？

今天又靠 dyx 做了一个捉虫双击它，它可以切换动画，单击一下它在旁边的这边标签上也可以进行对它的动作的切换， 然后还可以对他进行拖动，拖动到你任何本来说你觉得影响到你的工作了，你就把他拖动到这个地方，或者拖动到其他的地方，只要不不挡到你视线的地方，你都可以进行，你都可以把他进行进行拖动， 但我喜欢他拖在放在这个角落，我把十一个的这个动画都分享给了他，让他改到这个里面去。单机这个动画是可以跟他闲聊的，你看是可以跟他聊天的，现在他的动画正在钓鱼， 对，回复的是非常快的， 它可以进行移动，都可以移动工作，上面的话其实是直接可以让它调用 codex 直接来工作的。对，来来个跑步的，跑步要拖动一下啊， 我每个都展示一下吧， 满地滚。 好，今天分享到这里，我是老黄，关注我，让你的 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 的 这个部署的这个啊方式去帮助你把这东西呢给它推到线上去，而且是一种非常好的形式，大家可以去尝试一下。好吧，那本期视频全部内容呢？我是小刘，我们下期再见。

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

好，那今天我们来聊一下我们的 codex 和 cloud 的 交叉验证。首先先看一下我们现在 cloud 做出来的产品，右边呢是 cloud 做出来的一个本地的效果，左边是我们 figma 获得的效果， 那可以看到基本上已经一样了，但是呢还是有一些地方没有做到位的，比如说我们 figma 生成的这个页面，如果我把它左右滑的话，你可以看到这个画面是自适应的， 但是右边就不会动，右边的图并不会因为你的屏幕变宽或者变窄而自己去做一个自适应，我需要左滑或者右滑才能看到这个全貌，所以这是需要修复的地方。那么往下滑呢，我们看到整个排版 基本上是一样的，画面，效果呢也基本上是一样的。这个时候我们点击这个登录页面可以尝试一下 啊，我们会发现这里会让我们输入一个正确的手机号码，说明这个东西其实呢已经被连了后端，并且做了一些 os 的 校验， 这个时候因为我没有注册过呢，他就其实把我打出来了，那我们可以让 codex 去做一个完整的检测，看这个东西是不是对的。当然过几天我也会把这个网站直接部署到云端上，大家也可以尝试去点击一下。那现在我们就来看一下 codex 和 cloud 是 如何进行相互交互的。 首先呢，可能有人会问，为什么在 cloud 中我们已经做了自测，我们还需要引入 codex 来做一个额外的这个测试。 这里的原因是因为 cloud 做自测的时候，它很有可能会出现很多的幻觉，比方说当后端工程师或者前端工程师提到了，说某一个页面已经完成之后， 这个信息也有可能被同步到我们 q a agent 的 上下文中。那么这个时候 q a agent 可能在没有测试之前，就会错误地认为这个界面已经做完了，从而导致他认为测试通过了，但实际上页面本身还是有问题。其次呢， model 本身是有局限性的， 有可能他真的去测试了，但是因为 model 的 局限性，他认为这个测试应该过，其实这个测测试不应该过，呃，等等的问题呢，都有可能发生。所以最好的方式就是在 cloud 实现并自测之后，我们再引入一个新的 model， 让这两个互不相干的 model 互相去检测。在我们的这个流程中呢，我们引入的就是 codex， 那 么 codex 的 入口文件就是这个 agent 点 md。 有 人问过 agent md 和 cloud 点 md 的 区别，其实就是 cloud 的 model 会去读取 cloud 点 md， 而别的大部分的 model 都会去读这个 agents 点 md。 所以在这个地方我们明确的说了，如果你是 codex， 你 只负责 qa 和 gatekeeper， 不 负责产品的设计或者实现。我们也明确的定义了，你不可以去更改任何的 source 文件，因为你只能去进行一些测试。 然后在 codex 点 m d 中呢，我们定义了一些读文件的顺序，让它去有整个 contacts， 我 们这个项目的 prd 是 什么等等之类的信息， 然后回到这个 skills 啊， codex 的 skills 呢，是放在这个点 codex 底下，其实和 cloud 也是非常类似的，会有一个 skills 的 folder 里面呢，会定义这个 skill， 然后在 skill 点 m d 中呢，我们会进行一些补充啊， 首先必要的一些呃信息就是他的名字是什么，然后他的描述是什么，底下呢就和 cloud 点 m d 是 一样的。在我们的工作流中呢， codex 会去做一个完整的检测，当他遇遇到问题时呢，他会写一个 guitar issues， 这个 guitar issues 呢，上面会标明 当前的任务应该是 frontend 的 工程师去负责，还是后端工程师去负责，还是 qa 去负责。然后呢，他会把状态改成 qa field。 当他检测完之后呢，我们的 cloud 就 会去跑一个 fix issues 的 这么一个技能， 这个技能做的事情呢，就是去 git bashos 上看当前有哪些代办的事项，每一个事项里面呢，都会写清楚它的 context， 它的附线步骤和一些证据，包括包括说截图。 然后这个 cloud 就 会根据这里面的状态呢去尝试修复这个问题。当它修复完问题之后，它并不会直接把这个 esho 关掉，它会把这个 esho 的 状态改为 pending for qa。 那 这个时候呢，我们的 cloud， 我 们的 codex 就 会知道 cloud 已经进行了一些处理，它就会进行一些二次的检测，看是否这个问题已经被修复，如果修复了的话，这个 issue 就 会被 close 的， 如果没有修复的话，那这个 issues 的 状态又会被反复的拉回去，然后我们的 cloud 就 会接着去修。 这里呢，我们会跑一个 loop 的 command， 让 cloud 每隔五分钟或者十分钟去检测一次 github issues 上的状态 啊，这样就可以完成一个循环的检测和修复。之后呢，我们会把这个 loop 的 方式改成用 hook 的 方式去更加直接地 trigger 整一个工作流。

好，大家好，我是小刘。呃，今天我们一起来快速学一下这个 codex， 最近两个月我一直在使用这个 i 编工具，然后用 codex 的 话用的是最多的，然后我心想为什么要用它啊？因为它用起来非常的顺手，冰非常的爽啊。比如说我们看今天我想要打开任何的 i 工具都可以无缝的去集成，那我用的最多的是这个 iq 啊，打开速度非常快。然后呢，我们在这边开发完之后，想看效果，直接打开任何的地方全部集成过来了 啊，比如说像我们要开发一个东西，对吧？那你要开发两倍速率，你可以看到这个地方有一个 fast， 你 点一下就代表当前的速度是两倍，那很很很有一个细节的点是什么呢？就是你看这是空心的，空心代表什么？标准的你点开来之后呢， 它就变成实心的，代表当前速度是两倍，你也可以选择关掉它。然后呢每一个模型都分为推你的低中高、超高，对吧？然后比如说像我现在开发一个简单功能，对吧？一个学生管理系统给大家演示一下，对吧？那这个时候效果是把它长这样子，这个样子像它的这个啊本地的工作数， 那这时候你可以点这个地方，可以给他派生出去一个新工作数，你可以点这个斜杠，点这个派生，相当于他会把当前的这个节点呢给他来复制一份，在那个复制这个节点上进行开发， 就会有一个数的图标运行在工作树当中，如果你输入 pwd 呢，这时候你会发现它创建一个 walking trees 的 这么一个啊分支，然后呢？相当于在这里开发，你开发觉得 ok 了，然后这时候你点击 提交到本地，它会，哎，相当于给你干嘛给你提交到本地，为什么这里没有提交？是说你本地有一个修改，对吧？你没提交它不允许你你你提交，所以它其实很多地方它整的挺规范的，对吧？你看我现在随便提交一下，你看这时候我要提交本地，你看就可以了嘛，是吧？提交本地， 然后呢？你所有的变更可以在这个地方看，然后你所有的终端，比如说我想从这个地方打开终端，点这个，你看它就就开启这个地方当前的终端， 它就有一个区别嘛。还有就是为什么我很喜欢用 q 代词，我一定要讲一下，就是安装 skill 特别方便，我给大家举个例子啊，比如说我现在安装 skill 这个 skill 呢？我安装下来我可能用了呃几，就是呃三十四秒，我给大家举个例子，就是它这个 skill 呢， 是我目前见过安装最方便的一个工具，没有之一。真的特别方便啊，比如说我现在安装十个 skills， 那 非常简单，我就只需要把这一堆 skills， 哎，我这我这么，我这么跟他说啊，就是你看啊，我安装这个，对不对？按这个我我直接，我直接这样子，哎， 我就这样子，截个图，对吧？截个图好，对吧？帮我安装 skills， 你 就跟他说，然后那帮我安装 skills 回收，然后他会干嘛呢？他就真的吭哧吭哧的全部给你安装，对吧？全部安装 你不用管，就这么简单，你看他会全部的给你一个一个的安装，就是很神奇，你看他就已经开始在读了，你你，你懂吗？他就已经在安装了，就就你看这是我就全部安装好了，你看这这都是我刚刚的那些 skills， 像这些什么 u i pro max， 你 看他会自动的去，哎，去查，然后去给你安装，我就不跳过了，就是就是， 不讲这个了。然后呢，就是第一个 skill 是 安装方便，第二个自动化也方便，比如说我想要定时定点的是创建一个什么样的任务，对不对？你创一个新任务你可以去，比如说帮我总结项目，总结项目 那这个时候它会告诉你，哎，每天你选择某一个文件夹，然后呢？哪一个工作树下面，哎，就几点执行，它自动去帮你执行这个任务，真的用起来特别舒服。还有一个点什么，就是它这个额度你很难用得完， 你即使在那个你你你用起来的时候真的怎么都用不完，然后就这个地方是它的指定，就类似于 curses 的 rose 嘛，对吧？就我一般喜欢用 andy 站六去开发，我觉得这个效果还挺不错的。 还有就是 m c p 服务器也是特别方便，你这边你可以选择添加自己的 m c p 服务器。还有这个环境，你看规章就是当前你它的规章不是给你删除，就类似于回收站那个地方放十五天，然后给你消消失，它是这样子给你删除的，然后呢？包括它的整个风格我都特别喜欢，真的，我是特别的爱这个靠 text 真的 越用越好用， 就是它的功能，你会发现啊，更像是一个聚合体，就是把那些好的特性全部给你进行过来，点这个状态，你看就当前，对吧？就跟是 play 模式对吧？ play 模式 i shift 加 table 一 样的，对吧？你看你开发什么东西？开发学生， 呃，管理系统，这时候他会问你问题，就相当于问你你要开发什么样的管理系统，就是相当于，哎，作为一个问群， 嗯，问题，然后还有这个权限啊，就你一般来说不要开这个，除非你对自己的这个，呃，电脑上的文件没有任何的这种，嗯，很很高贵的东西，你就可以开， 对吧？然后你看他，他就会问你一些，弹出一个 question 就 让你去选，做选项，选项题，选择题一样的，噔噔噔噔，你选完，你选完之后，哎，就就就结束了，还有就是这个可以关联云端， 然后呢，你这边有一个剩余额度，你可以从这里看嘛，就是他这个额度，我简单说一下吧，就是五小时，啥意思？就是说你这五个小时里面你能用的数量，你这还有还剩多少？归零之后你就不能用了，但是你过完五小时他会给你刷新，就是给你刷到这个全新的这么一个情况。 嗯，当然了，如果一周的额度清零了，代表你所有的这个额度都清零了，你看啊，现在这个 question 就 出来了，你看它有三个 question， 你 可以选择一次性给他回答了，对吧？你点一下，比如说我要开发一个啊，学习管理，你要开发一个什么风格呢？ rockaway 加 and 赞，对吧？啊？他就会去思考，根据你这个，根据你的模式去这个文，这个 贴图也特别有意思，你看我随便截个图，你看贴个图，哎，我回车你看放大是吧，就很用的，很很丝滑。我我觉得我真的是特别的喜欢这个 codex 啊。就是用过我现在用过的好多工具啊。我先先用过了，我用过 cursor。 我 用过这个 kylou 的， 还用过 codex 的 之前的终端版嘛，对吧？我用过的特别特别多，我自己都数不出来了，对吧？ 还有真的还有很多很多这种主流我就不会一个一个列了啊，我主要列是常用的。那就那你发现没有，我还是觉得扣袋子是最好用的。扣袋子 app 就是 尤其它这个技能这一块，真的，你比如说我想要部署 cloud flair， 对 吧？你安装这个部署哎步就可以部署了。我想要去跟 gitlab 进行关联，对吧？我想要去和这个 losen 进行关联。点一下又可以玩了，是吧？ 非常的 nice， 真的 用的很丝滑，当然它有一些不好的点。那不好的点我，我其实也能够列出很多条条框啊。第一个对吧？它没有自己的这个 id， 呃，第二个就是整个这边居然没有个搜索，真的你要搜索某一个记名称搜不出来，这就很很很蠢的一个设置啊。我觉得真的最好就是有一个搜索， 嗯，我觉得会好很多，然后，呃，就大概这些核心功能吧，简单说了一下，我觉得就已经包含了所有核心功能了。那分支也是一样，你就可以切换你自己合适的分支，和之前一样吗？艾特斜杠，然后你可以去看你当前的这个，当前的这个状态，嗯，当前这个额度， 还有就是当前的这个，你回答的一个个性，嗯，就是学你自己嘛，对吧？好，我觉得现在没有什么核心功能，一般看的懂中文的都都都能学的会吧？这个这个工具没有没有啥好讲的，但是我还是想跟大家分享一下。这个工具真的很好用，很好用，我强烈推荐大家试试。

hello， 大家好，我是 d p， 欢迎来到我们的 codex 系列视频，这期是这个视频的第一期，主要讲的是新手入门相关的内容，主要包括 codex 的 安装，一些基础的配置和一些基础的使用指南。好的，我们来进入 准备环节。首先你需要做的第一件事是打开 d p r t 点 lab 零零点 com， 在 这里搜索 codex， 然后找到这篇文章。打开到这里，你需要知道的是， codex 这期视频相关的所有内容你在这个文章里都可以找到。现在我们把这个文章放在一边，下面我们需要新建一个文件夹， 我用的是 d p 下划线， codex 下划线一零一主要是，呃为这期视频做演示做准备的，你可以使用任意的名称以及任意的位置推荐放在你的那个项目文件夹目录里面去。 好的，这两样都准备完了以后，我们下面进入安装环节。好的，我们首先回到刚刚的这个文章，然后第一部分就是安装指南。我们先大概的来看一下目录架构，分别是四种安装模式，其中两种是命令行，第一种是 npm 安装，第二种是 codex app 安装，第四种是 codex vs code 的 插件安装。我们将逐一来看这些安装方式。 首先是两组命令行的安装方式。呃，先介绍一下命令，第一个命令一点一是检查你的 npm 环境里有没有安装。呃， codex 用这行命令 list 就 可以看到下面这样的输出结果， 像我这里就有一个 codex 零点一一二点零这个版本，这就代表安装了，如果你没有的话，你就可以继续。 第二步，一点二就是用这条命令安装，然后第三步是检查 codex 版本，就是你安装以后用这个命令就可以看到这边的这个输出，就是 codex 的 版本，就代表安装成功了。 然后如果在你使用的过程中需要升级，就用一点四用这个命令来升级，然后 homebuil 是 一样的，首先是查看它的列表， 可以使用这行命令来查看，那么查看的结果就会输出一个 codex， 如果你不用后面的这个过滤条件，它就会把你本地的所有的呃 homebrew 安装的内容都列出来，然后在这边就可以看到有一个 codex， 然后 如果上面的检查就是二点一这个部分，你的机器里没有任何的安装，那么你就可以在这边使用二点二的命令来安装， 然后安装以后相同的版本检查，然后相同的升级。我这边在 mac os 上用那个命令行安装了一个 homebrew 版本的 codex， 给大家看一下过程。首先我打开我的命令行，然后我用这个 codex 杠杯来查看，它告诉我这个机器上没有 codex。 然后我尝试做了一个 list， list 的 操作，这边也没有后 codex， 然后我尝试用了那个就查找关键词的 list， 没有任何输出。然后我做了一个额外的测试，我用 sqlite 做测试，因为这里显示了 sqlite， 所以 它这个能有输出就代表一切都没有问题。 然后我这边用了就是二点二这个命令来做安装，然后它从这里开始跑，一直跑跑，反正跑的挺多的， 然后到下面他就给我一个反馈，就是 codex 零点一一七点零这个版本他就开始安装，一直到安装完成， 呃，然后到这里就是安装结束，然后接下来我用了查看的命令做了一次确认他有 codex， 然后我又做了一个全局的查看，就没有过滤的查看有，然后我用了 codex v 这个命令查看的版本。零点一，一七点零是我当时录视频时的最新版， 这就是命令行的一个安装方式。下面我们来看三那个 codex app 安装，这个就是打开官网下载一个 app 就 好，我在 macos 上我下载的就是这个 codex， 点 dmg 打开以后就有这么一个文件，这个文件是这样 四百七十三兆，然后我如果安装把它拖过来就行，我这边已经安装过了，因为所以就演示一下这么一个过程。然后我们来看一下 codex vs 插件的安装，我这边整整理了一下，你需要做的是第一步打开 vs code， 第二步在插件市场搜索 codex， 然后找到这个插件进行安装。好的我们去那个 vs code 里面看一下，首先插件市场在这儿，然后你在这边搜索 codex， 我这个已经安装了，但是我给大家演示一遍流程，然后这个时候就会找到这个是 open a r 官方的这么一个插件，然后打开以后它的名字就是 codex 杠 open a r 的 code engine agent 在 这儿和这个名字啊，这样看这两个名字是一样的，然后这边会有一个安装，你点安装就行，安装完了以后，那个你在这儿就能看到一个 codex 的 标志，然后我一般是在这儿去使用的，它其实没有太大的一个差别， 就是在侧边栏上这个是 copilot， 这个是 codex， 放在这边有可能要拖动一下，但我不记得不太清了，反正是有相关位置的。好的，作为最后的建议，一共有四种安装方式，我建议大家把三和四都安装上，一会我们在演示的过程再解释为什么。 好的，这就是安装相关的所有内容。 ok， 接下来我以 codex app 做一个演示。首先我打开了 codex 这个 app， 它会要求你登录，这个时候你只需要点击这个按钮，然后它就会跳转到一个登录的页面，这个就是 open i r 的 页面， 你在这个页面里完成你的账号的登录，然后它就会跳转回来，然后这边就会有相关登录完成的一个状态。 ok， 花了点时间完成了网页上的授权，然后这个 app 就 会自己自动跳转到类似这样一个页面，这就是 codex app 的 主操作页面。 其他三种登录方式都是相同的流程，这边我们就不额外的演示了。登录完了以后，按道理说我们可以直接呃输入一些命令来完成相关的任务，但是我们先不着急，我们先进入一些重要文件和配置的讲解。 首先你需要知道的第一个概念是 codex， 它在你的本地是有一个配置文件夹的，在你的用户根目录下有一个点 codex 这个文件夹，里面就是配置的所有的内容。然后我这边用编辑器已经打开了， 这里面一共有好多个重要的文件，我们一个一个来讲，首先讲第一个就是 author 点接收，这个就是你的所有的 talkin 都在这边。我这边跟大家演示的是我进行了脱敏的一些数据，你实际跟我看起来应该是差不多，但是我这些呃 d p i t 这些你肯定是没有的， 分别有获取信息的 talkin 和用户 id， 然后 talkin 的 id， 然后什么 refresh， 就是 刷新 talkin， 然后时间，这就是 open a r 给你的一个 key， 然后这个 config 点 t o m l 是 什么呢？就是一些你使用过程中的一些记录，比如说我用的模型是 g p t 五点四，然后思考强度是 x high， 然后一些信任的目录像这个这边就是五点四，和 x high 和这边是对应的，这就两个配置文件。 为什么要讲这两个文件呢？这两个文件在稍后我们讲账号切换的时候是非常重要的两个文件，如果大家对账号切换有兴趣，可以点个关注，我们后面的视频里会讲 好的。然后我们下面进入一个呃全局配置的一个环节， 首先就是全区的配置，就是你这个本地的所有的 codex 相关的项目，你想让它遵守的一些规则是什么呢？我这边给出了一个 demo， 首先文件是在点 codex 文件夹下有一个 agents， 点 md， 这里我写了一些规则，就什么遵守用户的需求啊，中文呀，回答呃 case 原则啊这些，这个写的比较长，这个东西在哪呢？在配置指南就第二部分的第一点里面 就是目录是用户目，文件夹下点 codex index， 然后你把这个粘进去，就可以作为你的一个项目的开始。 然后还有一个目录，就是说如果你不做全局级的，你这个项目想设置的话，那么你就需要做一个项目级的目录，那么它就是说在 d p 下划线 codex 一 零一这个项目文件夹下新建一个这么一个文件就行。那么我们现在来新建一个右击 新建，这，哎，他为什么没有给我新建？好奇怪哦， 这样，是这样，这样新建的好，这样就新建进来，然后这边你就是比如写全程使用中文和我交互 类似这样，然后这条文件它的那个规则就可以写入进来，你也可以简单的把这个东西给它复制过来，也就是说你这里给它的这个规则是这个 codex 零零一这个项目级的，而不是说这个放在全局级的，你把全局级这里给它删除掉就可以了。 好，这就是两种配置方式，如果你是想让所有的 codex 都能遵守，那我建议你就像我这样配置一个全局级的一个规则，让他们遵守一个默认规则。然后如果你想让某一个项目，比如说这个项目去遵守，我们就可以在这里面写一二三， 告诉他这个项目单独的遵守规则，首先他会遵守这个，然后把这个再附加上就是这么一个配置关系， 像稍后会有像 scales 呀、 workflow 呀这些，我们会单独用视频来讲解，这个也不算基础的内容，如果有兴趣就 稍微等一等，再讲一下。 c 部分相关资源，这边我把常用的一些链接放在了这里，如果有兴趣的话可以来用。这边是 openair 的 官网，这是 codex 的 官网，这是 codex 的 开发者文档，这是 codex 的 github， 以后有相关的链接我会继续往后面去加。 ok， 我 们现在进入 实际操作环节，我这一期的实际操作先用 codex app 来做演示，首先它这个给我们默认打开的只有一个 playground， 就是 一个测试环境。然后我们刚刚新建了一个目录，还记得吗？我们需要把它加载下来，点这边这个加号，然后找到你的这个目录， 把它加载进来就可以了，这样你就有了这个目录，然后在这边选择这个目录，开始一个新对话，这里就可以开始一个新对话，然后你可以选择模型，比如说我们选呃 codex 五点三，然后呃思考强度，我们就选 high 就 好。 然后我们给他一个简单的对话内容，然后这时候你会看到他在这边会新建一个对话，然后这边是我们说的，然后这是他思考，然后稍后给我们回复的内容。 这边你可以把把它变成任意一个内容，比如说你给我写一个贪吃蛇的游戏存放在什么位置，什么，就这么一个流程。 当然我们这边只有一个简单的演示，然后这时候我们接着来演示斜杠命令，它和我们常用的命令好像一样，你只要出入斜杠，它会有很多的命令。最重要的我想给大家讲几个命令，首先是 status， 你可以看到你的，如果你是那个付费套餐的话，你可以看到五小时限额和七天限额，还有一些呃，上下文长度啊这些信息，然后相同的内容在这边也可以看到，也是配额的一个信息。 然后斜杠命令里面还有一些命令，我们来看一下，比如说这边有一个 fast 的 模式， 呃，当然五点三开不了 fast， 你 只有五点四来行，然后到五点四以后你可以开那个 fast， 看到吗？现在 fast 的 模式就被关闭掉了，然后 这边你在敲就可以把 fast 的 模式开启。提醒一下， fast 模式只有五点四可以用，只有这个小闪电开启的时候才是。然后 fast 的 模式大概是消费两倍的 talk， 得到一点五倍的速度， 然后智力不会有所下降，只是优先给你处理任务，就是说类似于 vip 通道的那种感觉。好的，这就是 codex app 里的一些功能，至于其他的一些命令，那么稍后大家自己再来看就好。 ok， 接下来我们回到那个 codex vscode 的 插件，这边我想给大家演示我最近做的一次 html 任务。首先我们先来看呃，两个 html 页面， 我首先用那个 ar 设计了下面这个 index 派去的 html， 然后我让他用 bootstrap 进行一个改写。 首先我们来看第一个，第一个是就是一个 ar 点 lab 零零点 com 这个页面，我想做一个新手页面，然后我用 ar 做了一些设计，但是它做完了以后有一些问题，像这些点击啊，这些呃 type 的 切换，这些 card 的 折叠，它都没有做，它只是做了样式，像这边这些搜索它都没有，但样式是做好了，然后是这个样子，然后我让它做的就是对这个页面百分之一百的用 bootstrap 进行了一个重写，然后把这些点击样式， 这些 card 的 呃这些 type 的 切换，然后这些 card 的 折叠都给它做出来，然后像这边搜索也都给它做出来，这边的搜索也都做出来。 是做成这么一个状态，其实改动不是很多，但是最主要的就是遵守这个设计稿的一个方式，然后给大家看一下实际的操作过程。首先我调用了一个 walker， walker 就是 定义了一个上下文，这个 walker 不是 为这个项目准备的，但是差不多能用，我就用了，就是一个 html 设计的 walker， 然后告诉他是一个特殊的任务，然后是根据这个设计稿的页面，也就是这个由 ar 生成的原始页面 来让它把一些呃功能用 butstrip 进行重写，然后让它严格遵循这个规则，然后其他我们在 word 里定义的什么 p r， d 线框图都让它忽略，然后它给了一个 反正就读一些文件，然后进行思考，然后它给了一个方案，这个是我这个项目定义的一个格式，但实际上只要看 执行方案这边就可以看到。他是对那个 css 用 bootstrap 五重写，然后调整了一些间距，用把 bootstrap 尽量应用下来，然后 抽离了一个项目级的慢点 css， 然后什么这些该不动的都不动，然后补充了一个慢点 gs， 然后他就让我确认，我说确认就可以修改，然后给他一个要求，就是我怕他把那个原始文件替换掉，我就说让他再同 就同级目录下建一个新文件，所以就有了这两个文件的差别，然后他就完成了这个文件，这个文件就是大家看到的这个页面，就是刚刚演示的这个就相关的功能，该有的都有 这么一个页面，然后他就告诉我修改已经完成了，然后这个过程还挺长的，他做了很多的事情。呃，对，然后中间还经历了一次网络异常，我记得是， 哎，没有看到，没关系，然后他给了一个总结，告诉我修改的内容，然后这时候我验证了一下，发现了一些小问题，总共就是三点， 让他再去做修改，这时候他出现了一个小小的网络波动，就我们用的是正常的，然后呃一些交互， 然后在过程中好像还有一次，啊，对，还有一次大的网络波动，原因未知，然后我就因为遇到这个网络波动，我就直接把它暂停掉了，然后我就告诉他好像有网络问题，让他重试，然后他又花了五分多钟把最后一个点 g s 写完， 到这时候我才想起来，哦， codex 有 点慢，我差点把这个事忘了，所以他前面可能不是网络波动，只是单纯的在等待，我以为他卡住了，然后他把这些东西都弄完，然后告诉我交互已经补完了， 然后就给出了一个最后的一个答复，包括修改的内容是什么。最后我就在这边测试了一下，该有的功能都有了，后期大家也会看到这个 ar 点 live 零零点 com 这个页面上线主要的功能就是 一些基础工具和命令和一些基础知识的展示，然后一些关键的视频和文章的一些链接， 然后对应热门的 github 资源的链接，还有一些热门链接就是做一个一站式的导航，这么一个页面，算是一个工具书的页面，大概就是这么一个，我希望用这个页面就是我实际操作的过程，向大家展示就是 codex 其实 在 vs code 插件里更接近我们的编程习惯，为什么呢？因为就像这边一样， 我的任它改的任何一个文件，我可以点开看，然后在这边像这个改动，这个在 codex app 里有，但是它没有这个编辑器这个功能，也没有快速导航和快速选中这个功能，甚至我可以把这边这一段话直接给它添加到 codex 这个上面， 做一个快速选择。然后在对话的过程中， vs code 这个插件会把我们打开的这些页面的名称传递给 codex， 作为上下文的一部分。所以我觉得从如果很多用户跟我一样是从那个 cloud code 过来，后来进入 anti gravity， 然后再到 codex 的 话， 我觉得这个方式是比较合适的。好，最后我跟大家说一下，为什么我建议 vs code 以外还要有 codex app 呢？因为我在使用的过程中有时候会遇到一些奇奇怪怪的问题，遇到这些问题的时候就需要用 codex app 来做一个兼容性的工作。 比如说有个项目运行的突然卡住了，你用 codex app 打开，把任务运行完，然后再回到这边，这个问题就得到了解决，而不需要去死磕 vs code 的 codex app， 当然我百分之九十的工作是在这边完成的。哦对，还有一个点，有用户说，呃， vs code 的 codex app 会比较卡顿，但是我在实际的使用过程中没有遇到这种卡顿的情况， 就是这是我的程序，然后这个 ip 呃 codex 的 应用，我装的也是最新的一个插件。好的，我们做一个比较简单的总结。首先我们介绍了四种 codex 的 安装方式以及一些基础的配置方式，特别是这边的这个全局级的配置建议大家就是照我的抄，然后在基础上去改，随便用，不用跟我客气。 然后接下来我们讲了两种应用的使用方式，分别是 codex app 和 vs codex 强，强烈建议大家这两种都尝试一下，并且尽量把你的常用工作方式固定在 vs code 的 codex 插件上。 好的，这就是这一期 codex 新手入门系列视频的全部内容，希望这期视频对大家有帮助，如果可以，请帮忙点赞和转发，如果你有相同的经验想要分享或者遇到了相关问题，欢迎留言， 稍后我们会发布更多的 codex 相关视频，有兴趣的话欢迎关注，谢谢大家！我是 d p。

ai 发展到现在啊， web coding 这个词啊，真的很火热，我之前一直没当回事，说白了反正不是程序员，折腾什么代码。但其实啊，现在只要每个人有想法，一下午就能搓几个能用的应用工具了。 今天啊，就跟大家分享一下，在 ai 工具满天飞的时代里，一个纯技术小白从零基础大白话直接手搓应用， 不知道大家是 windows 系统还是 mac 系统，如果是 mac 的 话，在应用体验上是更好的，我这里就直接用 windows 系统来试一下。这里啊，说一下为什么我们选 codex， 因为这个门槛更低，费用啊，也更实惠。很多人一定上来啊，就会用 cloud code， 但是 cloud code 对 简中地区啊，是非常不友好的，能搞定网络和账号的话，那另说，但如果没有大量开发深层需求的话，用 codex 足矣。 codex 安装好打开已经可以开始用了，整个过程啊，五分钟都不到，这东西啊，现在就是没门槛。打开以后啊，给大家看一下 codex 的 界面， 左边的按钮分别是新现成技能和应用，还有自动化。技能和应用里面有不少现成的东西，比如说 pdf 编辑啊， word 文档啊，表格分析啊，浏览器自动化啊，点开就能用 在这里自动化有一些预设好的模板，比如说自动生成周报模板，自动整理发布说明，自动做摘要，设定好之后啊，他就会定时跑任务，完全不用操心，说实话，用起来是真的很方便。 主界面下方啊，有一排这个基础设置，我们来看一下模型，我们选 gpt 五点四最新的推理能力这一块呢，有中高低，看你实际和 ai 交流有没有障碍，或者啊你买的套餐余量情况自己来决定。 工作空间我们选本地，这样他能直接读取你电脑里的文件权限。这里啊，建议保持默认，以免啊重要信息泄露。 然后我们点这里，这个加号还有更多的选项，可以上传图片和文件。当然你也可以开启计划模式。开了计划模式之后啊，他会先和你确认你的需求，确认之后再开始干活， 然后 speed 模式呢，会更快，当然啊， token 消耗也会更快。然后下面这一个啊，就是你安装过的 skills 界面啊，这里是一目了然，非常清晰。接下来就给大家看一下用大白话直接手搓两个工具 demo 给大家看一下。 做内容的朋友啊，应该都有同感，好点子啊，总是在不经意的时候冒出来，有时候想随手记录一下，或者随手拍张照，但事后啊，总是忘记记在哪里了，或者就是记完一大堆懒得整理乱七八糟的，事后回看都看不明白当时为啥要这么想， 那现在就直接跟 codex 说大白话。我有一个思路，想做一个点子收集的应用，靠模型来整理和规范，他会跟你沟通思路和想法，然后你看着 ok 的 话，就按照他的思路来干就完了。 过程中呢，也会有讨论和确认的情况，你呢，也可以跟他提要求，比如需要增加什么功能啊，需要插入图片啊，总结整理啊，一键复制到别的应用啊，或者说 ui 哪里需要调整啊，全部大白话来说就可以了。 最后我们出来简单的样式，灵感输进去，他会自动帮你做点子的灵感发散，然后啊按类别整理好，但是如果想要做的好看好用，可能还需要再花一些功夫。最起码在今天， ai 已经完全可以让你见不到代码。行了， 再来个决策小玩具，你们每天想到今天吃什么，是不是脑子特别空？或者说到一个陌生的地方，看到五花八门的选择就开始眩晕？ ok， 那 直接跟扣贷说，帮我做一个决策助手。用户啊，只要动动手指点两个选项，他就会推荐附近值得去的餐厅， 然后他开始疯狂工作，全程感觉啊，我才像是一个机器人，只需要傻瓜式对话 q 流程就可以了。我就提供了一个高德地图的 api， 他 就把整个逻辑写好了，帮我接入了高德地图的导航，加上户型西服牛出来的效果，我们看一下，自动定位当前位置， 动动你的手指，他给你推荐餐厅一键导航，就是这么轻松。 你们应该在网上看到很多人抱怨过啊， token 的 费用特别贵，每天啊都是在自费上班，那扣贷的费用怎么样呢？要花多少钱呢？ 其实啊，我用的是 gpt 五点四的最新的模型，买的呢，是两百刀一个月的套餐，和四个小伙伴一起拼车，用了一个下午，搓了两个工具，每五小时的 token 额度只花掉了百分之二十五。 但对比一下同价位的 cloud code 用量呢，可能就会相对有点持紧了。 codex 可以 说是真的量大管饱。还是之前的观点， token 就是 ai style 的 网费和电话费。说实话，一开始啊，我是真的是抱着凑热闹的心态来的， 什么有这种事，但其实有时候新产品啊，就是会有那么多喜欢热闹的人，喜欢热闹的事，去展示大家对科技的向往。简单做几个应用，相信大家能感受到的是，所谓的技术门槛确实矮了许多。不需要你会编程，也不需要你懂代码，你只要能说清楚你想要什么， codeys 就 得帮你做出来，让懂代码的人去做更专业的事。我们啊，只要享受 web coding 带来的便捷就可以了。好，本期视频就到这里，我是爱分享 ai 的 阿月，我们下期再见！

啊啊 啊啊啊。