Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站 - 果核剥壳

文章来自于果核剥壳公众号首发:https://mp.weixin.qq.com/s/SNx-PJErY2G_G1btfBcUUA

前几天,果核写了一篇文章,讲的是从一个需求,简单对比各家AI的编程水平。

果核发现,其实有很多同学都想来玩玩AI编程。

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

大家都知道果核编程玩得还行,今天本文就带大家玩玩,采用边吹牛逼,边做的形式,既可以把本文当成一个教程,也可以把本文当成一篇下饭文章。

说到AI编程,有了解一点的同学,脑子里面马上就会蹦出各种工具,可能不仅有AI开发的IDE工具Cursor,还有现在风头正盛的Claude Code一体化终端。

在座的大部分同学,应该是没有多少编程基础的,果核在选择工具的时候,就想了很多问题。国外的工具不错,甚至本文想要直接用目前顶级的编程模型+工具Claude Code来给大家讲解。但是这个里面的坑太多了,估计还没等到果核教大家配置好,大家就没有多大兴趣了。

但是考虑到一个是Claude Code API实在是太贵,上一次果核写那文章,直接就给我把token烧完了。再一个是Anthropic直接封禁了一些工具对Claude API的调用,怕写出这篇内容,又出什么幺蛾子,所以也放弃了使用Claude Code 来。

再加之,这些工具也比较贵,一来就付费,显然不太好。国外的这些工具对网络要求也比较高,也就是需要大家使用手段才能使用,显然是不能这么搞的。

所以,把目光看向国内,如何找一个模型效果好,最好是国内能直接用各大高级模型;费用低(甚至免费);上限高,以后学会了,可以随时团队协作,的工具呢?

翻了一圈,果核还真翻到了,看到最近的新闻,腾讯发布了CodeBuddy Code 2.0,果核测试了一下,完全能满足本次文章的教学需求~

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

今天本文挑战带大家30分钟上手,坐好小板凳,咱们发车。

腾讯悄悄推出的这款,对标Claude Code,甚至功能还更多的工具:CodeBuddy Code。

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

他们分为国际版,和国内版。国际版可以用各大国外的高级模型,国内版可以用国内各家的高级模型。

最重要的是,都是免费的。国际版可以免费用2周高级模型,特别是国内版,直接不收费(当然,有企业版,咱们用不上这个)。

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

当然了,有同学可能会说,人家Trae和Qcode一样有免费的工具。

但是,本文主要讲解的Cli工具, 就只有腾讯有,大家本文玩会了,就会玩其他的工具了(但是我感觉玩会了,也就喜欢上腾讯的这个东西了)。

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

扯了这么多,咱们得开始了。

首先,需要去安装nodejs,这是必要的开发环境。什么?你进不去这个网站,没关系,果核给提供了安装包。具体怎么安装,果核把截图放到文档了,这就不过多展开了。

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

接下来,就是去安装git,有这个,才能管理不同的项目版本,果核环境配置的文档里面有,这就不过多赘述了。

接下来就可以安装CodeBuddy Code了,官方提供了一键安装命令

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

大家在cmd里面,输入下面的命令,回车即可安装

npm install -g @tencent-ai/codebuddy-code

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

安装是非常简单吧。安装完成后,咱们编程开发之旅就要开始了。

找个位置创建一个目录,作为我们的项目目录吧。比如,果核在D盘创建了一个目录

D:\code\nav

目录叫什么都行,但最好不要用中文作为目录。

进入cmd窗口,切换到你的那个目录。怎么切换? 如果你放的文件在D盘,就先输入D: ,然后回车。

再输入命令 cd 你的目录,如下图

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

当然,还有更快的方式,进入到那个目录,直接在地址栏里面输入cmd

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

接下来,输入 codebuddy,回车,进入软件。

首次,会提示你,是否信任这个文件夹,使用方向建,向下选择第三个,信任全部。

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

接下来,就需要登录咯。有3个选择,国内站,国际站,以及自己定义域名。看大家需要吧,国际站只有2种注册方式,第一个是Google账号,第二个是github账号,如果你能使用这两个方式,就可以用国际版。

如果没有,咱们就选第一个。

考虑到大部分同学可能没有国际版需要的账号,我们就使用国内站作为演示,国内站就相当方便了,直接扫码登录即可。

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

登录成功,关闭浏览器页面,可以看到终端已经成功登录了。现在就可以方便的玩耍了。

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

输入 /model ,可以看到当前选择的模型,默认是智谱的GLM4.7,智谱的编程模型做的比较好,果核就用这个演示了,如果你想切换,可以自己上下选择并回车。

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

