最近用 Next.js 14 + TypeScript 开发了一个 AI 猫咪绘画应用，分享技术实现和产品思路。项目背景是作为猫奴程序员想做个专门生成猫咪插画的工具，因为市面上的 AI 绘画工具要么太通用，要么对猫咪的理解不够深入。应用采用 Next.js 14 (App Router) + TypeScript + Tailwind CSS 构建前端，NextAuth.js + Google OAuth 进行认证，Framer Motion 处理动画，部署在 Vercel。核心功能包括 AI 驱动的猫咪插画生成、中英双语支持、Google 一键登录、灵活的订阅付费模式和全响应式设计。技术亮点在于模块化架构、类型安全、性能优化和用户体验设计，如实时预览和生成进度反馈。遇到的技术挑战包括 AI 模型选择、提示词工程、支付流程和多语言实现。

🎨 AI 驱动的猫咪插画生成：应用的核心功能是利用 AI 技术生成各种风格的猫咪插画，通过深度学习算法优化猫咪特征的识别和渲染，提供丰富的绘画风格选择，如卡通、写实、水彩等，满足不同用户的创作需求。

🌍 中英双语支持：考虑到海外用户的使用习惯，应用提供了中英双语界面和内容支持，通过 Next.js 的国际化和 NextAuth.js 的认证，实现动态语言切换和 SEO 友好，提升用户体验和全球可访问性。

🔐 Google 一键登录：应用采用 NextAuth.js 和 Google OAuth 实现用户认证，简化注册和登录流程，提高用户转化率，同时保障用户数据安全，符合现代 Web 应用的安全标准。

💳 灵活的订阅付费模式：应用采用订阅制付费模式，用户可以根据需求选择不同的订阅计划，如免费版、标准版和高级版，通过 Stripe 处理支付流程和订阅状态同步，提供便捷的付费体验和持续的收入来源。

📱 全响应式设计：应用采用 Tailwind CSS 和 Next.js 的响应式设计特性，确保在不同设备上都能提供一致的用户体验，包括桌面、平板和手机，适应现代用户多样化的使用场景。

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

项目背景

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

技术栈

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

核心功能

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

技术亮点

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

遇到的技术挑战

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

体验地址

https://www.aidrawcat.com/

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