上一篇文章讲了如何用AI开发简单的单页网站，今天开始讲讲如何开发复杂的单页网站。本期视频主要是教你如何准确描述界面布局和内容，让AI开发出你需要的界面样式，还有网页里如果有多个功能点该如何让AI处理问题等等。当你学会之后，你想用AI开发个人网站或企业网站都会得心应手。
首先讲一下简单的单页网站和复杂的单页网站有哪些区别，简单的单页网站，功能都比较单一，逻辑也比较简单。复杂的单页网站，逻辑会较多，一个页面里有多个功能模块和多个系统逻辑。如果以后你需要开发大型的网站软件，不可避免的会出现一个页面里有多个功能多个系统逻辑的情况，所以这也是为了帮助你打好基础。比如我这个全球实时时间的首页 tools.gushiio.com/time/，里面包括了地图模块，老黄历模块，热门城市模块，更多国家时间模块。他们都代表着不同的功能逻辑，比如这个世界地图是最复杂的，因为它的背景并不是一张世界地图的图片，而是用代码写出来的世界地图，这样AI才能准确地把不同国家的时间放在对应国家的地图位置上。第二复杂的是老黄历，这里显示的内容都是使用第三方老黄历数据库来实现的。这个世界地图代码和老黄历的数据库如果你有需要，可以在视频下方留言给我，我提供下载地址给你。热门城市时间这个还好，虽然上面有动态时钟，但这种功能并不复杂，AI能轻松驾驭，最下面的是最简单的国家名称列表，所以整个页面的内容是从上到下，从复杂到简单的功能来呈现给大家。
接下来讲讲开发思路，毕竟我的AI课程主要就是讲开发思路和AI沟通方法，有了开发思路，你就能借助AI开发你需要的功能。所有撸码的工作全交给AI，我们就安安分分的做一个CV程序员就可以了，什么是CV程序员？就是只需要会Crtl+C和Ctrl+V的程序员。继续讲讲开发思路，像这样的复杂的单页网站，建议先做最难的功能，比如这个世界地图和老黄历，毕竟如果页面内容较多，代码量就会多，这会影响AI开发时消耗判断问题和解决问题的算力。但是为了一开始能定好大致页面内容布局，其他区域的内容我也会跟AI说一起做上去，让AI先写一个大致完整的内容界面出来，只是其他小功能有bug或界面有问题我不会优先处理，先把复杂的功能做好，再做其他。
现在讲讲如何让AI做一个大致页面出来，首先，我们需要准确的描述页面布局给AI，让AI能按照你的需求来制作界面。例如这个地图和老黄历，他们的样式有点像个卡片，你可以这样写描述文字，左边为地图卡片内容，右边为老黄历卡片内容，两个卡片放在同一行上，左边内容按比例占70%，右边内容占30%，一定要说这个比例，否则AI会把这两个内容按照各占50%来显示。这样这个区域的布局就会出来。至于地图和老黄历卡片里有什么内容，你另外补充告诉AI就可以了。下面的“热门城市时间”和“更多国家列表”，你就直接告诉AI一共要显示多少个国家时间或者国家名称列表，一行多少列，比如这个界面是一行4列就可以了。
如果你需要指定某些内容的颜色，例如这个鼠标移动到按钮上显示的红色，你就需要提供这个红色的颜色代码给AI，因为你跟AI说红色，AI使用的红色可能跟你想象的不一样，为了避免分歧，你需要把准确的颜色代码发给AI。这时候你可以到我这个原型设计软件的“颜色管理”里，选择对应颜色，例如这个红色，这里显示了红色的颜色代码，然后把这个颜色代码发给AI，AI就可以根据你提供的颜色代码来修改颜色。你也可以把颜色保存下来，它会显示在这里，方便你下次找得到。还有就是文字大小，如果你跟AI说文字大一点或小一点，AI是不清楚究竟大多少小多少，它需要你提供准确的数字，所以之前我做这个原型设计软件，就是为了可以预览对应字体的大小，然后把大小的数字发给AI。一般网页字体大小的单位是像素的就是px，例如这里字体大小是16，就是16px，你可以在这里调整字体的大小，例如13，你觉得这个字体大小合适，你就告诉AI，按钮里字体大小为13px就可以了，这样就能避免在AI制作界面时颜色和字体大小与你需要的不一样的问题。
现在整个页面的大致布局，AI已经做出来了，至于风格嘛，我一般都是叫AI按照年轻人喜爱的样式来制作页面，你也可以让AI做其他的风格，例如门户风格，社交媒体风格等等。有了这个大致的页面后，先不要急着让AI去美化页面，一定要把所有功能都做好了，最后再美化，因为AI在修BUG的过程中，或多或少都会调整一下界面的，等做完功能后再美化界面，这样会比较合理。
然后讲讲这个页面开发的难点，其实世界地图这个是最难的，我需要地图上的时间秒数能实时跳动，这个我问了很多次KIMI和DeepSeek都无法解决，最后使用Askmany的Gemini一下就解决了。所以我现在一般都推荐大家直接用Gemini来开发，能省心不少。你可以通过鼓狮工具箱的首页这里点击进去注册Askmany，能额外领取100元代金券，购买VIP时会便宜不少。第二个难点是老黄历的财神方位，老黄历上面的内容都是直接调用数据来显示的，只有这个财神方位是通过什么天干地支算出来的，这个我是用腾讯元宝版DeepSeek的推理内容上看到的。我打开这里AI参考的文章，那篇文章完全就是讲风水命理的，根本与功能开发无关，没想到这个财神方位的功能问题，居然是AI看了风水命理的文章给解决了。当我看到这个AI的推理内容后，我开始重视AI推理的内容，几乎每次修改重要的bug，我都会认真看一下推理内容，它能让我知道，我的提问有没有被AI准确理解。
所以每当发现AI一直没有解决功能问题时，一定要认真看看AI一开始的推理内容，看看AI理解你的问题对不对，它们在寻找解决方案的方向对不对，毕竟这是直接影响AI能否准确解决问题的关键。如果发现AI在推理时，AI对你提出问题的理解是错误的，那你就需要修改提问的话术，并且提醒AI，你的理解是错误的，我要解决的问题应该是“这样这样的”。
最后，讲讲这个国家列表 tools.gushiio.com/time/china-…，这里每个国家的时间页面都是用html静态页面制作的，由于国家数量较多，我不知道哪些国家的时间页面漏做了，如果我一个个的打开页面链接来检查，那效率太慢了，我就在网上找了一些能批量检查死链的工具来使用，但普遍都只能检查页面里10-30条的网址链接，我这种上百个的链接就需要额外付费，所以我让AI开发了这个批量检查网页联通性的工具 ai.gushiio.com/link_checke…，这个工具在我以后的网站项目里面都能帮上忙，能让我发现我们的网站有哪些内容页面丢失或者没有做上去，因为这个对于做网站SEO优化来说很重要。如果你需要这个工具可以在视频下留言，我提供源码下载地址给你。使用也很简单，你直接在宝塔界面把文件上传上去立刻可以使用，如果你不知道这个宝塔界面是如何来的，可以看看这个视频。
总结一下，本期视频主要分享了3点：
第一，如何写页面描述提示词能让AI制作出对应的网页出来
第二，一个网页里如果有多个功能点时应该优先开发复杂功能
第三，遇到一些AI较难解决的功能问题时，一定要认真看AI推理的内容，这能配合AI快速解决问题
