codebuddy原型图生成教程

这是我用克拉巴黎从零到一搭建的一个小程序啊，一个点咖啡的，那这边的话可以选择咖啡，然后可以选择规格， 然后加入到购物车，购物车这边数据能正常显示，也能去结算，然后提交订单。那么这边不仅仅有小程序端，还有一个这样的后台管理系统去可以去管理这样的商品信息啊，那么我是怎么做到呢？那本视频就是从啊全程的录制啊，然后从零到一整个的实践过程， 而且我也准备了一个这样的文档，把我每一个步骤实现的过程，然后里面的关键的提示词以及一些关键的点啊，都录到这个视频里面去，录到这个文档里面去了，你可以按照这个文档从零到一完完全全的能够实现。 ok， 那 话不多说，我们开始 qq 八里这个软件，其实我很早之前就分享过，当时我对它的评价是不怎么好用，但是这几个月过去之后，我把它重新下载下来的时候，我当时是很惊讶的，那我惊讶在哪呢？第一它这个模型啊，全部都是 gbt 五点一和五点一 codex， 那 么这个是非常非常不错的，那为什么呢？目前就是除了这个专门的这个前端能力非常出色的这个 gmbn 三 pro 之外，它后端是 gbt 五 点一或五点二 code x 是 跟 cloudsonet 四点五和 opus 是 有一竞争之力的，所以的话它有了这个模型之后，那对于实现起来是非常方便。那第一个是它模型比之前丰富了很多，那第二个呢，就是 它增加了非常非常多利于这个 web coding 的 这种啊功能啊，比如说啊，它有支持 prime 模式，就它的 prime 模式跟 cos 的 prime 模式很像，通过你的一个啊想法，它能把它 形成一个具体的一个啊，含有突出历史的和设计的一个文档啊，比如说我举个例子，我在实现这个过，实现这个项目过程中，那么这边也是有啊生成这样的文档，非常详细的文档。 那么我在过程中呢，也是看他的设计啊，或者什么都是非常专业的，有这样的模卖的图啊，有这样的一个接口的说明啊，所以说非常非常的专业。那么除了这个之外，那还有就是他也支持这个啊多智能体，你可以在这边去配置， 你可以在这边去配置多个子智能体，也就像啊 clock code 啊，或者像 tree 里面都可以配置不同智能的这个子智能体，然后在整个对话中能够智能去调用。比如说你这个智能体是负责前端设计的，那么他也去能去智能去调用。 还有呢支持还支持 skis， 这个就非常非常难得了，目前很多工具啊都不支持 skis， 但是他目前支持了，也就说你在 clock code 里面用了的很好用的这些 skills 啊，你都可以把它导到这边去，它能去调用。还有呢，它也有记忆的功能，以及以及它最出色的跟它自己的这个 cloud base 是 深度集成的，也就是说你可以不用 去购买服务器，不用去购买域名，你不用去操心这些啊运维的事情，那么你可以用它的这个 cloudbase， 或者说你用 superbase 也行，来完成数据库的读取啊，认证啊那些很麻烦的事情，这样的话你专注于自己的这个业务，业务代码就行了，所以说非常非常方便。还有呢就是 你把代码都弄完之后啊，这边也提供这种啊一键部署的能力点部署，比如说刚我现在要演示这个项目，那最终是可以把这个项目都部署到这个 一个网址里面去，你可以有自己域名来进行替换。然后这边的话还有啊斐格码这些组建，可以直接使用斐格码的方方式啊，把这个你的想法变成界面，那么我这个点咖啡的这个小程序就是这么做的， 就这么所以说它目前看下来就是整个是一个非常成熟的，跟我几个月前用的话是变化非常非常大，所以我在整个用的过程中 非常非常顺利啊，基本上没有卡壳的地方。如果你在国内想要去开发小程序，那么它这个东西是最好的一个 ai 编程工具了，因为它集齐了太多太多关于小程序啊云开发方面的，这我们可以看一下它这个 source 就非常非常多，它自己系系统内部集成了非常多的这种路由， t、 c、 b 就是 cloudbase 里面的带这些路由，你看 它所有的这些调用啊，小程序相关的全部都有，全部都有，所以说这是非常非常不错，就算你不用开发小程序，开发其他的，你也需要后端，对不对？那么你也去是可以去使用这个 cloudbase 的， 所以我在整个过程中啊，真的是非常非常顺畅，也非常推荐大家去下载使用。那么在开始之前呢，你要创建一个这样的文件夹，因为我们现在这一次的演示是为了开发一个包含啊小程序和一个包含后台系统的一个完整的系统。所以呢你一定要先创建一个文件夹，比如说我们这次搞的是个小商城， 那么在这个商城里面这个文件夹里面可能会包含一个小程序，对吧？然后还有一个后台 要把这个文件目录建好，这样的话，你的这样的话，这样的话你的 ai 编辑工具啊，打开这个文件夹就会有两个目录啊，能方便的去做这种上下文的管理。 ok， 我 们优先先去创建这样的一个小程序啊，比如说我们现在先选择目录 小程序，这边就创就选择你的这个小程序目录就行了，因为他们这个后台跟这个是没有关系的。用这个微信语音开发，然后的话这边选择不使用选择测试啊，选择测试然后点创建。 那为什么要使用微信语音开发呢？这样就避免你去自己去买服务器啊，去创建数据库啊，去做服务器运维啊，就非常麻烦。 那么微信小程序里面其实集成了这个微信云开发的很多很多功能啊，你能很方便的就不用去太关注福气、玉米这些繁琐的事情，然后能做到就是你专注于你自己业务开发就行了。 那么你创建完之后会得到一个这样的一个界面啊，一个这样的一个这样的出手化的一个这样的 的环境啊，这边的话，你会看到你这边已经有一个这样默认的 crawl 一 这样的环境，点开这个云开发，这边的话会有一个默认的免费的开发环境，你在做测试的时候其实完全够用的。那这边会有一个这样的一个 crawl crawl 环境的 id 啊，把它给复制过来，然后的话回到你的这个目录里面去，然后打开这个啊小程序目录里面这个 app 点 js 啊，然后把这个 a、 p、 d 个云环境的 id 复制到这里去， ok， 那 么你就完成这个项目的一个出水化了，那这个时候你就基本上可以把它最小化啊，可以暂时可以不管他，然后的话你可以就是用你这个口袋包里去打开刚刚的那个文件啊，刚刚这个文件啊，这个默 打开之后，那么你就会看到啊，会看到有两个目录，这样的话相当于就是管理起来了。那么接下来就是你要来写一个最基础最基础的这个全局的一个这样的一个说明文件啊，告诉这个 ai 你 这个两个目录是干什么用的，那么我们会用啊，这里边的这个路由 啊，项目规则创建规则，那么我们把它它命名成 project 规则类型啊，总是也就说每一次这个 ai 的 请求啊，都会把你这个规则里面的内容 啊放到你的对话的上下文里面去，这个叫总是那手动的，就是需要你把这个规则文件啊拖到这个对话框里面去，告诉他去读取这个规则文件里面的内容。那么我们在前面已经说过，规则其实就是你来约束 ai 开发的一些规范的， 虽然我们这次是要告诉他，总是因为我们是要来说明我们整个项目是干什么的规则内容，所以我们就大概就简单介绍一下这个项目是干什么的呢？项目的价格是什么？这样的话他就生成代码的时候会去参考你这样的一个建议啊， 然后我们会使用 cloudbase 来作为我们的后台服务，就说我们不需要去搭建一个这样像 python 这样的后台服务的处理啊，点击确定 ok 就 ok。 好 了，那后面如果你有一些自己在开发过程中啊，有一些新的变化，比如说出现一些问题需要去规避的话，那么你也可以加到这边去做一些，比如说你你希望他不要去做什么事，或者说你建议他去做什么事，那这个文档可以慢慢去完善。那接下来呢，就是我们要进行下一步，就是我们要去 啊链接啊链接这个 clockbase， 那 为什么这一为什么这样做呢？其实你可以认为就说啊，我们在这个项目很干净的时候啊，需要去做一个触手化，因为我们点击链接之后啊，其实链接 clockbase 其实也是啊， call the body 在 后续后面会把这个 call the base 里面相关的东西啊，生成很多规则文件，这样的话你后面的请求才不会有问题。然后的话你这边微信登录之后啊，你就会看到它需要获取这么多授权，那你授权给它，授权完成之后啊，你就会再看到 call the body 下面的 rules 里面会有很多啊这个函数，这个 call the base 里面相关的这个函数啊，各种各样的， 那么它其实就是可以在下一次的请求里面会自动去识别这里面的这里面的东西了。这也就为什么我说一定要在项目出手话的时候先把这个，如果你要用这个 codebase 啊，如果你要用这个 codebase， 那 么你就先把它给连上去，先把它连上去 这边他已经出示完了，那出示完了之后呢，会有一个问题，就是他自己出使化会得到一个这样的一个环境的 id 啊，也就是我们的云平台的一个 id， 跟我们当时小程序创建的是不一样的，这时候你就可以告诉他啊，我真实的这个 id 是 这个， 到目前为止啊，就相当于把这个环境啊代码出使化已经做好了，那接下来就是一个实际的从一个产品到一个完成品的一个过程了。 那所以现在这一步呢，就是啊，假设你现在有个想法，对吧？你要把想法变成产品，那么我们就要要把这个长这个想法具体化，那么就是我们要生成一个这样的一个啊，说明文档。有了这个文档之后啊，那大模型啊、编程工具啊什么都知道，我们到底的是具体的需求是什么？ 那么你可以用这段提示词放到我们的这个口袋里面去啊，让它生成一个这样的一个标准的一个 prd 文档， 你可以选择这个啊，这个模型其实都一样啊，你可以选择这个 max 也可以。 ok， 那 我们就让它生成一下，那这个文呢，其实作用是什么呢？是啊，明白你这个产品是干什么的，然后它的 信息页面的结构是什么样子的，然后他会给你一个这样的一个页面的一个参考啊，就比如这个页面怎么设计，对吧？然后如果说你要更详细，还可以输出这样的接口的定义，但是那样的话会导致这个文件非常的大，所以说我们就暂时不用那么麻烦。我们先其实就是把你的这个想法，比如说我现在想 做一个这样的点咖啡的小程序啊，然后把你这个这个想法更加细致化一点，他这边已经生成完了，生成完之后我们就把这个文字啊拷贝到我们的这个文档里面去啊， 这边的话我们新建一个文件叫这个名字啊，拷贝过去，拷贝去，过去之后呢，我们可以大概来浏览一下他目前给你设计的啊这个东西啊，定位节省时间，目标用户核心功能用户测 啊，选择这个规格下单支付个人中心小程序端啊，这就是给你的在规划你的页面结构了，在规划你的页面结构了，然后后台， 那么后台其实我们是啊不需要他来做这个种啊界面的管理，因为我们后台会根据功能去做 对应的这个后台管理啊，所以呢其实更重要就是看他的这个小程序的这边的设计，如果说你对这边调整啊，有你自己的想法，你也可以来修改，比如说首页啊，首页的话我们就希望就是啊展示一个开屏键面，对吧？ 分类商品卡排序详情， 优惠券我们就不要搞那么复杂，我们就直接就不需要优惠券，我们不需要，这个配送方式我们不需要，哎，简单订单列表 ok， 取餐进度条好， 优惠券也不用啊，我们都不用， ok， 我 们基本上就是可以把它这整个就看完了，看完之后接下来这一步就是要把你这个东西要变成界面，那怎么变成界面呢？那就要有一个设计工具，或者这有几种方法啊？第一种方法是你直接让这个 copy body 去读取这个小程序的这一块的描述， 这一块的描述，然后呢去生成界面，还有呢你借助第三方专门的这个设计工具啊，来来生成这样的界面，那我们就是可以啊，使用这个 control body 本身已经集成了这个 fig 码，那我们就用 fig 码来做一个这样的界面，做这一套界面 在刚刚生成 prd 文档的时候，其实它帮我们生成这个设计的规范，因为我们其实要求它生成设计规范，看到没有？我们是要求它生成这样的设计规范的，所以我们等会把这个也拷贝过去。 ok， 我 们打开 fig 码，点这个 我们使用啊这里的这个 make， 那 这个 make 其实就是可以通过提示词直接创建页面，不需要我们去啊，有这种啊专门的这种设计的能力啊，因为作为一个啊，不是专门的设计的话，你要去用这个码去做设计出来一个好的界面，其实是有点难度的，那我们就把这个， 我们把这个拷贝一下， 然后呢我们把再把这一块放过去， 那 ok， 那 就让他去设计就行了，那这边设计的时候肯定会出现一些页面的这个问题啊，这个需要来自己来调整的，这个倒是问题不大，那这样的话他就有一个这样的你的一个内容的参考，一个设计规范的参考，然后他就会去生成这样的界面。 ok， 他 这边已经跑完了，也就说你这个其实如果你发现啊，就是你这个效果不好啊，你可以重新再 调整一下，你看我这是已经是改了一次了，他第一次效果是不好的，那我把这个啊，他的这个设计规范给去掉了，直接把这个页面需求发给他，让他去生成。 因为这个 facebook 背后也是一个大模型吗？但是不知道他用的是哪个大模型，他也是能理解你这个啊，你的这个要求的页面啊，然后去生成这样的一个界面啊，所以说你这个也是相当于抽卡限制的，如果不行的话，就是你让他再去调整，直到你满意为止，那么你也可以去调，可以去修改，比如说这个 购物车这个零不应该显示在这个地方，你可以点击这个，然后再点击这块位置啊他妈，那么你就可以去修改，让他 把这个购物车的数量放到这个右上角。接下来这一步就是要把这个 figure mark 的 这个这个界面，怎么把它挪到这个 code body 里面去。那么如果你是使用普通的这种 design 模式啊，就是普通的设计模式啊，那是 就是这边是可以直接点这个按钮的。如果是像我一样用这个 mac 模式，那你就要啊用一点其他的办法，比如说你要用这个点这个拷贝，把这个拷贝一下，然后呢回到这个啊，他的这个主页呢，去创建 创建一个这样设计稿，然后的话去比如说这个页面是一个首页写个名字，把它给复制一下啊，复制一下， 那么你就能把这个结构啊复制过来。那么有了这个复制之后呢，然后在那个一个界面一个界面去拷贝啊，第二个你就这样去依次去打开每个界面去拷贝过来就行了。 这边全部拷贝完之后啊，注意了，你这边选择一个这样的层，在这里选择这个层，这边会有一个这个添加到对话，然后这边就可以点击了， 你点击一下，然后他就会把这个资源的文件放到这里面去进行一个转化。但是这里面要特别注意啊，就是他这个转化是会转化成 html 语言的，所以你这边在这边要要求他转化成微信小程序，那么我们可以写一个通用的文件来方便，就是来一个进行一个转化啊， 好，就写一下，要求我这边写完一个大概一个这样的命令啊。方，就是就是为了方便我们后面每次都是不需要在这边敲文字，拖过去之后这边就在这里面放着了，然后的话我们就可以直接让他去生成 代码。 ok， 他 这边已经全部弄完了，这个首页啊，我在他弄的时候发现他会把 figma 的 这些图标啊这些东西下载下来，然后复制到这个我们的这个小程序的这个目录里面去复制到这里面去，你看，所以这个是非常棒的，我们来看下效果， 来看下这个效果啊，有一点问题啊，就是他没有显示一行两个，这个没问题，你看主要是我们看这些细节，比如说这些图标小图标他已经拷贝过来了，然后这些效果也有 切换的效果，也有那底部的菜单也是一把就过来了，不需要我们再去配置。现在唯一的问题就是我们调整一下细节就可以了，我们怎么来调整这个问题呢？其实就是把页面的名字啊，比如首页把这个你就这个问题描述一遍，对吧？首页的商品啊，必须是一行两列 就足够，剪短就行了，你也可以更加描述啊，详细一点，比如说首页要怎么展示空隙是多少，这个就属于专业的角度了，如果你 啊不是，如果前端专业的话，你就告诉他要一行两业，让他调完，调完之后再来改，包括后面所有的这个问题的调整，其实都是这种方式，你看到页面有什么问题，你直接如实去表达出来就行了，他是能够完全理解你的话的。这边已经调整完了，那么这个效果其实是还行 啊，目前最起码跟 figma 最少有九成以上是相似的，那么接下来就是每个页面都这么操作就行了。 ok， 我 们用刚刚的方法把所有页面都已经转化到这个 control body 里面去了，然后我们看一下最终的效果， 基本上就是还原了我们的这个 figma 里面的设计的效果，有些小瑕疵，你可以去逐步去调整 啊。这种比如说因为我们在飞哥嘛，这边是一个单独的一个弹框效果，那么你在做的时候啊，在刻的巴丁里面做的时候，你就告诉他这是哪个哪一个路口的一个弹框的效果，那么他去读取的时候，自然就会把这个东西啊给你加上去。 比如说我这边是怎么写，比如说我现在这里的啊，这个界面是购物车点击结算的弹出界面，请实现啊，是这个， 这是这一块是弹簧，那你选择是选择这个啊，这个这一块内容选择是这个这块区域添加到对话，然后加上我这个这个提示词， 就是这句啊，这个界面是购物车点击结算的弹出界面，那么他就会在这里面加上去点点击，然后会弹出，那整个下来的话，他这个还原度是非常非常高的，而且特别是一些图标啊， 这图标完全全部是图片，那么他在这边会生成好多飞格玛里面的图片，看到没，直接可以一一对应起来，这就解决了我们去到处去找图片那个问题了。 所以说整个下来啊，很关键的这一步啊，从飞格码转到这个微信的原声代码，整个过程是非常顺畅的，已经超乎我的意料啊，我也是第一次用这个啊飞格码进行转化，那效果是非常不错的，而且我们的代码全部是原声代码。那你做完这个事之后呢？那接下来这一步就是要去 让 ai 去阅读你的项目和产品文档，来做一个数据库的设计。那为什么要做这一步呢？其实是为了我们后面这个，我们的后端程序也好，我们的微信小程序也好， 能够去啊读取我们这样的一个数据库的一个设计结构啊，方便后面所有的这个前后端的数据的对接。因为现在你看了所有的数据其实都是假的数据 啊，都是测试数据，不是真实的在数据库里存储的数据。所以这一步我们一定要提前，相当于打好一个地基啊，做好一个设计图一样，让 ai 在 生成代码来说能参考这样数据库设计，这样，因为我们所有的这个 对接或者我们的功能啊，是分散在各个系统的各个地方，比如说你在这里有商品列表，对吧？你在订单里面也能看到商品的信息， 你可能在后台的这个页面里面也能看到商品信息，那这个商品必须来自于同一个数据库集合，如果你不提前做好，很有可能就是大模型在上下文长度超过之后 啊，在这个地方用的是数据库集合 a， 在 另外一个地方用的是数据库集合 b 了，那这样会导致重复设计，可能会产生不必要的这个问题啊。所以在这一步我们要让他去帮我们去先设计一份基础的这个数据库集合。那在这一步 如果你是有编程的基础的话，你是可以根据啊页面上这些元素啊，比如说商品有哪些信息，比如分类，对吧？然后小图标，然后名称啊，类型，名称、价格， 那么你可以根据这些元素呢，根据你的这个自己的这个产品的定义文档，自己去设计这个数据库也可以，那如果你没有变成基础了你，那你就让 ai 家帮你设计一份数据库，可能会有问题，到时候再去调整，这个就是看你自己了，一般 如果说有技术基础啊，建议还是自己去设计，这样的话你会比较容易去掌握，比较好修改。那我们这次演示还是让 ai 来帮我们去设计吧，就我们让 ai 去阅读这个 prd 文档，然后呢去阅读这个目录下面的所有的这个小程序目录，因为小程序的页面里面其实有很多这样的交互数据的， 有很多，这样的交互数据就我们希望他阅读完这些所有的数据之后啊，自己能思考推导出来啊，设计一个符合我们这个标准的一个啊，这样的一个数据库集合，如果这个项目很大，那这样的读取肯定是不可行， 不可行的，所以你的项目如果很大，你肯定最好是人人工去设计一份数据库集合，那这种小的项目你可以让他自己去扫描 好的，他这边设计出来了一份这样的数据库设计文档，就如果你看懂的话，你可以大概看一下， 就因为很有可能这里会有一些过渡设计啊，比如说有些功能可能是不要的，那么你就直接告诉他，比如说 啊，我这边优惠券这边不需要，那我就可以给他去掉就优惠券，而且还有别的设计，你自己觉得你可以去参考，去筛选，如果你自己看不懂的话，你就可以不看，让他去走下一步就行了。 接下来呢，你就是要去在这个 rules 里面去啊，要去做一个调整，那为什么要这样做呢？就我们在我们的工程这个目录里面啊，要特地的说明一下，如果有针对这个原数据库的修改啊，一定要先访问这个文件，就是 ai 一 旦 要对数据库进行读取啊，增加编辑啊，那么去阅读这个文件，因为你已经帮他设计好了，他需要去遵循这个设计规范就行了，不需要自己再去额外去做一些重复的事情，所以这里面是非常重要的啊， ok， 你 就这边写一下，就是如果是要需要使用和设计员数据库，请参考 the base 点 design 点 md， 如果新增 ok， 你 这边加好，那么他后续的所有跟数据库相关的设计变更都会以这个文件来作为一个中转和参考的对象。 那么在数据库设计完之后，你就要开始去做这个后台管理系统。为什么要做后台管理系统呢？是为了方便我们在小程序前端的时候进行一个数据连调，因为现在小程序端其实展示数据是模拟数据， 加上这个系统他也不算大，对吧？我们可以先把那个后台管理系统先搭建起来，这样的话我们可以添加数据，然后前后端能联调起来，就非常方便了。 那么在创建这个后台管理系统之前呢，我们一定要想一下，就是后台管理系统到底要管理什么？可以去观察小程序端这个每一个页面中的元素的这些展示的这些元素啊，然后比如说名称啊，描述啊，价格啊，那么这些就是商品就要管理的东西。 然后的话我们采用的是什么呢？是一个页面，一个页面来创建，如果你一次性让它生成太多页面，很有可能会有问题。 所以呢我们准备了这样的一个提示词，来让这个克里巴里去阅读我们的这样的一个情况，然后选择这个 prime 模式，最好是选择这个 max 这个大模型， 然后呢提交之后呢，那在这里的时候，大可能包里很可能会从这段电话里面啊拆出两个 part 出来，就说他会去，因为我们有了这个数据库设计文档，但是其实我们的 cloud base 里面是没有任何数据，也没有建数据集的，所以需要他帮我们去部署化， 要么就自己你手动去啊，云函数里去云数据库里面去创建数据库，要么就让他自己去抽象。那么我在发送这个提示字之后，他就在跟我提问，然后呢发现这边要抽象这个 color base， 然后这边呢我提供一些信息，然后就开始去执行这样的抽象了。 如果你在发布这个提示词之后，没有出现，没有出现这个数据库出式化的话，你也可以单独写提示词，让他去阅读这样的一个数据库设计文档，然后出式化到 cloud base 里面去，那么他也会向你索要这些啊 cloud id。 那 弄完之后呢，我们就可以看到，那弄完之后呢，我们会看到打开这样语音开发， 然后在你这个云开发里面就会有几九个集合啊，这个就是刚刚他出使化完，出使根据我们数据库设计文档出使化的一些基础的数据了，那这样的话相当于就数据库就搭建好了，搭建好了那我们就 啊继续我们的这样的一个后台管理系统。那我们把提示词再重新录进去之后啊，把重新 重新弄进去之后呢，它会给我们一些提问啊，我们去回答就好了，那么它就会生成一个这样的一个计划文档啊，然后你可以看一下它的一些说明，还有一些技术站，技术站我们已经要求它必须使用 element ui， 然后的话是一些数据流， 这些弄完之后没什么问题，那么你就可以点击这个 build 来进行一个开始的一些开始编码了。 ok， 他 这边已经执行完了第一个计划，他执行完之后呢，本身这个项目应该是在这个阿德密目录，但是他目前是放在外面这个目录，所以说他的所有的后端代码都在这里，跟这个 wechat 是 平级的，相当于他是个主目录了。但没关系啊，执行完之后呢， 那这边的话就是，呃，会有一些问题啊，打开页面之后啊，会有一些问题， 比如说，哦，他这边跑完之后啊，因为我出手画的时候是有一部分数据在这里面的，所以打开就能看到那分类，也能看到其实页面的样子不是说很美观啊，这个你都可以自己去调，主要是看他啊，有没有连接我们的 cloud base 的 数据库，对吧？ 那我们可以看一下，比如说我现在编辑一个，那么在这里的时候出现一个问题什么呢？就是你上传图片可能会上传失败，那我这边也是让他来修复这个问题，那么在修复的时候他就告诉我要去 call the base 配置一个安全域名，那么这边也是给到了这个链接，那你点击之后去配置就可以了。 那我们这边可以上传一个咖啡图片看一下。 ok 啊，这边是可以的，那么我们这边就是保存一下，好，保存一下，然后图片看一下它有没有显示正确， 如果说没有显示正确，那我们就要去看一下它是不是保存有问题，这就是需要我们一个页面一个页面一个问题一个问题去调整了。目前来看我们先新增一个吧，我们新增一个商品 保存成功啊，在这里新增的商品这个图片是有的，编辑的时候这个图片没有保存成功，相当于是那我们就会让他来修改这个问题，通过刚刚的方法呢，我们就一个页面一个页面去实现就行了，这边也会有统一的这个提示词， 这边呢也有这样的提示词来辅助大家去完成啊。接下来的页面你可以使用这种学习的方法，就让他看一下你已经完成的页面是什么样子的，然后呢他这边的话就很快能够去做出来，做完之后 啊，做完之后你大概是这样子，有四个这样的管理的入口啊，然后比如说分类啊，商品。那么在商品这部分呢，一开始第一把的时候，他是没有去啊，去有规格这样信息的录入的，就在我们的小程序里面是有些规格商品啊，比如说，呃，你看啊，比如说这个 在我们小程序端点开这个加号会出来这么多规格，那么一开始第一版的时候在后台是没有这样的配置的，那你也可以在对话的提示里面加上这个，就是让他去阅读这个数据库里面的设计，因为我们数据库设计里面是涉及到了产品跟规格是有个绑定关系的，所以为什么说这个 啊？数据库文件设计文件非常重要，就在于这里，就是你可以去发现一些不一缺失的东西啊，然后让他去读这个数据库设计文档，然后他去补全这样的功能， 那很可能你每次的这个这个完成都不一样，就是你要去检查一下是否缺少啊，缺少这个不一样的功能，那么检查完成之后啊，就是你后台录入数据没有问题，读取数据也没有问题，那么你就要接下来一步，就是把小程序前端 啊这里的模拟数据，每一个页面的这个模拟数据要对接真实的这个我们的这个 cloudbase 里面的真实数据会有没数据了，所以接下来一步就是小程序的转换，我们再把这个小程序啊对接这个真实 cloudbase。 之前呢，我们可以看一下，就说我们这个页面数如果不多啊，比如说我们这个现在的页面数其实不是太多 啊，只有几个五六个页面，而且我们现在其实只要替换的是小程序里面的模拟数据，替换成真实接口，所以呢我们可以在一次替换中让 club clubbody 去完成所有的这个 club clubbase 的 这个对接。所以呢提示词这里面有几个关键的点。第一个关键的点是什么？就是 我们一定要让他按照我们的数据库设计文档里面数据结构去对接，因为这个数据库设计文档是前端后端全部的功能都包含在里面的字段是能对齐的，这个是非常关键的。那第二个呢，就是 我们是让他要保证就说只修改我们的这个模拟数据，我们界面的这个元素啊，界面这些代码是不用动的，因为小程序这个界面是 全部使用的是我们的模拟数据，它使用的是数据，是跟我们这次的改动是没有关系的。所以呢我们在这个提示词里面一定要去告诉他，就说你这次的修改，你这次的修改只针对我们这 colorbase 的 对接，然后的话是不需要去修改我们的这个 不需要修改我们页面中的元素的，然后的话就是这边就这两个是最重要，一个是什么，一个是要参考我们的这个数据库设计文档。第二呢就是啊，我们只改这个数据层的对接 啊，其他都不要动。那你发给他之后，那我这边发给他之后，他就开始去找这边微叉的这个目录里面的所有的页面，然后把这个数据都抽出来，出来之后去阅读我们的数据库设计文档，然后去一个个去退换，你看他每一个都， 每一个每一个这个页面的这个 index 点 j s 这个文件啊，都去读取了啊，都去读取了，然后把对应的这个模拟数据替换成我们的 cloudbase， 我 可以就这样看，一直替换一直替换，那你弄完之后你就能看到是这样一个效果，那么这里展示就是真实数据，我们可以看一下后台也是这三个商品，然后的话 你可以去把它测试一下，比如加到购物车，那你在这边就能看到， 那这边就能加载正确的这个图片名称，那你可以去改变它的数量，然后的话你可以点击去结算， ok， 下单， 就是在这边能看到所有的请求都都是调用的这个 d b 点 collection， 说明我们已经跟 cloudbase 已经对接上了，那么你如果有什么其他的问题，就是如果说，哎这个数据加载不出来，那么你去把把这个错误啊，比如说我这个错误你可以直接复制，然后呢 放到你的 control box 里面去，让他去解决你这样的错误啊，就是这一步，在这一步替换，替换的这个过程中啊，大概能够百分之九十的基本上的错误，能够完成百分之九十的功能。如果你缺少功能呢？就你个个一个去调，比如说我这下面也是进行了一些小的一个一个调整啊，比如说 啊，比如说我们需要这个上面列表点击的时候，需要弹出这个规格的选择啊，就是在这个地方 就这个这个是来自于我们后台维护的数据，那么他之前弹出来的是一个啊，是一个假的数据，所以我们在第一次替换的时候，他是没有把它替换掉的，所以我们要去跟他去绿化，让他去替换。还有一些别的错误啊，都是一个个去调。 那这到这一步其实就是你的一个具体的页面调整了，是在一个大的框架已经完成了，所以这样的话是很快的，因为你的 基本上所有的页面都出来了，那么大模型在对你的这个整个页面里的某个局部界面调整的话，它的准确率是非常高的，因为你上下文已经有了，页面的结构已经有了，总比从零到以一这个过程是非常简单的。 那你所有的调完之后，像我这样调整完成之后呢，你就能看到订单啊，这些数据全部都是从后台这边加载过来的，就能看到这个，你就点这个所有的数据都是从这里加载出来的。那你也可以去云开发这边，这里面去啊，数据库里面去查看你的这个产生数据啊，他这边也是有的。 那这样呢，像你全部调完之后，包括后台啊、小程序啊，跟我们的真实数据库对接商对接完，你测试没有什么问题，那么你就可以去给他部署到线上去了。那小程序上线呢，是非常简单的， 因为我们使用的是云开发这种方式啊，那么直接去点上传这个就可以了，那么你还有一个后台呢，比如说你现在这个后台系统，那怎么去部署呢？也非常简单，那 clubbody 这边 提供了这种集成的方式，你点这个啊，点这个部署，那么你就能像我这样，就是出现一个这样的一个任务列表，它就会把这个项目啊推到它这个 cloud studio 里面去，然后部署完之后会有一个这样的链接地址， 那这个链接地址呢？就是可以直接上打开可以看到，那么如果你想要自己的域名的话，你也可以去这个啊，腾讯的这个后台里面去配置你的这个自定义域名，然后解析到你的这个地址里面去，那你这样就完成一个前端的上线了。最后我们来总结一下，我们在使用 color body 的 时候啊，从设计， 对吧？使用 fig 码的这个 make 功能啊，根据我们的想法，从设计生成的界面，然后再从把界面从 fig 码的界面，因为它是用 react 啊，转成我们的微信小程序的前端代码。然后呢我们再让这个 colorababy 给我们生成数据库设计文档，最后 生成数据库设计文档之后再生成我们的后台管理系统，然后再去完成小程序的对接。所以整个过程其实是从界面就是你 你的产品的思想啊，是一个文字，那么变成一个具体可见的界面，然后再把这个界面转成我们的小程序的语言， 转完之后，你开始需要去总结一个数据库设计文档，因为这个文档是所有的前后端的一个扭扭转的一个流行，一个核心是一个核心的东西，如果你没有这个东西，那么很有可能会导致就是你的数据库设计，你的集合的设计是混乱的。 如果你是有经验，你可以自己去设计，如果你没有经验，那么你可以让 ai 来帮你设计，让他来遵循这个文档。那这样我们前后端所有字段都是对齐的。那最后你最后你完成前端对接的时候，那么只要改的是 我们的模拟数据那一块，你不要去动页面，那个页面出来的效果就跟你当时在斐格玛设计的那个界面效果是一样，这样的改动是最小的，也是效率最高的。那 ok， 那 本期视频就到这样，如果你对 ai 编程感兴趣的话，可以多多关注我。

