星页 StarPage

AI 驱动的互动落地页构建器 - 用一句话生成精美落地页

技术栈

• Framework: Next.js 15 (App Router)
• Database: Supabase (PostgreSQL + Auth)
• Styling: TailwindCSS v4 + shadcn/ui
• State: Zustand
• Forms: React Hook Form + Zod
• Deployment: Vercel

快速开始

1. 安装依赖

npm install

2. 配置环境变量

复制 .env.example 为 .env.local，填入你的密钥：

cp .env.example .env.local

需要的环境变量：

变量名	说明	获取方式
NEXT_PUBLIC_SUPABASE_URL	Supabase 项目 URL	Supabase Dashboard → Settings → API
NEXT_PUBLIC_SUPABASE_ANON_KEY	Supabase 匿名密钥	Supabase Dashboard → Settings → API
SUPABASE_SERVICE_ROLE_KEY	Supabase 服务密钥（仅服务端使用）	Supabase Dashboard → Settings → API
ANTHROPIC_API_KEY	Claude API 密钥	https://console.anthropic.com
NEXT_PUBLIC_APP_URL	应用 URL（本地开发用 http://localhost:3000）	-

3. 应用数据库迁移 ⚠️

重要: 需要手动在 Supabase Dashboard 执行 SQL 迁移

1. 访问你的 Supabase Dashboard
2. 进入 SQL Editor → New query
3. 复制 supabase/migrations/001_initial_schema.sql 的全部内容
4. 点击 Run 执行

或者使用 Supabase CLI（需要 access token）：

supabase login
supabase link --project-ref your-project-ref
supabase db push

4. 启动开发服务器

npm run dev

访问 http://localhost:3000

项目结构

starpage/
├── src/
│   ├── app/                      # Next.js App Router
│   │   ├── (auth)/               # 认证页面（登录/注册）
│   │   ├── (dashboard)/          # 仪表盘页面
│   │   ├── (main)/               # 主功能页面（生成/预览）
│   │   ├── (preview)/            # 页面预览
│   │   ├── api/                  # API 路由
│   │   │   ├── auth/callback/    # Auth 回调
│   │   │   └── generate/         # AI 页面生成 API
│   │   ├── layout.tsx            # 根布局
│   │   └── page.tsx              # Landing Page
│   ├── components/
│   │   ├── ui/                   # shadcn/ui 组件
│   │   └── renderer/             # 页面渲染引擎组件
│   │       ├── PageRenderer      # 主渲染器
│   │       ├── Navbar            # 导航栏
│   │       ├── HeroSection       # Hero 区块
│   │       ├── FeaturesSection   # 特性展示
│   │       ├── TestimonialsSection # 用户评价
│   │       ├── PricingSection    # 定价方案
│   │       ├── CtaSection        # CTA 区块
│   │       ├── FaqSection        # FAQ 区块
│   │       ├── GallerySection    # 图片展示
│   │       ├── ContactSection    # 联系表单
│   │       ├── Footer            # 页脚
│   │       └── TextBlock         # 文字块
│   ├── lib/
│   │   ├── supabase/             # Supabase 客户端
│   │   ├── store/                # Zustand stores
│   │   └── actions/              # Server Actions
│   └── types/
│       ├── database.ts           # Supabase 数据库类型
│       └── page-config.ts        # 页面配置类型 + Zod 校验
├── supabase/
│   └── migrations/               # SQL 迁移文件
├── .env.example                  # 环境变量模板
└── .env.local                    # 本地环境变量（不提交到 Git）

开发进度

✅ Day 1 (4/14) - 项目骨架

• Next.js 15 + TypeScript 初始化
• TailwindCSS v4 + shadcn/ui 配置
• 基础 UI 组件（button, input, card, dialog, alert, sonner）
• Supabase 客户端配置（browser + server）
• 数据库类型定义
• SQL 迁移文件（profiles + pages 表 + RLS）
• 认证流程（login/register/dashboard）
• 中间件（会话保护 + 路由守卫）
• Zustand stores（auth + page）
• Landing Page
• 构建验证通过

✅ Day 2 (4/15) - Supabase Auth 完善

• 注册/登录/退出功能
• 会话保护中间件
• Auth 回调处理
• 自动创建 profile

✅ Day 3 (4/16) - PageConfig 类型 + 模板

• PageConfig 数据结构定义
• Zod 运行时校验
• Few-shot 示例（3 个产品场景）
• AI Prompt 模板

✅ Day 4 (4/17) - AI 生成引擎

• /api/generate API 路由
• Claude API 调用
• JSON 提取与校验
• 错误处理（限流/超时/网络错误）
• 兜底模板（AI 不可用时返回预设页面）

✅ Day 5 (4/18) - 页面渲染引擎 + 8 个组件

• PageRenderer 主渲染器
• Navbar 导航栏组件
• HeroSection 首屏区块
• FeaturesSection 特性展示
• TestimonialsSection 用户评价
• PricingSection 定价方案
• CtaSection 行动号召
• FaqSection 常见问题
• GallerySection 图片展示
• ContactSection 联系表单
• Footer 页脚
• TextBlock 文字块

✅ Day 6-7 (4/19-20) - 端到端测试 + Vercel 部署

• 注册 → 登录 → 生成页面 → 预览 流程测试
• Auth 中间件保护验证
• API 端点测试（含错误处理）
• 页面渲染功能验证
• Vercel 生产环境部署
• README 文档更新

注意事项

1. 数据库迁移必须先执行，否则认证功能无法正常工作
2. 首次注册后，用户会自动创建 profile 记录（通过 trigger）
3. 生产环境部署时，需要在 Vercel 中配置所有环境变量
4. .env.local 不应提交到 Git，请使用 .env.example 作为模板
5. Supabase 的 URL Redirects 需要配置 http://localhost:3000/api/auth/callback（本地）和你的 Vercel URL（生产）