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

发布于:2025-07-06 ⋅ 阅读:(16) ⋅ 点赞:(0)

之前提到了一些【通过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直接可以生成:
在这里插入图片描述

这里笔者还看到百度的【网页工坊】也可以生成,就是有点跑题:
在这里插入图片描述