codex制作UI步骤

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

现在飞格玛刚更新的这个 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 比较多，大家一直诟病 codex 做不出比较好看的 ui 界面，但是 openai 它出了一篇文章，专门来介绍如何用 codex 做出惊艳的用户界面。 那这篇文章有点长，我给大家总结一下，就这么几点，并且我也实际用它来优化了一个网站，我觉得效果还 ok。 第一个就是把 codex 的 推理能力一定要设置为低或者中等，为什么呢？如果你设置 高推理，那其实它更容易发散，在做 ui 这类的任务情况下，高推理其实不是太合适。第二个就是提前定义你的设计系统，那 怎么实践？我昨天有一个 design 点 m d 的 一个 markdown 文档，把设计系统先固定下来。 第三就是提供一个视觉参考，比如说你觉得哪个网站设计的比较好，截一张图给他。第四个就是用真正的内容去优化，比如说你的 landing page， 也就是你的首页，他的英雄区、 功能区、价格区，一定要基于真实内容去优化。那就这几点，我给大家看一下我优化的前后的一个对比，这是我之前的一个网站优化前的一个效果，我觉得是有点凌乱的。说实话，那这是优化之后的一个效果，我用的是 cloud 的 一个 ui 设计风格，我觉得比之前要好一些吧，这是暗色条件的一个情况，那我就是用的 中等的推理，并且给了他参考的图片以及基于真实内容让他去优化。并且在我的项目的根目录是有一个 markdown 文档，去系统化的介绍他的设计体系。 所以基于这几个，你就可以用 codex 也设计出一个 ui 界面还不错的一个效果，大家可以去尝试一下。

如果你使用过呢，用 cortex 去做设计师个人作品集的话呢？你就知道我们以前用 ps 拍板做作品集是多么的痛苦啊， 因为 ps 做的作品集的话，本质还是像素，它是一个静态的，对吧？那你用 cortex 做的话呢，它是做的是个人网站，那是它是可以交互的，那可以交互的话是什么呢？就是你是可以让你的作品集动起来，而且是有互动性的。 那在这个 ai 时代里面的话呢，我们做设计师的一个方式，做做美学方式，是不是应该也可以改变一下？对呗，那这样的话就是你的 给啊，面试官那个印象也会不一样，你还是说我还是拿一个什么发过去个 pdf， 对 吧？跟你发一个个人网站过去的话呢，这种 视觉效果展现那会差距会非常大的，而且的话他制作效率的话呢，会特别高，你看这三个的话呢？那个，呃，作品集的话呢？其实我就是一个下午的时间做出来的， 而且你还不需要什么再去一张张去排版，你可以什么？你可以同时丢非常非常多的作品丢给他，注意分组丢哈，不要一起丢，因为他他不好跟你分，就是一组一组作品丢给他，让他呢自动给你排版，然后呢再写上文案，对吧？你看这种交互性的网站 就好太多了，而且是他是可以动起来的，这样子话呢，你是可以干嘛呢？你是可以让你整个这个作品的展现方式，对吧？就更加直观一些， 而不是什么呢？而不是说我又是发一个非常大的一个作品，对吧？动不动几百兆或者一个 g， 别人下起来这么麻烦，那丢个网址过去的话呢？那这样去面试官打开来的话来看的话呢， 是会有惊喜的啊，别看现在那个那个现在什么用 gmail 啊，或用酷派克斯啊，你做这个设计师个人作品及网站的话是特别简单，但是你发现啊，但真正去做的人其实很少啊，就像现在什么就俏皮皮的 mj 二， 已经非常非常多人都知道他是很厉害，对吧？但是你问一下身边的设计师的话呢，真正有用过他的人其实少之又少啊，对吧，很多人有连那个 gdp 对 吧？都上不去， 是不是都说还是有信息差的，所以赶紧用克莱斯做更多品质啊。这个真的是效果非常快，而且很好。什么呢？很好，去去展示你自己的一个能力啊。

