Back to Details

whop-dev

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Whop App Development

Whop 应用开发

Build apps that run inside the Whop platform - handling authentication, payments, webhooks, and UI all with best practices.
构建可在Whop平台内运行的应用——遵循最佳实践处理认证、支付、Webhook及UI相关事宜。

What Makes a Good Whop App (Suggestions)

优秀Whop应用的特质（建议）

Guidelines for app success (not requirements, user requests take priority):
PrincipleDescription
Empower CreatorsGive customization so each whop feels unique
Drive DiscoveryMake the app have some kind of sharing feature or posting potential to allow users to attrach more users
Price SustainablyMake money without gouging creators or customers
Keep UX SimpleCore action obvious, minimal clicks
Details: app-design-principles.md
应用成功的指导原则（非强制要求，用户需求优先）：
原则说明
赋能创作者提供自定义功能，让每个Whop应用都独具特色
促进发现应用需具备分享功能或内容发布潜力，帮助用户吸引更多流量
可持续定价在盈利的同时，避免过度收费创作者或客户
简化用户体验核心操作清晰明了，尽量减少点击次数
详情： app-design-principles.md

When to Use

适用场景

Empty repo / new project:
  • "Build me a Whop app" → Start with app-from-scratch.md
  • Guides through discovery, setup, and building from nothing
Existing Whop project:
  • Jump directly to specific rules in Quick Reference below
  • Adding payments → payments-checkout.md
  • Adding auth → auth-verify-token.md
  • SDK issues → sdk-setup.md
空仓库 / 新项目：
  • 「为我构建一个Whop应用」→ 从app-from-scratch.md开始
  • 引导用户完成需求探索、环境搭建及从0到1的应用构建
现有Whop项目：
  • 直接跳转到下方快速参考中的具体规则
  • 添加支付功能 → payments-checkout.md
  • 添加认证功能 → auth-verify-token.md
  • SDK相关问题 → sdk-setup.md

Companion Skills (Install First)

配套技能（需先安装）

whop-dev focuses on Whop-specific patterns. For complete app development, install these companion skills:
bash
npx skills add https://github.com/anthropics/skills --skill frontend-design && \
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices && \
npx skills add https://github.com/supabase/agent-skills --skill supabase-postgres-best-practices && \
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines
SkillDelegates ToWhen
frontend-design
UI creationBuilding components, pages, visual design
vercel-react-best-practices
PerformanceReact optimization, data fetching, bundles
supabase-postgres-best-practices
DatabaseQueries, schema, indexes, RLS
web-design-guidelines
UX reviewAccessibility, design auditing
IMPORTANT: When starting a new project or build-from-scratch flow, install companion skills FIRST before scaffolding. This enables whop-dev to hand off specialized work to expert skills.
See companion-skills.md for detailed handoff patterns.
whop-dev 专注于Whop特有的开发模式。如需完成完整的应用开发，请安装以下配套技能：
bash
npx skills add https://github.com/anthropics/skills --skill frontend-design && \
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices && \
npx skills add https://github.com/supabase/agent-skills --skill supabase-postgres-best-practices && \
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines
技能委托方向适用场景
frontend-design
UI创建组件开发、页面构建、视觉设计
vercel-react-best-practices
性能优化React优化、数据获取、打包优化
supabase-postgres-best-practices
数据库处理查询、 schema设计、索引、RLS
web-design-guidelines
UX评审无障碍设计、设计审计
重要提示：在启动新项目或从零开始构建流程前，请先安装配套技能。这样whop-dev才能将专业工作委托给对应的专家技能处理。
查看companion-skills.md获取详细的任务委托模式。

How to Use

使用方法

Starting fresh (empty repo)? → Follow Build From Scratch - guided flow from idea to deployed app.
Existing project? → Jump to Quick Reference for specific features.
从零开始（空仓库）？ → 遵循「从零开始构建」流程 - 从创意到部署的引导式开发。
现有项目？ → 跳转到「快速参考」获取特定功能的实现指南。

Build From Scratch

从零开始构建

For empty repos only. Go from idea to deployed Whop app:
StepGuideDescription
0companion-skills.mdFIRST - Install companion skills
1app-from-scratch.mdPlan your app type and architecture
2aapp-scaffold-b2b.mdB2B: Dashboard-only apps for admins
2bapp-scaffold-b2c.mdB2C: Experience apps for members
3app-database.mdAdd Supabase → 
supabase-postgres-best-practices
4app-whop-dashboard.mdConfigure in Whop Developer Dashboard
5app-deployment.mdDeploy to Vercel
6app-store-submission.mdSubmit to App Store (optional)
仅适用于空仓库。从创意到部署完成Whop应用开发：
步骤指南说明
0companion-skills.md第一步 - 安装配套技能
1app-from-scratch.md规划应用类型与架构
2aapp-scaffold-b2b.mdB2B：面向管理员的仅仪表盘应用
2bapp-scaffold-b2c.mdB2C：面向会员的体验类应用
3app-database.md添加Supabase → 委托给
supabase-postgres-best-practices
4app-whop-dashboard.md在Whop开发者控制台中配置应用
5app-deployment.md部署到Vercel
6app-store-submission.md提交到应用商店（可选）

Quick Reference

快速参考

Authentication & Security (CRITICAL)

认证与安全（至关重要）

