不会写代码？我用Claude+扣子制作了一个AI搜索产品

案例在线体验：https://www.mambabit.com/

假如你不懂代码，但是又想开发自己的网站怎么办？

大模型技术的发展，让“人人都是程序员”成为了可能，我们可以通过ChatGPT类的产品快速生成代码。

这样虽然好，但是需要不断的去调整，比较耗费精力，而且往往样式不美观。

如何做一个看起来更专业的网站？

最简单的方式就是克隆别人的网站，喜欢哪一个就克隆哪一个，传统的做法主要是程序员去复制目标网站的源代码实现。

而现在我们只需要提供目标网站的一个截图即可实现！！！对，就是截图，然后告诉AI，你也要做一个这样的页面。

接下来我就以一个实际案例，从0到1实现一个AI搜索产品，通过大白话进行AI工具的搜索。

实现工具是Claude 3.5 Sonnet+扣子，分别承担前后端代码生成和后端API数据的响应工作。

Claude3.5 Sonnet是Anthropic最新推出的最智能的模型，在代码生成和多模型能力方面表现非常优秀。

▍用Claude3.5 Sonnet生成前端代码

官方提供了生成登录页面的demo，我一开始是抱着试试的态度，发现非常惊艳，才有了后来自己去克隆一个网站的想法。

最近AI搜索产品Genspark非常火，我非常喜欢这个产品，还专门写了一篇文章介绍Genspark。

AI搜索市场迎来强大对手，Genspark获6000万美元融资

Genspark的页面非常简单和干净，于是我就克隆这个产品的前端页面，首先将这个页面的主要部分进行截图保存，然后通过附件的形式上传到Claude。

提示词非常简单，就是让AI生成对应的html代码：Convert this design into a html code（你也可以输入中文：将这个UI设计转换成html代码）

运行代码后，非常惊艳，完全克隆！

现在还只是一个静态页面，接下来还要支持动态请求数据，实现一个AI产品的搜索效果，例如搜索：AI写作产品有哪些。

这个时候就需要用到API来提供数据，传统的做法比较麻烦，需要自己写代码去实现对应的功能和准备API，而现在通过扣子这样的智能体搭建平台，我们可以非常傻瓜式的0代码就实现全部的功能，你不需要懂任何代码。

▍用扣子搭建一个智能体提供数据和API

首先我们在扣子搭建一个包含知识库的智能体，用来实现AI工具的推荐，我搭建了一个名称为AI工具箱的智能体，效果如下。

然后我们点击发布，勾选API，这个时候会提示需要先创建访问令牌，点击配置，进入页面创建对应的令牌即可。

选择添加新令牌，添加好之后，再点击API使用说明，进入API使用教程的页面。

通过API教程的示例代码，我们只需要拿到两个值即可，一个是代表个人身份的Access_Token，另外一个是智能体的ID。

接下来，我们通过参数流程中的流程轻松获取到智能体的ID。

信息都准备后好，我们开始准备获取API数据的代码。这里的代码我们可以继续通过Claude来生成，我们只需要描述清楚我们的需求，主要包括三部分内容，分别是我们原有的前端代码、官方的请求示例和响应示例。

为了安全起见，我们不直接将AccessToken和智能体ID暴露，而是后续自己进行对应的替换即可，具体如下所示(未展示全部内容)。

接着刷新页面，我们可以通过自然语言描述，例如输入：有哪些好用的AI写作工具，点击发送，产品大概10秒左右会返回相匹配的AI工具。

大功告成！目前已经实现核心功能，虽然在体验上还不够好，例如返回数据很慢，内容都堆积在一起，链接不能直接点击，后续我将继续通过这个案例去不断的完善产品。

通过这个例子，我们可以发现，不管对于程序员还是非程序员来说，大模型给编写代码提供了一个非常好的体验，同时也大大提高了效率。

在这个过程中，对于非程序员的业余人士来说，写代码的成本大大降低，我们需要掌握的能力是逻辑能力和语言描述能力，即做一个事情，需要哪些步骤和要素，然后将这些清楚的描述给AI，然后进行不断的调试即可。