大家好，我是黄俊华黄老师，我们这一小节来使用我们的 q 的 八 d 这个 ai 创建我们整个家电维修公司和在线预约这样一个系统的首页，这个首页是最重要的，那么我们看一下它的这个脚本，脚本是最重要啊，这里涉及到一些图片， 那么我们这里要重点告诉他，如果说整个项目会用到一些图片，我们要用 font， 而是我们的字体库，如果用到图片，请用图片文件夹里的素材，找不到，可以用网络图片， 我们本身这个文件夹里面图片是不是有环境啊？然后维修项目啊，员工图片，那么他会根据他 ai 去识别这个图片的内容，他的标题，然后去生成对应的模块啊，我们在 ai 这个脚本里要告诉他啊，这一句话是非常重要的， 然后其他的设定时间啊，然后是颜色搭配，这些不是最重要，最重要就是这一句话，那么我们打开我们的 code 八 d， 那 么本身打开以后这是默认页面啊，我们首先是要打开我们的文件夹，你放 系统的时候，你要放在哪个地方，那么我们打开我们的这个文件夹，就是我们代码要放在哪里，我们指定啊 code 八 d 的 这个 code 代码这个地方点选择文件夹 本身，我们这个从零开始新建文件夹，然后把建了一个图片素材文件夹，这个是代码是为空的啊，我们现在左侧 资源管理器可以看到我们的这个图片，但是代码没有啊，我们右边的时候，那么我们在这个时候复制，可以从这里复制过来脚本到我们这个地方来，他这里会跟一张图片，他可能从 ppt 过来的时候当成图片了，我们先把这里全部删掉， 我们从我们的 ppt 复制 ctrl c， 那 么我们可以先打开一个记事本，然后复制到记事本里面，再 ctrl x 切到我们的 qq 八里的这个聊天这里，那么这里要注意我们本身它会有其他的 gpt 模型啊，五点二啊 max， 那 么我们默认用的是哪个啊？ default， 然后在这里点这个发送请求， 那么他会开始根据我们的脚本，那么他来思考，他将生成一个全新的四同首页，我们告诉他是用 photoshop， 看到没有，他就用到了 photoshop。 五点三，然后字体库用的是仿特斯隆纯 c s 的 动画，那么我们不希望用 g s 的， 因为有些做前端界面的话， g s 不 一定很通，所以说我们用 c s 来告诉他，那么配色根据素材图片的优化，那么他这就开始创建了 图片素材，那么我们一定是要告诉他使用图片在图片文件夹里，我们前面讲图片素材的时候，为什么去哪里下载啊？为什么要怎么命名？ 就是因为我们最初的我们的这个 code 八里的 ai 会去分析我们这个图片素材。好，我们等待它这里生成，生成完以后我们再来看一下它的一个效果，生成完以后左边这里会出现 index 点 h 节目啊 啊，在这里出现中文啊，这里看它已经生成完毕，生成完毕，左侧这个 index 点 html 已经存在这个文件夹里面， 它生成完毕会告诉我们整个项目的特点，当然说你也可以把这个特点啊，我们在这里这上面是可以新建的啊，我们新建文件，那么比如说我们这里做一个说明点， md 文件啊， markdown 文件，那么我们可以把这个 呃，说明文件我们 ctrl c 复制过来啊，你看一下特色，那么如果说老师是你问你或者问 a 用到了一些技术，就可以告诉他这一块。 然后接下来回到浏览器，我们看一下我们刚才的 code 里面，那么这里是 index html， 我 们打开它，那么这里啊就是我们生成的这个页面，看到没有？这个页面就是已经生成了， 大家说这个时候生成页面以后，那么你可以改变，那么我们后面再教大家怎么去根据我们这个页面现成的去改动它适合我们的要求，我们先把这个首页第一稿先生成。