考虑到大家电脑上,基本上可能没有什么环境,所以,我们开发的一个纯本地的网页,方便大家快速上手。

直接这样输入:

请为我开发一个纯 HTML 的本地导航网页(单文件 index.html),
界面美观现代,支持导航分组与卡片展示,
可对站点进行添加、编辑、删除、搜索、排序。
数据使用本地存储(刷新不丢失),可直接双击打开使用。

当然了,这大家可以发挥自己的想象力。描述一个网页,越详细越好。输入后,直接回车即可。

接下来,就可以等着终端自己慢慢工作了。

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

中途,会提示我们是否继续,大家每次选yes即可,并且第二点是,直接不要再询问,推荐选第二条回车。

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

稍等片刻,终端提示完成后,就能在目录看到生成的文件了。

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

至此,大家的第一次体验,到这算是完成了。是不是轻松加愉快? 应该说,果核教程里面,轻松加愉快。体验到这,作为代码小白的你,已经非常棒了,可以关闭本文,去捣鼓一下了。

如果你要看本文下饭或者调优,咱们可以继续研究

当前网页有个问题,展示网页图标,他采用了Google的获取图标地址,导致页面有点慢,而且这蓝紫配色,也不是特别好看,虽然可以用,并且这种配色,大家可能都已经看到有很多网站上了,这基本就是AI开发出来的网站了。

那我们继续给控制台对话,进行调优

不要使用Google相关的资源。
网页背景请使用单一配色,网页不要使用渐变,主色调是蓝色。
缩小网址卡片,不显示点击进入提示文本,不显示网址,做一个进入按钮在卡片整体右边。
缩小分类标题大小。制作页头,页尾,让网页更为专业,编辑的功能,通过右上角菜单,选择编辑模式以后,再出现。
功能进一步拓展,请按照商业化设计更多功能,界面更为美观。

可以看到经过这轮对话,AI为我们添加了更多的功能,和优化。

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

那么现在,进入网页,已经基本被我们完善,从上手到开发,就只用了半小时的时间。

大家可以在评论区交作业了,看看你调教出来的导航,究竟怎么样。

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

可以看到这项目,各方面的功能都比较完善,换做以前,完全不敢相信AI能如此迅速实现我们的需求。

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

像使用Claude Code 一样,使用CodeBuddy Code

如果你只像上面那样,使用编程,那么各家开发工具都大差不大。Claude Code之所以被很多人推崇的一个核心功能是,它最强大的地方在于支持 MCP (Model Context Protocol)。

简单来说skill就像一份技能说明书,里面给AI详细描述了应该怎么操作,相当是规范了AI的行为。如果给配置好了skill,在我们对话的时候,如果遇到相关的功能,则可以通过对应的skill实现。

创建.codebuddy文件夹,将果核准备的一个skill包解压到这。

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

这个skill包,是一个思维挖掘助手。解压进去以后。我们在cmd里面重新打开codebuddy

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

这下,大家可以直接在命令行输入“我想写一篇关于AI开发的文章”。可以看到,他找到了这个skill,并且成功加载了。

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

选择第二个继续,他会详细问我们一些问题

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

经过好几轮的对话,开始写了,并且他还会在网络搜索验证相关的功能

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

上面的skill用起来非常方便吧。有需要,大家可以去这个网站下载更多的skill

https://skillsmp.com/zh

Claude Code最强平替!使用 CodeBuddy Code 教你制作一个导航网站

最后

之前果核就一直想写一个教程,带大家入门并熟悉AI开发编程流。但是考虑到,国内使用的难度,最终一直没有下手。直到看到了腾讯的CodeBuddy Code。

一个是教大家搞代理,肯定是发不出来的,而一个是,大家的兴趣不应该被各种限制,只有感兴趣了以后,你才会想要继续研究下去。

本文旨在做一个引导,不管最终大家使用什么工具,都无所谓,果核希望大家能触类旁通。

最后,再给大家布置以点作业,除了上述带大家做的导航外,再做一个自我介绍的个人网站页面,越炫酷越好,把截图,放到评论区。

最后附上用到的资料。

https://www.kdocs.cn/l/cpqI6NTAsGxL

如果您喜欢本站,点击这儿不花一分钱捐赠本站

这些信息可能会帮助到你: 下载帮助 | 报毒说明 | 进站必看

修改版本安卓软件,加群提示为修改者自留,非本站信息,注意鉴别

(0)
上一篇 1天前
下一篇 1天前

相关推荐

发表回复

评论问题之前,点击我,能帮你解决大部分问题

您的电子邮箱地址不会被公开。 必填项已用*标注