我的私藏产品开发模板库，助力 Indie Hacker 快人一步 (持续更新）

引言 (Introduction)

• 作为独立开发者，我们最宝贵的资源是时间。从零开始搭建项目（登录、支付、数据库、UI）会耗费大量精力，而这些往往不是产品的核心价值。
• 这篇文章就是你的“加速器”。我为你整理了一份精选的产品开发模板和脚手架清单，它们是我在开发过程中发现、使用并验证过的宝藏。
• 这里的模板能帮你节省几周甚至几个月的时间，让你能专注于打磨产品核心功能。
• 本文将持续更新，我会不断将新的优秀模板补充进来，欢迎收藏本文作为你的私人“武库”。

如何选择合适的模板

• 技术栈匹配： 选择你最熟悉的语言和框架。
• 功能完整度： 是否集成了你必须的模块（支付、登录、数据库）
• 社区与文档： 遇到问题时，是否有活跃的社区和清晰的文档可以求助？
• 开源 vs 付费： 评估你的预算和时间成本。付费模板通常能买来时间和专业的支持。

模板导航与聚合平台 (Template Aggregators)

• 授人以鱼不如授人以渔。我们可以从如下的模板导航网站查找开发模板

vercel模板导航和集合

• 网址：Find your Template

codecanyon付费模板

• 网址：Ai Plugins, Code & Scripts | CodeCanyon

template0

• 网址：https://template0.com/

BoilerplateList

• 网址：https://boilerplatelist.com/

GitHubDaily

• 坚持分享 GitHub 上高质量、有趣实用的开源技术教程、开发者工具、编程网站、技术资讯。A list cool, interesting projects of GitHub.
• 网址：https://github.com/GitHubDaily/GitHubDaily?tab=readme-ov-file

web开发模板

• 这是 Indie Hacker 最核心的需求之一。

免费 & 开源

smart-excel-ai（免费）

• 网址：https://github.com/weijunext/smart-excel-ai
• Next.js。集成了登录、支付（lemon squeezy）、AI功能

Opensaas（免费）

• 网址：https://github.com/wasp-lang/open-saas/
• React + Node.js。集成了登录、支付（stripe）、邮件、AI功能

shipfree（免费）

• 网址：https://template0.com/item/shipfree
• shipfast 的免费版本

付费 & 高级版

shipfast（付费）

• 网址：https://shipfa.st/
• 详见：ShipFast 实战指南：快速启动你的SaaS和AI应用

SupaStarter（付费）

• 网址：https://supastarter.dev/
• 有 Next.js 和 Nuxt 两种模板，功能比较齐全

MkSaaS（付费）

• 网址：https://mksaas.com/
• 快速搭建 AI-SAAS 产品

mkdirs（付费）

• 网址：https://mkdirs.com/
• 导航网站模板
• 详见：

shipany（付费）

• 快速构建SaaS的模板
• 网址：https://shipany.ai/

chrome 插件模板

现代框架

Plasmo

• 支持 React、Vue 等多种前端框架
• 官网：https://www.plasmo.com/
• 官方文档：https://docs.plasmo.com/
• GitHub：https://github.com/PlasmoHQ/plasmo

wxt.dev

• 支持 Vue、Svelte 等多种前端框架
• 网址：https://wxt.dev/
• GitHub地址：https://github.com/wxt-dev/wxt

vitesse-webext

• 网址：https://github.com/antfu-collective/vitesse-webext
• 基于 Vite 的现代模板

官方与基础

Chrome Extensions Samples

• 网址：https://github.com/GoogleChrome/chrome-extensions-samples

chrome-extension-boilerplate-react-vite

• 谷歌官方插件模板
• 网址：https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite?utm_source=template0.com&utm_medium=referral&utm_campaign=navigation

chrome-extension-boilerplate-react

• 网址：https://github.com/lxieyang/chrome-extension-boilerplate-react?tab=readme-ov-file
• 该模板深受 https://github.com/samuelsimoes/chrome-extension-webpack-boilerplate 启发并进行了改编，增加了对 React 18 功能、Webpack 5 和 Webpack Dev Server 4 的支持。

landing page 模板

landing-page-boilerplate

• 开源、免费、0设计资源的模板
• 网址：https://github.com/weijunext/landing-page-boilerplate
• 详见：

Framer Templates

• 高质量的落地页模板市场
• 网址：https://www.framer.com/templates/categories/landing-page/

AI 应用开发模板 (AI App Templates)

AI图像

stickerbaker

• 网址：https://github.com/cbh123/stickerbaker
• 开源

AI Photo Restorer

• GitHub地址：https://github.com/Nutlope/restorePhotos
• https://vercel.com/templates/next.js/ai-photo-restorer

Paint by Text

• 网址：https://vercel.com/templates/ai/paint-by-text

Inpainter with Stable Diffusion

思维导图类

mind-map

• 网址：https://github.com/wanglin2/mind-map
• 思维导图基础框架

个人网站

纯粹的 HTML / CSS / JS

HTML5UP

• 网址：https://html5up.net/
• 特点：这不是单个项目，而是一个宝藏网站，提供了大量高质量、响应式、极简风格的 免费HTML5模板。所有模板都遵循极简美学，代码干净，且遵循 MIT 开源协议（意味着你可以自由使用）。
• 热门模板推荐:
  • Identity: 超级简洁的 V-Card 风格个人名片。
  • Read Only: 以内容为中心的侧边栏布局。
  • Dimension: 点击按钮后弹出不同内容区域，效果非常酷炫。
• 推荐理由：选择多，质量高，开箱即用。下载解压后直接修改 index.html 里的文字和图片即可。我的个人主页，使用的这种方式：https://mingnify.com/zh/

dopetrope by HTML5UP

• 网址：https://html5up.net/dopetrope)
• 特点: 这是一个稍微复杂一点的模板，但仍然保持了简洁的风格。它提供了一个经典的主页布局，可以展示你的作品集、博客文章摘要等，扩展性比单页的名片式主页更好。
• 推荐理由: 如果你希望主页承载比“个人名片”更多的信息，但又不想像完整博客那样复杂，这个模板是一个很好的折中选择。

基于静态网站生成器 (Hexo / Hugo / Astro)

hugo-profile

• 网址：https://github.com/gurusabarish/hugo-profile
• 特点：虽然名字里有 Hugo，但这个项目最核心的部分是其简洁、优雅、响应式的单页设计。它的设计被很多人借鉴。你可以直接扒取它生成的 HTML 和 CSS 文件来用，非常漂亮，包含个人简介、社交链接、项目展示等模块。
• 推荐理由：设计现代，信息密度恰到好处。直接查看网页源代码，另存为 HTML 和 CSS 就能得到一个基础模板，修改成本极低。

Astro-Paper

特点：基于现代静态网站生成器 Astro 构建。速度极快，设计简洁，并且原生支持亮/暗模式切换。虽然它是一个功能完整的博客主题，但你可以轻松地将文章列表隐藏，只使用它的主页作为个人展示页。

网址：https://github.com/satnaing/astro-paper

预览地址: https://astro-paper.pages.dev/

推荐理由：技术新、性能好，并且设计非常干净，适合追求极致性能和现代开发体验的用户。

基于现代前端框架 (React / Vue / Svelte)

brittanychiang.com - v4

特点：这是前端圈非常有名的个人网站开源项目。作者 Brittany Chiang 的网站设计和动效都非常出色。项目使用 Gatsby (一个基于 React 的静态网站生成器) 构建。代码质量极高，是学习和模仿的绝佳范本。

网址：https://github.com/bchiang7/v4

推荐理由：前端开发者的“毕业设计”范本。虽然定制起来比纯 HTML/CSS 复杂，但最终效果和专业性都是顶级的。

onur.dev

• 一个极简风格的三栏式个人主页网站，使用了 Next . js、Tailwind CSS、shadcn / ui、Contentful、Raindrop、Supabase 构建并部署在 Vercel 上，兼容移动端。
• 网址：https://github.com/suyalcinkaya/onur.dev

其他

gegarron

• 网址：https://github.com/geallenboy/gegarron

待分类

qiayue/GitBase

• 地址：GitHub - qiayue/GitBase: Github Based Simple Website Framework
• https://gitbase.app/
• 分析：
  • Github Based Simple Website Framework
  • 基于 GitHub 的无传统数据库的动态网站框架
  • 利用模板，开发越来越快
  • 主要使用gitbase 的开源项目

nextjs-15-starter

• 可以用于做 Adsense 工具站
• 网址：https://github.com/weijunext/nextjs-15-starter

Achromatic

• 网址：https://achromatic.dev/
• 一个 Next.js SaaS 起始套件（Starter Kit），付费

SupaStarter

• 网址：https://supastarter.dev/
• 一个 可扩展且可用于生产环境的 Next.js SaaS 起始套件，付费

openalternative

• 网址：https://openalternative.co/
• 一个精选的开放源代码软件替代方案集合，旨在替代常用的 SaaS (软件即服务) 产品

Next Forge - Multilingual Next.js 15 Starter

• 多语言构建器
• 网址：https://github.com/weijunext/nextjs-15-starter?utm_source=template0.com&utm_medium=referral&utm_campaign=navigation
• https://template0.com/item/next-forge-multilingual-nextjs-15-starter

模板文章

Top 8 Most Popular Open-Source Next.js SaaS Templates

• 网址：https://dev.to/bytefer/top-8-most-popular-open-source-nextjs-saas-templates-1pma
• 介绍开源 saas 模板的文章，8 个模板，通过文章引导到自己的导航网站