返回快速上手
Lovable 整合指南
使用 Lovable AI 建立精美的訂閱制網站
開始使用 Lovable
Lovable 會自動處理 UI 設計，你只需要專注於功能需求描述。
1
建立精美 UI
讓 Lovable AI 生成專業的 SaaS 落地頁面
在 Lovable 中輸入以下提示，讓 AI 生成漂亮的訂閱制網站：
Build a beautiful SaaS landing page with subscription functionality.
Design Style:
- Modern, clean aesthetic with subtle gradients
- Use shadcn/ui components
- Mobile-first responsive design
Page Structure:
1. Hero Section - "打造你的訂閱制事業"
2. Features Section (3 columns)
3. Pricing Section with 3 tiers:
- 基本版 NT$299/月
- 專業版 NT$799/月 (推薦)
- 企業版 NT$1,999/月
4. FAQ Section
5. Footer
Each pricing card should have subscribe button placeholder.2
設定環境變數
在專案設定中新增 API Key
3
安裝 SDK
使用 npm 安裝 Recur SDK
告訴 Lovable AI 執行以下命令：
npm install recur-tw4
整合付款功能
讓 AI 幫你完成 SDK 整合
輸入以下提示讓 AI 完成整合：
Integrate Recur subscription payments into this app.
Step 1: Create src/providers/RecurProvider.tsx:
```tsx
import { RecurProvider as BaseRecurProvider } from 'recur-tw'
import { ReactNode } from 'react'
const PUBLISHABLE_KEY = import.meta.env.VITE_RECUR_PUBLISHABLE_KEY
export function RecurProvider({ children }: { children: ReactNode }) {
return (
<BaseRecurProvider
config={{
publishableKey: PUBLISHABLE_KEY,
checkoutMode: 'modal',
}}
>
{children}
</BaseRecurProvider>
)
}
```
Step 2: Wrap App with RecurProvider
Step 3: Create CheckoutButton component using useRecur hook
Step 4: Replace pricing card buttons with CheckoutButton💡 Lovable 小提示
- 先讓 AI 生成完整 UI，再整合付款功能
- 使用具體的設計描述（顏色、間距）獲得更精確的結果
- 善用 shadcn/ui 組件保持設計一致性
- Lovable 支援 Supabase 整合，可用於後端功能