如何给你的 ai 装上审美外挂，瞬间秒变高级设计师？这是我用 skill 做的几个网页，比直接用 ai 生成出来的网页是更具有实际感，更重要的是你可以不断让它生成不同的风格，然后你在从中挑选出你喜欢的风格，然后进一步美化输出你的最终版。 我前两天逛 hiphop 发现了个 skill school， 因为这个 skill 本质上就是给 ai 编程装上了一个设计库 或者说审美外挂，它有一些 ui 设计大佬贡献了，让你 webcoder 设计出来的设计美感瞬间提升 n 个档次，甚至 crowd 官方也在场。简单来说就是把五十七种的主流风格，几十套的专业配色以及几十种字体全部打包成一套 ai 能读懂的技能包， 底层还依赖一个拍成去做工作流的搜索。当然 ai 本质上还是一个概率机，所以我更推荐你去多生成几套，找出一个自己比较喜欢的一个风格。一开始 skill 出的时候，我看网上很多人把它说的神乎其神， 一开始我都有时候有点懵的，但其实它本质上就是一个规范包，或者说是一个工作流包，所以我觉得有好的 skill 包才是关键，并且能符合你的使用场景。 现在也各大厂家也跟进了，像我就是用 qs 来用 skills 的， 我觉得效果也挺好的。现在 skill 的 出现确实是方便了不少。然后有之前有一些可能要流程化或者说 m 八 m 化的东西， 在 skill 的 情况下仅仅是批录的去执行，我觉得这个还是挺有意思的。最后这个 skills 当然可以自己去 give up so， 我 也会把它整理起来，有兴趣的话留个言。

哈喽朋友们，我是阿水，今天给大家介绍一下，我用 codex 微博抠定了一个可以代替我干活的小插件，从设计稿的生成再到切图交付， u i 设计师必看的这一期，如何一分钟看完别人一整天的活，那这个插件呢？纹身图和图身图 目前都是支持的，首先是在这里可以选择纹身图，那这里呢，我们输入简单的提示层描述就可以，然后要做移动端的话，直接选择九比十六，那或者需要根据自己的需求我们自定义尺寸也是 ok 的， 那图片数量呢？这个就没有啥要求了，好了之后呢，我们就直接点击生成设计稿按钮， 这个速度大概是在一分钟左右就可以完成，好了之后呢，我们就可以选择要切图的图片，点击切图按钮，然后用鼠标直接框选就可以。鼠标拖动的方法切图可以说是非常的方便，我们只需要在页面上点击鼠标 画一个句型就可以选中切图，无论是大一点的 icon 还是按钮，以及我们在底部的这种 tab， 还有页面上的这种小箭头主标题也可以用这个方法来切出来。当然如果我们想要把 icon 的 背景给它变成透明的，我们只需要点击透明的按钮 就可以了，正好的一点就是针对单个的按钮可以自己自定义设置。那切图好了之后呢，我们就可以导进 figma 里面，可以看到刚才切好的图片，它已经单独帮我们进行了图片分层，而且有一个特别好的点是 我们把单独的 icon 切出来之后，它原图的背景上面的 icon 就 会没有，就会消失，并且呢，它填充的颜色也和我们的背景特别的相似，几乎看不出来有颜色填充的痕迹。那其实到这一步呢，完全可以是一个可交付的一个状态了， 因为我们的图已经切好了，只需要交付给开发就 ok 了。那除了纹身图，其实图生图的方法也是一样的，必要是我们手动设计的环节，全程都是由 ai 去工作，而且呢，大家可以看到切完图之后，它的原始背景上面，你当前切图的这个 icon， 其实它已经从背景上面消失了，并且呢，它用了一个色块填充，而且呢，它填充的这个色块也是很好的，而且呢，对于透明的这一点，它做的也非常的好，就是呢，它把你的 icon 主体给你留下了，但是背景呢，它真的是透明了，这个真的是特别的方便。我做这个插件呢，其实 初心是因为我没有飞格玛的教育版，也没有飞格玛的会员，那所以呢，我没有办法去使用 m c p。 然后呢，这个插件就诞生了，这个也是一种 没有会员，没有教育版的一种解决方案。那如果大家对这个插件有什么要求或者建议更好的功能点，那大家可以在评论区和我讨论，而且想拥有这个插件的也可以直接在评论区找我来拿，我是阿水，大家记得点赞关注评论哟，我们下期再见，拜拜。

