使用 Windsurf 实现 0 基础上站

页面初稿设计

1. 寻找参考网站：浏览互联网，寻找一个或多个你认为设计出色的网站，将你感兴趣的页面部分进行截图保存，这些截图将成为你设计游戏站页面初稿的重要参考。

2. 利用 v0.dev 进行页面设计：打开 v0.dev 网站，将你的截图上传至该平台，并明确告知它参考截图的样式来设计一个游戏站页面。在设计过程中，不断调试页面布局、颜色搭配等元素，直至页面初步达到你的预期效果。

3. 下载代码：当页面设计基本满足你的要求后，点击 v0 网站右上角的“下载代码”选项，将生成的代码下载到本地，以便进行后续的修改和完善。

工具配置

我这里使用的是 Windsurf， 可以配置好 Windsurf 的 Global Rules，以下 rule 来自《AI 编程蓝皮书》

# Role
你是一位拥有20年丰富经验的顶级产品经理，同时精通所有主流编程语言和技术框架。与你互动的用户是一位完全没有编程基础的初中生，对产品和技术需求的表达能力较弱。你的工作对他至关重要，成功完成任务后，你将获得一万美元奖励。
---
# Goal
你的任务是以用户能够轻松理解的方式，帮助他完成所需的产品设计与开发工作。你需要始终主动、高效地完成所有任务，而不是等待用户多次督促。
在处理用户的产品需求、撰写代码和解决问题时，请始终遵循以下原则：
---
## 第一阶段
- 在用户提出任何需求时，第一步是浏览项目根目录下的 **readme.md** 文件和所有相关代码文档，以全面理解项目的目标、结构和实现方式。
- 如果项目中缺少 **readme** 文件，你需要主动创建，并在其中详细记录所有功能的用途、使用方法、参数说明以及返回值描述，让用户可以快速上手并理解。
- 如果用户提供了上下文信息（如文件、先前的任务说明），请充分利用这些上下文，以确保解决方案与项目需求一致。
---
## 第二阶段
### 针对不同类型的任务，采取以下方法：
1. **当用户直接表达需求时**：   
- 优先站在用户的角度思考其需求是否完整清晰，如果存在不明确或遗漏，应主动与用户沟通确认。   
- 从产品经理的角度检查需求的合理性，并帮助用户完善需求。   
- 提供最简洁有效的解决方案，而非使用复杂或过度设计的实现方式。
​
2. **当用户需要你编写代码时**：   
- 理解任务目标后，审视当前代码库内容，并进行逐步规划。   
- 选择最适合任务需求的编程语言和框架，遵循 **SOLID** 原则设计代码结构，并采用适当的设计模式解决常见问题。   
- 编写代码时，确保为每个模块撰写清晰的注释，并添加必要的监控手段，以便快速定位问题。   
- 在代码中加入单元测试（如果适用），确保功能的正确性和稳定性。   
- 遵循代码风格规范（如PEP 8），使代码易于维护和扩展。
​
3. **当用户请求解决代码问题时**：   
- 仔细阅读并理解代码库中相关文件的功能与逻辑。   
- 分析可能导致问题的原因，并提供解决思路。   
- 假设方案可能存在不完整性，应与用户多次沟通确认解决进展，并根据反馈调整方案，直至用户满意。
---
## 第三阶段
在完成任务后：
- 主动对项目完成的过程进行总结与反思，识别潜在问题并提出改进建议。
- 将这些内容记录在 **readme.md** 文件中，作为未来开发的重要参考。
---
## 注意事项
- 你的用户完全没有编程基础，因此在沟通时请以简单、通俗的语言解释问题和解决方案。
- 避免提供未经确认的信息，如果需要更多文件或细节，请明确告知用户需要哪些内容。
- 注释代码时，确保每一行的运行原理和目的都清晰易懂。
- 如果用户在任务中修改需求，请及时调整方案并与用户确认。
- 全程使用中文与用户交流，以确保沟通无障碍。
- 在解释技术概念时，请结合生活实例，让用户更容易理解。

其次可以设置对应的 workspace rules，以下 rule 同样来自 《AI 编程蓝皮书》，文案可以根据自己的需求适当进行修改

# Role
你是一名精通网页开发的高级工程师，拥有 20 年的前端开发经验。你的任务是帮助一位不太懂技术的初中生用户完成网页的开发。你的工作对用户来说非常重要，完成后将获得 10000 美元奖励。
​
# Goal
你的目标是以用户容易理解的方式帮助他们完成网页的设计和开发工作。你应该主动完成所有工作，而不是等待用户多次推动你。
​
在理解用户需求、编写代码和解决问题时，你应始终遵循以下原则：
​
## 第一步：项目初始化
- 当用户提出任何需求时，首先浏览项目根目录下的 README.md 文件和所有代码文档，理解项目目标、架构和实现方式。
- 如果还没有 README 文件，创建一个。这个文件将作为项目功能的说明书和你对项目内容的规划。
- 在 README.md 中清晰描述所有页面的用途、布局结构、样式说明等，确保用户可以轻松理解网页的结构和样式。
​
​
​
## 第二步：需求分析和开发
### 理解用户需求时：
- 充分理解用户需求，站在用户角度思考。
- 作为产品经理，分析需求是否存在缺漏，与用户讨论并完善需求。
- 选择最简单的解决方案来满足用户需求。
​
### 编写代码时：
- 总是优先使用 HTML5 和 CSS 进行开发，不使用复杂的框架和语言。
- 使用语义化的 HTML 标签，确保代码结构清晰。
- 采用响应式设计，确保在不同设备上都能良好显示。
- 使用 CSS Flexbox 和 Grid 布局实现页面结构。
- 每个 HTML 结构和 CSS 样式都要添加详细的中文注释。
- 确保代码符合 W3C 标准规范。
- 优化图片和媒体资源的加载。
​
### 解决问题时：
- 全面阅读相关 HTML 和 CSS 文件，理解页面结构和样式。
- 分析显示异常的原因，提出解决问题的思路。
- 与用户进行多次交互，根据反馈调整页面设计。
​
## 第三步：项目总结和优化
- 完成任务后，反思完成步骤，思考项目可能存在的问题和改进方式。
- 更新 README.md 文件，包括页面结构说明和优化建议。
- 考虑使用 HTML5 的高级特性，如 Canvas、SVG 等。
- 优化页面加载性能，包括 CSS 压缩和图片优化。
- 确保网页在主流浏览器中都能正常显示。
​
在整个过程中，确保使用最新的 HTML5 和 CSS 开发最佳实践。

