前言
xhair.pro是一个基于CS2游戏的准星数据展示网站。
我在辞职的几个月中用了一周时间开发上线了这个产品，很早就想写点什么，不过总是耽搁 >_< .
本文是从整体产品角度出发，在这之前我写过两篇相关技术文章：WASM初探 和 Xhair迁移 - 从Vercel到自部署，也可以看下。
背景
一是裸辞期间无聊的想写点代码，二是大学期间也有相关的念头，算是了结一下心愿。
之前我有使用过 ProCrosshairs 算得上竞品，可以看到在数据展示的逻辑和页面UI上都很勉强，考虑到玩家基数大以及闲着无聊，就想做出来分享一下。
数据
上线首周我在Reddit发了文章试试水 Introducing Xhair.pro
首周页面访问统计数据如下
在BiliBili发布了视频后用户量开始增多
截至目前，Reddit有6万浏览
BiliBili的视频有近30万播放
网站的日UV为200左右，1120个用户使用steam注册登录
产品思路
先做MVP
虽然不为盈利，但是突发奇想去优化一些不会有人用的细节会严重拖累产品的上线进展，也会因此消磨热情。
有过一些side project和工作经验，我对功能进行了精简，划分了优先级，尽可能不做不必要的功能。
头脑清晰的时候思考一下产品形态和功能，有点倦怠的时候画一画页面，微调下样式
运营思路
网站一定是需要在社媒上发布内容才能引流到网站，否则光靠SEO是很难被发现的。
因此我在Reddit上最大的CS社区和BiliBili上发布了相关内容，吸引了相关用户。
-
图文形态
直接展示网站截图和标题并详细解释功能即可，用户第一眼就可以看出这是什么东西。
-
视频形态
视频的封面和标题传达的内容是很少的，所以我多做了一步进行了数据分析，标题起为「CS2 被最多职业选手使用的准星是？」尝试吸引用户。视频开头通过数据分析引出网站的功能和价值
技术
Next.js + Supabase 熟悉的技术栈开发比较快，没什么特殊原因
有两个技术点
- 自动化下载hltv的比赛录像（受cloudflare保护）
用了一些hack的方式，本文不展开
- canvas & wasm
用canvas绘制了准星，wasm支持了网页解析，详见 Xhair-wasm
AI提效(v0和Grok)
做xhair的时候AI还不够强大，只有一些基础的编码能力。
-
使用Vercel的v0.dev生成组件
v0会使用很多我熟悉的技术栈如shadcn-ui，tailwind等，样式也比较符合我的审美
-
grok用于生成一些工具代码等
部署维护
-
日志和流量记录
接入了Sentry记录错误，使用Vercel Analytics分析流量后面换成了Umami
-
部署和维护
一开始部署在Vercel上，后面换成了香港的云服务器，可参考这篇 Xhair.pro 部署记录
后期优化
-
ai重构 用上codex后，全面优化了下页面和整体数据
-
seo 尝试了多种手段，成功提升了一倍的访问，不过大部分流量还是来自国内的bing，海外访问很少。
收获
- 产品选择
作为程序员和上千小时的CS玩家，我有自信在这一个细分赛道上具备足够竞争力。我不愿意在自己不擅长，没有护城河的领域做一些可能会成功的产品，即使做出来也很容易被人复刻、超越，事实也佐证了这一点。
- 代码是最后要写的东西
要早点想好产品有哪些功能，用户如何交互，不要想一点写一点，很容易推倒重来。
- 给自己写Readme
爬虫的实现比较复杂，我写了很多脚本，有些还有执行顺序依赖，一定要记录这些信息，否则真的容易忘记
- 运营
内容创作对产品引流很重要，b站就给我带来了很多的用户，但因为文化差异，在海外更大的市场并没有吸引到足够用户。后续还可以学习下相关知识，例如海外玩家很多使用discord社区。
总结
最近的AI工具经过迭代对独立开发的效率提升是巨大的，如果有好的想法很快就能落地。但游戏周边的网站商业价值实在太低，后续应该会选择其他方向尝试。
评论