大模型 ui 能力大比拼，今天给大家呢分享一下，然后几大模型在构建网页整体美观这个方面的一个对比，再来看一下哪个模型能力会更优一些。 主要呢是对比四个模型，第一个呢是 glm， 也就是智普啊，第二个呢是呃， gpt， 还有一个呢是 cloud， 另外呢是 java， 所有的任务呢，都是放在了 vs code 当中来完成的，我们一起来看看效果怎么样。 先说一下背景，背景的话呢，是我准备做一个小的游戏网站啊，当然这个网站只在内部使用，在家里边使用啊，然后，所以呢，我就想设计一下，设计一下呢，嗯，但是我自己的美感比较差，所以呢，我想让大模型来帮我完成这个事情， 然后呢，我又想一个模型的能力可能有点偏薄，所以呢，我就多选了几个模型，然后呢就选了这四个，分别是 cloud， codx、 java 和 glm， 那 我们就一个一个来看看它们的表现如何吧。呃，要说明一点，它们的提示词都是完全一样的，后续的话呢，我会把提示词放在评论区，大家也可以呢自己试一试这个提示词的一个表现。 首先我们先来看 cloud 它的一个表现，然后我们打开浏览器瞅一眼，这是第一个，这是 simulation 啊，模拟器的意思，这是它的一个表现，我们可以呢再去看一看这个 codex， 它这里的 simulator 有 没有哦？好像没有哎， 他们的名字不太一样啊，我打开再看一下，是不是这个哦，好像是这个类比的，然后要不这样吧，我们就要不这样吧，我们直接一次性的把 cloud 它所有的都打开，我们先打开第一个， 这是沉浸式显像管模拟，再来看第二个经典硬件工业风，打开 这个我觉得表现还是非常非常不错的，因为所有的我都看过了，我认为这个的表现感觉是非常的不错。好，再往下看，现代极简像素风。 ok， 这个我觉得也还不错，但这是我自个的感觉啊。好，再往下看， 这个是杂志风格，颜色色彩是非常艳丽的啊。好，再来看最后一个赛博合成器，点开 啊，这个颜色有点偏重了我感觉，但是整体看的话效果也还行，这是呢 cloud 它的一个表现，下边我们来看看 codex， 也就是 gpt 模型它的一个表现。首先第一个呢是杂志风格， 他在构建首页的时候呢，我发现整体的结构比较少，他并没有做过多的一个结构。好，那么下边我们回过头来再来看，这是经典的点击， 这个表现我认为也还可以啊，但是它的结构有点太少了啊，再往下看，这个呢是沉浸式扫描线啊，其实这个风格我觉得也还行，但是看多的话可能会有点累眼睛，这个有点像什么呢？有点像我们小时候就是那个电视机 那种显像管，电视机它的一个表现会有一个闪烁的一个线条。好，我们再看下一个，这个是像素的， 你看有点点啊，这个布局我认为也是非常非常简洁的，有点像说不出来的一种感觉，有点偏苹果，但是又跟苹果不太一样啊，非常简洁。好，最后一个点开， 这个也还可以吧，但是相较于其他几个，我认为稍稍的逊色了一些啊。好，这是 codex 的 一个表现。那么接下来我们来看看 jimmy 的 一个表现。 jimmy 的 话，我在用的时候呢，并没有使用 ide gravity 啊，而使用的 jimmy c l i 的 方式在 vs code 当中完成的。我们来看看第一个它的表现。 好，这个只能说一般，我认为一般啊，不知道你们认为怎么样？好，然后再来看下一个， 这个凑合吧，再看下个零三点开，这个我觉得还不错，跟可乐那个有点像，但是他呢，更个性一些，你看，出现了一些斜边的这种顶部的， 算是一个顶部的任务栏吧。哦哦，算是一个顶部结构吧。啊，好，那这个还不错。下边零四，呦，我，我突然间点错了啊，再重新点过， 哎，大家可以看这个，这个也比较简洁啊，我觉得这个也还行。好，再来看零五，点击， 哎，这个我认为它的设计还是比较不错的啊，这个我认为比较不错，你看它这种层次感啊，然后我觉得还行。好，这是 german 的 一个表现，最后呢一个呢，是质朴 ai 的 啊。然后我们点击来测试一下它的一个表现怎么样。嗯， 一般，我认为这个一般。我们再来看下一个，点击这个我认为也差强人意啊，而且这个页面现在不能滚动啊，所以这个表现我觉得还是一般。下边这个杂志的这个， 这个还可以，我认为这个还可以啊。好，我们再来看第四个像素的这个，哎，这个还不错，我认为啊，也是比较简洁的。嗯，好，最后一个， ok， 这个呢，是赛博风格风格的啊，然后看起来也还可以啊，也还可以。这是我对这四个模型做了一下网页，就单独网页的一个生成的一个表现，大家可以呢根据自个情况呢？说出你最喜欢的一个风格是哪一个？

这是 ai 生成的，然后我的到情绪感知 app， 这是 ai 生成的，然后我的到购物 app， 这是 ai 生成的，然后我的到宠物 app， 这是 ai 生成的，然后我的到新闻阅读 app， 这是 ai 生成的，然后我的到时间感知 app， 这是 ai 生成的，然后我的到电子博物馆 app。 一个小 tips， 注视哪里，修改点哪里，这里直接输入修改意见就好了，注视的内容就自动跑来这里了。