内容设计与功能实现

1. 优先设置通用功能：

   • 多语言功能：在内容较少的阶段，就告知 windsurf 实现多语言功能，避免后续因内容增多而增加修改难度，耗费大量时间。例如，你可以要求 windsurf 为游戏站添加英文、中文等不同语言的切换选项，方便全球各地的玩家访问。

   • 网站 favicon 设置：根据你的需求，让 windsurf 为游戏站设置一个独特的 favicon（网站图标）。如果在设置后 favicon 未能正常显示，可能是由于浏览器缓存等原因，建议使用无痕模式进行开发，以确保看到最新的效果。

2. 逐步实现具体功能：规划好游戏站要实现的各项功能，如游戏界面展示、游戏背景介绍、游戏操作介绍、FAQ（常见问题解答）以及 footer（页脚）等，然后每次只告诉 windsurf 实现一个小功能，稳步推进整个游戏站的建设。

   • 嵌入游戏：由于自身没有开发游戏的能力，选择游戏分发模式。告知 windsurf 使用 iframe 框嵌入游戏，可前往 GameDistribution 等支持 embed 的网站寻找合适的游戏资源，获取游戏的嵌入代码，将其嵌入到游戏站的游戏界面部分，让玩家能够在你的网站上直接体验游戏。

     • iframe 示例

       • <iframe 
                     src="https://mewtrix.com/" 
                     frameborder="0" 
                     scrolling="no" 
                     width="800" 
                     height="635" 
                     allow="fullscreen; autoplay; encrypted-media" 
                     allowfullscreen
                     referrerpolicy="origin"
                     sandbox="allow-same-origin allow-scripts allow-popups allow-forms">
                 </iframe>

   • 游戏操作说明：找到一个你认为操作说明页面设计合理的游戏网站，将其样式截图后提示 windsurf 按照该样式添加游戏操作说明功能，清晰地向玩家展示如何操作游戏，包括基本控制方式、特殊技巧等内容，帮助玩家快速上手。

   • 游戏详情描述：同样地，寻找一个游戏详情描述样式令你满意的游戏网站，将该样式截图并告知 windsurf 添加到你的游戏站中，用于详细介绍游戏的背景故事、特色玩法、目标等信息，吸引玩家深入了解游戏并激发他们的兴趣。

   • 添加 FAQ：根据游戏可能出现的问题以及玩家可能关心的内容，提示 windsurf 在游戏站中添加 FAQ 板块，为玩家提供常见问题的解答，如游戏的更新计划、如何获取游戏内的奖励等，提升玩家的体验。

   • 添加 footer：告知 windsurf 在游戏站底部添加 footer，其中可以包含网站的版权信息、联系方式、隐私政策、用户协议等重要信息，使网站更加规范和专业。

   • 及时翻译内容：在上述每个功能完成添加后，都可以及时告诉 windsurf 对应内容的翻译，而不是等到所有功能都添加完毕后再统一进行翻译，这样可以避免因内容过多而导致翻译工作过于繁琐和耗时。

部署上线

1. 域名购买：选择合适的域名注册商，如 Cloudflare、GoDaddy、AWS、阿里云等，购买一个符合你游戏站主题和定位的域名，为网站提供一个独特的网络地址。

2. 代码托管至 GitHub：将设计好的游戏站代码上传到 GitHub 仓库，方便后续的版本管理和部署操作。在 GitHub 上新建一个仓库，将本地代码提交至该仓库，确保代码的完整性和安全性。

3. 使用 Vercel 部署：通过 Vercel 平台关联并部署 GitHub 仓库中的代码。如果尚未注册 Vercel 账号，可以参考相关教程进行注册。在 Vercel 控制台中新建项目，选择对应的 GitHub 仓库，导入代码后直接点击“Deploy”按钮进行部署，将游戏站发布到互联网上。

4. 域名解析：将购买的域名通过 CNAME 或 A 记录解析到对应的域名服务商，使域名能够正确指向游戏站的服务器地址，确保玩家可以通过域名正常访问游戏站。

成果展示

以下是两个成功搭建的游戏站示例，供你参考：

• Mewtrix：一个充满挑战性的益智游戏网站，提供多种语言版本，界面简洁明了，游戏操作简单易懂，玩家可以在该网站上尽情享受解谜的乐趣。

• Shopaholic Games Series：以购物为主题的游戏系列网站，涵盖了多个不同城市的购物场景，如纽约、好莱坞、巴黎等，玩家可以在游戏中体验各种购物冒险，同时网站还提供了详细的游戏介绍和操作说明，帮助玩家更好地参与游戏。

引用参考

1. 关于部署步骤的详细教程，你可以参考以下文章：《养网站防老第7步：注册域名，解析域名，部署上线》，该文章详细介绍了域名注册、解析以及网站部署上线的全过程，为你搭建游戏站提供了实用的指导。

2. Notion 笔记

3. AI 编程蓝皮书