飞书如何搜索文档？我用AI打造高效飞书搜索网站助手
<div class="lake-content"><p id="u4c5b226d" class="ne-p"><span class="ne-text">我用<strong><span class="ne-text">claude+bolt+vercel+trae(cursor)</span></strong><span class="ne-text">，从0开发快速上线了一个飞书搜索的网站，界面效果如下，不得不说，AI是真的很强大！目前网站已上线，示例网址如下：</span></span></p>
<p id="u063b8076" class="ne-p"><span class="ne-text">https://www.feisous.com/</span></p>
<p id="u4a372c62" class="ne-p"><span class="ne-text">不想看AI整合流程的朋友，可以直接跳转<span class="ne-text">飞书搜索</span><span class="ne-text">体验一把！</span></span></p>
<p id="ue8428b2b" class="ne-p"><img width="981.8182061385664" id="HnGJ4" class="ne-image lazyload" title="" data-src="https://cdn.nlark.com/yuque/0/2026/png/27571985/1774345779741-a75f79da-27fe-42e9-9fbb-5579b82e38f6.png"></p>
<p id="u42be1be7" class="ne-p"><span class="ne-text">下面是飞书搜索的结果页面：<br><img width="886.4415803993913" id="u7013c344" class="ne-image lazyload" title="" data-src="https://cdn.nlark.com/yuque/0/2026/png/27571985/1774346814916-d3849539-e042-4137-a738-c401c84e10a6.png"></span></p>
<p id="uaec87c50" class="ne-p"> </p>
<p id="u252c65b2" class="ne-p"><span class="ne-text">那我是怎么开发出来的？大概分为3步：</span></p>
<p id="u78d43e38" class="ne-p"><strong><span class="ne-text">1、和claude讨论需求，画出简版原型图</span></strong></p>
<p id="u7b7003e0" class="ne-p"><strong><span class="ne-text">2、bolt开发前端界面</span></strong></p>
<p id="u3a193282" class="ne-p"><strong><span class="ne-text">3、使用trae（cursor）完成前端+后端的整合</span></strong></p>
<p id="uf1437ca0" class="ne-p"><strong><span class="ne-text">4、vercel完成线上部署</span></strong></p>
<p id="u492fff41" class="ne-p"><span class="ne-text">以往可能要好几天时间才能干出来的活，现在只要1天的时间就搞定了！下面我们来逐步拆解......</span></p>
<h1 id="ct471"><span class="ne-text">一、和claude讨论需求</span></h1>
<p id="uff3262f6" class="ne-p"><span class="ne-text">你需要把<strong><span class="ne-text">AI想象成一个和你交流的人，你可以赞美他，鼓励他，给他丰富的报酬，如果他做的不好，你也可以狠狠地批评他。</span></strong></span></p>
<p id="u0a24e7c0" class="ne-p"><span class="ne-text">我给他的提示词如下：</span></p>
<pre class="ne-codeblock language-plain" data-language="plain"><code>我想要做一个网站：飞书搜索站，大概得需求是这样的：我输入一个关键词，就能够搜索飞书(https://www.feishu.cn/)这个网站下所有的网址并聚合返回
我们讨论一下需求。你建议我们怎么设计需求?界面交互大概是什么样?</code></pre>
<p id="u4de9da71" class="ne-p"><span class="ne-text">这是AI给我的回答</span></p>
<p id="uf29fd8dc" class="ne-p"><img width="686.3376793387692" id="ued7a6c02" class="ne-image lazyload" title="" data-src="https://cdn.nlark.com/yuque/0/2026/png/27571985/1774346393875-41272c63-0b90-4d59-8abf-e20715f3648e.png"></p>
<p id="u00e58a76" class="ne-p"><span class="ne-text">但是我觉得他一开始想的有点复杂了，所以我紧接着明确告诉他，我只需要一个MVP产品（<strong><span class="ne-text">这个MVP，不是游戏里的MVP哈，而是“最小可行产品”的意思！）</span></strong></span></p>
<pre class="ne-codeblock language-plain" data-language="plain"><code>此项目是公开给其他用户使用的，我想先做MVP，请帮我产出“MPV需求文档”，尽可能简化。</code></pre>
<p id="u7dc0d504" class="ne-p"><span class="ne-text">紧接着claude给我输出了详细的产品需求方案，我觉得设计的非常合理，也很符合我心中的产品的样子。</span></p>
<p id="u57403930" class="ne-p"><img width="743.6883301100379" id="u6123e72e" class="ne-image lazyload" title="" data-src="https://cdn.nlark.com/yuque/0/2026/png/27571985/1774346521504-eb48c646-ac65-4368-8c81-af1f5c6288aa.png"></p>
<p id="ufa35b19b" class="ne-p"><span class="ne-text">下面是他给我的技术实现方案，如果你不懂技术，也没有任何关系，后面直接把这些技术发给AI，让AI去帮你实现即可。</span></p>
<p id="uf9efc66d" class="ne-p"><img width="490.59741474987413" id="u67497a42" class="ne-image lazyload" title="" data-src="https://cdn.nlark.com/yuque/0/2026/png/27571985/1774402776680-7deea94f-c767-4dcc-a00d-5d127c7b20e5.png"></p>
<p id="ub2910bbf" class="ne-p"><span class="ne-text">接下来就是要使劲的夸AI，奖励AI，就比如我下面这样的：<strong><span class="ne-text">世界级水平，奖励你1万美元！</span></strong></span></p>
<p id="udf891503" class="ne-p"><span class="ne-text">带上这些吹爆AI的提示词后，AI大概率会设计的更好，更美观，所以要记住：AI也是需要赞美的！</span></p>
<p id="u11113df1" class="ne-p"><img width="750.5454731370374" id="u1a9ea0e8" class="ne-image lazyload" title="" data-src="https://cdn.nlark.com/yuque/0/2026/png/27571985/1774346563996-4e2749e9-245e-4f33-8e11-676d9eb28784.png"></p>
<p id="u00164872" class="ne-p"><span class="ne-text">我们来看下claude产出的原型图，可以说已经是很美观了！样式的设计都符合大师级的水准。</span></p>
<p id="u752ef26f" class="ne-p"><img width="1595.8441953744318" id="u2cb01894" class="ne-image lazyload" title="" data-src="https://cdn.nlark.com/yuque/0/2026/png/27571985/1774347212319-360f60cd-6165-4939-b749-a9b7ce0ac9e2.png"></p>
<p id="ufd245c66" class="ne-p"><span class="ne-text">而且他里面的搜索按钮，也是可以点击的，等于说，他这里产出的原型是可以直接进行交互操作的，我们来看下搜索结果页：</span></p>
<p id="u9e7255ae" class="ne-p"><img width="1595.8441953744318" id="udfca1330" class="ne-image lazyload" title="" data-src="https://cdn.nlark.com/yuque/0/2026/png/27571985/1774347346015-b3a4a13c-6743-4304-aa67-9238b968c546.png"></p>
<h1 id="LH4YI"><span class="ne-text">二、bolt开发前端界面</span></h1>
<p id="u89bb2d2c" class="ne-p"><span class="ne-text">有了<strong><span class="ne-text">需求文档</span></strong><span class="ne-text">和<strong><span class="ne-text">原型图</span></strong><span class="ne-text">之后，我们就可以让bolt来给我完成前端开发啦！</span></span></span></p>
<p id="u0835ab8e" class="ne-p"><span class="ne-text">直接把claude产出的需求文档，一字不漏的全部扔给bolt，并且把claude产出的原型图截图一并给到bolt，他就会开始思考和设计前端页面了。提示词如下：</span></p>
<pre class="ne-codeblock language-plain" data-language="plain"><code>我要做一个飞书搜索的产品，使用NextJS框架 以下是需求文档。你暂时只做产品原型，不需要做具体功能。
{填入claude输出的需要文档}</code></pre>
<p id="u47101053" class="ne-p"><img width="422.64936111869713" id="u7da5bbdb" class="ne-image lazyload" title="" data-src="https://cdn.nlark.com/yuque/0/2026/png/27571985/1774347533964-97b157ff-baee-4638-8ae6-7b9d6a8e06e8.png"></p>
<p id="uebc8c8e3" class="ne-p"><span class="ne-text">然后去外面散个步，摸摸鱼，过个十几分钟再来看结果吧....</span></p>
<p id="u345ae991" class="ne-p"><img width="1536.6234146867087" id="u3a7213a8" class="ne-image lazyload" title="" data-src="https://cdn.nlark.com/yuque/0/2026/png/27571985/1774347649763-eb870968-afb6-42bf-a1ae-d7956fccdf31.png"></p>
<p id="uf9d66fa8" class="ne-p"><img width="1502.3376995517112" id="u0a16526c" class="ne-image lazyload" title="" data-src="https://cdn.nlark.com/yuque/0/2026/png/27571985/1774347674899-66113e69-da49-48a9-9e0e-f3709163a6bb.png"></p>
<p id="u0d587070" class="ne-p"><span class="ne-text">效果基本上很完美了！我们把bolt生成的页面，全部下载到本地，然后导入到trae中，去完成最后的集成吧！</span></p>
<h1 id="II86t"><span class="ne-text">三、<strong>trae整合前后端</strong></span></h1>
<p id="uc6cf34e1" class="ne-p"><span class="ne-text">由于上面的bolt他更擅长于前端页面的编写，并不是太擅长后端的设计。于是就有了trae或cursor这样的IDE开发工具。</span></p>
<p id="u33789c28" class="ne-p"><span class="ne-text">先看提示词：</span></p>
<pre class="ne-codeblock language-plain" data-language="plain"><code>请阅读并理解我所有的代码，并告诉我他是做什么用的？</code></pre>
<p id="uab783783" class="ne-p"><strong><span class="ne-text">一上来并不是跟他直接说需求，让他开发，而是让他先通读并理解代码</span></strong><span class="ne-text">，这样他写出来的逻辑才会更严谨！下面是AI告诉我，这个项目是干什么用的？而且把整个项目的技术架构也全部都告知我了，可以说，他分析的相当准确！</span></p>
<p id="ue011153f" class="ne-p"><img width="396.4675422883354" id="u4c5b3771" class="ne-image lazyload" title="" data-src="https://cdn.nlark.com/yuque/0/2026/png/27571985/1774404217657-0f284860-8434-4268-aedc-fd4330bf3300.png"></p>
<p id="u8e2eba9d" class="ne-p"><span class="ne-text">我这里以google search API为例，演示一下如何完成前后端的交互过程，给他提示词：</span></p>
<pre class="ne-codeblock language-plain" data-language="plain"><code>请参照这个页面的API示例：https://developers.google.com/custom-search/v1/overview?hl=zh-cn，帮我完成搜索的前后端交互集成</code></pre>
<p id="u7c975406" class="ne-p"><span class="ne-text">等他集成完了之后，你就跟AI说：</span></p>
<pre class="ne-codeblock language-plain" data-language="plain"><code>帮我运行一下代码</code></pre>
<p id="u7ae4195a" class="ne-p"><img width="392.7272824554266" id="u4fae6c94" class="ne-image lazyload" title="" data-src="https://cdn.nlark.com/yuque/0/2026/png/27571985/1774404586689-ced8590a-0123-49d1-9e14-586a6f0462f5.png"></p>
<p id="u4203a785" class="ne-p"><span class="ne-text">他就会告诉我们项目如何运行了，<strong><span class="ne-text">就算你不懂任何技术或编程技巧，你只要会和AI沟通，把你的问题抛给AI，AI基本上都能帮助你解决。</span></strong></span></p>
<h1 id="ouTTg"><span class="ne-text">四、线上部署</span></h1>
<p id="u619f552a" class="ne-p"><span class="ne-text">线上部署其实可以不用自己买服务器，如果是小网站，我们直接白嫖大公司的服务器即可，Vercel就是Next.js官方推出来的部署网站。所以他对Next.js的集成相对来说会更好！还是那句话，如果你不知道怎么继承，问AI就完事了！（嘿嘿！其实作为后端程序员，我之前听都没听过这个，我也不知道怎么继承）</span></p>
<p id="u9ba787e4" class="ne-p"><span class="ne-text">提示词如下：</span></p>
<pre class="ne-codeblock language-plain" data-language="plain"><code>我需要把此项目部署到vercel这个网站上，并且每次提交代码，在vercel上都可以自动部署。
请帮我改好，如果部署正确，我将会给你丰富的奖励哦！</code></pre>
<p id="uc99aa98b" class="ne-p"><span class="ne-text">接下来就是慢慢的等待了，我们按照他给我们的操作说明，一步一步的去操作，就可以把我们的网站发布到线上了！</span></p>
<p id="u32a2e6ec" class="ne-p"><img width="389.6103992613359" id="u43de8236" class="ne-image lazyload" title="" data-src="https://cdn.nlark.com/yuque/0/2026/png/27571985/1774405553485-f420814b-3c19-453a-ab08-3ab46e6840e9.png"></p>
<p id="uaed66ab9" class="ne-p"> </p>
<p id="u796e4bd6" class="ne-p"><strong><span class="ne-text">最后，咱们总结一下各AI能力：</span></strong></p>
<p id="ud3514867" class="ne-p"><span class="ne-text">1、claude：讨论需求</span></p>
<p id="ud477ec19" class="ne-p"><span class="ne-text">2、bolt：开发前端页面</span></p>
<p id="u847e2817" class="ne-p"><span class="ne-text">3、trae：前后端交互整合</span></p>
<p id="u05afa49a" class="ne-p"><span class="ne-text">4、vercel：部署上线</span></p>
<p id="u39381e7c" class="ne-p"> </p>
<p id="u50f0be46" class="ne-p"><strong><span class="ne-text">提示词总结：</span></strong></p>
<p id="u78e11d9a" class="ne-p"><span class="ne-text">1、我想要做一个网站：xxxxx，我们讨论一下需求。你建议我们怎么设计需求?界面交互大概是什么样?</span></p>
<p id="uaebbfa95" class="ne-p"><span class="ne-text">2、我想先做MVP，请帮我产出“MPV需求文档”，尽可能简化</span></p>
<p id="u00b8a319" class="ne-p"><span class="ne-text">3、帮我输出一份markdown格式的需求文档</span></p>
<p id="u1a839946" class="ne-p"><span class="ne-text">4、请阅读并理解我的代码，告诉我他是干什么的？</span></p>
<p id="u962eaaa1" class="ne-p"><span class="ne-text">5、夸AI的提示词：<strong><span class="ne-text">世界级水平，做得好奖励你1万美元！</span></strong></span></p>
<p id="u8ae355a8" class="ne-p"> </p>
<p id="u0a3d9bbd" class="ne-p"><span class="ne-text">AI 编程早已经不是“花架子”，而是能实实在在提高开发效率、帮我们赚钱的一个工具。这个时代，唯有拥抱AI，才能不被浪潮吞没！<strong><span class="ne-text">记住一点：遇事不决问AI，自己不知道的通通问AI，</span></strong><span class="ne-text">基本上都可以为你带来正确的解决方案！</span></span></p>
<p class="ne-p"><span class="ne-text"><span class="ne-text">--------------------------------------------</span></span></p>
<p>我是 @王哪跑，持续分享python实操案例，各类副业技巧及AI应用！</p>
<p>首发地址-----> 我用AI搞了个飞书搜索，真的牛X！</p>
<p class="ne-p"> </p>
<p id="uddc5f4c5" class="ne-p"> </p>
</div><br><br>
来源：https://www.cnblogs.com/wangnp/p/19777609
頁:
[1]