大家好，我是彪哥，今天这期视频教大家如何通过 mcp 协议将 stitch 接入 code x 来进行 ui 开发。 好，第一步我们先打开这个 stitch， 是 吧？我们这里面已经通过这个，嗯，哎呀，就画好了我们想要的这个 ui， 然后我们点过来，然后我们点导出，然后这里面有一个这个 mcp， 我 们点 mcp， 然后点设置 mcp， 然后这里可以选择这个 id， 我 们选格式。好，然后我们把这个复制到一个地方，你就能看到它里面的这个 api 啊，还有这些配置了，然后我们打开格式， 我们点设置，然后再点设置，然后我们在 m c p 服务器打开， 我这里之前添加了一个，好吧，我们这里面再添加一个这个地方，我们要选择这个流式 h c d p， 然后这个名字我们就叫 stitch， 然后在我们刚才复制的那个里面会有那个 ul， 这个就是我们刚才复制的这个，刚才那个 stitch 复制出来的这个我们需要把这个 url 复制到这来，然后我们这个标头是这个， 然后这里会有个值，就是这个，哎，这个 api。 好， 然后这样就可以了，我们点保存， 然后我们来测试一下，我们返回，然后开一个新对话，然后我们输入 at s t r c h c h， 帮我看一看我的 m c p 有 没有成功部署号， 好，我们等一下。 好，这说明我们已经配置好了，然后就可以用 codex 来直接开发这个 switch 的， 如果配置过程中遇到什么问题，可以在视频底下留言，我看到都会回复的，拜拜。

设计师都去充，只用几句大白话就可以给 app 做一套 ip 视觉延展，还有全套的品牌设计，全程不用建模软件和 ps 做样机，跟我一起来做一遍吧！首先请出我的老朋友，他最近上新的香蕉二模型，做 ip 能更准确贴合需求了。 在这里告诉他，我做的是一个情绪陪伴，释放压力的 app， 让他为我做一个 ip 形象，等待一会就可以得到几个方案，效果还不错。选一个喜欢的，让他帮我延展出一套表情动作，用这里的视频生成器，选择对应的表情，加上描述，就可以得到一套动态表情包。 再放到我们 ui 页面中对应的位置，一套具有情绪感染力的 ui 设计就优化好了。如果还想继续做 ip 方案的落地效果图，直接输入这段提示词，十秒生成整套 ip 品牌的设计题案，你也快去试试吧！

你有没有想过自己做一款 app？ 这是我通过口袋思制作的第一款 app， 你 可以不懂代码，也可以不懂编程，你只需要通过它就可以完成这一切，那官网一般会自动识别你的设备， 那像我这个是 windows 版本的，只要相应对应的版本就可以了，那安装完之后呢，基本上就完成一大半了。 那我个人实测下来，我觉得口袋直接去对话框里的能力还是比较弱的，那我一般会搭配 gbt 去使用。那么首先呢，我们可以在 gbt 里面让他去生成一些产品页面的 ui 图，可以这么写，我是之前生成了这样一个参考图， 然后就把这个给到 gbt， 让他分析。然后这里有个非常关键的一个点啊， 因为后续我们制作的话，一个是配置对应的环境，另外一个是它，呃，运行中可能会存在一些缓存或者怎么样的，因为默认都是在 c 盘，所以我们一般会追加一个条件。那这些呢，可能是后续你需要的一个对应的小插件， 如果说不知道这东西怎么去下载的话，你可以说把它截图，然后给到，还 是一样的给到 gbt。 那 么在完成所有的环境配置和 gp 分 析的结构框架下，就可以完全丢给口袋罗斯去跑代码了。当然在这编码的过程中，如果你有新的想法，你也可以直接描述给 gdp， 让他去给你重新架构好，或者说新增某一个部分。 原本是点击之后就有一个交互的，但我觉得这个蛮无聊的，所以我增加了一个滑动的按钮去删除。 那到最后呢，你比较满意的版本就可以将文件压缩成 app 发给对方使用了。 但这里需要注意的是，一定需要填写你的签名啊，其实就是授权的意思，不然就会出现像这种未知安装不给安装的结果。那最后呢，你就可以得到你自己开发的这款小软件了。那我们下期再见。