大家好，我们这一小节来给大家讲一下国内原生的 ai 集成开发环境有哪些。那么我们首先看一下， 第一个代表的是我们质检公司，然后第二个是我们的阿里公司，第三个是华为公司，第四个腾讯公司，第五个百度公司，那么国内几家大型的公司他都有对应的好，他是最优秀的，我感觉个人啊吹那么质检公司的， 然后是阿里的通易云码云码，华为的云码到 code r 四，然后腾讯云代码助手 code body， 百度文星快码 code， 那 么主要是这五个，那么这五个来说，那么对应的它有官网地址，在这些官网地址上面，你可以去看它的文档，看它的说明， 同时可以再去下载啊，我们都有教大家怎么去下载，然后基本的使用啊，视频都有。然后我们来看一下它包含了哪些模型啊？这个也是我们本个课重点的， 对于我们林曼来说，他在实际的他的开发工具里面没有标明，所以说我们就没有列出来了。那么最多啊，最全的是我们字节公司的区，包含了豆包， mini max， 然后是 g l m， 然后 deep sick， kimi 和千玺，然后 cold art， 然后华为的云马刀，主要是 g l m 啊， deep sick， 然后 coldbody， 腾讯公司的，这个主要是 g p t 为主，然后我们的 comit， 百度的，那么包含 kimi， dibsak， g r m 和 mini max， 主要是这些模型，当然说这里面模型来说，那么叉字完全都可以免费的，应该是它 负责了费用啊，然后 code arts， 然后它华为的这个用起来也是可以的，然后 code body 呢？然后用起来也相对可以，但是它收费比较明显，你用一会儿写一个小项目，可能就用完它的 资源分了，然后 command， 那 这个就一言难尽，等下给大家看好我们给大家建议的啊，根据我自己的个人使用情况来说啊，给 我们首先推荐的是 tree id， 然后是我们第二个层级，然后我们的阿里的林马， 我们华为的 code arts， 然后第三个就是 code 八零，那么这个收费，呃，有点严重啊，需要它免费使用两个星期，然后是 cmd， 这是最层级，最建议用的是 tree， 林马和 code arts， 那 么我们回到我们的页面啊，我们本身来讲，我这里的话，先把它最小化， 准备给大家。几个工具我都测试过了啊，包括写实践的项目，那么这是我们字节的，它的图标，那么这是 code arts， 华为的图标，这是阿里的凌浪的图标，这是腾讯的图标， 这里是我们的 visual studio， 那 么其实这几个包括 command， 它和我们的 visual studio 都是类似的，它是源于它去写的一些界面。那么我们首先看一下 tree 啊，那么是字节公司的，这是默认的一个项目，在右下角，那么我们可以去操作， 在同时在这里，那么我们刚才练的模型都在这个地方了啊，那么当然说我们先看一下这几家的公司的，然后第二个是我们宁玛，宁玛，那么这是我们阿里的，阿里的打开项目以后他才会有，那么我们吹的话，那么这里 打开文件夹的话，都是在这个地方啊，比如说我们打开一个项目啊，我们看一下，给大家操作演示一下，比如说初一开发，那么 code， 那 选择文件夹，那么所有的这五家公司的基本上左侧都是原码，右侧啊，这个是我们初一公司的啊，这个就不说，它是非常好用的， 最推荐的。然后第二个就是我们的这个林马啊，看到没有？林马，然后我们打开项目，那么我们找一下啊，我们它我也写了实测的项目，也录了视频，那么这是林马的项目 code， 那 么打开它以后，那么同样左侧是自用 管理器，那么上面是菜单这一块，中间是显示，右侧是我们的输入框，输入框是智能问答，那么零码，阿里同意零码，所以说我们在这里它没有显示出它的模型，但它实际有自己公司的啊。 那么接下来我们来看一下我们的华为 code arts， 打开这个图标，那么默认它的界面，那么没有打开文件夹的时候，那么是打开新建，右侧是它的一些模型作者。好打开文件夹啊，我们 code arts 也给大家有讲一个啊， 那么看一下 code art， 那 也有讲一个十三项目，那么打开打开以后，它也是左侧是资源文件夹，中间是最终可以显示代码，然后右边是我们的 code art， 但是说华为的这个需要你去登录啊，注册华为账号，这是它的一个模型。好，我们 再关掉，然后我们看一下腾讯的 qq 吧里， qq 吧里，那么你有两周的体验包已用百分之九十啊，这个我就不去打开文档了啊，也写了一个项目，大家这里 因为它这个呃收费有点太，感觉，一个项目可能没做完就去交费了，但是它本身因为用的是加了 gpt， 它这个收费也是 没办法啊，那么我们打开它，因为它我们打开文件夹以后，同样左侧是我们的文件夹，中间是代码，右侧是，那么这是它的模型，看到没有？ g p t g p t 国外的模型本来要收费，它接入进来，所以说它有收费，你要用 g p t 写，可以用它，但是接受费用。好， 那么我们看一下 comit 啊， comit 这个呢？默认打开是这个样子，那么它这里为什么不是一二三？那么敲一下英文啊，然后是中文啊，中文它这个是输不进去的，你看，好吧， ctrl 斜杠输，看到没有？我想输中文输不了啊，所以说它这个事我们就不建议大家使用在这里。好，我撤也没撤它了啊，好，我们本小节说到这里。

