SingClaw 技术栈升级
Phase 1 — 从 SEO 到 GEO，从纯静态到用户驱动
❌ BEFORE
当前技术栈
v1.0 · 2026-03-03 上线
📄
技术
纯静态 HTML + CSS + JS
🔨
构建工具
无（直接推文件）
📦
包管理
无 package.json
📄
页面数量
122 个独立 HTML 文件
🧭
导航栏
每个文件硬编码 × 122
🔐
用户系统
❌ 无法实现登录
💳
支付
❌ 零支付能力
👤
用户数据
❌ 零画像、零追踪
⚙️
维护成本
改导航 = 改 122 个文件
✅ AFTER
目标技术栈
v2.0 · Phase 1 (用户系统)
⚛️
技术
Vite + React + TypeScript
⚡
构建工具
Vite（HMR <50ms / Build ~2s）
📦
包管理
pnpm（快 2-3 倍 / 省 60% 磁盘）
🧩
页面架构
~15 个可复用组件
🧭
导航栏
1 个 <Navbar> 组件，全局生效
🔐
用户系统
Clerk（5 分钟接入，10K MAU 免费）
💳
支付
Stripe + Web3（Phase 2）
👤
用户数据
Supabase（PostgreSQL，500MB 免费）
⚙️
维护成本
改 1 处 = 全局更新
📄
122 个 HTML
↓
~15 个组件
文件数量
🔨
无构建
→
Vite ~2s
构建速度
🧭
改 122 处
→
改 1 处
导航维护成本
📦
npm
→
pnpm
包管理（省 60% 磁盘）
🔐
不可能
→
Clerk
用户认证
🗄️
无数据库
→
Supabase
数据存储
🔥 当前痛点 → 解决方案
1
排版混乱，122 个文件各写各的
没有统一的设计系统，CSS 分散在各个 HTML 文件中
✅ Tailwind CSS 全局统一 + 组件复用
2
没有登录，无法识别用户
流量来了留不住，无法做个性化推荐
✅ Clerk 认证 + 用户画像 + 收藏夹
3
没有支付，无法验证商业模式
纯免费内容，无法判断用户是否愿意付费
✅ Stripe 集成（Phase 2 实现）
4
改一个导航要同步 122 个文件
经常漏改、不同步，SEO 受影响
✅ 1 个 <Navbar> 组件，全局生效