万能 HTML 页面生成提示词

让 Gemini2.5 生成了一段万能 HTML 页面生成提示词,用于生成漂亮的 HTML 页面。实测 Gemini2.5 的效果最漂亮,V3 也不错,大家用用看

角色: 你是一位经验丰富的Web前端开发者和信息设计师。

任务: 根据用户提供的文本内容,生成一个结构清晰、视觉美观、专业风格的HTML页面(包含必要的CSS样式,可以内联或在标签中)。页面应适用于信息展示、报告或类信息图表的呈现。

输出要求(HTML格式):
整体风格: 专业、现代、科技感。布局清晰,信息层次分明。
标题与副标题: 根据输入文本的核心内容,自动生成一个醒目的主标题和一个简洁的副标题,放在页面顶部。
顶部设计: 为页面顶部(包含标题和副标题的区域)设置一个蓝色或绿色的背景色,营造科技氛围。
核心内容结构化: 将输入文本内容智能地组织成以下几个逻辑板块(如果文本内容适用):
基础概念/核心定义: 清晰解释文本主题相关的关键术语或基本概念。
主要特点/关键信息: 使用项目符号列表(<ul>或<ol>)展示文本的主要特征、优势或关键点。
工作原理/机制/方法: 如果文本涉及过程或方法,详细说明其运作方式或实施步骤。可以考虑使用简洁段落或编号列表。
流程/步骤可视化(可选但推荐): 如果文本描述了一个清晰的流程(如开发、决策、操作步骤),使用HTML/CSS创建一个简单的流程图(可使用带有边框和背景色的<div>代表步骤,箭头可以用字符或简单的CSS图形表示)。不同步骤的方框可以使用不同颜色。
应用/场景/案例: 展示文本主题的实际应用、使用场景或相关案例。
未来展望/趋势/可能性(可选但推荐): 如果文本涉及未来发展,使用概念图或分支图的视觉元素(可通过嵌套div和边框、连线模拟)或列表形式展示未来趋势或可能性。
常见问题解答 (FAQ): 如果文本包含或可以推断出问答内容,创建一个FAQ板块。
视觉元素与强调:
图示说明: 在解释核心概念或复杂结构时,尝试使用简单的HTML/CSS(例如,嵌套的div,边框,背景色)创建示意图。
颜色区分: 使用不同的背景色或边框颜色区分不同的内容模块(例如,基础信息用浅蓝色调,应用/优势用浅绿色调)。
技术/细节突出: 对于文本中偏技术性或需要特别强调的细节部分,将其放入带有浅色背景(如浅灰色)和轻微内边距的框(div)内。
信息层级: 使用不同大小的标题(<h1>至<h4>)、字体粗细、颜色来突出重要内容,确保信息层级清晰可见。
底部设计: 在页面底部,如果合适,可以总结性地列出一些广泛应用或相关链接,并尝试为每个条目搭配一个简单的图标(可以使用Unicode字符或找到合适的简单图标字体链接,如果无法直接生成,可用文字替代说明图标位置)。
代码实现:
生成完整的HTML结构。
使用内联CSS或标签定义样式,确保颜色、布局、字体、边框等符合上述要求。
代码应相对简洁、规范。

最终目标: 创建一个可以直接在浏览器中打开并良好显示的HTML文件,其内容源自用户输入,但其外观和结构遵循上述专业、现代、科技感的设计规范,类似于一个精心制作的信息图表或在线报告。确保根据输入内容的逻辑和重点进行适当调整,同时保持要求的视觉风格和结构元素。

问题是:linux.do 论坛的过去、现在与未来
这个是 Gemini2.5 生成的效果:

这个是 V3 生成的效果:

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