关注【索引目录】服务号，更多精彩内容等你来探索！
最近开始着手从零开始构建一个功能齐全的 SaaS 网站——一旦选择了合适的工具，一切进展得出奇地顺利。通过将 AI 助手与现代框架相结合，我简化了从编码到内容的每个步骤。在本文中，我将分享我使用的所有工具——从 ForgeCode（一款 AI CLI 编码助手）到 ChatGPT 等等——来帮助我更快、更智能地开发网站，并减少各种麻烦。如果你想了解这些工具如何协同工作来增强开发项目，请继续阅读！
动图
1. ForgeCode（基于CLI的AI编码代理）
我每天都用ForgeCode编程——这是一个运行在我终端里的命令行 AI 结对编程器。它感觉就像拥有一位专家级的队友：我可以问它诸如“如何添加 X 功能”或“为什么这段代码会出错”之类的问题，它会深入我的代码库，并给出基于上下文的答案。
正如 Forge 文档所述，它“可以帮助您更快地编写代码，解决复杂问题，并在不离开终端的情况下学习新技术”。例如，我曾要求 ForgeCode 为用户帐户和帖子设计一个数据库架构。它通过概述要使用的表、关系和索引来响应，从而有效地启动了我的数据库设计。
ForgeCode 还“与你的 CLI 原生兼容，因此你无需切换 IDE”——这意味着我无需离开 shell 即可迭代代码并获得 AI 反馈。实际上，这为我节省了数小时的样板代码和调试时间，因为 ForgeCode 可以实时发现问题，甚至建议重构。
2. GitHub Copilot（AI 结对程序员）
在我的 IDE (VS Code) 中，我非常依赖GitHub Copilot。它就像是强化版的自动完成功能——当我输入代码时，Copilot 会建议完整的函数、注释和代码片段。它甚至在编辑器中提供了聊天助手。
使用 Copilot 就像与一位知识渊博、能够处理常规代码的队友并肩作战。使用 Copilot 的开发者报告称，代码编写效率提高了 55%。我亲身体验到了这一点：表单验证或 API 调用等常规任务通常全部或部分由 Copilot 编写，让我能够专注于应用的独特逻辑。
总的来说，Copilot 减少了很多繁重的工作，并通过示例帮助我遵循最佳实践。
动图
3. Next.js和React（前端框架）
在前端，我使用了React和Next.js，后者是现代 Web 应用的首选框架。Next.js 可以轻松创建快速、SEO 友好的页面，并以最少的设置处理用户身份验证。专家称 Next.js 是“现代 Web 应用的领先框架，旨在提升性能和用户参与度”。
我在 React 中组织了每个页面/组件，并让 Next.js 处理打包、路由和服务端渲染。在样式方面，我使用了Tailwind CSS，它允许我通过编写实用程序类来构建响应式、一致的 UI。
这个组合意味着我可以快速制作页面原型。当我不确定如何构建页面结构时，我甚至会向 ChatGPT 或 ForgeCode 寻求布局或 React 模式方面的建议。Next.js/React 和 Tailwind 的结合帮助我构建了一个精致的 UI，而无需费力处理底层 HTML/CSS。
动图
4. UI/UX 设计（Figma + AI）
在编写 UI 代码之前，我在Figma中制作了线框和模型。Figma 的设计画布（以及它的 AI 插件）非常适合快速迭代布局和配色方案。
有时我会向 ChatGPT 描述我的应用风格，或者使用像 DALL·E 这样的 AI 图像生成器来制作初始图形或徽标，然后在 Figma 中进行完善。这种设计工具与 AI 头脑风暴的融合，让我能够以比平时少得多的时间完成 UI 外观。
5.后端和数据库（Supabase + Prisma）
在后端，我选择了无服务器方法。我使用Supabase作为数据库（PostgreSQL）和身份验证，并使用Prisma作为 ORM。这使得我可以在 Next.js API 路由中编写后端代码，而无需配置服务器。
每当我需要新的数据库表或字段时，我都会在 Prisma 中建模，并自动部署迁移。ForgeCode 甚至在这方面提供了帮助：我描述了我的数据模型需求，它就给出了一个架构布局建议。
我使用 NextAuth 处理身份验证（用户注册/登录），它可以轻松与 Supabase 集成。
6.付款和身份验证（NextAuth + Stripe）
对于用户管理，我实现了NextAuth（一个开源身份验证库），这样我就不必手动编写登录流程。
对于支付和订阅，我选择了Stripe。我集成了 Stripe 的 API，这样就可以收取月费并安全地处理信用卡。Stripe 让这一切变得简单——毕竟，它是众多企业 “支持在线支付处理和商务的 API 套件” 。
数百万公司“使用 Stripe 在线和线下收款”。Stripe久经考验，这给了我信心，它的文档和示例代码让我可以在一天内完成订阅。
7. 托管和部署（Vercel）
网站准备就绪后，我将其部署在Vercel上——这是 Next.js 创建者创建的云平台。
Vercel 的一键部署功能可以从 GitHub 进行，这意味着每次我推送到主分支时，我的网站都会自动构建和发布（包括 SSL、CDN 和缓存）。无服务器功能也能自动扩展。
这意味着我不必担心 devops；我可以专注于代码，让 Vercel 处理正常运行时间和全球交付。
8. 代码管理和 CI/CD（GitHub Actions）
我将所有代码都保存在GitHub中，并使用分支和拉取请求来添加新功能。为了实现持续集成，我配置了GitHub Actions，以便在每次推送时运行测试和代码检查，并在合并到主分支时重新部署到 Vercel。
这种自动化的工作流程简直是救星——它能在产品投入生产之前就发现拼写错误、格式错误或测试失败。在 GitHub 上管理项目还能让我使用问题跟踪和项目板来保持条理。
动图
9.内容写作和搜索引擎优化（ChatGPT + Grammarly）
我不能忽视营销方面：我的网站需要优秀的文案和有利于SEO的内容。为了撰写落地页、博客文章，甚至电子邮件模板，我使用了ChatGPT。
我会给它列一些要点或简介，它会输出润色好的段落，然后我会对其进行编辑。生成草稿后，我会用Grammarly检查所有内容，以发现任何语法或清晰度问题。
这种两步AI方法为我节省了大量时间。原本可能需要几个小时的头脑风暴和编辑工作，现在几分钟就能完成。
10.分析和监控（Google Analytics + Sentry）
最后，我添加了一些工具来衡量和维护网站。我设置了Google Analytics（谷歌分析）来跟踪用户注册、页面浏览量和转化漏斗。
为了跟踪错误，我集成了Sentry，这样如果发生任何客户端或服务器异常，我都会收到通知。当我看到一个奇怪的错误时，我有时会将堆栈跟踪粘贴到 ChatGPT 中来思考原因——它竟然能根据错误消息建议调试步骤，这真是太神奇了。
分析和监控共同形成了一个闭环：我可以看到用户行为数据、对网站进行迭代并快速发现错误。
结论
借助我的现代化和人工智能工具包，构建这个 SaaS 网站变得更快、更有趣。
ForgeCode 和 Copilot 让我能够高效地编码，Next.js/Tailwind 处理 Web 应用程序技术堆栈，而像 ChatGPT 这样的 AI 助手则涵盖了从编写副本到故障排除的所有内容。
如果您计划构建类似的项目，不妨试试这些工具。它们帮助我实现了我一直担心的功能，它们也能帮到您。祝您编程愉快——如果您有自己喜欢的工具或技巧，欢迎随时留言！