为了测试Kiro的功能,我用它开发了一个工具聚合的网站

633 阅读7分钟

1. 背景

作为cursor的付费用户,随着使用时间的增长,也是被cursor大人调教的越来越好了,某天离开cursor手撸代码,总感觉不得劲(Tab功能真的太棒了,所以cursor能不能只出一个无限使用Tab的会员版本)。

但自从前段时间cursor频繁调整策略,限速+token消耗令人费解,当然最让我绷不住的还是Claude 模型用不了,官方解释是模型提供商ban了某些区域的ip,在尝试了网上几个解除限制的方法,还是不得行,有看到不少人确实是可以的,令人费解,或许是人与人的体质不一样吧,不管了,直接退款!

习惯了AI编程之后,很难回归传统的手撸编程,在大部分工作是搬砖的情况下,写一百行的CURD与使用tab一键补全相比,当然是后者更加省时。我用这些时间来学习(摸鱼)它不香嘛?于是再次给了Trae机会(这已经是第二次给机会了,第一次用的时候个人感觉非常之睿智...),怎么说呢,还是不中用啊!相比起之前确实有不少进步,比如Tab比之前智能多了,但还是比不上cursor,最让我难绷的还是Trae的Claude模型,很难相信Trae中Claude与Cursor中的是同一个模型,个人看来,现在的Trae在使用体验上可能刚好赶得上大半年前我第一次接触的cursor吧~

在用完白嫖的10次高速请求以及等待了几次超级慢速的请求之后,最终还是没有花3刀付费,希望下次体验,Trae可以有更好的改进吧。有一说一,还是很希望国产IDE能在现在的AI浪潮激流勇进,走向更多大众的视野。平心而论,花了钱无非就是想可以获得更好的体验,但目前的Trae我认为还差点意思。

前段时间AWS出了新的IDE--Kiro,同时间内也有其他的AI辅助编程工具,比如Claude Code等,但是由于种种原因还是没有使用他们,于是下载了Kiro体验了一番,于是有了今天这篇记录文章。

2. Kiro体验

进来就是两种模式,Vibe和Spec

image.png

Vibe个人理解相当于Cursor中的Agent,也就是目前主流的模式,而Spec则是Kiro的亮点功能。正如它描述一样,非常专业,先制定计划,创建需求,设计文档,以及执行任务等,最终开始一整个流程。其他介绍就不多说,个人认为这个模式在新建的项目,或者复杂性的需求项目的体验还是很🐂🍺的!

也是在使用了一番之后,先下结论,虽然目前还是属于内测阶段,但是:

  • 我认为是不输于Cursor(不考虑Tab功能,Kiro目前还没有)
  • Spec模式带来全新的开发体验,从0到1创建新项目,或者是制定团队规范很有作用
  • 个人会愿意为此付费(如果是Cursor Pro差不多的价格)

当然很重要的hooks功能还没体验~也是目前阶段还用不太上

3. 开发网站

熟悉了Kiro之后,想着拿一个新项目来测试一下Kiro的功能以及能达到的程度。当然,达不到想要的效果大部分肯定是自己的原因,有看到油管大神的成果,确实很6。

之前就想搞个工具类的聚合网站,平时上班或者学习研究过程中免不了要用到一些在线的工具,所以这个对自己来说也是比较刚的需求吧~

3.1 详细步骤

3.1.1、选取Spec模式进行制定规范、流程

在参考了一些大佬的操作之后,prompt提示如下:

我想开发一个工具聚合型的网站,目前阶段有todo待办、json格式对比、jwt解析等功能,后续可能会拓展,现在需要输出,高保真的原型图,请通过以下方式帮我完成所有界面的原型设计,并确保这些原型界面可以直接用于开发:

1、用户体验分析:先分析这个 网站 的主要功能和用户需求,确定核心交互逻辑。

2、产品界面规划:作为产品经理,定义关键界面,确保信息架构合理。

3、高保真 UI 设计:作为 UI 设计师,设计贴近真实 网站 设计规范的界面,使用现代化的 UI 元素,比如shadcn\ui ,使其具有良好的视觉体验。

4HTML 原型实现:使用 HTML + Tailwind CSS 生成所有原型界面,并使用 FontAwesome(或其他开源 UI 组件)让界面更加精美、接近真实的 网站 设计。拆分代码文件,保持结构清晰。

5、每个界面应作为独立的 HTML 文件存放,例如home.html,todo.htmls,json.html,jwt.html等。- index.html 作为主入口,不直接写入所有界面的 HTML 代码,而是使用 iframe 的方式嵌入这些 HTML 片段,并将所有页面直接平铺展示在 index 页面中,而不是跳转链接。

后续开发的技术栈使用nextjs,始终使用中文回复

没错,我想的是先让它出个原型图,让我康康符不符合我的预期,如果没什么问题的话,再进行落地。

在Kiro吭哧吭哧了一段时间后,生成了标准的规范以及几个index.html的原型页面

image.png

image.png

仔细预览了一下规范、需求、任务以及原型之后,有进行一些细微的调整,但总体生成的质量个人还是非常满意的~

于是依旧在Spec模式下让它搭建了项目基础框架以及简单的页面

3.1.2、选取Vibe模型进行具体页面的调优

在Spec生成出来的基础上,切换了Vibe进行细节调整,有两个原因:

  • 上下文不够
  • Vibe更适合细致的活(也可能是个人使用问题)

期间确实遇到需要Retry的情况,全程基本上使用的是Claude 3.7的模型,4的话更容易Retry,可能是使用的人太多了,排队等待情况比较多。也是希望Kiro早点开始正式版,给我个机会花钱吧~

期间还遇到过一个不知道是不是问题的问题,也可能是我切换了模式,导致有些上下文丢失或者是其他的原因,项目确实是可以跑起来,但是初期的话遇到样式不太匹配的问题,当然使用了Vibe进行了几轮对话之后,bug也确实解决了。说是用的 tailwindcss 版本问题,v4 与v3.4.1 的一些写法不兼容~ 由于个人并不太擅长前端的一些技术栈,就交由Kiro处理了

最终花费了大概半天的时间,有进行一些细节微调以及功能新增,统计是耗费了大概一个账号的额度,一个工具聚合网站就成功诞生了,个人还是比较满意的

3.1.3、网站展示

网站截图.jpeg

image.png

image.png

jwt.jpeg

当然,只是初步整了个网站,具体的ui以及交互肯定是需要细致调整的,比如待办功能可以按照天/周等进行划分呀等等,这个就需要迭代开发了。但就实用性来说,也是达到了个人预期吧~

最后也是部署到cloudflare上去了,不得不说,cloudflare真是赛博善人,已经白嫖了很多项目的部署了,5555555555

榴莲工具网站

Github仓库

4. 写在最后

作为Cursor的忠实用户,还是希望可以恢复昔日的模型使用体验吧,策略就不要再那么频繁调整了,真的很累人,谁懂一觉醒来花费超过额度还要额外付费的救赎感(我有一个朋友)!有点太渣了~如果可以的话希望可以考虑一下专门开一个无限Tab的会员?hhhh

Trae继续加油,我还是会给你第三次机会的!

Kiro快快正式端上来吧,给我一个花钱的机会😍