优化美化网站策略
通用网站美化AI提示词清单 (可复用版)
核心指令：
“你好，AI。请根据以下策略，为我的网页进行一次全面的视觉和交互升级。目标是打造一个现代、简约、专业且富有动态美感的页面。”
第一部分：全局布局与背景
- 提示词：“策略1：创建雅致的页面背景。 请为整个
<body>应用一个微妙的背景。我偏好带有科技感的静态背景：使用浅灰色（如#f0f0f0）创建1像素的精细网格图案，并在页面右上角或右下角叠加一个非常柔和的、大范围的放射状渐变光晕（如从#d5f5f3到透明），为纯色背景增加视觉层次感。”
第二部分：核心组件样式
-
提示词：“策略2：设计醒目的主视觉区（Hero Section）。 在页面顶部，创建一个引人注目的主视觉区域。
- 主标题：使用一个大字号的
<h1>标签，将其文字设为从蓝绿色到青色的醒目渐变色（使用bg-clip-text和text-transparent技术）。 - 副标题：在主标题下方，放置一段简短、清晰的描述性文字，使用比正文稍大的字号和柔和的字体颜色（如
slate-600）。 - 行为召唤按钮（CTA）：设计一个显眼的‘开始探索’或类似文案的按钮。它应为圆角矩形（胶囊形状），有实色填充（如
teal-500）、文字为白色，并带有轻微的阴影。鼠标悬停时，按钮有放大（hover:scale-105）和阴影增强的动画效果。”
- 主标题：使用一个大字号的
-
提示词：“策略3：统一设计内容分区标题。 所有的内容分区标题（如
<h2>或<h3>）都需要统一、精致的样式。- 结构：将每个标题都用
flex布局，左侧放置一个简洁、线条风格的SVG图标，右侧是标题文字。 - 交互：当鼠标悬停在整个标题区域时（使用
group-hover），标题文字的颜色变为主题色（如teal-600），同时左侧的SVG图标要有一个微妙的交互动画，例如轻微旋转（group-hover:rotate-12）或缩放（group-hover:scale-110）。确保所有动画都有平滑的过渡效果。”
- 结构：将每个标题都用
-
提示词：“策略4：设计交互式链接卡片。 页面中所有用于导航的链接，都应设计成统一的卡片样式。
- 外观：卡片应为圆角矩形，有清晰的边框（
border-slate-200/70）和基础阴影，背景使用带透明度的白色（bg-white/90），营造半透明质感。 - 悬停效果：鼠标悬停在卡片上时，卡片需有轻微上浮（
hover:-translate-y-1）和阴影加深（hover:shadow-lg）的视觉反馈。 - 指示箭头：在卡片的最右侧，放置一个指向右方的箭头SVG图标。此图标默认状态下是透明的（
opacity-0），当鼠标悬停在卡片上时，它会平滑地浮现并向右移动一小段距离（group-hover:opacity-100和group-hover:translate-x-1）。”
- 外观：卡片应为圆角矩形，有清晰的边框（
第三部分：动态与用户体验
-
提示词：“策略5：添加平滑的滚动入场动画。 为页面中主要的独立内容区块（通常是
<section>或外层<div>）添加滚动时的入场动画。当用户向下滚动，区块进入视窗时，它会从下方伴随着淡入效果平滑地移动到最终位置。请使用IntersectionObserverAPI 来实现此功能，以确保最佳性能。” -
提示词：“策略6：实现‘返回顶部’功能。 在页面右下角，添加一个固定的、悬浮的‘返回顶部’按钮。
- 外观：设计成一个简洁的圆形按钮，内含向上的箭头图标。
- 行为：此按钮默认隐藏。当页面向下滚动超过一个屏幕的高度（或400像素）时，它会平滑地淡入并上浮出现。点击该按钮后，页面会平滑地滚动至最顶部。”
您可以根据需要，挑选其中的几条策略组合使用，或者将整个清单交给AI，让它为您打造一个完整的、拥有顶级视觉体验的网页。