前两天发了一个笔记，就是说 pencil 的 mcp 搭配着 card code 去用的话，它能够画出很精美的页面，就是能够让人觉得很震撼的一个 mcp。 但是可能有的同学觉得 可能使用没有达到它预期啊，我觉得主要是两个原因，一个是可能你没有一个比较详细的文档， 第二个是你没有使用 card code 的 o p s， 因为只有结合这两个，我觉得它才能够发挥一个比较好的效果。那我可以给大家看一下，就这是我自己做的一个产品，就是已经上线了部分功能的， 这是我自己准备新增的一个模块，然后我这个产品它其实是一个电商作图的一个工具，就是我上传一个产品图片或者链接，我能够跟你分析它的卖点场景，然后呢去自动去生成你的标题，你的描述，你的详情页、文案， 然后再去给你申请深层对应的一个呃，滚动图，还有详情图，还有视频，这整套它其实有点像工作流。然后我加这一个模块的时候，我是完完全全用了这个 mcp 去画了一个界面，可以给大家看一下。我这边左边呢是第一版， 这边是一个中版，我可以跟大家先看一下这个第一版的效果其实勉强也能用，对吧？它不是很差，我觉得它这里该有的板块它都说有的，只不过它会更加的就可能没有那么的精美吧， 但是模块是有的。然后这个其实也是要基于我们有一个比较完整的功能文档，你才能够让它去画出你想要的功能。可以看一下我这个文档，其实我这文档是专门去为了这一个 我们这个模块去做的文档，就是可以看一下这文，因为我会有一些跟 ai 的 沟通记录，会让它更新到这个地方，然后现在这里它就是一个我中版的 prd 加沟通记录，嗯，就有，现已经有超过一千多。行了， 这基本上就是把我一些要做的事情给它讲清楚，就是我一期我要做什么东西，就是我要上传一个图片，然后 ai 贴的卖点，然后生成文案， 然后生成一个视觉素材啊，这是我一期要做的事情，然后社会跟我，就我把，就是每个工作模块我要做的什么事情我都已经写上去了，就相对于 其实就是个 prd， 因为你不管是跟设计去打交道，就你在工作生活中，你去跟设计去沟通也好，跟开发去沟通也好，你都需要一个相对比较完善的文档，对吧？更何况它是 ai 嘛， 就是你其实也是要一个比较详细的文档，做一个前提嘛，才能够让它去输出一个你喜比较满意的结果。 我觉得这文档给大家看一下，当时看了一期嘛，一期其实我觉得不满意嘛，但是其实我觉得你看这个效果它很差吗？也没有吧，我觉得就是我刚画圆形的时候，我其实可能我还达不到这个效果，然后它也没有很重的 a i v， 你 看它的一个，嗯， 配色也好，但配色其实是因为我前面做的页面已经定好了这个绿色，然后就看下面，你看他的一些间距好，他的一些圆角啊，还有一些，嗯，就字体设计我觉得是个能够符合要求的，就是如果有做设计的同时可以看一下，我觉得这个他其实是已经算比较 ok 的 了。 但是我后面就是在做的过程中我会发现个问题，就是可以看一下就是过程记录，就是我发现这个页面我可能觉得他好像逻辑有点不太对，因为我们这个文档虽然说可能会比较，就是我的第一版文档，他可能也不是很清晰的，那我就是跟他 先去让他画个圆形给我，其实相当于这就是我们自己在产品的做产品的时候，他的一个圆形图，那我在画圆形的时候， 我可能觉得有些地方逻辑不太对，那我可能就会去反过去改这个文档，那其实跟这个 pencil 去交互的过程也是一样的，就是那些画出来，那我觉得不对，那我有时候可能我自己没有理解他的一个逻辑，那我就会让克拉克去帮我去解析一下这个逻辑，就是按照他的逻辑结合我的文档，那这个页面他逻辑是什么样子的？ 看一下，就是我发现我看完之后，我发现他其实是不对的，因为我们这个他应该是有个递进关系，就是我们这个产品的卖点，还有他的一个场景， 那我们才能够去生成他的一个标题，还有他的产品描述，还有他的详情文案，那我的图片还有视频，他肯定就要基于这个文案去，嗯，生成的，这样才能够图文一致嘛，对吧？他才能够达到他那个表达的效果嘛。 所以我就说我觉得这个有问题，那我们其实就再讨论一轮，就是我们会把这个流程再给他优化一下，就是我们优化了变成 我在第一个页面，我去弄一个图片，我一期现在做的就是你传图片，然后他跟你分析他的适用场景加他的卖点，然后你觉得没问题了， 那你就去他就会去识别，去分析，去生成你的文案，比如说你的标题描述这一些，这里你其实也是可以去编辑。就你觉得如果他说的不对，那你可以去改，然后改完之后会给你说明他哪些是要生成的东西，你去选一下， 就是这是我们跟 ai 去沟通之后，嗯，最终定的一个业务流程，然后你可以看下这个页面，我觉得这个页面其实它不算差的，就是你 不管配色也好，还有你一些字段，它的一个字体层级，它的一些按钮它我觉得它都是比较显眼的，就是符合一些文，就是在设计过程中的一些原理吧。 然后他生成之后就下滑有个按钮，他这里没画完，但是我们去做功能的时候，他的扣的会跟我们自己去完善嘛，然后就到去生成了一个叫生成状态，就是我觉得这个效果还可以，就是你可以看到他在生成什么东西，然后他的图片还有他的一些视频生成过程，还有他这些东西， 就是我觉得是个比较完善的，就是你可以看到他其实就是如果说我现在自己画圆形的话，我觉得我要画成这样子，我其实是比较困难的。也别别快说我会要花比较长的时间，就是 ai 能够帮我们提高这个效率嘛，到最后他是这样子的，就是一个个人空间的，他就是这样子， 我觉得这也没问题。就是你如果说你真的是一个呃做设计出身的，他就是这样子，我觉得这也没问题啊。就是你如果说你真的是一个呃做设计出身的，你要去写代码， 那你其实要花很多时间。但是我们的产品它其实第一期，嗯，我们还是就是一个敏捷开发流程嘛，就你要先把它功能上线再说， 然后看能不能符合一个大家的需求，有人用了你再去迭代嘛，就是说你第一期你就做很精美的画面，这可能在这个设计上花了很长时间，但是你可能你做的功能其实大家并不想要，那其实也是白搭嘛。 所以我觉得用这个 m c p 去快速出一个页面原型，然后呢这样的客人快速跟你去搭这个页面，我觉得他配合起来是效率是很高的，大家可以看的是会有很多的沟通，一个沟通过者 就是你可以每个页面你都去问一下，就你让他边画边问，就我觉得这个页面效果是满意的，给大家之后再看一下，就是你看这个生成页面，对吧？你一个标签也好，按钮也好， 他这个是做过醒目的，然后这个是，嗯分析文案的一个部分，我觉得也还可以啊，这就是他的按钮，他也包括他的积分，因为你积分消耗其实相对是一个比较敏感的一个，知道吗？他用个橙色，一个相对一个醒目的字体，所以他其实也是考虑到了的 这个地方就是他几个模块，几个间距把光都其实比较好的，这里他可能有的图片只能不一样，但这个其实我觉得现在不重要嘛，你肯定是要边做边优化嘛，但是我觉得一期你达到这个效果其实已经 ok 了，这最终的效果，所以我觉得如果说没有达到这个预期，那，那其实大概率就是你 一个是你没有一个比较详细的文档，就是就说你是从零到一，你去做个页面，那你其实需要让他去调研一下呢，就是可以看一下，就我们这个产品，我其实是第一期做的时候，我们是去做了调研的，就是这个， 但是我们是做了调研，然后去大概分析一下这个页面的一个配色，还有一些结构什么样的，就是其实基本都分析一下，然后分析之后你其实也是完成这个文档，然后再跟 ai 去沟通，你觉得是大概一个什么配色比较好，然后你决定了之后，那你再让他去画。 嗯，大概是这样的，就是如果说大家对这个感兴趣的话，其实可以去提一些问题嘛，我看再怎么去跟大家分享一下。然后如果对我这个产品感兴趣的话，也可以聊一下，因为这个我自己也在做电商嘛，就其实这是为自己做的一款工具，如果大家能用上了，其实是更好的。

