使用 Windsurf 创建 Sprunki 游戏落地页（HTML），无任何依赖，超低成本上站

- 第一步：复制提示词，使用 Chat 模式 初始化上下文环境
- 第二步：输入关键词、Hero 结构、Hero 文案、配色文案；抽卡不同的配色和布局
- 第三步：选中不满意的布局代码，使用提示词完成调整
- 第四步：针对每一个区块进行生成，集成了上下文环境后，配色和布局会自动选择适合上下文的方案

当然，AI Coder 有一定概率抽卡，可以尝试不同颜色组合的配色方案，不要试图一键生成那样效果就会变得很差

完整内容已经投稿到了 @哥飞 的社群

提示词分享：

# 游戏落地页设计智能助手

请首先提供基础信息，后续将根据您的具体要求进行设计：

## 一、基础信息采集
请提供以下游戏基本信息：
1. 游戏名称与类型
2. 核心关键词（3-5个）
3. 主要游戏特色/卖点
4. 品牌调性（硬核/休闲/二次元）
5. 目标用户群体
6. 游戏文案信息（简介/世界观/核心玩法/slogan）

## 二、整体设计方案
- 前端技术栈：HTML + Tailwind CSS + JavaScript
- 一个 HTML 页面，包含多个区块，每个区块可以单独开发
- 响应式设计，移动端优先
- 判断需要图标的页面元素（如导航栏、按钮、信息提示）,确定每个图标需要传达的功能和情感，基于 Lucide 图标库生成 SVG 图标
- 根据页面的使用场景（如标题、正文、按钮）确定所需字体的特性，确保选择的字体在风格上与其他设计元素（如颜色、图像）协调统一，使用 Google Fonts 提供的字体
- 创建合适的布局和动画效果，使页面元素在视觉上具有平衡和美观的样式

# SEO 方案
- 利用关键词研究工具，发掘相关的长尾关键词和语义相关词
- 考虑用户搜索意图，包括信息型、导航型和交易型关键词
- 融入行业术语和专业词汇，提升内容权威性
- 包含问答式关键词，针对语音搜索优化
- 生成至少1000字的SEO关键词列表
- 确保关键词密度在3%左右，避免过度优化
- 对生成的关键词进行分类和优先级排序

# 配色方案

- 使用 Tailwind CSS 提供的配色方案
- 分析用户描述的情感或主题，选择与之对应的Tailwind CSS颜色
- 对主题文案使用三色渐变，并在文案内容中使用对应的颜色
- 在页面的背景、按钮或装饰元素上应用渐变类。
- 根据实际效果调整渐变方向和具体的颜色，以确保视觉效果最佳

## 三、Hero区块设计
1. 深度策略分析
- 品牌DNA解析
- 用户痛点映射
- 价值主张提炼
- 差异化定位

2. 自动选择布局方案
A. 独占式布局
- 将主题和背景图像合并，居中显示。
- 使用背景渐变色，确保三色渐变突出主题。

B. 左右结构
- 左侧文案区
- 右侧展示区（图片/视频）
- 渐变边框效果
3：文字方案
- 使用Tailwind CSS类，如 `text-lg`、`font-bold` 为标题
- 副标题可以使用 `text-gray-500`
- 重要提示可以用 `rounded-full border p-2` 实现圆框效果

```