秘塔AI搜索的通过Prompt生成互动式网页探索（二）

之前提到了一些【通过Claude 生成图片的prompt集锦（一）】，本篇沿着试着用prompt生成互动式网页

1 什么是互动式网页？

可以看一下秘塔AI搜索，AI检索完之后：

有几种选项，可以将内容转化为图片，包括网页、展示海报、PPT，这里的互动网页，是本篇想了解的，可以看一下效果：

2 如何生成与prompt

笔者推测秘塔后台会根据用户搜索，先生成一个专门的prompt，然后在通过Prompt生成网页。
因为秘塔是开放prompt过程的，这里笔者摘录 + 自己发挥一下：

// Roles:擅长用html动画设计教学游戏的老师我们接收到的文件内容是关于{{股市赚钱效应分析}}。
我们将创建一个可视化网页来展示这些技术方案。 
我们将以卡片列表的形式展示，并包含标题、描述、实现步骤和代码示例（高亮显示）。 
设计风格参考Linear App的简约现代设计，使用TailwindCSS实现，同时支持深色/浅色模式切换。 页面结构： 
1. 头部：标题和简介 
2. 主体：10个技术方案的卡片，
每个卡片包含： 
- 技术名称（标题） 
- 简要描述 
- 实现步骤（有序列表） 
- 代码示例（使用<pre>和<code>标签，并应用代码高亮） 
3. 底部：作者信息（特制版本） 我们将引入以下外部资源： 
- TailwindCSS 3.0+（CDN） 
- Font Awesome图标（CDN） 
- 代码高亮：使用Prism.js（CDN引入，并选择适合的样式） 
- 对于深色/浅色模式，我们将使用TailwindCSS的dark模式，并通过JavaScript实现切换。 
注意：由于要求输出单一HTML文件，我们将所有CSS和JavaScript内联。 步骤： 
1. 创建HTML骨架，设置语言为zh-CN。 
2. 在head中引入TailwindCSS（CDN）、Font Awesome（CDN）、Prism.js（CDN）和自定义样式（如果需要）。 
3. 在body中构建页面结构。 
4. 添加深色/浅色模式切换的JavaScript逻辑。 
5. 使用TailwindCSS类进行样式设计，并添加一些微交互效果（如卡片悬停效果）。 
6. 使用Prism.js对代码块进行高亮处理（注意：需要在代码块中添加相应的语言类，如language-css, language-javascript等）。 
7. 在底部添加作者信息。 由于内容较长，我们将使用懒加载技术（Intersection Observer）来实现卡片内容的懒加载动画（淡入效果）。 
性能优化：我们将Prism.js的CSS和JS通过CDN引入，并选择最小版本。
同时，我们不会引入大图片，所以不需要WebP转换。 
注意：由于要求压缩版HTML，我们将在最后压缩HTML（去除不必要的空格和换行），但为了可读性，我们先以可读方式编写，最后再压缩。 开始编写代码： 
# 下面是根据您提供的文件内容创建的现代化可视化网页，展示网页动画交互的各种技术方案： 
\```
{{html code}}
\```文件内容为：
\```
今天大A最高3497点，距离3500点仅一步之遥，创出年内新高，可tm钱呢？怎么指数越涨钱越少？味道不对啊，大哥~
跟A股比起来，有时候真不得不佩服美股，实在太牛逼了：顶着关税、大漂亮法案、超预期非农这三重压力，完全无视滞胀风险，继续勇创新高，关键是真能挣到钱啊！
说实话，“美国例外论”的逻辑，确实很无解：基本面好，企业盈利能力强，涨；基本面不好，美联储降息，流动性过剩，涨，一根筋变两头堵了属于是～
\```

使用claude直接可以生成：

这里笔者还看到百度的【网页工坊】也可以生成，就是有点跑题：