大家好，这两天我讲 ai 智能眼镜的视频评论区总有人说 ai 编程做不了产品，比自己写还累。 今天跟大家分享一个我这两天用大概两三个小时做的小玩意，再次声明，我一句代码也不会写，完全是用 code body 加上 cloud 模型完成的。其实我一直想做一个研究，就是中国民居的眼睛谱系。这是一个巨大的学术工程，学院里很多老师和同学都在做相关的工作。 做过几年中国传统村落的评委，也算是半个专家，但很多类型还是没有现场去看过。虽然有不少学术专注论文，但我想要的是一个在地图上可以看到流变脉络的完整的谱系。这在以前是一个极大的科研课题，叫做大量人工的文献和图纸标注工作。 这次去云南，我第一次看见了哈尼蘑菇房和傣族的土场房，非常惊喜，但后者之前了解很少，险些错过，更让我有幸致做这个应用。我始终没有给过模型任何知识输入，就是基于模型自己的知识和自行去网络搜索， 这是网页版啊。在中国地图上可以看到几十种民居类型和典型案例，点击任何一种民居地图，会自动放达到它的分布区域，展开所有的代表性案例，可以看到哪些是国保单位，哪些是中国传统村落。 更关键的呢，是浦西连线。你能看到这四十九种民居之间的氧化关系，用不同的现行和颜色区分，哪些是直接氧化，哪些是纤细遍体，哪些是气候适应，哪些是结构升级。可以说，这就是一张中国民居的知识图谱，铺在真实的地图上。 举个例子，你能清晰看到北方合院体系怎么随着人口南迁移过南渡，逐步演变成南方的天井式民居。 甘蓝式建筑怎么从傣族竹楼、侗族甘蓝一路分化出苗族吊脚楼、土家吊脚楼，合院怎么在客家人手中变成卫龙屋，最后变成福建土楼？这些演化脉络以前散落在几十本专著里，现在一张图全都能看到。 至于这些眼睛关系呢，我也让模型详细列了出处，很严谨的分了三类，学术专注、明确论述的学界有共识，但没有单一专注、直接定义的，以及缺乏直接学术论证的建筑学推断。 第三类，经过跟我的沟通的模型删掉了，其中比较牵强的一些，左边有个侧边栏，可以按十一种建筑大类筛选，也可以按省份筛选，右边点开详情。每种民居有二十多个属性维度，结构体系、空间格局、屋顶形式、墙体材料、气候带、 地理单元、起源年代鼎盛、朝代核心特征全部结构化展现。还有个小程序版本，这也是我做过第一个正式上线的小程序， ai 自己测试修改并通过了代码审核和被爱。 你去某个地方旅行，想看看附近有什么传统民居值得去参观，打开就能用。小程序功能跟网页差不多。目前一共有四十九种民居类型，覆盖十一个建筑大类，几百个具体案例。 每种民居二十多个属性维度。目前的封面图和典型照片是 ai 自动生成的，我几乎没有做任何整理和校验。作为一个产品，当然还有很多的工作可以去完善，但这样一个东西以前只能停留在我的想法里，不会变成一个工具。但是现在 ai 三个小时就可以实现， 而我要做的只是时不时看一眼，确认一下或者修改要求。多年前，我在团队做过很多类似的小程序和 app， 现在没有了科研经费和程序员团队，我也可以自己快速实现了。 我们先不讨论 ai 对 程序员的意义，但对于非开发者或者我们每个普通人来说， ai 编程呢，不是让你去当程序员，而是 ai 用代码帮你做所有想做的事情，包括刚聊过的写作和这种广义的科研。而你呢，要把精力放在真正重要的事情上，定义问题，调整逻辑， 设计交互。大家有兴趣可以在微信搜索民居浦西小程序体验，也建议大家都去实现一个自己的小程序，现在真的很简单了。感谢关注未来博士，我们一起去跨界的视角，看懂未来的方向。

