trae中使用pixso mcp方法
相较于像 cursor， anti gravity， 甚至 kynda 还有其他的一些 ide 编程工具的话呢， chris 国内版确实是弱了一些，但是人家不收费啊，而且这半年进化还是蛮快的，整合了像，呃， g m 四点七啊， mini max 二点一啊，甚至呢，还增加了这个 solo 的 solo 模式。 所以整体来说，翠开发一些中小型的应用是足够的。有一些朋友说，翠呢，刚开始是正常的，然后呢，越改越乱，改到最后项目都被废掉了。 呃，实际上这里边呢，其实多方面的原因啊，我总结，比如说你有没有配置智能体啊？呃，再一个，比如说，你 打假如需要云端开发环境，甚至对数据库与函数进行配置的时候，你有没有去配置这个 m c p 啊？还有就是像我们的一些个人规则和项目规则，你有没有去制定啊？ 那这些都是约束呃， ai 在 开发过程当中的一些原则性问题的，它能够有效地改善你的开发错误率，甚至呢，现在我们还可以给它创建这个 skill， 就是 能够节省你的 talk 使用量，甚至让整个开发的效率更高。 翠的国内版的这个 solo 模式其实挺好用的，比如说你已经开发完的一个项目，那么你可以给他制定若干个任务，比如说对页面的一个优化呀， 对数据结构的优化呀，甚至包括对其他的一些体验感的一个优化呀，甚至包括 api 接口的一个调试啊，通过通过它都可以完成。而且呢， solo 模式在这里是可以同时调用好多个智能体来联动的，效果非常好。 总之啊，翠目前是不收费的，相较于其他的动不动一个月二十甚至六十美金的一些 id 工具来说，我认为他满足一些中小型的应用开发已经足够了。 那像网上有一些人一个月交二十美金，甚至说是五十美金，你用完之后你会发现一个问题，就是你的使用量会超的，那超了之后怎么办呢？其实你还是要继续交费， 如果是公司付费的一些项目呢？当然没有问题啊。如果是对个人来说，在你没有接到一些收费比较高的项目，或者说没有项目的情况下，仅仅是学习阶段的时候，每个月付几十上百美金其实没什么必要。 这个界面呢，是 pixel 制作完的一个 ui 界面，我转译过来的，然后我们现在给吹一段提示词，看它 优化的结果如何。然后在这里大模型呢，我选择这个 auto， 因为这里边其实你看有 g m 四点七和 mini max 二点一，都是在全球排名比较靠前的一些大模型了， 很快它就完成了这个修复。啊，那我们现在重新点击一下这个编辑，你看 整个页面的布局和细节，他都做了一些调整，甚至包括按钮的位置都给你重新的排放了，然后这里的调用地图也也完整的解决了。所以 我不知道为什么很多人说用这个翠感觉很不爽我，反正我开发很多项目，我觉得还可以，确实是效率上要比其他的一些国外的这个 id 工具确实差了一些，但是总体上满足一些日常的小项目的需求来说是绰绰有余了。 在视频的最后呢，回答上一期视频粉丝们比较关心的一个技术问题就是如何把在 pixel 里边设计好的一个 ui 界面导入到项目里面进行开发。 首先一点呢，我是建议啊，大家在这里选择 react 模式，而不是选择 html， 因为 react 生成的这个界面的结果它是加了交互的。 生成完成之后呢，我们在预览这个界面啊，实际上还有一个代码模式啊，然后在代码模式的这个位置有一个下载按钮，我们登录， 登录完之后呢，我们要把这个下载下来的文件包解压，解压之后呢，把它导入到这个项目的根目录下， 然后呢，我们把这个文件夹直接的拖动到这个对话框当中，然后再给他写一段提示词啊，当然你后面还可以要求他的风格，比如说 td design 啊，或者说微信小程序的一些原声的一些规范要求啊等等。 这样的话呢，你再去点执行它最后生成出来的可运行的这个交互界面呢，离你设计的界面来说大概有百分之八十到九十的一个接近度。 然后你再去网上找一些 icon， 然后替换掉页面中缺失的一些图标，甚至包括一些颜色的搭配。 呃，用不了多长时间就可以把整个页面的构建工作给完成了，这是我在 pixel 设计的，然后这是在 那个 tree 里面生成的啊，其实除了我自己添加的一些修改之外，本质上没有什么太大的一个区别。好，这一期视频就是这些问题，然后有任何的建议想法需要交流的都可以在评论区留言。
粉丝7593获赞3.4万
相关视频
03:05查看AI文稿AI文稿兄弟们，作为独立开发者，我发现最大的痛点其实并不是写代码，而是意外设计，没有设计基础的话，真的很难产出专业的界面。这段时间我一直在使用 cloud code 编程，但我发现每次的前轮界面写的都特别丑， 我发现了 pixel 这款国产爱工具，所以本期视频呢，我们将使用 cloud code 加 pixel 来完成一个实战项目，先给大家看下效果吧，比如你现在看到了这个效果以及这个效果，还有这个效果， 这都是我使用 pixel 设计生成的。从设计稿到可运行的 html 界面，其实可以看到还原度都非常高，包括细节处理非常到位，无论是图标、按钮，配色间距，那这些呢，都不需要手动调整，我们生成好了就可以直接用。 再说我们使用这个 pixel 设计的这个仪表盘吧，那整个过程呢，我们只需要三步，首先是我们打开 pixel 的 这个控制台，进入控制台之后呢，我们点击这个 ai 生成设计稿，这时候我们可以看到有一个对话的界面，在这里呢我们可以输入我们的 pixel 的 需求，例如仪表盘，我们点击回车， 在右侧就可以看到详细的过程。接着就是精细化调整了，我们点击右上角的编辑模式，你可以在这里面通过对话的方式去优化细节，它呢可以手动调整设计元素，非常的灵活， 我用的最多的还是这个研发模式，我们只需要点击这个设计稿等代码，这时候我们只要选择我们输出的格式，比如说像 html， 对 吧？这时候 pixel 呢就会生成可以直接用于生产环境的代码， 我实测下来，大家可以看到代码的结构是非常清晰的，应用的响应式布局也处理的很好，基本不用大改就能直接上线。另外值得一提的是呢， pixel 还能与各类的支持 m c p 的 客户端进行联动，比如说像 cloud code cursor 进行无缝写作，下面呢，我们来演示一下。首先打开 pixel 的 客户端，客户端 这里呢，我们只需要复制 m c p 的 链接，然后在工具中复制一下，通过这条命令我们就可以完成 m c p 的 安装了。这时候呢，我们就可以直接在 cloud code 当中去操作这个 pixel 的 图层了，比如说我们现在呢， 选择这个图层就可以一键生成 html 代码，这样我们设计和代码就能完全同步了，从此告别重复劳动。再说说我为什么推荐 pico 吧，其实它支持 ai， 一 句话生成 ui 对 标 figma 不 仅更快，而且更智能。好了，已经生成完了，那我们来看一下效果吧， 我们可以看到整体的还原效果还是非常惊艳的，虽然图标没有加载出来，但整体的还原度达到了百分之九十，无论是布局和配色都一比一的还原 好视频。最后呢，我想说这款工具呢，其实适合很多人群，第一个手不仅能让设计和代码之间可以互转设计稿，还能转代码，代码也能反向转设计稿。另外设计师呢，可以用来提升自己的设计效率， 产品经营呢，也可以为了快速应对想法而实时的看到效果。那前端人员呢，可以告别 u i 还原的繁琐工作，它能让独立开发者一个人也能做出专业的产品， pixel 这个国产设计软件真的值得一试。 ok， 那 就是本期视频的全部内容了，我是小刘，我们下期再见。
1.7万程序员晓刘
24:48查看AI文稿AI文稿欢迎来到用翠开发 app 的 第一期啊，也是我们 webcoding 的 第九期啊，因为方案的限制呢，我们上一期决定使用 拉特开发安卓和 i s 双系统的应用，我也在评论区和后台收到了很多朋友的期待和关注啊，所以呢，这期视频我们依然是从头开始啊，一步一步完整的把我们的方案先完善一下，把我最近如何 去配置春影这个 ai 智能项目的一些经验跟大家分享一下。第二个就是我们下载和安装安卓 studio 的 开发环境，那第三个呢，就是下载和安装 flutter sdk， 然后在安卓 studio 中配置 flutter 的 插件。第四个呢，就是 从零开始创建一个 flutter 的 项目，并且用 tree 去管理它。最后呢，我会尝试使用 pixel m c p 结合翠的 ui designer 的 智能体来完成我们新的 a p p 的 整个视觉设计和交互设计。最终呢，我们会做出一个可以用来演示的完整的安卓 a p p 给到大家。本期内容呢，可能会稍长，全程都是干货，如果你能耐心看下去， 真的去做，一定是能做出来一样的东西的，那我们现在就开始吧。首先我期望是把我们的 app 设计成这样的一个，我们有一个前台的 u i， 然后再配一个后台的 服务，这两个是独立的进程，我们通过桌面 icon 或通知去唤醒的话，就会进到我们这里，同时呢会和这个服务通信，然后服务主要去管业务，然后前台用于交互展示。当我们退出返回或者按 home 键的时候呢， 我们的这个服务是常驻的，而且我们可以把它设计成开机自动启动啊，这样的话呢，我们的后台服务就可以一直常驻在内存，当有新的发票的时候呢，我们就可以通过通知的方式提醒用户，但这个在原声的安卓和 ios 上面都是可以实现的， platter 的 话，呃，就不知道了，理论上我觉得也行吧，但是跨境城通信的机制一定是两个系统是不一样的，所以我这里呢是先跟 ai 去调研了一下， 然后他给出来的是纯 flatter 是 不可行的，一定是 flatter 加原声的 service。 那 这样的话，我们实际上开发量还蛮大的啊，就是要维护一个 flatter， 然后一个 ios 的 服务，一个安卓的服务， 然后还要在 flatter 的 这个代码里面再做一层抽象层，去把两个平台的这种服务之间的通信给抹平啊。就现在以我们现在这个计划来说，没有必要，所以最终选定就是 去做这个纯的拉特的方案。那接下来呢，我们就开始去搞一下这个脆的这个工程啊，所以我告诉他就是我们做一个纯粹的前台的一个本地工具，然后这个和我们之前在微信小程序上面弄的需求就有点出入，因此这里呢，我要求他继续调用 之前的产品经理，等我重新把这个 p r d 先弄一下，这里和之前一样，也是问了一些问题，我们就快速的给他回答一下。 ok， 全部搞完以后，我们就直接 让它把这些啊全部都存成 markdown 的 形式啊，存储在我们这个点翠的这个文件夹下面，然后更新这个 project 点 and d， 把老旧的信息移掉，然后引用这两个文档，避免它遗忘。一定要做这一步啊，这样的话呢，我们整个翠的这个项目， 每次召回的上下文里面就包含了我们最终的目的，还有一些基本的信息。并且呢，我们创建了一个项目里程碑，然后开发到什么程度，就要求它去及时的更新，即便我们压缩了上下文或说起了新的对话都是没有问题的，就能保证我们整个 web coding 过程中 a 政策的输出相对来说是一个稳定的状态。好，这里创建完以后，我们看到第一条规则实际上还是以前老旧的 sdkgs 的， 所以我让他把第一条规则改为编辑代码是关键节点，要增加 bug 信息， 因为我们踩过很多坑是 ai， 它习惯于通过分析代码的逻辑去判断问题到底出在哪里，但实际上很多问题我们还是要通过日制去打印出来它整个运行的过程，然后让 ai 根据这个过程结合它的逻辑分析来去解决问题，这样效率会高一点。所以这里 我是需要他前期写代码的时候一定要把日制都加好，尽可能多加一些日制，然后把这个编码规范的文档重新建一下，因为之前我删了这里，我个人是喜欢这种投分命名法，所以就要求了一个这个其 他的这样叫常规的这个大的语言呢，书写来做就行了，反正我也不写这个，我们纯 web coding 去做它。 好，接下来呢，我们就来下载这个安卓 studio 啊，首先要到这个 developer 点 andry 的 dot com 这里呢，我推荐大家要把 vpn 给架好啊，因为我架的梯子，我不知道不架梯子能不能访问啊这个网站，如果大家想去学习安卓开发的话，可以直接访问这个网站， 里面所有的内容都有，那我们直接就点击这个下载安卓 studio a few moments later， ok， 现在下载好了，我们来安装，安装的话就是下一步就好了，推荐大家把这个放在较大的字牌，因为它接下来会下很多东西啊，包括它的 sdk， 还有一些工具，包括虚拟机的部件，这些都非常的大。 a few moments later 好， 现在这个安卓九九已经下好了，我们先创建一个项目，这个项目就放在我们这个脆的项目下面。 呃，现在这个项目创建好以后，我们发现它提示这个路径编码格式错误啊，就是说它可能不支持中文名啊。 ok， 刚才我已经把目录整理到了我们这个机盘的一个纯英文路径的目录啊，并且把我们 tree 的 这个项目的重要文件呢，全部都挪移了过来啊，这些规则，还有我们之前生成的一些文档全都挪移了过来， 因为刚才我们创建的是一个原生安卓的项目，所以我就没有把它移过来了。在我们创建这个 flutter 的 项目之前呢，我们要先去下载这个 flutter s d k 啊，有两种方式，一种就是直接告诉他安装这个 flutter s d k 啊，那还有一种呢，我们 就直接到这个 github 来，我们直接访问这个 flutter 的 主页啊，然后这里呢我们就下它的这个 stable 版本，然后如何安装呢？就去看它的这个 document， 根据它的指导手册去装。哦，那我推荐大家直接在创易上面直接跟他讲就行了， 所以讲的好处就是我们只需要等他帮我们去装，然后我这里是让 ai 给我装的，已经装到了我的地盘有一个 flutter 的 文件夹，所以我就不再装了啊， 那现在我们来看创建项目，创建项目之前呢？呃，大家没有去配的话，这里是没有 new flutter， 那 这个是怎么出来的呢？就是我们要在安卓 studio 里面先装这个 flutter 插件，怎么装呢？这里可以点这个设置啊，然后在这个 plug in 这里呢，我们 直接去搜 flatter 就 好了，因为我这里已经装过了，所以他可能搜到的这个是没有的，因为我这里已经装过了，他在这里装上这个 flatter， 然后检查一下这个大腿有没有装啊，如果大腿没有装的话，把这个大腿也给装上，一般来说它会自动去装 这个插件，装好以后这里就会出现了啊，然后我们就选这个 new flat， 这里呢，他要求你去配置这个 flat 的 pass， 那 这个就是我们 flat sdk， 我 们装好以后，在什么路径就选到它的这个目录下面就可以了，然后选 next， 然后这里就选我们的 这个 project name 和这个路径啊，然后我们的包名可以选成这个，然后我们支持的平台呢，我们就只选这个安卓和 i s， 然后这里的安卓的语言呢，大家可以随意啊，看喜欢哪个，我们就能选 copy。 然后这个 location 的 话，这里是要新建一个目录的，因为它的大特的这个语法的名字呢，要是小写字母开头，然后中间的单词要用这个下划线才可以创建啊，所以我们这里就叫 就叫这个就好了啊，然后文件名也叫这个 下来就点这个创建，等他创建这个项目啊，那创建过程中呢，这个右下角会弹出来这个进度啊，有可能你会下载一些东西啊，因为我之前下载过一些，所以这里很快啊，有有些可能刚装上会下很慢，那我们就先不管他啊，这个全程我建议大家把这个 v p 连上，要不然的话有些东西可能会下载失败，这里全部弄完以后，就相当于我们这个 bug 的 这个项目已经创建好了。那接下来呢，我们就直接告诉他， 因为这里呢，我已经是连了一个手机啊，先把这个手机投上来， ok 啊，因为这里我已经连好一个手机了，所以我让他去翻译完并装在我这个帧机上，然后这里是把这个屏投在了这里啊，方便大家去看这里现在这个模型呢，排那么久队，我们尝试自己编一下，直接点一下这个，看能不能编辑啊。 如果大家不挂梯子的话，他这个 flutter 会下一些资源，所以我把它改成了我们这个国内的镜像，说是有另外一个进程在访问，那有可能是我们的窍门， 我们这个应该是能下的啊，直接打开这个路径吧，这里有一个七十五兆的， 我们把这个给它手动粘过来啊，都是八十点五张，应该这是好的，然后再编一下试试 它。这里是尝试去启动到我们这个 windows 里面去啊，这个不对的，我这里没有选啊，我应该选这个啊，我应该选我的手机，然后再编一下， 到时候我们的 ai 呢，就会用到这个，果然到这个命令啊，这个是现在安卓 app 构建的一个工具，这看上去变异很久啊，而且也没有什么进步的展示，只有这里有 一个啊，三行，你就等一下吧啊，这里我们看到 ai 也在变异了啊，停掉一个呢，我们让 ai 去变异啊，第一次变异因为要下载很多依赖，所以等了大概四十分钟， 这里因为无法安装到手机，折腾了一下，最终原因是不但要打开开发者选项，还需要开启手机上的允许 usb 安装， 你呢？我最终是把它成功的装上去了，我们可以看到是一个福特的 demo， 然后点这个加号可以增加数字啊，那说明我们整个这个翻译，然后调试的流程是打通了啊， ok， 因为前面等太久把麦关了，就忘记打开了，所以这里我发现没有声音，跟大家直接配一下这个音啊。首先我们先打开这个 pixel， 然后在这里的话，我们新建一个设计文稿，等它建好以后呢，我们在左上角这个杠杠这里有一个 cp 服务啊，点了以后呢，它会说已经开启，然后有一个地址，我们将这个复制一下，然后呢我们在翠里面打开这个 mcp 的 配置，然后新建这个 mcp， 按照我这个样式把这个地址粘上去就行了，这样的话我们就已经连到这个 m c p 的 服务上了，然后接下来我们就根据 p r d 让它生成一个交互设计轮挡，把我们 m v p 阶段需要的所有的交互全部都整理到里面， 然后我们稍后会拿这个设计文档，要用智能体去用这个 m c p 服务帮我们去生成最终的设计文稿。这里我们直接给他提示词，让他们用我们之前创建的这个 ui designer 和这个 pixel m c p 服务直接去做。 later， 烦死了，这个有点卡，不知道为什么一直不动啊，我就让他进去一下，有可能是因为这个原因，但是他什么都不显示，我就觉得有点问题，因为我第一次用的时候没有这么慢。 thousand years later， 我 发现这个为什么会卡住的问题，是因为我忘记在这里弄一个图层啊，现在他开始去做了，我随便加了一个这个 content， 现在开始去做了，等会我们让他全部显示出来啊，现在他先去弄 好，我们来看一下他的设计啊，这里我想一下他是怎么弄。 我现在这个是他的一个设计稿啊， 就是所有的主要页面已经做好了，看上去又比我们之前的要高大上一些。然后呢，我实际上做了两版，你们可以比较一下，让我跟这两个比较一下，看一下哪个好一点啊。首先这里这个中间是不一样的， 这里这个中间是一个上传和拍照的一个按钮，然后发票详情和邮箱管理和我们之前的差不多，从设置里面进去，这里就发票设置，然后有一个拍照上传识别的按钮。这版呢就是 进来以后主页是一个统计，和我们之前小程序的很像，然后点这个发票。以后呢是做一个整体的一个发票筛选，然后主页这里邮箱同步拍照识别，查看报表，导入文件，这个比较明了一点。 ok， 那 我们就选这一套吧。啊， 我们先来开发一下，看一下啊，看一下能不能基于这个新的设计稿开发啊。理论上呢，我们需要这样的，这里 有一个复制粘贴为选这个链接啊，是这样的，这样告诉他，但我现在没有给，我看他能不能识别啊，识别不了我们再给，现在他已经开始干了，我也不知道他干的是不是这个。目测是对的，应该不用给他发了。 ok， 现在已经搞完了，他在翻译调试了啊，这种一口气做完的，这种就会有很多错误，而且因为上下文的原因，他会做一些简化，所以我们到后面可能要修补一下，但是这个效率是真的很高啊，这么多代码， 这下就写完了，现在他又开始翻译了，这次翻译应该没有那么夸张吧，应该很快了啊，看这个好像还在下载什么东西，我这下载速度都很快， 我刚才没有告诉他，这个设备我已经弄好了，我先跟他说一下，让他自己去，每次完了装到我的设备上面去，我先自己装一下。 ok 啊，这个界面已经做出来了，可以看到目测第一个页面是没有什么问题的。这看上去都还不错啊，灯上什么都有啊， 挺好的，我现在是 ai 在 装它，你再装一遍吧。这里不知道它是不是能够自动识别啊，比如说 qq， 它下面这个配置是不是都自己有了。发现一个问题啊，我们不加油箱好像过不去了，加一个看一下。 我靠，我现在已经输好了，我试一下啊，点一下看看什么反应啊，这应该是假的啊，这个假的不能再假了。现在是进来了，进来后发现这个下面，下面会有一些小字啊，这应该是 ok， 这个 ui 我 只能说是一个很粗糙的，因为我们现在确实靠 ui 去设计，这个也只能设计一个大概的，毕竟咱不是专业搞这个 u 叉的，有一个能用的就可以了，我们慢慢在打磨 我们这样，我们今天呢，按照我们的任务呢，其实已经完成了，就这个界面已经开发好了， 还没有功能啊，但是呢，我我想调一个，就是这里还有一些界面实际上是点不了的，比如说这个 camera， 这个，还有这，我们把这四个这个问题解决一下啊， 我们就直接大白话告诉他啊，因为他可以通过 a、 d、 b 的 capture meaning 去捕获这个手机的屏幕啊，然后 kimi k 二点五是有视觉能力的，看他能不能自己看到 a few moments later 这个热宠仔应该是没有起作用哦， 他自己能看见就是最好的。 ok， 现在好了，好了以后呢，这几个都按不了，然后这些全是假数据，我们现在就要开始去开发了啊，我们再看，稍微开发一下啊，我告诉他将设置里面的这些不能进入的二级页面全部都做出来。 我们现在这个上下文应该不够啊，先给他压一下，压完以后让他去干，这个 现在是个空壳子啊。其实还有一种，就是我们在拿到设计稿以后一项项去检查，如果没有的话，就让他继续去做，然后做到全部都出来为止。做完以后呢，可以在这个 pixel 这里添加这个交互啊，这里有个圆形交互事件，比如说这个 拍照识别，这个实际上是没有页面纹的，可以让他继续做。做完以后点这个就可以让他加一个交互事件。这里单机 一号做是跳转到，然后目标我们很选另外一个页面，这样的全部给他弄好，弄 好以后让他拿着这个设计稿去开发，这种是最完整的啊。那当然这个的话就对我们 整个产品的理解要深入一点，整个交互逻辑要在脑海里面有一个比较合理的，相当于我们要去反复的去先把这个设计稿做的很好。 这里呢，我为了图方便他，出来以后，我们先做了一个 ui， 然后是呈这种边做边调的方式，十几个项目也不可能直接拿到设计稿，有时候还要工程师自己先弄着。这里我们先不让他实现，让他设计出来，这样的话我们步骤少一点，比较可控一些。 他居然还没忘记之前那个任务啊，现在问要不要开始开发设置的二界面，要不然我们今天就把所有的交互给他理顺吧。数据是假的，没关系啊，你让他去开发吧， 应该全部搞完了啊，我们看一下，我们看下这个二级页面能不能用。 ok， 这个二级页面可以啊，看看数据备份，清理缓存，是一个这样的，但是设计稿上面好像不是这样的。添加邮箱 新手指南使用帮助，关于我们这还有点小 bug 啊，这个关于我们点查更新更新日期，这跟设计稿不一样啊， 可能是因为我改了他这个容器，他原来每一个都包在这个里面的，可能是因为我改了他这个啊，那这咋整啊？我这样我把这个链接单独给他 看一下，他能不能识别得到啊？如果可以的话，我就手动一个一个去对一下，这应该是我给他改了 那个容器，等会他识别不到了啊，大家能不能想办法再把现在的这个找回来啊？他找到了，那我接下来任务就是让他逐个去检查，如果有出入的话就以设计稿为准啊，他已经自己要去检查了，那我就不再多说了啊，真自觉 他还是要我给他提供啊，那我就给他提供一下吧，但是我们就不在视频里面展示了啊。 ok， 那 最终我们是把所有的这个设置中的二级页面和交互稿已经全部都核对完毕了啊，跟大家讲一下一个方法，就是在这里可以 复制为拼接或者复制链接，因为他在生成的时候，我实际上是去动了他这个，所以我现在复制链接他已经识别不到，所以我们可以复制拼接，然后选这种 支持多模态的大模型，就可以图片识别大模型，直接告诉他这是正确的设计稿就可以了。然后我就是这样发给他，然后他把所有的交互线全部都做完了，意不意外？ 开不开心？今天这一期做最后的就是我们把这个 ui 的 整体整理一下啊，整理一下，然后我们这期就结束。这里呢，我也可以给大家操作一下整个我们这个页面，现在呢全部都有了啊。 然后下一期呢，我们来做这个拍照识别，下一期我们做这个拍照识别这个功能， ok， 现在我们就等他把我刚才这个要求全部做完，因为我刚才看了一下他的整个大特的原码，哦， 我们这个界面里面显示的所有的 mac 数据都是硬编码到这个代码里面的，就并没有任何的业务层面的调用，所以我现在要求他把所有的交货和业务进行合理的一个分离啊，就是说我们虽然是假数据，但是我们还是正儿八经的要去定义业务层的接口，然后 要用这个业务层接口返回假数据啊，后面方便我们去换成真实的这个业务逻辑。 ok， 现在他已经弄完了，然后他发现一些主要问题，我们现在能让他执行一和三啊和四啊，因为对二的话，我们可能 后面增加业务时候会有很多改动啊，这个串串齿不一定现在就需要去统一去做处理。 a few moments later， ok， 这他已经完成了啊，比较看重的是这个，就是有些通用的这种卡 片呀，一些选项的这种啊，他逻辑实际上是一样的，所以我们要尽量的附用这个组建啊，不要重复造轮子。对，然后现在就 ok 了，重构其他页面。这个我们就先不做了啊，我们就等着下次我们来对接业务的时候再去做他啊， 很棒啊，能看到这位朋友都是真爱啊，相信这期视频大家也发现了啊，用 ai 协助做 ui 的 视觉设计呢，效率真的是超级的高啊，尤其是这次，我也没有想到，我就想尝试一下用 pixel 的 m c p， 看能不能 去导入我们的设计稿啊，其实我最开始想的是用 pixel 里面付费的 ai 去生成一本设计稿，但没想到他的 m c p 这么给力啊，我们 直接出一家 pixel m c p 免费组合啊，全部帮我们搞定了。所以这期视频我录的时候，我也是有一个非常重大的发现啊，当然我们主要是把交互视觉的风格和整个 ui 初步的 做出来了，里面所有的数据都还是假的啊。所以下一期呢，我们重点攻坚的就是我们本地的拍照识别，最重点呢就是我们要把这个 panda light 这个开源的 o c r 识别模块集成到我们的 app 里面去，实现真正的本地识别啊。 ok， 那 这期视频呢，就到这里，大家有任何的问题欢迎在评论区留言或者私信我， 我看到都会回的。如果你对我后续视频的内容也非常感兴趣，也欢迎你点个关注，多多关注，感谢感谢！ ok， 那 这期视频我们就到这里，拜拜。
651苦苦菜（Coding）
00:26查看AI文稿AI文稿使用教程，第一器，点击官网，进入主页，点击这里新建文件，也可以直接导入 sky 的吗？等文件进入工作区以后，左边是图层组建资源库，中间是画布，右侧是 属性栏。点击右上角，可以通过链接或者邮箱邀请小伙伴一起创作。点击 f 快速创建画板和尺寸，绘制任意图形都不会超出容器，还可以随意改变容器形状和圆角，添加自动布局，设置好对齐方式和编剧数值，容器内容的元素都会自适应调整，非常方便，下期继续。
9909Pixso协同设计
02:45查看AI文稿AI文稿用 ai 开发工具写代码，要保持一个良好的流程习惯，我在动手写代码之前，都是先会制作一份详细的 ui 界面及原型。 目前最好用的两款 ui 设计工具，一个是 figo， 一个是 pixel， 从价格角度来考虑，我认为 pixel 性价比更高一些。 从生成的效果对比来看，各有千秋吧，仁者见仁智者见智，我更喜欢 pixel 的 风格， 每一次对话都会生成一个新的版本。这里边除了 ai 本身的问题之外呢，还有一个原因就是我们在制作产品功能文档的时候，需要花很多时间，花精力做到精细， 所以在制作界面之前，我都会用大模型来生成产品的功能说明文档以及设计规范和要求。那现在国内的大模型我试了几个之后呢？还是偏重于豆包效果比较好。 最后是大家比较关心的 pico 的 收费标准，大家可以看一下， 这里边每一次对话大概会消耗一百到三百点，我这次制作一个小程序，大概对话了十次，总共生成了十个版本，消耗了一千五百积分。 还有朋友问说，呃，那我能不能直接用 ai 编程工具来设计界面？当然也是可以的，但是就目前 ai 的 能力来说呢？ 呃，会浪费你大量的时间，而且设计的整个界面的 ui 的 感觉和美观度可能达不到你的要求，相对于专业的 ui 工具来说差的太远了。因此在写代码之前，才建议用 pico 这样的工具来进行页面的开发。最最最后一个问题就是，呃，如何把 pico 设计好的作品导入到 ar 编程工具？大家看啊， 这里是有代码模式的，那你可以把整个代码通过这么一个小按钮下载下来，导入到你的开发工具里边，告诉 ar 编程工具，参考这个页面的样式和布局， 进行小程序的页面编辑就可以了。好，整个的 pixel 的 使用说明大概就是这样。
5197大白学编程
10:31查看AI文稿AI文稿大家好，下面我来发布一款新的工具， ai 时代的桌面截图与标注工具 pixin 同款手感与 friendshot 标注力以及独占 ai 智能标注和 mcp server 扩展，让 ai 直接看到你的屏幕。 我们集成了像 pixel 一 样的截图体验，增加了十一种标注工具，开箱即用，包括截图、贴图、鼠标可穿透等等。还实现了 ai 智能标注。实现了 m c p server， 让 ai 可以 看到我们的屏幕，还可以进行相关的操作， 可以实现录屏加 gif， 一 键生成以及历史面板和全网搜索，还有取色器，放大器等等，还有取色器，放大镜等等，支持暗色和亮色，主题是纯 c 加加二十加 q， 启动小于一秒， 为什么选择 a drawing sort。 我 们截了一张代码图，问 ai 切回 ctrl， 再拖图进去，等 ai 看 ai 给的代码又要切回去，整个过程四次切窗口。 截了一张外语图，想翻译复制不出文字，盯了参考图，在屏幕上改代码的时候，鼠标点不到图像的按钮， 跟同事讨论 bug， 要截图，但是截图里面有一些敏感信息，没有自动模糊。还有有时候我们需要 ai 操作电脑的时候不是很方便， 所以为了解决这些痛点，我开发出来了这款工具而专一索，它在包含基础的截图功能的同时，还包含图片查看器功能以及操控桌面的功能。 内置 m c p， 我 们直接点击下载，然后下载 win 六十四的进行使用即可，还支持便携版解压即用。那 mac os 和 linux 还没有出来，后面也会提供， 那这里是其他的功能，比如快速开始功能，包括截图标注、钉图、历史管理、录屏取舍器、 ai 智能标注、 m c p 扩展设置、常见问题以及更新日制。那现在我们是更新到了零点五点零， 这里还可以看到我们的更多产品，那下面我们就来演示如何使用这款工具。我们回到桌面，我现在已经下载并安装了 a drive and sort， 我 们直接双击打开就可以看到右下角有一个 a drive and sort， 单机的话就会触发截图，我们右键就会取消截图，然后右键可以看到这里有区域截图，全屏截图，延时截图，还有录屏，滚动截图，钉图等等。那下面包含历史记录，还有一些 ai 工具， 包括 ai 对 话，快速 ocr 问 ai， 关于自动模糊信息， ai 智能标注等等，这里还可以设置主题。 那么如果我们想使用 ai 工具，我们需要在设置里面去配置 api， 下面是关于快捷键速查，还有检查更新等等，那所有基础的功能都是免费的， 而付费的功能就只有 ai 的 功能，而 ai 的 功能首月是免费的，后续是几块钱一个月，基础的功能是永久免费的。那下面我们来点击一下设置，我们只需要在设置里面点击这里的 ai， 然后就可以新增一个配置，在这里面我们配置好我们的 api 之后点击测试，测试通过之后设置为默认就可以了， 可以配置多种，还可以点击新增，新增的时候呢，在这里可以选择多种方式，那这里我们删除取消这个， 那我们设置好之后，可以在这里打开 ai 对 话页，这样我们就可以在这个页面进行聊天，可以追加截图，或者直接在这个上面跟他提问操作屏幕识别一些内容之类的都是可以的， 那我们先关掉，如果我们想 mcp 接入，我们就点击 mcp， 然后点击一键接入，接入到我们的本地生产环境，如果本地有多个生产环境，可以接入到多个， 那我们可以接入到我们的本地生产环境的全局，第一个就可以点击接入，这样我们就已经接入了，还可以接入到 cloud， desktop 或者 cursor 等，这里还可以配置 m c p， 允许 ai 截图，允许 ai 删除历史截图等等， 还有允许数键自动化，那默认情况下是不允许的。如果我们希望允许 ai 操控鼠标，我们在这里打开，如果没有始终允许，我们需要点击这里的立即 and， 那么默认在三百秒内就可以操控鼠标，三百秒后就会自动收回。那如果我们希望他一直允许的话，我们打开这个勾就可以了，始终允许，那这样我们就配置好了，我们点击应用，那这里还有钉图截图的一些设置， 这里可以设置快捷键，快捷键 f 六，快捷键 f 六是截图， f 七是丁图， f 八是隐藏截图， f 九是恢复丁图。 ai 对 话是 ctrl alt 加 a， 如果想修改可以点击，然后修改就可以了，我们这里取消，那刚刚我们已经配置好了，那我们先来测试一下截图功能，我们按住 f 六就可以看到进行可以截图了， 比如说我们打开一个窗口，我们打开我们的字码，然后按住 f 六，他就可以识别到我们这个窗口，点击就可以锁定，锁定之后这里有很多工具，比如说正方形圆，还有箭头，这些基础的功能都是有的，间断，还有笔， 还有文字。你好，还有这里的模糊，这是马赛克，马赛克可以控制线出，这里是模糊， 还可以模糊提高压出，那这就是模糊，马赛克和模糊，这里可以标注一二三四， 还有可以图章，在图章这里呢可以选择，比如说是打叉的，如果是星星的， 如果是感叹号的，这些都是没有问题的。问号，感叹号还有火，那这里还可以高亮笔，还可以撤销还原，那这样我们配置好之后，我们就可以点击打勾，那他就保存好了， 那这样我们就可以直接去粘贴了，比如我们打开 qq 在 这里粘贴，可以看到这就是我们刚刚截图的效果，那我们关掉，我们关掉之后其实可以快捷的给他贴图的，按 f 七就可以了，那这就是贴图功能， 可以缩小也贴图的时候可以看到这里还有相关的按钮，比如说复制、保存，修改，还有识别里面的文字， 比如我们点击修改的时候就会打开这个编辑框，点击编辑，那编辑的时候就可以继续给它编辑了，我们关掉还可以另存为，我们双击可以关掉。我们在按 f 六的时候还可以进行录屏，比如说这里有一个录屏功能， 录制功能，还可以长截图，那这里还可以向 ai 问关于此截图以及识别这里面的文字，还有翻译这里面的文字，那么我们就识别一句，比如我们按 f 六勾住，这里 可以按住 shift 加 c 识别里面的文字，并且复制，也可以点击，点击提取文字，那提取的我们需要配置的，那我们粘贴之后手机端可以了，这样我们就识别成功了。我们这个 ocr 识别并没有安装本地识别， 这需要配置 ai api 来识别的，那这里的其他功能我们就不再展开了，这都是一些基础的截图功能，比如翻译之类的，这里还可以控制现出，还可以控制颜色， 那我们关掉，这就是基础的截图功能。那下面我们就来演示一下怎么使用内置的 m c p 和以及 ai 功能。 我们可以在这里右键点击打开 ai 对 话，在这里面我们演示一个基础的功能，比如说我们跟他说打开 qq， 找到路由发送，你好，我们回车，他就会帮我们打开 qq， 然后看到了录我这个用户之后，他点击打开这个发送一句你好，可以看到这就发送成功了，我们还可以继续跟他说帮我截图桌面，他这里回复的有点问题，那我们新建个绘画试一下， 这里我们后续还需要优化一下，我们打开一个新的绘画桌，帮我截图桌面，可以看到他已经帮我们截图成功了，这就是内置的 ai 对 话功能，我们还可以右键，在这里可以看到有快速 ocr 的， 还有问 ai 关于的，那比如说我们快速 ocr 就 截图嘛， 我们截图这一块点击打勾，它就开始帮我们识别文字了，已经复制好了，我们这里粘贴，这就是识别的结果。我们还可以右键，这里可以自动模糊敏感信息， ai 智能标注。那我们再演示一下 mcp 功能，我们这里右键点击设置 mcp 接入， 在这里可以重新接入或者一键接入，那这里我们已经接入了本地了，我们取消接入成功之后，我们在字码 ai code 里面点击一个新建绘画， 那我们就直接在这里随便找一个目录就可以创建一个新的绘画，在这里我们就可以输入斜杠 m c p， 然后回车就可以看到已经连接成功了，而专 sort 有 二十五个工具， 那我们返回，我们就可以说打开 qq 找到路发送，哈哈，我们这样回车可以看到它就通过操控专索然后找到路，然后它会在这里输入，哈哈，然后并发送我们看一下。 那第二呢就是 ajar 已经搞定了，那我们还可以通过截图桌面，他就 calling ajarot 已经截图整个桌面，那这样我们在开发的过程中就可以直接让他去看我们的桌面或者软件之类的，都可以不用截图并发送了，因为它本身就可以截图。 那以上就是我们关于截图工具的详细介绍，那因为现在刚发布可能还有一些缺陷，那因为现在的时间我们还会持续的去优化。
22抓蛙师
04:52查看AI文稿AI文稿当年 skych 的出现，干掉了 ui 设计师手中的 pot shop， 所有 ui 设计师惊呼，这才是属于我们的工具。不过里面有一个时代背景，就是 ios 七的发布， ios 七让整个 ui 设计界从你雾化进化到了扁平化。 为什么说是进化呢？因为他让 app 的制作难度至少减少了百分之四十，已让 ui 设计师的门槛降低到招聘信息里边，已经没有了必须手绘这道门槛了。关于这个话题说来话长， 我们有机会再聊，那么我们收回斯盖去，他对于卫头的处理能力还是很差的，所以 rs 七之后才真正的发挥了他的实力。可是现在时代又变了， 这个马的出现又让设计师们喊出当年的那句话，这才是我们想要的工具。最近几年，国内的工具开始日渐被资本和市场认可，比如今天我们要讲的主角 pickso， 它是一款国产 免费线上协同的做错工具，他和菲格玛的基因是相同的，如果公司目前还没有转菲格玛的打算，还在使用 sketch， 那我非常建议把个人项目迁移到 pixso， 来尝试一下新时代工具的魅力。我们下边来介绍一下。 相信用过 sit 或者来到比工具的朋友，一定遇到过文件管理、组建库管理、插件同步时遇到版本不统一的问题折磨我线上工具就很好的解决了这些问题。偶尔需要做一些个人项目的时候，是完全可以在 peco 上完成的。 这些新时代的工具都有比较好的内置资源，比如插件开放、组建库等等。因为 pics 是国产软件，所以国内的 ui 组建库都是非常齐全的，我们常用的微信组建， ls 组建，还有国内大厂的一些组建都有。如果你是刚刚入门的新手，可以看看这些组建，学习到很多 ui 规范的知识。这不仅让我想起当年使用 sky 在吃的时候要到处去找组建库，而且你不知道你下载的是不是最新版本。当然他们还有很多其他的库，比如我喜欢的这个扁平化的头像库，如果你是大佬的话，也可以公开自己的库，相信这里的内容会越来越多。等以后无论是设计师还是开发，都可以在这里面下载一些别人做好的 us 组件，然后拼一拼，就可以做出一个简单的 app， 一款工具，如果只是资源丰富也是没有用的，交互和功能能让你更快捷的完成工作才是重点。那要先从非法说起。 自从飞哥们推出了子母形式的组建和优化后的欧特雷奥自适应布局 skytee 的约束布局就已经显得不够用了。 奥特雷奥特的实现方式跟开发的 flax 布局非常像，设计工具无限曲径开发工具是非常好的方向， pikaso 也第一时间支持了这种方式。这种变革是实实在在的节约了工作成本。比如我做了一个卡片，把卡片做好，欧特雷奥特 然后做成组件，这样就可以无数次的调用他。但是设计师是纠结的，更改样式和布局是尝试，这时候就显示出来他们两个的厉害之处了，因为有奥特曼奥特，所以随意更改他都不会乱。如果发现组件的样式或者位置不对，可以直接改掉模板里面的内容，所有的组件都会发生变化，当然 你也可以指改子组建里面的样式，这样的话其他组建是不会发生变化的，但是 skyx 的组建只支持前者，而真正的工作场景是像飞个马和皮克所这样的，代码的开发过程也是这样的。 然后是变体，变体我想和交互言行一起说，变体就是一个组建的不同状态，比如一个按钮的多重状态，其中包括正常状态和按下，这样的话你可以把这些状态和交互打包到同一个变体里，然后调用的时候可以直接调用相应的状态，而且每次调用组 的时候交互逻辑都在，就不需要每次都做一次交互，确实非常方便。然后就是交付，之前 sky 最好的交互方式就是结合插件 pixo 自带交付的功能，只要把链接交给开发就可以，而且还能复制简单的代码用来辅助开发，也会给学习前端的设计师一个很好的入门指导。 自己画好图形，然后对照代码看一看，是一个非常不错的学习方式。因为设计最终是面向开发的，所以无论是看懂样式代码还是设计工具的逻辑越来越像开发，都是为了让设计和开发的沟通成本更低，而且这些基础学起来真的很快，一到两个月应该就入门了。 最后这个是我非常喜欢的版本追溯功能，它类似于开发的 get 功能，这样的话你可以手动制作版本，也可以无限追溯之前的版本，这样的话做起图来是非常有安全感的，而且当你的文档出现问题的时候，也可以 用这个方法去恢复，把出现问题的可能性降到最低。现在 pixo 可以导入 sky 取加 d 飞格马的原文件。不过说实话，如果你使用的是飞格马，我建议还是要再等一段时间，毕竟飞格马已经做了很多年了，而皮克搜还没有办法真正的取代飞格马。但是因为他们的基因都是先进的， 所以取代叉 d 和 sky 是没问题的。建议把个人项目和练习作品迁移到 peco， 毕竟他是免费的。那 peco 就介绍到这了。 后边我可能会做两期史亮图的科普和 ipad 史亮图工具的教学，到时候记得来看，记得关注我，我是不仅能让你的 ipad 更有用的 ipad。
1.3万哎呀思
12:51查看AI文稿AI文稿那个大家好，那个今天呢给大家介绍一下那个一款无人机的一些一款调餐软件 qgc 啊，然后我们这一款软件呢是非常强大的，也支持那个二次开发，现在我们打开 来软件看一下，我们先打开看一下， 我们稍等一下啊，给他打开看一下。 ok， 现在呢我们已经打开了那个，嗯，飞机，飞机的那个调餐软件啊，这个呢是他的那个 名字，然后这里是更新的时间，然后这边都是他的一些功能，嗯，这个的话有有的那个有的有的那个界面的话，我们需要那个连接我们 的那个飞控我们才能看啊，我们看一下飞控连上 连飞空之前，我们看一下这个飞机怎么烧，这个地面上怎么烧固件，我们选择选择这里下面有个固件，我们插上飞机以后插上地面的。 ok， 在这边啊 你就可以看到这个部件， px 的飞行部件和安卓的飞行部件，也就是 a 这个这个开头的一些部件， 这里有直升机多显翼而车模传模了，这个同样是一样的。然后呢下面有个高级设置啊，这里的话我们可以选自定义的固件版本选择， 我们点击这边的确定以后，我们可以选择自己想要的部件啊，然后我们现在我们这个是升级取消了，我们再把飞机拔了，拔了以后我们重新插电重新连接， 这个软件呢是非常非常的强大的。嗯，然后比如说我们一些二次开发呀，我们都可以，我们都可以，比如说我们一些二次开发，很多东西都是在这个上面进行开发的， 今天呢就教大家一些简单的一些来认识啊，不对，好，我们现在就已经连上了，一直在不停的报错啊。 ok， 好，现在的话我们认识一下这些啊，界面啊这些需要我们调试的，我们就 从这里认识啊，这里的话他主要概括，这里的话他主要也就是给你提供一个，呃，提供一个整个飞机的一些呃状态信息啊，比如说我们的呃机架的类型显示是什么？ 然后载具，也就是你的机架类型轴距是多大的，然后其实这是固定的版本，然后呢就是遥控器，遥控器啊，遥控器，呃，遥控器，这里的横滚一通道、二通道、三通道、四通道，是否交流成功？辅助一辅助二被禁用，我们可以把 打开，然后模式模式的话这里可可以清楚的看到啊，我们第一个模式啊，第一个模式，第二个模式，第三个模式是手动模式。然后这里是电源啊，这里是安全，也就是故障保护、时空保护、电源保护这些东西啊。 然后这里是固件啊，固件的话刚才已经上电的时候也试过。然后这里是机架，机架的话他有这些类型的，我们用的最多的话就是呃，六周和插型四周还有那个叉八啊，叉八，这一刻，这一刻 我们选择以后呢我们要点击最右边的这个应用力程序，我们才可以保存这个参数啊。 然后其次呢就是遥控器啊，遥控器的校准啊，我们这里的话点校准啊， 我们遥控器是打开了连上的，你点调整调整呢？呃，这里的话他就会提示他说 叫准。之前呢我们要把所有的这个微调归零啊，微调归零要用尽量的微调，这里的话可以选择是日本手还是美国手， 美国手的话，呃油门，这个是左手油门，日本手的话就是右手跟进的习惯的选择，不过呢大多数的话都是美国手啊，就是啊，右手，呃，左手，左手控制油门和方向啊，然后右手控制很稳和负义。 然后其次呢就是飞行模式，飞行模式这里呢我们可以选择定义哪一个通道来作为他的那个模式通道我们一般都是选择通道， 然后我们可以看一下啊，这个的话是我脸上的，我们看一下 这个是五通八，这个是五通八啊，你看第一个模式，第二个模式，第一个模式我们选择什么，这个话他都有，如果不会的话，我们这里看一下还有哪些模式，然后我们倒着 点这个三角形图标下拉，然后选择就行啊，选择就可以，选择就可以，这边的话是组合的一些组合的一些模式， 然后这边的话也是一个高级的一些功能啊，这个的话还很有用。 嗯，到时候再给大家介绍。然后后面是电源，呃电压的那个电池新数，比如说我们用三四四 s、 六 s， 你就根据自己选择的电池平均 填进去电池的心速的话一般都是三四或者六或者是十二，十二的话就是那个 啊，十二 s 的电池高压，高压的啊，满电电压的话一般都是四点二，四点二空载电压，美心就是我们正常的保存电压是三点七，然后就填填个三点七分压器，十八，我忍了。然后下面是安全， 安全，我们硬件仿真这个的话不用管，不用管，我们从低电量过账保护触发器，这里说起来， 这里的话我们可以就是说我们的啊，那个在电源这里的电源这里如果说是我们低于，低于了某个电压值，低于某个电压值，飞机 执行什么样的操作？这个是原地降落，这个是回家，然后这个的话就是没有执行任何的操作 啊，然后这个的话就是比如说啊，或者回家，或者说嫌贫啊，什么啊？你可以选择你看，你看， 然后我们把它放大，然后我们这里的话我们可以不用选择其他的。我们这里没有填啊，这里的话电池电量、水高电量，警告水平，还有多少电量正常呢？我们填百分之四十的电量， 嗯，警告故障保护水平就是三十吧，然后紧急电量，紧急，紧急的话啊，这里是他有这个值，是五到十啊，那就是十，这是百分之十的电量， 这里的话就百分之五的电量，他应该也是默认的。然后这个故障保护就是遥控器信号丢失，他是执行什么样的电，执行什么样的动作，比如说回家降落闲庭啊，比如说等待遥控器，等待遥控器的指令啊，啊，这个呢是回来，这个是， 这个是，呃，包高度保持，这个是回来，这个是严厉降落，这个是 等待遥控器的指令，嗯，其他两个不知道。然后下面一个是故障保护，就是竖唇，竖唇的话我们一般的话我们都不比他执行什么操作的， 比如说我们飞机上装了图船啊，我们可以看到飞机啊的话，我们可以就是说不用 任何操作都是可以的，冲出围栏的动作是选还是一样？这些设置的话都差不多，莫非就是回家闲停或者说等待遥控器的指令，最大半径，最小半，最大高度啊 这些这个东西可以根据自己的需求去填，去选择啊，然后返回后母点的回家位置，当然这个这些功能的话是需要 gps 的，嗯，共同工作的， ok。 然后呢，呃，反爬升至高度是几米啊？就是我们回来，比如说我们飞，飞到两公里以外，我们飞行高度是十五米，然后他呃你你你，呃，返航以后他要爬升到二十米以后他才回来啊，回来，回来以后，然后再开始降落啊。第一个呢是 回到家以后他是立即降落还是留待，就是等待不着落，等待你的指令。第二呢就是说我飞回到那个起飞点的上空，我等着你啊，给我指令，给我，呃，试了多长时间，时间也到，我就降降落啊。然后这个是着落模着落模式的设置啊，就说 哇，下降，下降的时候，落下的时候的速度一秒钟啊，下降几米，然后落地以后他几秒钟以后就锁定了啊，锁定 七秒钟，锁定，然后下面是调餐，我们这个是前提，油门一般都是百分之五十啊，一般呢，闲停的时候是定高或者定点或者纽带，模式下 就是油门大于百分之五十的时候才那个才起飞，这个时候我们就要注意，如果说我们第一个模式选择的是自稳啊，然后 第二个模式或者第三个模式选择是定高或者纽带或者定点。嗯，比如说我们飞机遇到特殊情况，我们要切回字纹，切回字纹的时候，这个时候我们要特别要控制好油门， 因为这个时候在字纹状态下油门百分之五十已经是很高了，在一台比如说 f 四五零的空载啊，空载 也就是一一千一点一千克左右，这个时候飞机油门在百分之二十五左右他就起飞了，这个时候是已经多出百分之二十五的油门，他是瞬间飞机瞬间就会飞起来的，这个时候要注意一下，就是要你调回自稳模式的时候，我们要特别注意这个飞机 带油门啊，一定要把控好，不然的话你就会慌，然后导致炸机或其他一些事故的发生啊。然后呢？嗯，简单的一些介绍呢，就是这个啊，然后这个呢是 比如说行测啊，比如说质保啊，质保基于行测啊，我们嗯一些任务啊，就在这个界面给他完成，然后这里的话也是日制，比如飞机炸机啦，我们可以分析他的一些故障啊，来吸取教训，下一次呢不要再犯同样的错误啊， 然后这个是一些飞机的一些警告啊，嗯，这个的话我们不用管，不用管，然后呢我们看一下， 嗯，然后这里是 gps 信号，以几颗微信定位， gps 定位水平因子，然后这个的话数据的话越低是越小，越越小的话精度越高，这个是遥控性的信号， 遥控器的信号强度啊，这个呢是电池的状态，就说百分之多少的电压呀，啊？他都在这里显示这个，是 啊，这个，这个是那个模式开关显示啊。嗯，我们一般的话，如果一台新的飞机，我们要除了我们飞机的硬件上安装好以后，我们需要叫准哪些 哪些东西才可以起飞呢？我们第一就是固件刷进去以后我们选择合理的载机，就是你的机架相同的一个一个那个一个那个一个机，一个一个机型一个机型选择以后保存。这个是第一步 啊，执行最简单飞行的第一步，第二步的话就是，呃，我们要校准他的那个，呃， 那个那个他的那个传感器啊，叫准他的传感器，传感器叫准。好，以后呢就要叫准他的遥控器，遥控器叫准的话以后叫，嗯，检查那个设置他的飞行模式，其次是电源 啊，然后我们就可以执行解锁操作，解锁操作的话一般都是油门最低方向最右来执行操作啊 啊，这个时候油门要，嗯，油门最低方向自由来执行这个操作就是可以的啊。可以啊，好，现在基本上就可以了啊，先介绍这些。好，谢谢。
189815智飞模型
01:54查看AI文稿AI文稿pixo ai ui 界面全流程教程来了，新手也能十分钟打造高保证 app 首页对于刚接触 ui 设计的新手而言，接触 ai 是 快速上手的最佳途径。今天我们就接触 pixo ai， 从新建画布开始，一步一步带你做出专业的 app 首页详细步骤。一、 新建画布，在 pixel 里选择移动端三百七十五乘六百六十七的尺寸，新建一个 app 项目，为设计之旅开启第一步。二、输入提示词，把专属提示词粘贴进去， 让 ai 一 次性生成完整的首页，轻松又高效。三、自动排版等 ai 生成页面后，使用自动排版工具，一键实现元素对齐， 统一元素之间的间距，让页面布局更规整。四、设置样式，建立颜色、文字组建这三大规范，并进行全聚同步，确保整个设计风格的一致性。五、 z 格系统开启八、 p x z 格，让所有元素的尺寸按照八 十六、二十四、三十二的倍数进行统一，让设计更具秩序感。六、组建精修，将按钮设置为四十八 p x 高 十二 p x 文角未输入框，添加默认、聚焦、错误三种状态，让组建细节更丰富。七、最终导出完成设计后，可以将作品导出为拼音记高清图或者 pdf 交付图，方便后续使用。这里为你准备了可直接复制的提示词， 极简现代风移动端一、 p p 首页包含顶部导航栏、搜索框、蓝蓝白主色 十二 p x 纹角轻阴影八、 p x 炸格层级清晰高保真 ui 设计 ui 设计教程 ui 设计 pixelai 零基础学设计设计干货。
68原见
00:59
01:13查看AI文稿AI文稿前两天大家部分团队被封禁，已经不能再使用飞哥马进行设计了，这让我们不由得害怕自己辛苦累积的素材库，公司已经落地的组建资源无法正常使用，大家纷纷都进行飞哥马文件转移。目前国内有三家工具可以实现了飞哥马文件的无缝迁移， 分别是 master go、 机齿设计、 pixo。 在同事国风素材的文件下，我对这三款协同办公软件的性能做了以下三点的测评对比。 一、导入方式， most go 复制粘贴链接即可导入文件，非常便捷而及时。设计和 pixel 需要先导出 fik 码文件，再点击导入文件，步骤稍多。二、反应速度， most go 整体拖动都非常流畅，而另外两款软件都出现延时加长的现。 三、文件还原度，大型文件下， max 的勾完整保留了图层和素材，而且依然很流畅。 吉时设计则是出现卡顿和加载的情况，而 bixo 不能完好的展示图片，整体使用下来， master go 的综合性能最优， biso 的素材显示问题比较大，所以略低于吉时设计。最后，希望国产软件越做越好。
524潘中意
17:07查看AI文稿AI文稿哈喽，大家好，今天是我们 pix 零基础训练营的第四个案例，今天我们会一起来完成这样的一个列表卡片的绘制。 那么在之前的案例里面呢，我们已经学习了怎么样去绘制这样的线性图标，面性图标，也包括这样的一些质感卡片，从临模到怎么样做一些简单的原创。 在之前的学习里面呢，我们应该已经熟练地掌握了 pixel 的 这样的一些基础的工具，包括怎么样给它添加填充描边，以及这样的简单的效果。 从今天这个案例开始呢，我会教大家怎么样用自动布局组建，怎么样构建一个完整的页面。那么学习完这两个案例之后呢，大家就可以说你已经熟练地掌握了 ui 设计所需要用到的这些基础的软件工具。 今天这个案例呢，我会给大家讲一下约束和自动布局的基本的原理。学习完原理之后呢，我们有一个小的案例带着大家实操一下。那我们先讲一下什么是自动布局。首先大家可以看一下这三个按钮，你觉得他们是一样的吗？如果单纯的从视觉上面来看，他们的确是长得一模一样的对不对？ 那对于零基础或者是从其他的设计行业，比如说平面设计转行的同学来说，你肯定会觉得，哎，他们明明就是一模一样的对不对？那难道他们还有什么不同吗？ 实际上在 ui 设计里面，它们是完全不一样的。那我们选中一下这几个按钮，你会发现在左侧的这个图层列表里面，它们前面的这个形状完全不一样，前面的呢，它就是一个组合， 中间的这个呢它是一个容器，那最后面的这个呢？它是一个自动布局，那大家一定会有疑惑，对吧？同样的这样的一个效果，为什么会有三种不一样的做法？那接下来呢，我给大家讲一讲它们三个的区别。 复制一份在这个旁边，那我们可以看到，首先这一个呢，它是一个组合，这个组合呢就跟我们在别的设计的工具里面的组合它是一样的，它就是把两个图层组合在一起， 你看到它们的关系就是什么呢？它们的关系就是在同一个组里面，选中它们之后，它们可以一起移动，一起删除。但是在 五类它们其实是没有任何关联的，你可以随意的去移动这一个，你可以随意的去移动这一个，那你也可以单独的去调整它的某一个的属性，它们俩是完全没有关系，互不影响的。这样的一个管局， 这个就是我们的第一个就是组合，那第二个呢是容器，你可以看到它其实就不是一个矩形的形状了，你可以把它理解成一个画板，那左边的这个按钮呢，我们跟它的这个矩形是没有任何关联的，但是呢在右边这个文字跟这个画板它是有关系的， 比如说我们现在把这个文字呢，把它往下挪，那它的其中的一部分是不是就不显示了？因为它离开这个画板，我就用我们之前的一个案例给大家讲解一下这个画板这个容器的作用。首先我们把之前的这个离模图给它复制一份， 在画图之前呢，我都会告诉大家，你一定要先画一个对应的这个移动端的尺寸的画板，那如果你不画这个画板会有什么效果呢？那我们把这个取消一下，你所有的图层都是散的，对不对？这是第一点。 然后呢有时候你如果说你们想画这种效果，对吧？那如果说没有一个画板的话，那他就是一个零散的就是这样分布在页面上的这样的一些形状。 但是有了这个画板之后呢，这个画板就会对你的这些颜色呀光影做一个裁切。像我们在做这样的一些图标设计的时候，为了能够让我们的所有的图标都用相同的尺寸去导出，所以呢每一个图标我们都不是直接把这个形状就给它导出出去了， 是要给所有的图标添加这样的统一的画板，这样呢大家就可以统一的去导出一个标准的尺寸的这样的图标，这个就是画板的几个作用，那 自动不，那自动布局又是什么呢？我们再给大家演示一下，比如说我们现在要调整这个按钮的大小，把它变成一个新建按钮，那这时候很明显他就要窄了，对不对？如果我们就要去调一下他的这个尺寸，这个过程是不是会稍显有点麻烦？ 那为了解决这个稍微有点麻烦的问题呢，自动布局他就出现了，比如说我们先来看看自动布局的效果，然后我们给他试一下，这样子的话，你就能看到他的宽度是什么， 他的尺寸是根据他的内容的尺寸去自动变化的，不需要我们每一次都这样手动的去调整他，这个就是为什么他们在视觉上长得一模一样，但是实际上你去看他们的图层的时候，发现是三个完全不一样的这样的效果。 那接下来我们讲一下自动布局的几种不一样的尺寸是怎么样去定的。首先呢给大家讲一下，自动布局的快捷键是 shift a， 那 我们可以选中一个元素，给他按一下快捷键 shift a， 那 他就自动生成了一个自动布局。 然后这个自动布局呢，你也可以给他添加填充，可以给他添加描边和效果，在添加效果这方面，他和形状以及画板是没什么区别的，那他们最大的不同呢是自动布局有三种不一样的确定它的尺寸的方式， 分别是固定、适应内容和填充容器。有很多同学是搞不清楚他们的区别的，所以在这里呢我详细的给大家讲一下。首先第一种固定， 固定是最简单的，那它的意思呢，就是你给他一个固定的尺寸，比如说给他一个固定的尺寸七十二，或者说给他一个固定的高度四十八，那你给他多少这个尺寸他就是多少，这个就是固定的意思， 它的尺寸呢完全就是你给它多少它就是多少，跟里面的内容也完全没有关系，大家可以看一下它们是相对比较独立的。 那第二种呢，就是适应内容，适应内容的意思呢，就是它的尺寸由它里面的元素的尺寸和左右上下的间距一起决定。我举个例子，我们现在选择它的宽度是适应内容， 那接下来我去调整这个按钮的内容的时候，它的尺寸也会跟着变，它的尺寸呢等于按钮的这个宽度八十四，加上它自己的左右间距十八是这样的去计算的。 比如说我去调它的这个左右间距的时候，它会变短，那我去调它里面的内容的元素的时候，它也会变短。 高度呢？因为我们给的是一个固定的高度是三十二，所以如果我们去调这个高度的上下间距的话，其实你是看不到任何区别的。但是这个时候呢，如果说我把这个高度改成了适应内容，那么高度它也会等于按钮的文字的高度，加上上下内容的高度，这个就是适应内容。 那什么叫填充容器了？并且也有很多同学会说，老师我在这下拉选的时候，我看不到填充容器，我的软件是不是有问题，没有这个填充容器呢？那首先我问大家一个问题，填充容器它是不是得先有一个容器啊？对不对？ 所以说你如果说发现哎它好像没有填充容器，你先检查一下你的这个自动布局它有没有容器，比如说我们这个按钮对不对？这个按钮呢？它就是有一个容器在这里的， 所以这个按钮你会发现它是有填充容器的，但是这个按钮因为它没有容器，所以你是不是下拉下来就发现它没有容器？ 填充容器的意思就很简单，比如说这个高度它就等于什么呢？它就等于它这个容器的高度，这个上面为什么是白的呢？因为我给他留了一个上下的间距，如果没有这个间距的话，它也就是完全填充的， 这样给大家讲一遍之后呢，大家应该就完全理解这三种确定它尺寸的方式啊。第一种是固定的，就是你给他多少就是多少。 那第二种呢是适应内容，它的尺寸由它里面的内容的长宽去决定。那第三种呢是填充容器，填充容器呢前提是呢它必须要先有一个容器，它才可以去填充容器。 但是呢大家可能还会有一个疑问，就是为什么我们的自动布局会有这么复杂的规则？所以接下来就给大家讲一下。自动布局它有一个很重要的特点，就是它是层层嵌套的。那我举个例子，比如说在我们同样的这个列表小卡片里面是不是不同的元素，它其实需要不一样的规则， 比如说下面这个标签，它是不是需要根据我的内容的长短去不同的变化？所以在这个时候我们是不是就要选择适应内容，对不对？那像我们的这样的一个小卡片，它其实会有不同的高度，对不对？我们其实是希望它的高度能够跟着内容的变化自动变化的。 是呢，我们的宽度其实希望它有一个固定的数值，对吧？就是我们的页面尺寸三七五，那所以在设置的时候，是不是宽度我们就得给一个固定的数值，但是高度呢，我们是不是就要给它设置成为适应内容？ 那再比如说里面的这个模块，我们其实希望它在适配不同的尺寸的设备的时候，它的这个宽能够跟着它的这个容器的宽度一起变化，实现这种两段对齐的效果的，那这个时候我们是不是就要给这个自动布局添加一个填充容器，这样的效果它才会跟着走，对不对？ 所以说我们在学习的时候，其实你完全不需要去背或者去记哎，什么地方应该用哪一种尺寸，你就是你需要它是什么，你就给它设置成什么。 比如说这个地方你需要它是适应内容的，那你就给他一个适应内容，对吧？那你需要它是填充容器的，你就给个填充容器，你需要它是固定的，就给他一个固定。理解了基础的原理之后，其实就是这么简单。 最后呢我再给大家讲一下约束以及我没有讲到的一些画板的小细节。当我们选中某一个元素的时候，如果它在一个画板上面就会看到它有一个约束，但是如果说这个图层它不在一个画板上面，就会看不见这个属性，那这个是什么呢？它其实是一种对齐的方式，非常的简单。举个例子，比如说我这个元素， 那我现在就把它放在这里，如果说我选择它底部对齐的话，那么当我去调整这个尺寸的位置的时候， 它会也跟我的这个下边的这个间距保持一致，但是它的左右的话稍微有点反直觉，就是当我选择左边固定的时候，那它其实固定的是右边，选择右边固定的话，它其实固定的是左边，但是大家可以知道一下这个基础的原理就不会影响你们做设计了。 那这个呢就是约束的作用以及呢？还有一个小细节是在画板上面，有些同学你画完之后，你的效果可能是这个样子的，然后你不知道怎么实现，就是这种效果，对不对？那你可以检查一下你的这个画板下面有个超出容器，不显示有没有勾选上， 勾选上之后呢就没问题了。那这个是画板的所有的细节，我们现在已经全部讲完了，我们的自动布局呢，它其实也还有一些对齐的小细节给大家讲一下。我们可以看一下自动布局呢，它也是有不同的对齐方式的，比如说这个模块，那所有的元素是不是都是横向对齐的？你如果调成竖向，它就是这个效果， 那我们的这三个模块，它是不是就是纵向对齐的，对不对？如果调成横向的话，它就是这样子了， 哪个方向呢？取决于你需要实现什么样的效果。它还有一个模式呢叫做网格，这个呢比较少见，我举个例子，比如说我们选中这样的一个自动布局，然后给它设置成一个网格，现在是一乘三对不对？你可以 随意的勾几个，勾到四个也行。那这个时候呢，如果说我们去新增的话，我们选中里面的元素给他复制粘贴，他就会按照这个网格的形式去新增和排列，这个用的呢相对会比较少一点，大家了解一下即可。 那这三个的话呢，分别是调整上下、左右和中间的间距的，大家可以自己稍微去点一下，你就看明白了，就是分别是左右上下的，当然你也可以单独的去调某一个边的这个间距，这里呢我就不演示了， 右边的这里呢，其实它的一些对齐的方式，那我用几个矩形来画一下，大家理解起来会更容易一点。好，我现在画了几个大小不一的矩形，然后现在呢，我用 shift a 给它们新建一个自动布局，那像我们选择这个自动布局，如果说我们选择顶对齐的话，它就会顶部对齐，选择中间的话就会中间对齐。 现在呢它的间距是自动的，自动的意思呢，就是这个间距呢，它由它外面的容器决定，就我的这个容器大一点，它的这个间距就大一点，容器小一点，这个间距就小一点，这个是自动的意思。 然后我们把这个自动布局复制一份，那没有换行的这个自动布局呢？如果我们去调到的宽度，它是不会有什么变化的， 那下面有换行的这一个自动布局的，如果说我们去调它的宽度的话，它其实会换行的。给大家举个例子，比如说在第一节课的时候，我讲到了这节课要讲什么知识点， 那因为我加了这个换行的功能，所以如果说我要新增一个功能的话，它是会自己往下延伸的。然后呢如果说我想把这个内容调宽一点，它也可以。现在原理讲完了，我们一起来动手实操一下， 把这个取消一下自动布局，把它所有的自动布局全部取消一下，你可以看到它现在已经是比较零散的一个状态了。 那上面的这些基础的文字字段呀，它的字号大概是多大的呀？里面的这些图标按钮要怎么样去画呀？这些 最基础的东西我就不再教大家了，如果说你们有拿不准的地方，你们可以对照着这个原图，然后呢你们可以对照着我给你们的原文件，现在呢我就只教大家怎么样把这些元素把它做成自动布局的方式 好。首先呢第一个元素和这个元素，那其实我们想要它的效果是什么呢？我们需要它的效果，其实是它能够这样子跟着它的宽度一起去变化，对不对？ 为了实现这个效果呢，我们现在就选中这两个元素，给它新增一个自动布局。 shift a， 那 现在呢它的间距是一个固定的数值，那如果是固定数值的话，我们去拖动的时候，它就不会跟着变化，对不对？所以呢现在我们把它的间距调整为自动，或者是你点击一下这一个小图标也可以， 那这样子的话，我们去拉伸的时候，它是不是就会跟这边一样会跟着一起动，这个就是自动的这个效果好，然后我们现在把它放回来一点点。好，那，那现在我们上面这一块就做好了， 大家要记得就是我们自动布局是可以层层嵌套的，比如说这几个字段，我们现在把它新建成了一个自动布局，那如果说里面我们要单独去调模两个元素，那它里面还可以继续叠加自动布局， 比如说我现在就选中这两个元素，我再一次 shift a， 然后那它里面是不是它单独就是一个布局了？那我单独去调它的间距，比如说把它调成二，调成一都可以。 好，那现在我们选中下面这两个元素是不是同样是 shift a， 然后宽度呢？就是适应内容，对吧？这样子我们去调它的内容的宽度的时候，它就会跟着一起变化下面的这些元素，是不是同理，我们给它一个 shift a， 然后你可以调一下它的间距，比如说你给它调一个四像素的间距， 现在我左边的这个元素呢，经过我的一番整理，是不是已经规整了不少了？它已经变成了三个自动布局了，让我们给这三个自动布局呢，再套一层 shift a 自动布局，它就会默认成了一个竖向的这样的自动布局，那我们同样去调一下它的间距，比如说我们调个八像素的间距，看一下， 熟练了之后呢，大家会发现自动布局其实非常的好用。好，那现在呢左边这个容器呢，我们也做好了，右边只有一个按钮了，对不对？那很简单，我们把这两个元素放在一起，新建一个自动布局， 这个时候呢我们想对齐一下左边的内容和右边的按钮，大家会发现它好像既不是完全的顶部对齐，然后呢也不是标准的居中的对齐，它的对齐方式呢是顶部对齐，但是呢顶部又有一点点间距。好，那这个时候怎么办呢？我们是不是可以选中这个按钮， 然后呢我们给这个按钮呢再加一层自动布局，大家可以看一下，现在呢这是一个空白的自动布局，然后我们给这个自动布局去加一个上下的间距，是不是就已经能完全实现这个效果了？ 所以说大家去看自动布局的图层的时候，你会觉得它哎，一层套一层，一层套一层，看起来有点晕，对不对？但是如果说大家懂了我们在一开始讲的那些基础的原理的话，你再去看，其实是非常简单的。那现在呢，我们还剩两个最大的自动布局，对不对？我们选中它们再新建一层 shift a， 那这个时候呢，我们可以给我们最大的这一层自动布局呢，加一个这样的填充的效果，然后给他加一些这样的左上下左右的这种间距，我目前给的是左右十六，然后上下二十的间距。大家其实在画图的时候，你不用追求完全和原图一模一样， 你自己画图的时候，你就用这这样一些比较规范的数值，比较规范的字号，它就已经完全 ok 了。好，然后因为我们想实现的效果是这个样子的，对不对？所以呢我们可以选中里面的这两个元素，然后把它的宽度调整为填充容器。 因为填充容器你必须要先有容器，所以我们在画图的时候是先把这个容器给它创建出来，然后再去调里面的这些元素的宽度，给它调成填充容器，这样就完全 ok 了。中间的这个间距有点大，我们再给它一个八像素的这样的间距。 其实到这里的话呢，这个案例我们就已经画完了，我们可以把它的宽度调整为标准的三七五的尺寸。在一个真实的移动端列表里面，可能从上到下有很多张这样的卡片，那实际上你再复制一份 shift a， 然后把它们的间距调到零，然后复制粘贴，是不是就可以实现这样的列表的效果？ 如果大家能够熟练的掌握自动布局的话呢，画图的效率会大大的提升，实际上呢，自动布局能够实现的效果还有很多，如果大家想要知道一些比较近间的玩法的话呢，大家可以看一下我主页的这一个教程作为补充。 那下节课呢，我会给大家分享组建的一些功能和用法，也是对大家提升工作效率非常有帮助的，那么我们下期再见，拜拜。
24设计充电站
00:34查看AI文稿AI文稿kickso 使用教程第二期，靠复制粘贴加拖拽就能搞定设计。按住 h 创建一个画板，把素材拖拽进去举行工具快捷键是二，文字快捷键是 t。 调整一下文字的字体颜色，再打开右侧的资源库，组建图标，应有尽有。拖进来再点击右上角，一秒对起 推一拉，添加圆角，在效果里添加投影，层次感瞬间拉满，流畅丝滑又高效。这不就做好了什么？又有小改动，一个链接发过去，点击这个圆圈，可以直接留言，已经做好的组件还可以添加样式同步到团队，再也不用担心小伙伴的样式不统一了。
4064Pixso协同设计
00:45查看AI文稿AI文稿一个软件搞定长截图、贴图 o c 二录屏还免费！国产神器 pix pen！ 按 ctrl 加一截图框选区域，点这个长截图图标，选框变红， 然后往下滚动鼠标，它自动拼接出一整张长图，网页聊天记录随便截。按 ctrl 加二截图直接贴在屏幕上，永远在最前面写论文，做 ppt。 把参考图贴旁边，不用来回切窗口， 贴图上的文字，鼠标直接拖拽就能复制，不用手动打字，识别又快又准。箭头序号马赛克，录制成 g i f 或视频全都有！装这一个顶四五个软件，点关注下集更精彩！
57阿剑玩电脑
