awesome-gpt-image-2网站架构深度解析Vite React 19 Supabase全栈拆解【免费下载链接】awesome-gpt-image-2Prompt as Code | GPT-Image2 工业级提示词引擎与模板库530 个案例逆向工程20 套工业级模板并提炼出Skills持续更新中项目地址: https://gitcode.com/GitHub_Trending/awe/awesome-gpt-image-2 本文带你全栈拆解GPT-Image2 提示词引擎网站 awesome-gpt-image-2的架构设计它如何用Vite 7 React 19构建前端、Supabase承载认证与数据库、Vercel Serverless 函数实现 AI 图片生成与双支付通道以及一条Markdown → JSON的内容流水线。无论是想做 AI 绘图站点的新手还是好奇 530 案例库如何工程化的开发者都能从中抄到可落地的架构思路。️ 一张图看懂整体架构先看这个 GPT-Image2 提示词案例库网站的整体预览左侧案例瀑布流 提示词一键复制整站可以拆成5 层层级技术选型负责什么构建层Vite 7 vitejs/plugin-react开发热更新与生产打包前端层React 19 单页应用案例浏览、筛选、在线生图、会员中心API 层Vercel Serverless 函数api/目录生图、认证、Stripe/支付宝支付、管理后台数据层SupabasePostgres Auth用户档案、积分、会员、收藏、订单内容层docs/Markdown →data/cases.json530 案例的构建时生成流水线一个关键设计所有敏感密钥数据库管理员密钥、支付密钥、生图 API Key只存在于 Serverless 函数中前端只拿到 Supabase anon key这是它能安全上线的前提。 技术栈全景为什么是这三件套打开 package.json 可以看到完整依赖清单核心只有 8 个运行时依赖依赖版本角色react/react-dom^19.2.1前端 UIvite^7.2.7构建工具supabase/supabase-js^2.105.4数据库与认证客户端lucide-react^0.561.0图标库stripe^22.1.1海外会员订阅支付alipay-sdk^4.14.0支付宝国内支付google-analytics/data^5.2.2GA4 数据拉取运营报表这套组合的取舍非常新手友好Vite代替 Next.js静态展示为主 Serverless 函数兜底动态逻辑不需要 SSRSupabase代替自建后端Auth、Postgres、行级安全策略、RPC 一次到位Stripe 支付宝双支付海外订阅制会员 国内 9.9 元付费社群一套代码覆盖两个市场。开发脚本同样值得关注package.json#L6-L20npm run dev # 等价于 predev → 生成站点数据 → 启动 Vite npm run build # 等价于 prebuild → 生成数据 → vite build npm test # node --test 跑 api/_lib 下的单元测试注意predev/prebuild钩子每次开发或构建前都会重新生成cases.json和 Skills 文件内容源永远是docs/下的 Markdown这一点后面细讲。⚡ 前端层3753 行的单文件主应用入口极简index.html → main.jsx入口 index.html 只有 16 行——一个#root容器加一个模块脚本SEO 描述直接写在 meta 里。真正的逻辑全在 src/main.jsx约 3753 行这一个文件里内置多语言文案对象en/zh双份 copy见 src/main.jsx#L47-L120用useState/useMemo管理案例筛选、搜索、收藏、生成器弹层用lucide-react图标代替图片资源保持体积轻。单文件应用对新手很友好好读、好改代价是可维护性差——这是一个可以边拆边学的反面教材。Supabase 客户端会优雅降级的设计前端数据库客户端在 src/supabaseClient.js#L1-L19const supabase isSupabaseConfigured ? createClient(supabaseUrl, supabaseAnonKey, { auth: { autoRefreshToken: true, detectSessionInUrl: true, persistSession: true } }) : null;亮点在于isSupabaseConfigured开关没配环境变量时supabase为null整个网站退化成纯静态案例库——登录、收藏、生图功能静默消失但浏览功能照常可用。这让仓库可以公开 clone 后零配置直接npm run dev跑起来对开源项目极其重要。 内容流水线Markdown 是唯一的数据库530 个案例并不存在数据库里而是构建时从 Markdown 解析出来的。构建脚本 scripts/generate-site-data.mjs 做了三件事读取分类目录 docs/gallery.md 与各分类下的#case-N锚点建立案例 → 分类映射解析 docs/gallery-part-1.md、docs/gallery-part-2.md 中每个案例的**提示词**代码块和来源链接合并data/style-library.json的风格/场景标签输出 data/cases.json1.1 万行含 13 个分类、530 案例。配合 vite.config.js#L5-L12 中的publicDir: data整个data/目录JSON 530 张案例图被当作静态资源直接随站点发布。架构启示把内容写作和程序代码解耦。运营只需往 Markdown 里加案例构建脚本自动变成 JSON 前端数据不需要碰任何 JS 代码。️ 核心业务AI 图片生成的全链路设计网站的杀手级功能是案例一键生成点击案例里的Generate Image后端调用 GPT-Image2 模型出图。完整链路在 api/generate-image.js245 行中流程如下前端 POST /api/generate-image → ① Bearer Token 认证Supabase 用户 → ② RPC reserve_generation_usage数据库先冻结一次生成额度 → ③ 调用上游 /v1/images/generations模型 gpt-image-2 → ④a 成功 → complete_generation_reservation返回 base64 图片 → ④b 失败 → release_generation_reservation额度退回几个值得细看的设计点额度预扣-结算模式先用 Postgres RPC 冻结额度、出图成功再确认api/generate-image.js#L59-L124。即使服务中途崩溃用户也不会白嫖失败则自动退回额度并区分UPSTREAM_BUSY上游 429与一般错误。配额即业务规则每用户 1 次免费生成free_generations_used 1超量调用上游模型返回402 CREDITS_REQUIRED前端据此引导充值——计费逻辑全部放在数据库 RPC 里前端无法绕过。密钥隔离上游生图 API KeyCIYUAN_API_KEY只存在于环境变量中api/generate-image.js#L126-L157响应只回传 base64 图片。认证中枢所有 API 共用 api/_lib/supabase.js#L153-L182 的getAuthContext——解析 Bearer Token、校验用户、自动upsert用户档案表含 Google 头像/昵称同步管理员邮箱则从SUPER_ADMIN_EMAILS环境变量读取。 支付与会员Stripe 支付宝双通道商业化部分拆成两条线全部落在api/下的 Serverless 函数中模块入口说明海外会员订阅api/billing/plans.js、api/billing/webhook.jsStripe Checkout Webhook 开通user_memberships积分包购买api/billing/checkout.js按目录getBillingCatalog生成订阅/一次性支付单国内付费社群api/community/9.9 元长期资格支付宝当面付30 分钟未支付自动关单管理后台api/admin/credits/adjust.js、api/admin/community/refund.js手动调积分、查单、退款、吊销资格其中付费社群的常量集中定义在 api/_lib/community.js#L3-L10定价990分、订单状态机PENDING → PAID/CLOSED/REFUNDED/REVOKED、30 分钟挂起窗口。支付宝的签名与回调校验封装在 api/_lib/alipay.js并配有沙箱服务器 scripts/alipay-webpay-sandbox-server.mjs 供本地联调。前端对应页面在 src/community.jsx约 681 行包含购买、扫码入群、订单状态轮询与管理员订单管理组件CommunityAdminSection。 隐藏彩蛋网站数据反向生成 Agent 技能这个项目最巧妙的一环网站展示的风格库同时是一个可安装的 AI Agent 技能包。data/style-library.json是唯一的风格数据源构建脚本 scripts/generate-style-skill.mjs 会把它渲染成 agents/skills/gpt-image-2-style-library/ 下的SKILL.md、references/style-library.md和package.json用户可以在 Claude Code / Codex 里安装后直接说用 gpt-image-2-style-library 画一张城市生活系统图技能说明与安装方式见 agents/skills/gpt-image-2-style-library/SKILL.md。一份数据三处消费网站案例库 / 模板文档 docs/templates.md / Agent 技能是典型的Single Source of Truth架构。 本地开发与部署没有 Docker 的全栈体验本地跑 APIVite 插件模拟 Vercel线上 API 是 Vercel 函数本地如何跑答案是 scripts/vite-local-api.mjs 这个 Vite 插件它在 dev server 中间件里注册/api/*路由动态import对应函数文件并用attachVercelResponseHelpers给 Node 原生res补上res.status().json()等 Vercel 风格方法——同一份 API 代码本地与线上行为一致。部署配置vercel.json 只做一件事vercel.json 声明vite框架、dist输出目录唯一的逻辑是把/community、/community/result重写到 SPA 首页vercel.json#L6-L23页面路由交给 React 内部状态处理。数据层12 个迁移文件的演进史Supabase 的 supabase/migrations/ 目录就是一部功能演进编年史读它比读文档更快理解项目迁移文件能力202605090001_user_credits.sql用户积分与生成额度20260509090000_membership_billing.sql会员计划 user_memberships订阅表20260512090000_google_account_center.sqlGoogle 账号绑定20260512143000_pricing_admin_metrics.sql定价与运营指标20260515090000_case_favorites.sql案例收藏api/favorites.js20260528090000_watcha_oauth_accounts.sqlWatcha OAuthapi/auth/watcha/20260721090000_alipay_webpay.sql支付宝支付单20260722090000_paid_community.sql付费社群订单积分预扣的三个 RPCreserve/complete/release_generation_reservation就定义在这些迁移里与 API 层一一对应。 拆解小结新手可以直接抄的 5 个架构决策静态优先能用publicDir静态资源解决的案例 JSON 图片绝不进数据库优雅降级核心客户端Supabase未配置时自动降级为纯静态模式保证仓库clone 即可跑额度预扣-结算所有付费 AI 调用都走冻结 → 调用 → 确认/回滚三态防白嫖也防超扣密钥分层浏览器只持有 anon keyService Role Key 与上游 API Key 锁在 Serverless 环境变量里内容即代码Markdown 是唯一内容源构建脚本派生出 JSON 数据、文档和 Agent 技能三套产物。这个 GPT-Image2 提示词引擎网站用不到 5 千行前端代码 30 来个 API 函数就搭起了案例库、在线生图、双支付与运营后台的完整商业闭环——架构上没有一点重却是新手学习Vite React 19 Supabase 全栈架构的上手范本。【免费下载链接】awesome-gpt-image-2Prompt as Code | GPT-Image2 工业级提示词引擎与模板库530 个案例逆向工程20 套工业级模板并提炼出Skills持续更新中项目地址: https://gitcode.com/GitHub_Trending/awe/awesome-gpt-image-2创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
awesome-gpt-image-2网站架构深度解析：Vite + React 19 + Supabase全栈拆解
awesome-gpt-image-2网站架构深度解析Vite React 19 Supabase全栈拆解【免费下载链接】awesome-gpt-image-2Prompt as Code | GPT-Image2 工业级提示词引擎与模板库530 个案例逆向工程20 套工业级模板并提炼出Skills持续更新中项目地址: https://gitcode.com/GitHub_Trending/awe/awesome-gpt-image-2 本文带你全栈拆解GPT-Image2 提示词引擎网站 awesome-gpt-image-2的架构设计它如何用Vite 7 React 19构建前端、Supabase承载认证与数据库、Vercel Serverless 函数实现 AI 图片生成与双支付通道以及一条Markdown → JSON的内容流水线。无论是想做 AI 绘图站点的新手还是好奇 530 案例库如何工程化的开发者都能从中抄到可落地的架构思路。️ 一张图看懂整体架构先看这个 GPT-Image2 提示词案例库网站的整体预览左侧案例瀑布流 提示词一键复制整站可以拆成5 层层级技术选型负责什么构建层Vite 7 vitejs/plugin-react开发热更新与生产打包前端层React 19 单页应用案例浏览、筛选、在线生图、会员中心API 层Vercel Serverless 函数api/目录生图、认证、Stripe/支付宝支付、管理后台数据层SupabasePostgres Auth用户档案、积分、会员、收藏、订单内容层docs/Markdown →data/cases.json530 案例的构建时生成流水线一个关键设计所有敏感密钥数据库管理员密钥、支付密钥、生图 API Key只存在于 Serverless 函数中前端只拿到 Supabase anon key这是它能安全上线的前提。 技术栈全景为什么是这三件套打开 package.json 可以看到完整依赖清单核心只有 8 个运行时依赖依赖版本角色react/react-dom^19.2.1前端 UIvite^7.2.7构建工具supabase/supabase-js^2.105.4数据库与认证客户端lucide-react^0.561.0图标库stripe^22.1.1海外会员订阅支付alipay-sdk^4.14.0支付宝国内支付google-analytics/data^5.2.2GA4 数据拉取运营报表这套组合的取舍非常新手友好Vite代替 Next.js静态展示为主 Serverless 函数兜底动态逻辑不需要 SSRSupabase代替自建后端Auth、Postgres、行级安全策略、RPC 一次到位Stripe 支付宝双支付海外订阅制会员 国内 9.9 元付费社群一套代码覆盖两个市场。开发脚本同样值得关注package.json#L6-L20npm run dev # 等价于 predev → 生成站点数据 → 启动 Vite npm run build # 等价于 prebuild → 生成数据 → vite build npm test # node --test 跑 api/_lib 下的单元测试注意predev/prebuild钩子每次开发或构建前都会重新生成cases.json和 Skills 文件内容源永远是docs/下的 Markdown这一点后面细讲。⚡ 前端层3753 行的单文件主应用入口极简index.html → main.jsx入口 index.html 只有 16 行——一个#root容器加一个模块脚本SEO 描述直接写在 meta 里。真正的逻辑全在 src/main.jsx约 3753 行这一个文件里内置多语言文案对象en/zh双份 copy见 src/main.jsx#L47-L120用useState/useMemo管理案例筛选、搜索、收藏、生成器弹层用lucide-react图标代替图片资源保持体积轻。单文件应用对新手很友好好读、好改代价是可维护性差——这是一个可以边拆边学的反面教材。Supabase 客户端会优雅降级的设计前端数据库客户端在 src/supabaseClient.js#L1-L19const supabase isSupabaseConfigured ? createClient(supabaseUrl, supabaseAnonKey, { auth: { autoRefreshToken: true, detectSessionInUrl: true, persistSession: true } }) : null;亮点在于isSupabaseConfigured开关没配环境变量时supabase为null整个网站退化成纯静态案例库——登录、收藏、生图功能静默消失但浏览功能照常可用。这让仓库可以公开 clone 后零配置直接npm run dev跑起来对开源项目极其重要。 内容流水线Markdown 是唯一的数据库530 个案例并不存在数据库里而是构建时从 Markdown 解析出来的。构建脚本 scripts/generate-site-data.mjs 做了三件事读取分类目录 docs/gallery.md 与各分类下的#case-N锚点建立案例 → 分类映射解析 docs/gallery-part-1.md、docs/gallery-part-2.md 中每个案例的**提示词**代码块和来源链接合并data/style-library.json的风格/场景标签输出 data/cases.json1.1 万行含 13 个分类、530 案例。配合 vite.config.js#L5-L12 中的publicDir: data整个data/目录JSON 530 张案例图被当作静态资源直接随站点发布。架构启示把内容写作和程序代码解耦。运营只需往 Markdown 里加案例构建脚本自动变成 JSON 前端数据不需要碰任何 JS 代码。️ 核心业务AI 图片生成的全链路设计网站的杀手级功能是案例一键生成点击案例里的Generate Image后端调用 GPT-Image2 模型出图。完整链路在 api/generate-image.js245 行中流程如下前端 POST /api/generate-image → ① Bearer Token 认证Supabase 用户 → ② RPC reserve_generation_usage数据库先冻结一次生成额度 → ③ 调用上游 /v1/images/generations模型 gpt-image-2 → ④a 成功 → complete_generation_reservation返回 base64 图片 → ④b 失败 → release_generation_reservation额度退回几个值得细看的设计点额度预扣-结算模式先用 Postgres RPC 冻结额度、出图成功再确认api/generate-image.js#L59-L124。即使服务中途崩溃用户也不会白嫖失败则自动退回额度并区分UPSTREAM_BUSY上游 429与一般错误。配额即业务规则每用户 1 次免费生成free_generations_used 1超量调用上游模型返回402 CREDITS_REQUIRED前端据此引导充值——计费逻辑全部放在数据库 RPC 里前端无法绕过。密钥隔离上游生图 API KeyCIYUAN_API_KEY只存在于环境变量中api/generate-image.js#L126-L157响应只回传 base64 图片。认证中枢所有 API 共用 api/_lib/supabase.js#L153-L182 的getAuthContext——解析 Bearer Token、校验用户、自动upsert用户档案表含 Google 头像/昵称同步管理员邮箱则从SUPER_ADMIN_EMAILS环境变量读取。 支付与会员Stripe 支付宝双通道商业化部分拆成两条线全部落在api/下的 Serverless 函数中模块入口说明海外会员订阅api/billing/plans.js、api/billing/webhook.jsStripe Checkout Webhook 开通user_memberships积分包购买api/billing/checkout.js按目录getBillingCatalog生成订阅/一次性支付单国内付费社群api/community/9.9 元长期资格支付宝当面付30 分钟未支付自动关单管理后台api/admin/credits/adjust.js、api/admin/community/refund.js手动调积分、查单、退款、吊销资格其中付费社群的常量集中定义在 api/_lib/community.js#L3-L10定价990分、订单状态机PENDING → PAID/CLOSED/REFUNDED/REVOKED、30 分钟挂起窗口。支付宝的签名与回调校验封装在 api/_lib/alipay.js并配有沙箱服务器 scripts/alipay-webpay-sandbox-server.mjs 供本地联调。前端对应页面在 src/community.jsx约 681 行包含购买、扫码入群、订单状态轮询与管理员订单管理组件CommunityAdminSection。 隐藏彩蛋网站数据反向生成 Agent 技能这个项目最巧妙的一环网站展示的风格库同时是一个可安装的 AI Agent 技能包。data/style-library.json是唯一的风格数据源构建脚本 scripts/generate-style-skill.mjs 会把它渲染成 agents/skills/gpt-image-2-style-library/ 下的SKILL.md、references/style-library.md和package.json用户可以在 Claude Code / Codex 里安装后直接说用 gpt-image-2-style-library 画一张城市生活系统图技能说明与安装方式见 agents/skills/gpt-image-2-style-library/SKILL.md。一份数据三处消费网站案例库 / 模板文档 docs/templates.md / Agent 技能是典型的Single Source of Truth架构。 本地开发与部署没有 Docker 的全栈体验本地跑 APIVite 插件模拟 Vercel线上 API 是 Vercel 函数本地如何跑答案是 scripts/vite-local-api.mjs 这个 Vite 插件它在 dev server 中间件里注册/api/*路由动态import对应函数文件并用attachVercelResponseHelpers给 Node 原生res补上res.status().json()等 Vercel 风格方法——同一份 API 代码本地与线上行为一致。部署配置vercel.json 只做一件事vercel.json 声明vite框架、dist输出目录唯一的逻辑是把/community、/community/result重写到 SPA 首页vercel.json#L6-L23页面路由交给 React 内部状态处理。数据层12 个迁移文件的演进史Supabase 的 supabase/migrations/ 目录就是一部功能演进编年史读它比读文档更快理解项目迁移文件能力202605090001_user_credits.sql用户积分与生成额度20260509090000_membership_billing.sql会员计划 user_memberships订阅表20260512090000_google_account_center.sqlGoogle 账号绑定20260512143000_pricing_admin_metrics.sql定价与运营指标20260515090000_case_favorites.sql案例收藏api/favorites.js20260528090000_watcha_oauth_accounts.sqlWatcha OAuthapi/auth/watcha/20260721090000_alipay_webpay.sql支付宝支付单20260722090000_paid_community.sql付费社群订单积分预扣的三个 RPCreserve/complete/release_generation_reservation就定义在这些迁移里与 API 层一一对应。 拆解小结新手可以直接抄的 5 个架构决策静态优先能用publicDir静态资源解决的案例 JSON 图片绝不进数据库优雅降级核心客户端Supabase未配置时自动降级为纯静态模式保证仓库clone 即可跑额度预扣-结算所有付费 AI 调用都走冻结 → 调用 → 确认/回滚三态防白嫖也防超扣密钥分层浏览器只持有 anon keyService Role Key 与上游 API Key 锁在 Serverless 环境变量里内容即代码Markdown 是唯一内容源构建脚本派生出 JSON 数据、文档和 Agent 技能三套产物。这个 GPT-Image2 提示词引擎网站用不到 5 千行前端代码 30 来个 API 函数就搭起了案例库、在线生图、双支付与运营后台的完整商业闭环——架构上没有一点重却是新手学习Vite React 19 Supabase 全栈架构的上手范本。【免费下载链接】awesome-gpt-image-2Prompt as Code | GPT-Image2 工业级提示词引擎与模板库530 个案例逆向工程20 套工业级模板并提炼出Skills持续更新中项目地址: https://gitcode.com/GitHub_Trending/awe/awesome-gpt-image-2创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