周五下班，我拖着疲惫的身躯，挤上回乡的大巴看着城。推开院门，奶奶正坐在老槐树下摘菜，看到我，脸上瞬间绽开了花。午后的阳光洒在院子里，奶奶摇着蒲扇给我讲小时候的事。 傍晚，我们一起在灶台前忙活，锅铲碰撞的声音是我听过最动听的。选晚饭后，我陪奶奶在院子里看星星，这就是幸福最简单的模样。

大家好，我是黄俊华黄老师。这一小节我们来看一下腾讯的 ai tencent codebody， 我 们看一下它的官网相关的资料啊， 进入它的官网，这是它的官网，官网的话相应的我们可以看一下它的一些内容，那么它这里是有价格啊，产品的描述文档 价格的话我们看一下，我们主要是用这个免费版，收费版我们看一下啊， 这个免费和收费的功能就是积分的不同，那么两百五十积分，然后是相当于是试用版，大家觉得合适了再去看这个， 然后本身我们默认进入的时候，这里是国际英文版，国际中文版啊，那么我们如果说你用国际中文版他去完成注册的话，你要选择什么的？那么我们建议大家你中国试用的时候，你可以用一个中国站啊，我们把它切换一下 中国站，当然说你首先是要去下载啊，中国站在这里的话，我们首先是登录，因为这里登录的话就比较方便，那么我们使用微信或者是手机号都可以啊，同意，然后使用微信扫码登录 啊，我这里本身就有了啊，那么使用微信快捷登录，那我们登录这个站点啊，登录站点，那么手机号到时候再去验证一下 啊，手机验证这一步啊，我就把它剪掉了啊，然后我们手机填那登录完以后，那么会跳过来，那么这里就是属于登录状态，看到没有个人主页联系我们退出登录，然后接下来我们去下载本身他这里 我们建议大家点右上角的这个下载，下载的话他是直接可以去下载啊，直接去下载，因为我已经下载过了，或者你点其他的地方去下载， 下载完以后啊，这是我已经下载好的，那么我们这是他的 code body， 那 么 win 三二叉六四啊，好像都支持他这个意思。应该是啊， exe 文件， 然后我们现在双击啊，我们去运行安装这个，那么我同意啊，下一步，那么这些建议大家默认啊，这里需要大概五百兆的可用磁盘空间啊，默认创建桌面快捷方式，也勾选上 其他的，这个添加八零命令到 pass， 然后是环境路径的话要重启啊，那么下一步啊，然后我们现在就是开始安装，把它安装到我们电脑上 啊，这里基本上要安装完毕啊，安装完毕的话，我们默认勾选它，先打开它看一下好了， 看有没有其他的，因为我们刚才是针对新手来讲，那么是这里是 get started 啊，我们开始，那么我们希望你用呃，亮的或者是黑色的都可以啊， 你都可以自己选择。那么英文那么中文简体啊，我们中文的话就用中文简体去做这个就可以了啊，那么都可以啊，浅色，深色系啊，深色系的话，你代码会相对来说，呃， 它会明显一点。导入的话，那么你如果说不导入，从 vs core 的， 包括插件快捷方式等，如果说不导入的话，你就直接跳过，然后登录，那么当然说，我们刚才是不是在那个 qq 八的 ai 这里其实已经 网页上登录了啊，然后你这里的话，我们看一下它，这里要再有一个提示啊，你可以再登录，登录的话使用我们其他的方式啊，登录就可以， 登录成功以后，那么基本上它会提示你，你 start 啊， cold body to switch to 中文简体，那么默认它 这个是英文版，那么我们你 start 啊，然后我们再来看一下啊，现在基本上安装完毕以后，登录以后，那么这就是我们的中文版啊，这是它的一个界面，那么后面我们再给大家讲一些实战项目。

