水果网站怎么做的html5 网站 代码

引言

腾讯云AI代码助手之前就改成了CodeBuddy我相信这也是在为后期做准备。那么这篇文章会对CodeBuddy进行比较详细的介绍，并一起来上手实战，感受一下实际开发中这款插件能带给我们多少的便利。本篇文章是一边写一边进行测试，并不是测试完之后才写的这篇文章。所以文章中可能存在诸多不明确的因素。同时也希望能将这篇文章当作参考，你也能一起动动手，感受一下CodeBuddy带来的魅力。

CodeBuddy介绍

上面列举了几个比较核心的内容，每个功能或许都能让你满意，当然除了这里的简单介绍之外你还可以前去官方文档查阅详细内容。这里就不再多花时间来介绍了，相信各位亲自上手之后就能体验到这些功能了。

安装CodeBuddy

这里我以VS Code这款软件为例子，来进行安装演示。

这里直接在搜索引擎搜索VS Code就能跳转出来这款IDE工具，我们下载即可。

我们打开软件来到这个界面，可以进入软件后按住 ctrl+shift+x 进入拓展界面。

我们搜索CodeBuddy，看到第二个腾讯云代码助手CodeBuddy即可。

这里点击安装，这里可以把自动更新给勾选上，每次打开VS Code之后，都会查询该插件是否有新版本迭代，如果有那么就会进行插件更新。

实战应用

那么我们接下来就来实战一下，这里就挑战一下用腾讯云代码助手CodeBuddy来完成一个前端页面。这里就从0开始让他自主完成，我们用自然语言进行代码调整，看他在这是否能比较好的去完成。在开始前我想到的就是先写一长串的提示词，我这里写的也不是很好，这里各位就自己参考一下。这里以一个旅游APP的软件为例子。

这里给一个参考界面，可以把这张设计稿丢给AI让他帮你生成相应的提示词，拿到相应的提示词之后我们就能开始自己上手感受一下了。

这里是AI生成的相关元素的大小以及要点，通过这个就能让代码助手知道每个功能要画多大才是合适的。这里也仅仅当作参考，在实际开发过程中还是需要适当的去调整，让整个页面看起来比较的正常。

我们来到VS Code之后我们随便创建一个文件夹，这里看到这个文件夹是空的，没有任何的文件及相关配置，那么接下来就是让他自主的去完成这个项目。这里我们选择好文件夹之后，点击Code Buddy的图标，也就是上图中的最后一个图标，我们点击一下就能来到我们的编码界面了。

这里看到这里总共有四个选项，包括Craft、Chat、Code Review、Unit Test这四个功能。

这里我们先用Craft模式，其他的我们就暂时先不用管，这里会发现有一个和大模型交互一样的对话窗口。

我们用默认的default即可，你可以选择DeepSeek-V3模型来进行你的调试。

这里其实添加了MCP广场中的MCP的一些插件，详情可以看插件自带的哪些MCP，可以适当的去配置。这里暂时用不到。

这里我们把提示词给粘贴上去，我们就能直接进行对话了，你如果对提示词不满意可以自己修改之后再粘贴上去。

我们发送之后，他就会进行思考，思考之后就能输出对应的内容。

这里由于界面比较复杂，所以要我们去自己输入对应的数字。让他一步一步进行创建。

这里首先创建了顶部导航栏和欢迎信息区域。经过测试，文件读取正常，用户名修改正常。

再让他把这两块内容进行补全，就得到了现在这样。我们还需要进一步的去进行调整。这里缺少了搜索框 还有筛选以及分类，我们一个一个来，先试试能不能单独的给加上去。这里的图片是网上随机的，我们后期在进行更换。

这里也是进行了一个交互，介绍让他添加搜索框，一次就完成了修改。

然后我们可以让他加上圆角，这里的圆角角度为12，可以进行参考。

目前发现存在了一个问题就是卡片不能滑动，我们来修复一下。

这里其实修改了两次，第一次没法滚动，我们再进行修改。

这样就是能正常滚动了。然后我们回到刚刚这上面，加上一个类似于分类的按钮，比如最热的地区之类的。

按钮分为全部、最受欢迎、推荐、精选这四大板块，让他生成这四个按钮，并且支持横下滑动。

按钮的布局为：

/* 自动布局子元素 */
width: 139.12px;
height: 31px;
/* 自动布局 */
display: flex;
justify-content: center;
align-items: center;
padding: 5px 8px 4px 8px;
gap: 4px;
z-index: 2;

按钮的样式为：

border-radius: 15px;
box-sizing: border-box;
border: 1px solid #8F9090;

把这些css丢给他就行，他就能正确的生成出来了。我们来看看效果。

这里的效果还是可以的，还是能滑动的，足以可以他的理解能力是很棒的。

整个页面看起来都差不多了，我们增加个小标题，让整体看起来不会那么空旷。

我的提示词是：给景点卡片还有旅游团体添加标题，适当的进行留空。

这就是修改之后的样子，然后旅游团体这里左侧需要加一个正方形的图片。

首先调整卡片的长和宽。

width: 249px;
height: 107px;

然后再添加左侧的图片。

width: 107px;
height: 107px;

以上是卡片还有图片的相关css，可以把这些丢给他，让他帮你进行完善。

修改之后是这样的，截至到目前，这个前端复刻的已经差不多了。到这个代码助手出现了一点问题，基本上所有内容变空了，而且回退不了。所以这里就从头开始重新用做了一个。

花费了一小时，因为期间一直报错，然后现在也是整好了，我们一起来看看对比吧。

第一张为原型图，后面的都是我们用CodeBuddy来进行完成的。本来想着在这基础上进行一些功能的配置，但是有点耗费时间。其实你完成到这一步，你再进行后端的配置就已经很快了。比如配置高德的MCP进行位置的定位以及附近景点的推荐，这些都是能完成的。

结语

CodeBuddy还能做很多内容，比如你会一些其他内容，就能让他生成相应内容的代码。这就是他所带来的神奇的功能，当然他的使用场景不止这些，具体的还需要我们逐步去探索，希望这款插件能在你的开发的路上给你带来帮助。