如何用AI打造现代化网站

使用的agent

对于要求不大、日常使用的朋友们可以使用TRAE或open code也可以使用open claw、豆包工作、hermes等Agent

• 总结模范网站
• 创建学习技能
• 创建创建技能

总结与创建

• 总结：让 Agent 总结10个可参考与模仿的网站，提示词如下：有什么ui是值得学习和模仿的，请给我前十个不同类型网站的优秀设计
• 创建：我们开始创建第一个技能 UI-design-digest此技能让AI学习与读取网站中的内容,便于以后创建网站,提示词如下

              我要创建一个agentskill，用来读取网站代码并分析它的Ul设计，从中学习和 
          模仿它的优秀设计，现在你要帮我设计一个详细的、规范的、系统性的指导方 
          案，用来决定AI应该如何研究网站的设计，研究什么地方，提取什么信息，总 
          结什么知识。这个行动方案的格式应当遵循agentskill的常用格式，它最后需要 
          产出一份可用性强、可以在AI需要生成网站时直接被学习和模仿的知识文档。
            

• 创建：还是创建一个技能kb-site-builder让AI用学习的内容创建网站，提示词如下

              我要创建一个用于生成网站的agentskill，这个skill在基本功能上应当基于现 
        有的技能商店里的UI设计和前端开发的技能，但是在UI设计上必须优先参考项 
        目库内保存的来自上一个skill生成的那些知识文档，从而在生成网站时，以本地 
        的知识库所提供的UI设计风格为主，而不是传统的默认风格。
        

下一步骤

• 创建知识库：把这段话发给AI：D:\chengxu\websitefile\work\XiaoyWeb\plan\ui-knowledge\
• 这样再用知识库生成自己想要的网站就好啦

相关链接

• 本网站：https://xiaoyangteam.cn/post-3.html
• B站视频：https://www.bilibili.com/video/BV1TNaP6MEUJ/?spm_id_from=333.1007.top_right_bar_window_default_collection.content.click&vd_source=bfacd588e7f0065b17ca229846b2d0de

成品

• 本网站：Trae
• 示例网站：豆包工作

预设的东西，我也不知道说啥，那就天天开心吧。