引言

上篇文章其实能完成的就很多了，这里不再过多介绍了，这里我们来讲解一下我们在五一的空余时间用 CodeBuddy 来完成的一个小项目，当然这只是初稿，其实初稿就能体现 CodeBuddy 的编码能力了。我们一开始就说想让各位都能很直观的去看懂，所以我们就直接选取了最基础的 html+css+js 的方式来制作这个界面。当然上篇文章讲的是 React，其实也都是可以的，我们使用 Next.js 之类的也是能复刻出来的。也就是说你想让你前端是什么语言那么都能进行实现，实现的原理都是一致的。这期依然还是主要讲解一下前端，本期文章只提供思路，不提供详细的制作过程。

起因

在上期文章发布之后，我做了一个旅游网站的前端界面，那个界面对比这个来说难度还是不大的。代码助手的产品也在搞一个旅游网站当成一个示例，所以我们一拍即合就完成了本篇文章的内容。

既然是宣传，那么就是尽量的好看一些，随后我就拿到几张稿子，我开始琢磨如何更好的去匹配。

这相当于是一个稿子，我们要把稿子复刻出来，弄得更好看一些。我们全程用腾讯云代码助手 CodeBuddy 来完成的这个项目，没有任何一处是我们自己手动进行修改的。

获取提示词

这里的提示词总共有两种，第一种就是每一块内容都写一个提示词。第二种就是整个页面写一个大概的提示词。这里举个例子，这里想要做顶部栏，顶部栏有一个，用户头像、搜索框、消息通知，这三个功能。我们采用第一种方法来试试。

这里就先截个图，这里提示词可以自己写也可以丢给多模态模型的 AI，一定是多模态模型，不然识别不出来。

我们喂给 AI 以后其实就能拿到类似于这种的提示词，如果生成的效果不好我们可以手动的去修改一下。我们丢给代码助手来试试。

我们创建之后发现是这样的，我们可以再通过与模型对话进行调整，这里暂时就不演示了，你想怎么说就怎么说。

那么这里其实第一版生成的时候我们先用第二种方式，这样会比较的快。给整个页面写一个大概的提示词。

这段提示词是我之前发在群里一段提示词，下面其实还有很多，这里就展示一个小片段。我们可以根据提示词的样式来写相关的提示词，你要明白或者理解提示词他是怎么写的。这段提示词也是我们首次进行首页构建的时候用的提示词，还是蛮详细的。但是我们要知道他生成的可能每次都可能会不一样。

我们通过一次生成达到的这种效果。这就是不确定性，我们大致生成完成之后我们就要求微调，用能听懂的话让他去改。

这里再次以顶部导航栏为例子，参考我的提示词，那么提示词如下：

顶部导航栏 搜索的左边 返回更改成用户的头像 呈现圆形 将消息去除

我直接用的这句话，这就是我说的他能听的懂的话。我们把它直接丢给代码助手，我们就能得到修改。

我们修改之后的顶部导航栏是这样的，如果不满意还可以通过类似的方法进行调整。

这里如果你有喜欢的颜色或者样式，你可以直接丢 css 让他根据你的 css 当作参考来进行生成，那么这样大概率就是符合你心意的结构了。

因为他没有识别图片的功能，所以我们初次的提示词就显得尤为重要。有时候可能会遇到给你一项一项生成的，这种会更细致一些。这种还是存在概览触发的。对小细节的调整可以参考第一种方式。

AI 旅行规划

这里不过多介绍，这里介绍一下我们做的一个功能，那就是旅行规划，我们调用的是 DeepSeek-V3 模型，这里插入一下我们的演示视频。

这里可以先看一下演示，上面是与后端简单的配对，然后与模型进行对接的。这里使用的也是 CodeBuddy。视频当中是我们实际做到的画面，这里也放几张图片，方便各位阅读。

这是我们根据要求完成的页面，有我们自己重新修改的一部，页面也会看上去更好看。从界面来看他的功能还是比较强大的。

如果你只对接 api，那很简单，你直接跟他说 我要对接一个后端进行响应，实现 AI 旅行规划的功能，然后你把 api 直接丢给他。

他就能很快很迅速的去进行完成，当然这只是参考，具体情况要根据你们的代码而进行修改的。如果这里不知道推荐也去问一下 AI，把你的需求告诉他，比如你说我要对接 API 实现旅行方案的返回，然后再加上一点细节。那么 AI 就能把提示词给生成好，你把提示词直接丢给代码助手其实也是一样的。

结语

这篇文章只提供思路，具体的有机会在与各位小伙伴们细聊。我们能发现 CodeBuddy 的能力其实很强大，无论是前端还是后端，他能做到的都是比较靠前的，不知道你会用代码助手来做什么？我们之后可能使用这工具的频率也越来越大了，我们看上文的前端其实很强，我们要是有自己绘画的作品，可以与这些内容结合一下，说不定就能生成出很惊艳的网站。