RuleDescription
auth-verify-token.mdMUST verify user tokens server-side
auth-access-check.mdMUST check access levels before operations
security-checklist.mdSecurity best practices checklist
auth-headers.mdExtract tokens from headers
auth-oauth.mdOAuth for external apps
input-sanitization.mdXSS prevention
规则说明
auth-verify-token.md必须在服务端验证用户令牌
auth-access-check.md执行操作前必须检查访问权限
security-checklist.md安全最佳实践清单
auth-headers.md从请求头中提取令牌
auth-oauth.md外部应用的OAuth认证
input-sanitization.mdXSS防护

SDK Setup (CRITICAL)

SDK配置（至关重要）

RuleDescription
sdk-setup.mdInitialize Whop SDK (required)
sdk-iframe.mdClient-side iframe SDK
规则说明
sdk-setup.md初始化Whop SDK（必填）
sdk-iframe.md客户端iframe SDK

Design Principles (SUGGESTIONS)

设计原则（建议）

RuleDescription
app-design-principles.mdFounder's suggestions for app success (user requests take priority)
规则说明
app-design-principles.md创始人提出的应用成功建议（用户需求优先）

Payments (HIGH)

支付功能（高优先级）

RuleDescription
payments-checkout.mdCreate checkout flows
payments-webhooks.mdHandle payment webhooks
payments-transfers.mdSend payouts to users
payments-billing.mdBilling portal & saved methods
规则说明
payments-checkout.md创建结账流程
payments-webhooks.md处理支付Webhook
payments-transfers.md向用户发放款项
payments-billing.md账单门户及支付方式保存

App Views (HIGH)

应用视图（高优先级）

RuleDescription
views-structure.mdExperience, Dashboard, Discover pages
views-routing.mdDynamic routing patterns
规则说明
views-structure.md体验页、仪表盘、发现页
views-routing.md动态路由模式

Members & CRM (HIGH)

会员与CRM（高优先级）

RuleDescription
api-memberships.mdMemberships & user management
规则说明
api-memberships.md会员资格与用户管理

UI & Design (MEDIUM)

UI与设计（中优先级）

RuleDescription
ui-frosted.mdFrosted UI components
ui-dark-mode.mdDark mode handling
ui-tailwind.mdTailwind CSS setup
规则说明
ui-frosted.mdFrosted UI组件
ui-dark-mode.md暗黑模式处理
ui-tailwind.mdTailwind CSS配置

API Patterns (MEDIUM)

API模式（中优先级）

RuleDescription
api-structure.mdAPI route patterns
api-parallel.mdParallel data fetching
规则说明
api-structure.mdAPI路由模式
api-parallel.md并行数据获取

Storage & Files (MEDIUM)

存储与文件（中优先级）

RuleDescription
files-upload.mdWhop native file storage
规则说明
files-upload.mdWhop原生文件存储

Engagement (MEDIUM)

用户互动（中优先级）

RuleDescription
notifications.mdPush notifications
engagement-forums.mdForum posts & comments
engagement-chat.mdChat messages
规则说明
notifications.md推送通知
engagement-forums.md论坛帖子与评论
engagement-chat.md聊天消息

Development (LOW)

开发工具（低优先级）

RuleDescription
dev-proxy.mdLocal development proxy
dev-sandbox.mdSandbox testing
规则说明
dev-proxy.md本地开发代理
dev-sandbox.md沙箱测试

Companion Skills (ECOSYSTEM)

配套技能（生态系统）

RuleDescription
companion-skills.mdInstall & delegate to specialized skills
规则说明
companion-skills.md安装并委托给专业技能处理

App Views

应用视图

Whop apps have three entry points:
ViewRoutePurpose
Experience
/experiences/[experienceId]
Customer-facing UI
Dashboard
/dashboard/[companyId]
Admin management
Discover
/discover
Public marketing page
Whop应用有三个入口：
视图路由用途
Experience
/experiences/[experienceId]
面向客户的UI
Dashboard
/dashboard/[companyId]
管理员管理界面
Discover
/discover
公开营销页面

Tech Stack

技术栈

Required:
  • @whop/sdk
    - Server-side API client
  • @whop/react
    - React hooks and Frosted UI
Recommended:
  • Next.js (App Router)
  • TypeScript
  • Tailwind CSS + Frosted UI
Flexible:
  • Database: Supabase recommended, but any works
  • UI: Frosted UI, Shadcn, Radix - your choice
必备工具：
  • @whop/sdk
    - 服务端API客户端
  • @whop/react
    - React钩子及Frosted UI组件
推荐工具：
  • Next.js (App Router)
  • TypeScript
  • Tailwind CSS + Frosted UI
可选工具：
  • 数据库：推荐使用Supabase，也可选用其他数据库
  • UI：Frosted UI、Shadcn、Radix - 任选其一

Platforms (Advanced)

平台功能（进阶）

For marketplaces with connected accounts:
针对拥有关联账户的市场：

Resources

资源

Handoff Triggers

任务委托触发条件

Delegate to companion skills when encountering these patterns:
PatternHand Off To
"design", "make it look good", "UI", "component"→ 
frontend-design
"optimize", "performance", "slow", "bundle"→ 
vercel-react-best-practices
"database", "query", "schema", "index", "RLS"→ 
supabase-postgres-best-practices
"review UI", "accessibility", "audit"→ 
web-design-guidelines
See companion-skills.md for complete handoff guide.
遇到以下模式时，会委托给配套技能处理：
模式委托对象
「设计」、「让它看起来更好」、「UI」、「组件」→ 
frontend-design
「优化」、「性能」、「缓慢」、「打包」→ 
vercel-react-best-practices
「数据库」、「查询」、「schema」、「索引」、「RLS」→ 
supabase-postgres-best-practices
「UI评审」、「无障碍」、「审计」→ 
web-design-guidelines
查看companion-skills.md获取完整的任务委托指南。