找提示词这件事对我来说，一直是一个麻烦的事情。

大多数时候，很多东西我可能就直接丢飞书文档里面了。

飞书文档用得好确实是个好东西，但是打开链路一旦长了，等待加载的时候总让人觉得烦躁。

用网站来快速找到自己想找的文档/提示词，我认为是对自己比较友好的方式。

刚好最近刚上手Claude Code，顺便试试效果咋样。

先看成品——AI人格图书馆

先看结果，我是非常满意的。

http://project.fangkele.online/project/personality-library/ai-roles-showcase.html

在需要用到相关提示词的时候，进入网站➡️直接打开/快速检索打开➡️复制提示词，

这个操作路径就很快了，10秒搞定。

开发思路

眼尖的同学可以看到，我这些提示词里面，已经包含了专业的软件开发团队，UI/UX设计团队，编程专家这些提示词。

以往我们开发一个前端页面的时候，可能一个需求丢过去。让AI编程工具直接就开干。

但是做出来的效果可能不太好。

因为你没有给AI框定一个“人设”，它可能就以自己的思路来了。

而有“人设”的AI，会一定程度上，遵循这个人设的思考习惯，行为方式。

我们看看是怎么做出来的。

开始开发

步骤一：准备资料

当前项目目录下，有几十个角色的提示词文件，接下来我们需要让AI帮我们把这些提示词整合起来，做成一个网站进行展示。

步骤二：召唤合适的角色进行分析

在做这个网站的时候，可以看到，我没有太多的思路，只是提了一个简单的要求：好看+简洁+交互体验好。

专业的团队，能够“get”到我真正想要什么，不用我去做过多的接入和指导。

这才是AI编程里面最“爽”的点。

客户只管提需求，AI秒get需求，颗粒度对齐，咔咔猛干。

架构大师，做整体规划

设计团队：抠设计和交互细节

步骤三：自动规划出To-do list写代码

上面的To-do list，Claude Code挨个完成后，就会给最终反馈。

这也是我最喜欢Claude Code写代码的姿势之一。

每次交互，就是一次完整的To-do list执行，任务完成后做工作汇报。

而Cursor经常因为调用工具次数上限被打断，工作不连续。

步骤四：验证功能是否符合期望

虽然To-do list里面有测试这一项，但是这个我们看看就算了。

对于网站功能，真正的功能测试，交互测试，还是得自己亲身体验一下，才是完整的测试。

持续改BUG，提意见的过程：

还好，改的轮次不是很多，主要出在在跨域和搜索响应的问题，跨域的问题，可以下次在开发前，和AI确定好文件内容引用的规则，这样子就不会绕弯路了。

最后，把我的通用页脚给AI，让它以当前界面的样式风格，嵌入到网页中。

成果展示

主页

打开网页，成品就开头的图片一样的效果了。

搜索

详情

未来规划

现在有27个角色+6个团队，未来有更多提示词的情况下，可以直接把提示词发个Claude code或者其他编程工具，直接扩展角色资料的js文件，保持做一个易维护的纯前端项目就行。

复盘一下

这次的网站开发，风格和交互我很喜欢，就可以让AI总结成提示词，下次开发同类型的网站：比如说文章卡片，知识卡片之类的网站，就可以接着用，一键完成开发。

页脚也是可以重复利用的，下次开发前，可以先把页脚的模板放到Claude.md里面。可以逐步形成自己针对不同方向开发的Claude.md模板。这个模板适用于任何AI编程工具，持续Update是很有意义的。

1. 
   

   找到开发过程中，下次可以避免出问题的地方

这次主要还是跨域的问题，但是实际上可以拆分成两个问题：

① 前端资源引用问题

② 数据来源问题

这两个问题在开发前可以先确定清楚，减少和AI的沟通成本