kiro怎么设置spec然后执行

hello， 大家好呀，今天给大家介绍一款来自于亚马逊的 ai ide 编程工具，那么这款工具呢，其实是在二五年的七月份就发布了预览版本， 在今年的十一月呢，它推出了它的正式版本。那么今天呢，我的重点不会是放在工具的介绍上，而是呢通过两个实际的案例来给大家重点的去介绍一下关于 kiro 所推崇的两种模式开发模式。第一种的话呢叫 webcody web coding 的 话呢，其这个概念是来自于 open ai 的 创始人之一啊卡帕西的一个概念，也就说简单来说，它其实是啊让我们通过人类的自然语言，然后输入给 ai， 之后呢， ai 通过对语义的理解，然后呢去生成代码，并且实现最终的一个交付。那第二种模式呢？是啊， kylo 首先提出来的这个模式的话呢，叫 spike 编码， spike 编码的话，它更像一个专业的开发团队，或者说资深的开发工程师。 这个开发工程师呢，他会在真正生成代码之前去做很多的准备工作啊，这里包括需求的明确，然后包括设计的明确，然后以及包括这个工程任务的拆分，然后完成前面这三个步骤之后呢，才会真正的进到这个代码开发的部分。 好的，那么今天的话呢，我们的节奏会按照啊，首先呢我会在我这里准备的提示词，然后呢让他先去跑这个任务，在跑任务的过程中呢，我会给大家去介绍一下这款工具的一些具体的一些功能和细节。 好的，那我们直接进入到正题啊，这是一个，这是一个我自己个人呢，平时就是用来跑一些 ai 测试，然后积累的一个提示词的模板库。那么今天呢，我们就来挑这个艺术网站的这么一个提示词，然后呢一会我们用外部抠的方式来看一下它的深层效果到底怎么样。 我们可以看到这个提示词呢，它其实是比较模糊的啊，比如说这里有有提到说我们要求要一个创意视觉艺术杰作， 那这个所谓的杰作其实对人类的理解来讲的话呢，它是一个可能非常厉害的一个作品，对吧？那么我们把这样的题词给了 ai 之后呢，看一下 ai 是 如何理解杰作的， 同时的话呢，就是包括说有一些包括像令人震撼这样的表达方式，其实呢这些表达方式对于 ai 来讲都是比较模糊的，但没关系，那我们今天就以这个提示词，然后给到 ai， 看一下它最终到底能给我们交付什么样的一个结果。 好，我先复制一下。呃，进入到这个 q 之后呢，我们先选择这个 webcody， 选择 webcody， 然后呢大家可以看到呃 q 呢，它其实主要支持的大模型呢都是 cloud， 所以 这里可以看到有 cloud 四点五四，然后 cloud 嗨酷，然后包括它最当前最好的一个叫做 opus 四点五， 那后面呢就是我们可以看到这里有一个一点三 x 零点四 x， 这啥意思呢？这个其实说的是那个托肯消耗啊，也就说那我们今天的话呢，我们就用啊现在比较主流的 cloud sos 四点五来完成我们的开发任务。好，我现在先把这个提示词粘贴进来， 然后呢我们发给这个 kilo， 因为现在我们选择的是一个外部口令的方式，所以呢啊就不需要去做，包括像需求的澄清呢，包括像设计的确认呢，以及包括任务的拆分，那么它会直接进入到一个开发的这个过程里面去。 好了，那让这个任务现在先跑着，那我们现在呢就是回过头来给大家讲一讲这个 kilo 这款工具的一些特性。 好的啊，这其实大家可以看到，从时间上来讲，这是一个我在今年七月七月十七号的时候啊，发布的一篇文章啊，那么这篇文章的话呢，其实是 kyoto 刚刚上线，玉兰玛刚上线的时候呢，呃，给大家做的一个关于这个工具的一个介绍 啊。首先我们看一下就说啊， kiro 这款工具啊，它一些简单的背景信息啊， kiro 这款工具呢，它是亚马逊啊 aws， 然后呢就是推出的一款 ai 编程工具，那大家其实都知道二五年其实是一个 ai 编程的一个非常火热的一年， 我们可以看到在海外，包括在国内有无数的大厂公司都在进军这个赛道，那么国内的包括像腾讯的 codebody， 然后字节的千万 啊，阿里的千万，然后字节的脆，然后海外的话呢，包括像这个 cloud code， 然后 cursor， 然后 kiro， 然后总之这个赛道就是今年是非常的火热，产品也是非常非常的多。 那么在那个七月份刚推出的时候呢，当时玉兰版本的话呢，其实它是一个有一个免费的一个阶段，当时我也是在这个免费的阶段呢，其实下载了这个产品，然后使用，呃，那个时候呢，其实你大家可以看到它搭载的这个模型呢，还是克拉的 solo 四和三点七，现在的这个模型呢，已经升级到这个四点五了。 ok， 那 这个 key 的 这个界面呢？它其实就是这个非常经典的这个 ide ide 的 这个编码的一个界面。那么如果大家就是有用过，有接触过这个啊 vs code 的 话呢，其实就会非常熟悉这个界面啊，那我们现在可以简单的到这里面来看一下啊， 那你包括像左侧我们可以看到啊，这里是一个文件的一个操作和查看的区域，中间呢是一个代码的一个区域，右侧的话呢是一个啊，跟 ai 进行这个互动交流的一个区域 啊，那我们现在的这个任务还在跑，我们先不管它，然后下方的话呢，就是还有一个是一个啊命令行和终端的区域，这其实是一个非常经典的这个 v s code 的 一个页面布局，我们现在就是打开几乎所有的这个啊 ai 编程工具，其实在布局上面来讲的话，它其实都是这样。 好的，那我们这里也有介绍到，我们可以看到左侧刚才有介绍过了，是文件区啊，中间是我们的代码的查看编辑区域，然后右侧的话呢，是我们的一个关 ai chat 的 一个区域啊，下方的话呢，有一个这个命令行。 ok， 那 这就是一个软件的 qq 这款软件的一个布局。 好，我们刚才看到我们的任务好像已经是跑完了啊，已经运行完了，那么我们现在来复制一下这个的路径， 到我们这里来打开看一下，刚才我们说让他给生成的这个网站效果怎么样？ ok， 我 们可以看，就是整体上来讲，其实花了大概几分钟的时间，他就诞生了这么一个非常好的一个艺术效果，我们看一下是不是能够进行交互啊？我们可以看到鼠标在这个网页上进行移动的时候，他是有 一个效果的啊。 ok， 可以 按住鼠标进行探索，然后点击一下鼠标 啊，还会弹出很多的这个中文的字，并且的话就是我自己的耳机里面是能够听到这个点击声音的啊，有一个点击的音效 啊，当多次点击之后的话呢，它还会蹦出一个一行这个文字，我觉得这效果还还挺不错的哎，还可以按住这个空格键深入让我们试一下哦。 ok 啊，当我现在松开这个空格键，我感觉它的整个设计很像是一个宇宙的这个概念啊，当鼠标靠近过去之后呢，这些粒子的效果 还会有变化，总的来说啊，我觉得还真的是挺漂亮的，比我之前就是自己有做的一个效果要好。 ok， 好 嘞，那我们就先不管它，然后呢我们来准备我们的下一个任务， 大家可以看到就说第一个任务其实很快就搞定了，那么我们来看一下下一个任务，我们来挑一个， 挑一个三 d 的， 呃，来一个三 d 地形吧。啊，这个这个任务的话呢，其实是 让这个 ai 来生成一个三 d 的 地形，这个三 d 的 地形呢，它包括了就是有山脉啊，有峡谷 啊，湖泊和岛屿啊，另外同时的话呢，在这个地形上面呢，我们是可以实时的进行这个天气参数的调整的啊，其中包括啊有下雪的天气，然后呢有这种白雪覆盖的效果，然后同时呢也可以调节这个风速啊，包括下雨的天气 啊，还要求地面要出现这个水洼，甚至于形成这个溪流。那么这个提示词的话呢，其实对 ai 还是有挺挺高的一个考验的，这里面有很多的一些细节要求。那这一次的话呢，就是我们选择使用 spike 模式来进行这个开发，看一下这个 spike 模式是什么样的一个效果。 ok， 那 我们现在的话就是第一个任务完成之后呢，我们先先创建一个新的绘画，这个时候呢会发现 kiro 其实在每次创建这个新绘画的时候呢，都是会让你去选择选择外部定制的方式还是选择 spec 定制的方式，那这次的话呢，我们来选择 spec 定制的方式。 好，我现在这个粘贴我的这个提示词啊，让它开始来执行，那这两种不同的这个开发模式的区别，等下我们就会看到在外部定制的开发模式下面呢，其实我们是 直接的啊，让这个 ai 来生成代码，在 smart 模式下面的话呢，他会先创建这个需求文档， 然后呢就是还会有设计文档，最终呢就是还会有任务的一个拆分，在这三前面的三个步骤都由我们人工来进行一个确认，确认之后呢， ai 才会进入到一个代码生成的阶段。 ok， 让这个任务先他现在在创建这个需求文档，那我们现在先不管他，我们去继续回到我们的这个 k 六封闭的这个介绍 好了，刚才我们介绍到了这个 kiro 的 这个整个软件的一个布局，相信大家应该是啊比较好理解啊，那我们就继续往下看，看一下这个 kiro 的 核心功能 啊。那这个部分的话，其实是也是今天要跟大家讲的一个重点是说啊， kiro 其实是第一个把这个 web code 和 spike code 这两种模式引入到了咱们的这个 ai 编程工具里面， 那么这个最亮眼的呢，其实是 spark 模式啊，因为 web 这个扣定这个模式呢，其实在很多的啊 ai 工具产品里面，其实一开始的时候大家都是采用这种方式啊，那包括现在就是最新的智捷的翠三点零，他也推出了这个 solo 模式，那我觉得就是两者也是有异曲同工之妙。 好的，那既然我们刚刚已经介绍过了这个呃 webcoder 的 模式，那我们现在的话就是看到这个 spag 模式， spag 模式的话呢，其实它是 kiro 的 一个王牌 啊，那中文的话呢，叫做规范驱动开发，其实说白一点就是在真正进入到代码开发之前啊，我们先把规矩先定好， 然后需要由人来介入，给到 ai 输入很多约束性的条件，包括澄清你的需求，这样呢就是确保就是 ai 和人的理解是尽可能一致，从而最终呢保证我们输出的这个结果是 ok 的。 那这个 style 模式的话呢，它其实主要是分成三个阶段，第一个阶段的话呢，就是需求分析的阶段，那我们现在的话呢，就是正在做的呢，其实就是需求分析的阶段，那我们可以看到他现在其实已经把这个需求文档给创建出来了， 我们可以看一下它这个需求文档啊，那么它首先会有个简介介绍到说用户是想要一个基于 web 的 三 d 地形的一个沙盒应用啊，同时的话呢就是可以创建独特的地形景观，然后并且可以基于这个调整的天气 参数，然后观察这个动态的环境变化啊。那这个需求的理解，你看其实跟我们的需求的提示词是一致的啊， 那下面的话呢，就是关于需求的话呢，嗯，他还讲了一个用户故事，用户故事的话呢，其实我们在这个 app 啊，包括一些呃应用开发的时候呢，其实都是会有一个用户故事，它是一个标准的一个呃开发里面的一个术语啊，大家知道就好了啊，同时的话呢，他还给咱们建立了一个验收的标准啊， ok。 然后呢他把用户故事拆成了三个啊，需求一、需求二、需求三啊，还有需求五、需求六、需求七、需求八，也就说他在需求里面的话呢，就是刚才我们是给了一长段的提示词，然后呢他把这些需求呢拆成了一个一个的小需求啊，比如说这个需求八， 我其实并没有提到说这个应用是不是要在很多的设备上面去运行，还是说他只是需要在电脑浏览器里面去运行，那我们可以看到就说他会在这里面其实在基于我们原本需求就是要帮我们做一些扩展，比如说这个应用可以在桌面的浏览器里面去运行， 然后呢也可以在移动设备上面运行啊，那这个部分的话，其实对于我们来讲，当我们去做一个项目的时候，其实这些问题都是需要提前去考虑的，因为他会决定我们使用什么样的屏幕大小 啊，以及用户的使用环境。那我觉得就是这次 spec 模式带给我们在需求确认阶段，然后非常好的一些这个提示点。如果说我们本身对开发任务不是很熟悉的话，其实这个 spec 模式是能够帮助我们去想清楚很多一些我们想要呃想清楚的一些事情的 啊，你看这里就是关于，呃，这里提到的是说想要一个高质量的视觉的渲染效果，以便能够得到一个沉浸式的体验，那我们以这个水面存在时，然后呢渲染水面的反射和折色效果，那我们在这里就可以稍微给他做一个呃调整， 这里我希望水面有 水的波纹效果。 ok， 也就说大家可以看到，虽然说这个呃 kiro 很 快的生成了这个需求文档，但是呢就是大家一定是要去看一下他的需求文档里边到底写了什么内容，然后这些描述和内容是不是和我们想的是一致的， 如果不一致的话呢，一定要通过这个调整的方式去跟 ai 进行一些互动和这个修正。那修正的方式有两种，第一种的话呢是我们可以直接编辑这个文档 啊，我们可以直接编辑这个文档。第二种方式呢，就说如果我们不想自己改也没问题啊，可以像我这样就是把这个信息给到那个 ky， 让他来帮我们进行这个修改。 ok， 我， 我现在呢其实只给了他一个具体的信息，我也没有说是在文档的递几点在什么位置，让我们看一下他是不能够找到具体位置，并且帮我们把这个要求给加上。 ok， 那 我们继续回到来介绍这个 spark 模式。那我们现在呢，正处在的这个阶段呢，其实就是一个需求分析的阶段，在这个阶段里面的话呢，揭露其实会基于我们一些简单的模糊的提示词来进行这个需求文档的生成 啊，这里包括像用户故事刚我们看到的，然后验收的标准，然后编辑条件啊，都会写，都会写在这个文档里面，然后我们需要去仔细地去审查它所描写的这些内容， 比如说验收标准或者编制条件，包括功能描述是不是我们想要的，如果说不是的话，那一定要去进行一个修正，具体怎么修正，看来方法也跟大家做过一个介绍。 那么我们在完成了这个需求分析阶段之后呢，我们会进入到下一个阶段啊，就是系统的一个设计阶段。这个设计阶段呢，它其实重心会放在啊技术的，技术站的一些技术架构选择，技术站的选择啊，包括前端、后端接口等等，以及数据库， 然后表怎么去设计。那这个阶段的话呢，其实是还是挺有门槛的，因为如果我们是一个啊，比如说非技术人员或者非代码出身的这个普通人的话，其实他可能给你的这个文档我们大概率是不太能看懂的，对吧？但是呢这个也没关系，现在的话呢，即便他给咱们这个文档我们看不懂， 我们是可以通过其他一种方式，比如说我们可以把这个文档给复制出来，然后比如给到别的另外一个 ai， 比如说谷歌的加密版或者是豆包，然后它来帮你评估这份技术文档的这个设计，比如说是不是有一些明显的这种设计缺陷啊？也可以从从另外一个角度帮我们去完善这个技术的设计。 好，那我们现在再我来看一下他有没有完成啊？ ok， 你 看啊，现在他已经提示说啊，文档已经更新了啊，水面现在的渲染包含了反射折色和动态的这个波纹效果，那我们看到对应的这个位置，他也添加了这个动态波纹效果。 好的，那现在我们确认了这个需求文档之后呢，我们就可以进入到下一个阶段啊，进入到设计的这个阶段，也是刚才在跟大家有介绍到的这个设计阶段。 好，那我们让他这个先运行一会，等一下我们回头再来看下他的这个设计文档写的怎么样。 呃，在设计设计阶段结束之后呢，进入到下一个阶段是进入到一个计划的阶段，也就是说其实是一个安排这个模块包括任务拆分的这么一个阶段。那这个阶段呢，主要的目的呢？是说把我们的所有的这些需求，包括前期的这个设计，然后拆分成一个一个可执行的小任务。 那么有了这个一个一个可执行的小任务，包括排除了这个任务的先后顺序之后呢？那我们其实接下来就直接把剩下的这个代码生成的工作就完全交给这个 hero 来执行就可以了。好，我们回来看一下 啊，他现在已经给出来了一个设计文档，那我们可以看一下这个设计文档啊，首先第一个呢就是他定义了核心的实现的一些基础站，包括用这个税点 g s 啊，然后用 h t m 五的方式， 也就说在这个阶段的话，其实他是一些在技术类的，比如说开发语言，包括技术栈、技术架构的一些选择。那我刚刚也跟大家提到，就说这个部分，如果你是你本身就是技术人员的话，那你其实可以完全去做一些调整的。如果说是非技术人员的话，那我们也可以简单的去看一下啊，比如说这里他有提到一个架构 啊，整个系统的架构的一个分层啊，这里包括有用户界面层，然后有应用的逻辑层，然后包括有系统层，以及有这个渲染层，也就说整个架构的话分为了四层。 呃，再往下的话呢，有这个数据流，数据流的话呢，包括用户通过这个 ui 进行这个参数的输入， 逻辑层呢接收这个参数，然后验证这个参数，系统的话呢基于这个用户输入的参数去更新这个地形或者是天气的状态，然后呢最终呢在渲染层呢完成这个渲染，然后呢呈现我们想要的这个天气变化和地形的相关的一些效果。 同时呢他这里还定义了包括组建的接口，组建和接口啊，有地形的这个生成器啊，有天气的系统，有降雪的效果啊，这是一些子组建 啊，所以可以看到的话就说，呃，他在设计这个环境的话，其实是做了非常细的细致的一些内容，我们来回顾一下，第一个是说他就帮我们去确认了整个这个实现的基站，第二的话呢是确认了我们整个的一个四层的一个架构。第三部分的话呢是定义了数据流以及这个主键和接口。 那下面还有很多的这个信息啊，那我就不在这跟大家去一一的做展示了，那我们现在就以他给我们的这个设计为准。然后呢进入到下一个阶段， 我们可以看到第一个阶段叫叫需求设计阶段，第二个阶段的话呢是设计阶段，第三个阶段的话呢，是啊任务任务的一个啊设计和分配的一个阶段。那现在的话呢，就是我们前两步都已经完成了，现在已经进入到一个呃任务拆分的阶段了。 好，那我们继续来看看我们的文档，然后呢让他先来创建一个任务，然后一会我们再回过头来看他的这个任务是如何去分配的。 好的。然后呢呃在之前呢，其实介绍 k 那 个 kiro 这款工具的时候呢，其实还有一个功能叫做 agent hooks， 那 这个 agent hooks 呢？ 我们可以理解，为什么呢？就是很多时候呢，我们在用一些呃早期的一些 ai 编程工具的时候呢，会出现说这个它生成这个代码和执行任务的时候呢，很多时候它跑着跑着它就把前面的一些项目的结构和项目的信息，也就是说这个上下文就给丢掉了。 然后呢这个 kiro 呢，它通过这个 agent 函数这个功能呢？然后呢来实现什么呢？来实现就是呃 检查这种代码的不规范呢，包括跟这个项目搭不搭呀？以及数据库表，然后有没有什么关联呢这些内容。那我觉得这个功能的话呢？呃，大家也可以在使用 kiro 的 时候去试一试。 ok， 我 们来看一下它准备的怎么样了 啊？我们可以看到就是他现在已经是把这个任务的列表已经创建出来了，我们看一下他分为这个。呃，编号一的任务是先去设置项目的结构和核心依赖，然后第二个的话呢，是实现噪生的生成工具啊。第三个任务的话呢，是实现地形的生成系统 啊，然后呢再往下的话，还有包括像地形的找色器，那这个是从第三个任务里面拆出来的子任务。 ok， 然后还有摄像机的控制器啊，粒子系统的基础，然后降雪效果， 还有地面积雪。呃，它其实把我们的整个需求都拆分成了非常多的这个任务啊，一共是一共是拆翻了十八个，差不多十八个小任务。 ok， 那现在的话呢，就说进入到这个阶段之后，那我们要做什么呢？我们现在确认完了需求，确认完了设计，然后现在任务也拆分了，那我们现在要做的就是点击这个啊，开始任务。这样的话呢， karl 就 进入到一个真正的这个代码生成的这个阶段。 ok， 那 由于这个时间会比较长，那么呢我们就让他先去运行一会，我们回来直接来看他的运行结果。哎呀，太不容易了，兄弟们总算是跑完这个任务了，大概跑了两个小时左右，那我们来看一下呃他的整个执行的过程。 我们先看下这个任务列表啊，我们可以看到从第一个任务设置项目的结构和核心依赖开始， 然后一直到最后他一共是拆分了十八个任务，然后中间包括了功能的开发，然后每一个功能开发之后的测试以及文档的生成。那么到现在为止的话呢，咱们整个项目就已经全部开发完成了。从这边大家也能看到他是每一个任务， 每一个任务它都会那个创建一个新的绘画。我觉得这点其实还挺好，因为我们自己其实在玩 cody 的 时候，经常都会出现一种情况，就是在一个对话里面，然后进行非常多的任务，这会导致对 ai 来讲上下文的记忆的压力就非常的大。 那么 kiro 这块呢，他会把每一个任务都创建一个新的，创建一个新的这个绘画，那么呢就是对每一个任务的这个执行呢，我们都可以在独立的绘画里面去进行一些调整和修正，我觉得这点还是非常好的。 ok， 那 我们来看一下中间他产生的一些内容。 呃，第一个的话呢，是说他之前在创建一个基础的模块之后呢，他会那个自动的打开我本地的这个浏览器，然后加载这个页面。那也就说在这个使用过程中，他在生成的过程中，我们也是能够看到他的这个中间过程的。 那这个部分的话是关于他创建这个云层的一些测试效果，我们下面可以看到啊，关于是云层的创建，然后呢场景添加，然后呢包括这个零风速的云层静止这里呢，他也会列出来说哪些任务测试通过了，哪些没有测试通过，这个也是蛮好的一点。 然后再往下呢就是包括地形的一些创建，因为咱们要求的是一个啊三 d 的 地形，所以呢中间过程的话也能看到一些这样的一个不完美的一个状态。 最后呢就是在正式交付前，它还完成了关于浏览器的兼容性的测试，我们可以看到浏览器兼容性测试啊，包括像 canvas 的 api 的 一些支持，然后包括性能 api， 然后以及 java sprint 的 一些功能支持啊，这些都有，我觉得还还挺细致的 啊，除了浏览器之外呢，也做了一个性能的一个验证。那我们一般就说 webcody 的 话，其实很少会去关注，比如说兼容性和性能，那这个是 spike 这种模式下的话，它其实会主动的帮你去做一些测试的工作，确保这个服务，比如说我们要上到这个线上是可以正常运转的 啊，这里还有一个什么积蓄功能的测试，这我们就不看了，然后直接来看一下最后的一个效果。那现在我们可以看到的话呢，这其实是他创建的一个三 d 的 地形啊，我可以看到这个地形就是从立体的角度来讲，我觉得立体感还是蛮强的啊。 ok， 这还可以翻转到这个地形的底部啊，上面的话有一些云层的效果， ok， 总的来说的话，我觉得效果还是 ok 的 啊，好的，那我们现在就是来总结一下今天我们的全部的一个内容。 呃，首先呢就是今天呢给大家做了啊，分别有两个小项目，做了一个 web coding 的 一个演示，同时呢做了一个 spot 驱动开发模式的演示，那这是两种截然不同的这个使用 ai 编程工具的开发模式， 使用 web coding 的 话呢，更适合说我们快速去出一个原型，或者是一些相对比较简单的啊纯前端的任务，那这种的话呢，它其实更适合更快速的这种 web coding 的 模式，来来生成相应的一些代码和执行结果。那如果说我们是要跑一些比较复杂的，比如说它可能是会涉及到前后端，那这种类型的项目呢，更建议大家采用啊 spec 的 模式， 也就说我们前期的重要的三个阶段，包括啊需求的确认的阶段，然后呢技术设计的阶段，包括技术站，然后架构，然后以及一些这个测试方案等等。 最后的话呢，就是他会把整个这个需要去完成的任务呢，就是拆分成很多个不同的这个大小任务，然后呢按照顺序，然后逐步的去执行，也就说每执行一个模块或者一个大的任务，那我们都可以对这个交付的这个结果进行一个确认，然后最后通过这种逐渐迭代的方式完成我们最终的一个产品。 好的，那这就是今天要跟大家介绍的全部内容啊，我是 ai 编程瓜哥，如果大家觉得我的内容不错的话，请大家帮我点赞、关注，转发，那么我们下期再见。