主包之前用 codex 生成了一套电机控制界面，但是由于主包没指定生成界面的风格，导致 codex 自己生成的界面不怎么好看。在用 check gpt 制作视频封面的时候，发现生成的界面效果挺好看的， 主包就把它抽出来，想让 codex 按照这个效果进行设计。之前的界面设计效果是这样的， 为了让 codex 设计出主包想要的界面风格，主包把界面点 png 图片放在工程里，让它读取 输入提示词，内容为参考界面点 png 这个图片，把界面设计成这种效果，字体大些，然后等待 codex 编程即可。过程十八分钟，主包这里剪辑掉了 codex 思考等待的时间。 codex 第一步是查看主包提供的图片，再对照现在 qt 界面结构做样式和布局调整。这张参考图是深蓝黑底 青色描边卡片、大标题仪表盘速度滑杆和底部启动停止大按钮的工业控制面板风格。会把快捷液虫做成这种驾驶舱式面板。同时把全局 qs s 改成暗色霓虹风格，字体整体放大 会加一个自会的半圆转速仪表，这样快捷键能更接近参考图，而不是只靠普通标签模拟。 接下来会同步更新 pro 和 c mate， 保证 mate 仍然能找到新增原码。接着前面已经做了一半的界面改造，往下收口，把新的仪表盘控件接到实时数据上， 并检查有没有旧控件引用导致编异问题。重点看没 windows 串口技术和新增仪表控件这几处，确保视觉改造和数据刷新逻辑连起来 做几处小改动。快捷页改成可滚动，避免虚拟键盘弹出时把底部按钮挤掉，同时把电机信息补齐到位，使能并让转速仪表状态灯、电流、电压这些数据跟随应答刷新。 做静态检查和可用工具检查，看看本机能不能直接翻译，至少把会党翻译的引用问题提前扫掉。 快捷键主要改动在 main window dot c p p 和新增的 speed g o g c p p。 把快捷键改成可滚动，避免八百乘一千两百八十。竖屏下的虚拟键盘占用空间后底部按钮被遮住， 实时应达。现在会同步刷新转速仪表电流电压位置误差到位，使能和通信 tx rx 技术 redmi 也更新了快捷操作说明。本机 pad 里没有 qmake 六，所以没法在 windows 这边实际跑 make 代码和工程文件。已经把新增 speed 高级点心加进 pro 和 c michaelis t x t。 现在 codex 完成了它的编码工作，主包把代码拷贝到乌班图系统中， 主包这个系统集成了 q t 变幻环境，可以验证这份代码构建完的效果。打开代码工程， 默认使用系统自带翻译器，如果要在板子上验证，则要用交叉翻译器，使用默认翻译器进行工程翻译构建。 构建完成就可以看到界面效果是比较符合视力图片效果的，布局有限，可以通过滑块拖动页面。 现在来对比下视力界面效果 效果挺接近的，保留了之前的一些框架，现在来看一下在开发版屏幕上的效果。 效果还可以，但是数字键盘有点多余了，后续让 codex 调整键盘就有空间放控键了。大家觉得键盘应该怎么调整？今天就分享到这了，下次见。

哈喽，各位小伙伴，这里是纯 ai 挑战互联网系列第四期，现在你们正在看到的画面是我用 gpd 二点零生成的 ui 四 g 稿，是不是还挺像那么回事？ 那么接下来咱就一起看看我是如何生成的，又是怎么把它真正变成一个能用的前端页面吧。 我们本次使用的模型是 gbt 五点四，现在我们要详细的告诉 ai 需要生成什么样的 ui 设计稿， 待一段时间后，我们就可以看到 ai 不 断的产出我们需要的 ui 设计稿了。 我们开启计划模式，老二和 ai 说我们要一个 u 一 的前端， 开启计划模式后，他会主动询问我们一些细节的问题，比如我们是要完全按照设计稿来设计，还是差不多就可以了之类的。 在生成好后，我们来运行一下这个项目， 虽然没有设计稿这么精致，但是也大差不差。我们尝试注册一个账号， 里面原本应该是图片的地方先被他用占位图替代了。我们添加一个设备试一下，设备码要从联网页面获取， 这里提示设备被其他用户占用了。因为之前做过压力测试，所以我们去之前做压力测试的那个账号看一下， 果然是他。我们先断开连接， 然后再重新添加一下， 刷新一下页面， 设备就正常上线了。 这里要进入这个家庭组的话，是通过邀请码我们再注册一个账号试一下， 成功加入 也可以看到摄像头画面了。 ai 挑战全站互联网系列就先到这里结束了，感谢大家的观看，后续内容敬请期待，我们下期再见！