前一阵去新加坡旅游,照例带回来很多美好的回忆与很多可能拍了也不怎么看的照片。整理过程中,正好看到网上歸藏老师和向阳乔木老师分享的神级提示词,他们的原文是教如何通过提示词工程来生成一个精美的总结文章的网页,灵机一动,何不用这个方法来做一个旅游游记的网页呢,那些照片也有了用武之地。
说干就干。
需要的工具:
• 神级提示词(适配于游记网页的版本);
• AI编程工具Trae;
• yourware.so,用于把做出来的网页转化成可分享的外链,省去自行部署的麻烦。
讲解步骤之前,先来看一眼最终的成果,简单感受一下:

神级提示词
改造一个适配游记的版本
基于歸藏老师和向阳乔木老师的原版提示词,在这个基础上做了修改。这版提示词在实际使用后又及时让AI做了总结,保证输出效果,可以直接拿去用(在生财不搞套路,直接去飞书上拿提示词)

用Trae AI编程生成网站
1. 用Trae生成初版
打开Trae(我用的是国际版,看重的是claude3.5 或 3.7的大模型,此模型编程公认第一),先建一个文件夹和propt.md的文件,把神级提示词粘贴到propt.md中,然后在对话框让AI直接生成一个网站

Trae开始疯狂工作,然后生成一个框架没问题的网站,但是由于我采取的是固定链接图片,在没有给它提供图片的情况下网站还是一片空白,这也是正常情况。 当然,如果不指定特定的游览路线,让AI自由发挥,它会给你生成一个大陆货的新加坡游记网站(我实际第一次的时候就是这样做的)。

2. 根据需求改改改!
剩下的就是如何从一个大陆货的网站变成符合自己实际行程的网站,我主要做了这样几件事。
• 指定AI按照我提供的3天11个景点来进行内容的创作;
• 把我3天11个景点的图片上传到图床,并提供给AI图片链接(不得不感慨,之前打通的cloudflare+picgo的图床组合太丝滑了,还不会的看这篇(原来是公众号链接,严格遵守生财不打公众号广告,回头我单独在生财里写一篇,请稍等,等不及的自己想办法也能找到)
• 改地图设置(这个功能花了很长时间,因为原先用的leaflet不能在国内正常显示,用高德或腾讯地图又显示不了国外地图,最后只好采用静态图片地图,在Google map上手动插点画了路线图。期间还把网站改乱了,花了不少功夫回复到正确的版本,看来即使是个单网页最好也要想着随时备份的好,只需要复制html网页副本即可)。
• 上传了推荐书籍的图片到图床(这两本真的是此次新加坡游玩后想看的书,想了解这个神奇的国家到底是怎么达到现在的状态,《寻迹狮城》已经看完很有收获,有点像何伟《寻路中国》、《江城》的感觉,李光耀那本打算读起来)。
• 对网页的内容做了文字上的调整。
• 增加了社交媒体的栏目(要做就做全套),传了自己社交媒体的网址和二维码(学会了如何找公众号和小红书的二维码,如果你也不会找,请问AI)。
在yourware上部署并获取共享链接
yourware.so 是一个帮助你把上传的html网页直接部署并生成外链方便共享给朋友的网站,省去了部署的麻烦。
上面还可以看到很多有趣的网页设计,看到不少中国网友的成果!

得到一个可以访问的外链地址(请在拨冗访问一下网页,能看到静态图片看不出来的动态效果)
2025新加坡游记-花园中的未来城市
总结
整个的网站从想法到实现大概花了一晚上的时间,主要时间花在了跟AI交流改代码上,如果提示词写得好或者更有经验,相信能用更少的时间来完成更好的效果。
各位,有什么有趣的想法赶快动手吧,有了AI,从想法到实现不再有那么多难以突破的界面。
在生财的思路扩展:
既然都能做出这样一个网站,是不是可以套壳直接输出个AI服务,让小白只传照片和提供景点就能直接得到这样的网站?我很自然产生了这个想法,但由于最近正业工作较忙,可能没那么多时间深研究,如果有哪位小伙伴或大佬有同样的兴趣,欢迎来链接大家一起探索下。
Comments on "旅游归来除了发小红书还能直接做精品网页,教你一步步用AI来实现" :