分享一个用 Next.js 做的 AI 猫咪绘画应用 - AI Draw Cat

最近用 Next.js 14 + TypeScript 做了一个 AI 猫咪绘画应用，想和大家分享一下技术实现和产品思路。

项目背景

作为一个猫奴程序员，一直想做个能生成各种风格猫咪插画的工具。市面上的 AI 绘画工具要么太通用，要么对猫咪的理解不够深入，所以决定自己撸一个专门的猫咪绘画应用。

技术栈

• 前端 : Next.js 14 (App Router) + TypeScript + Tailwind CSS
• 认证 : NextAuth.js + Google OAuth
• 动画 : Framer Motion
• 部署 : Vercel

核心功能

AI 驱动的猫咪插画生成 中英双语支持 (考虑到海外用户) Google 一键登录 灵活的订阅付费模式 全响应式设计

技术亮点

1. 模块化架构 : 严格按照单一职责原则，每个文件控制在 200 行以内
2. 类型安全 : 全 TypeScript ，定义了完整的类型系统
3. 性能优化 : 使用 Next.js 14 的最新特性，SSR + 客户端渲染混合
4. 用户体验 : 支持实时预览，生成过程有进度反馈

遇到的技术挑战

1. AI 模型选择 : 测试了多个模型，最终选择了对猫咪特征理解较好的几个
2. 提示词工程 : 针对不同猫咪品种和绘画风格优化了提示词模板
3. 支付流程 : Stripe 的 webhook 处理和订阅状态同步
4. 多语言 : 实现了动态语言切换，保持 SEO 友好

体验地址

https://www.aidrawcat.com/

想听听大家对这个项目的看法，特别是在技术架构和产品方向上的建议。也欢迎其他做 AI 应用的朋友交流经验！