小伙伴们大家好，今天感冒了，声音有点奇怪，最近聊了好多期腾讯的小龙虾。 coldbody 和 workbody， 其实是一个产品的两个版本，好多粉丝跟我说用它完成了不少以前不敢想的事，后面我可能也会请他们来分享各行各业的案例， 但也有不少人说根本什么都做不出来。今天我刚刷到一个做三 d 打印的博主，特别典型，他让 coldbody 帮他建一个三 d 打印用的汽车模型，结果搞了一坨像肥皂一样的东西，他就录视频说产品太差。 我今天就以这个为例，还原一下我是怎么用 codebody 从踩同样的坑到最终做出来，再把整个流程沉淀成一个可费用的 skill 的。 先说那个博主的核心问题，他跟 codebody 说了一句，给我设计一个铃木维特拉汽车的三 d 打印模型，并把 s t l 文件发给我，然后 codebody 就 开始干活了。 我也是一样这样操作的。酷狗八的会怎么干？他不是三 d 建模师，他是程序员，他的本能反应是找一个可以用代码驱动的建模工具。我这边选 open s c a d 开源的 三 d 建模软件，纯代码写模型，不用鼠标拖来拖去，这个选择有没有问题呢？理论上没有， open s c a d 确实能做三 d 打印模型，业内也有人用它做机械零件。酷狗八 d 很先是很认真的做了一份工作，计划从车身到轮毂、车窗、灯组、保险杠，一路排下来，像模像样的。自己上网搜了维特拉的各种细节尺寸，还生成了几张 ai 参考效果图。 接下来就是写代码，核心思路就是画三十图的轮廓，然后把这三个轮廓各自拉伸成三 d 实体，然后用波尔计算去交集。理论上交集的部分就应该是车身的形状了。听起来挺合理的，结果一渲染出来，我都 起效了哈。三个二 d 轮廓本身就很抽象，侧面像条鱼，顶面像个棺材板，前面像半个鸡蛋。三个一交集出来的东西确实像块肥皂，轮，轮子还是横着的。这就类似那个博主看到的东西，到这步为止呢。那个博主说的是对的，确实做不出来，但问题是那个博主停了，他下了个结论，走了， 我没走，扣对不对？还不死心，继续在这个肥皂上加轮毂，加后视镜加天线，结果更离谱了，所以一定要变形。失败的大巴 问题不是 code body 不 行，是这条路不通。 open s c d 的 中交交集法本质上就很难做出光滑曲面，这个汽车的曲面需要的是 nervous 或者吸粉曲面。 open s c d 连这个概念都不支持，那它做汽车就像用 excel 画油画，工具选错了， 那正确的工具是什么呢？其实有两条路，第一条是用 m c p 接管专业建模软件，现在已经有 blender m c p 这种项目了。就是，哎，通过 m c p 协议去操纵 blender 这种专业三 d 软件，用自然语言指挥它建模画图 啊。如果你追求的是精确的参数建模，那像机械零件，工业设计，这肯定能实现。但我没走这条路。为什么？因为我 做了一个经验判断，三 d 打印的车模土生，三 d 一 般就够了。你想三 d 打印出来东西本身就有曾玩巴掌大的车模，你用 blender 轻雕细琢，和土生三 d 两分钟出来的模型打印出来，肉眼根本没区别，投入产出比 完全不在一个量级。所以我选了第二条路，直接调腾讯会员三 d 的 api。 会员三 d 有 个功能，叫土生三 d， 你 给他一张图片，他给你生成一个完整的三 d 模型。 而且这个 api 现在有免费使用额度，我直接把 api key 贴给 codebody。 当然过程也不是一帆风顺，图片、 传餐的格式、文件解压之类的坑还是有一些的。但好在 codebody 踩完坑能立刻改代码重试，整个调试在对话里就闭环了，不用我自己去折腾，我也不会。搞定 api 之后呢，它先生成了一张维特拉的参考图，红车身、黑车顶的四分之三视角提交给会员三 d。 两分钟以后，模型就下来了。 这个火山、大灯轮、后视镜这些细节都很清楚，有些地方因为角度问题有些误解，所以我就让他重新生成了一遍，换了张银色侧面的效果图做参考图第二版，整体更匀称，细节也更到位。从那个肥皂块到这个完整的车模呢，核心区别就一个，换了条路径。 那这一步其实也可以交差了，但我多做了一步，把整个流程沉淀成了一个 codebody 的 skill 技能包。那什么是 skill 呢？可以理解为一个经验包啊。把我踩过的所有坑，写好的所有脚本，总结的所有注意事项打包成一个可附用的模块。下次再做任何物体的三 d 打印模型， codebody 就 可以自动加载这个 skill， 不 会重新踩坑，也不用每次再把生图、接口、地址、 api 这些重新配给它。 所有的东西呢，跟具体的车型就无关了，你给他一张椅子，他也能生成三 d 打印模型。为了验证呢，我当场又做了一个我家的这个标志，五零零八，从生成参考图到最终拿到 s t r 文件，全程是给我自动执行，不到十分钟， 最后还让库德贝里做了一个对比，网页单页面的这个腹部流滚动，五个版本一次排开，每个版本都能三 d 交互浏览，都有对照图可以展开看。所以回到开头，聊几个我觉得很重要的事。 那个博主的问题呢，不是 codebody 不 行，是它的用法不对接。这个案例呢，我想总结几条用 agent 的 心得。第一呢，有了 agent， 人不是没价值了，你让他反复去尝试收 token， 他 大概率早晚能给你做出来。小龙虾就是这个逻辑，但实践成本和 token 成本会非常高。 而我在这个过程中做了什么呢？我看了一眼 open cad 渲染出来的轨道，立刻就知道这条路有问题，不尔交集，做不出来。为什么？我知道？因为我二十年前学建筑的时候学过画画几何，熟悉三 d 建模，了解三 d 打印和图上三 d 的 基本逻辑和术语，看得出来问题在哪。一句话把方向纠正了， 所以对人的要求变了，不是要你技能全面，什么都会做，而是你要有通俗性的了解，知道这个领域大概有哪些工具，哪些路径，哪些坑。你不用亲手写代码，但你得看得懂方向对不对。 你的认知决定了天花板 a 阵子的效率，决定了完成速度。第二，遇到问题别问我，问 code buddy。 这段时间好多朋友用 code buddy， 遇到问题会来问我，说实话，我给的答复基本都一样，你把问我的这段话直接发给 code buddy， 不是 敷衍你吧？他是一个对话式的工具，你跟他说这里报错了，这个效果不对，换个方案他能理解，而且他比我懂的多啊，很多时候你觉得他不行，其实就是你没跟他说清楚。 第三，是把 ai 当成一个新来的同事，这个这个很重要，他能力很强，学东西很快，但他是新来的，他不知道你工作的具体细节，所以一开始你要有耐心得花时间跟他磨合。 但一旦他学会了一件事沉淀成 skill， 下次再做同样的事，他就非常高效了。就像这次，第一辆折腾一个多小时，第二辆十分钟就搞定了。而且一定要从简单的事做起。 我见过很多人有两种心态，简单的事觉得用不着他，我自己干，复杂的事觉得跟他说清楚太麻烦，还不如自己做。这两种想法加在一起，你就永远有理由不用他。 但如果你从简单的事干起呢？先了解他的能力、边界和脾气，慢慢加满，你会发现他能接触的事越来越多。说到底，那个博主如果不是看一眼就走，而多说一句换个方法，结果可能完全不一样了。也欢迎大家分享自己用 what 的 角度看懂未来的方向。

这是我用 codebody 制作的刊爬虫分析系统操作起来也非常的简单。首先需要准备一个刊的过往发表网站， 我准备的是包装工程的过刊刊，这里可以看到每期刊的标题和摘药。复制网站地址粘贴到爬虫分析系统中，可以多复制几个地址，这样可以爬取更多的数据。 接着点击开始爬虫，这时我们会看到定义格式化爬取字段界面，左边是需要爬取的字段，一边是原始网站，点击网站的对应标题即可定义标题字段，点击摘要即可对应论文的摘要，以此类推。 点击开始爬取。这里就需要等待系统一页一页地开始爬取数据了。最后你会得到这样的分析数据结果，词云和词频 句类分析，句类分析里包含代表范围。 最后爬取的原始数据也会在系统中显示，点击会跳转具体原文原始数据。