从 Scratch 到 SaaS - 在 10 天内构建和启动 SaaS！ 🚀

我最近决定接受个人#buildinpublic 挑战，我打算在短短 10 天内构建并发布 SaaS 产品。自从我从头开始构建产品以来已经有一段时间了，今年我想推动自己创造一些新东西。 首先，让我解释一下我为什么要接受这个挑战。我的目标是让自己负责。我倾向于继续构建更多功能并说“如果我添加这个会怎么样？”或“如果我添加那个怎么办？”但是这一次，我想抵制这种冲动，并专注于通过设置这个时间限制来保持它简单而实用。 我将向您展示构建 SaaS 产品的整个过程： 构思 发展，和 发射 但我不会提供任何建议或假装知道我在做什么，因为这是我的第一个基于订阅的产品。相反，我将简单地对开发过程和最终结果保持透明，以便您可以从我的成功和失败中学习。 💡创意 那么，新项目的内容是什么？我决定为 Instagram 和 LinkedIn 创建最易于使用的轮播工具。 我有了这个项目的想法，因为我注意到轮播帖子在 LinkedIn 上非常受欢迎。我致力于创建轮播，相信我，设计它们可能非常耗时。所以，我想，为什么不创建一些东西，让非设计师更容易创建他们自己的具有视觉吸引力的旋转木马呢？ 不过，我不想用太多的设计选项让用户不知所措。毕竟，社交媒体上帖子的生命周期如此之短，并不总是值得花很多时间来完善它们。我的目标是为用户提供足够的选择，以创建能够反映他们个人或公司品牌的引人注目的设计，而不会使事情变得太复杂。 当我在初创公司担任设计师时，我经常发现自己要兼顾多项职责。我不仅从事营销设计工作，还必须处理产品设计和其他事情——这就是初创公司的生活！面对如此多的事务，当我不得不花时间在多次文案迭代后进行设计更改时，这尤其令人沮丧。我经常希望负责副本的人可以自己进行这些更改，而不需要让我作为设计师参与进来。 这就是为什么我认为我的 carousel maker 工具可能不仅对管理个人品牌的普通人、独立创始人和独立黑客有用，而且对时间和资源有限的小公司或初创公司也有用。这一切都是为了让每个人的设计过程更简单、更容易获得，无论他们的技术能力如何。 虽然我不确定我的方法是否会吸引用户，但事实是设计模板市场上已经有大玩家了。我需要使自己与众不同以脱颖而出，但又不能太过分以致于无法吸引广大观众。 所以，我正在进行这个为期 10 天的实验，看看这个想法是否站得住脚。会有一些粗糙的边缘，但这都是为了测试我是否应该继续前进。如果该产品在第一个月内没有产生任何收入，那么我就会知道是时候尝试其他东西了。 🤔问题 首先，模板可能很棘手。乍一看，它们可能看起来很棒，字体大小恰到好处，调色板和谐，图像精选，但用户在自定义它们时可能会遇到困难。 当他们添加文本、更改字体大小并四处移动时，最终设计可能不是他们所希望的。这并不奇怪，真的。如果您不是设计师，您怎么知道要使用哪些字体大小、颜色、边距或填充？太多的自由会导致混乱的结果。 此外，这些模板中的许多都是独特而华丽的，很难适应特定的品牌，导致视觉上的不一致和品牌形象的混乱。另一个问题是，如果一个超级独特、引人注目的模板太受欢迎，用户到处都能看到它，它就会尖叫“模板！”这通常不会顺利进行。 🤔解决方案 我想做的是提供一个简单的设计解决方案，让用户可以添加他们的品牌字体、颜色和徽标，而无需任何额外的附加功能。一个简单的设计是通用的，它不属于任何人，但您可以通过添加您品牌的颜色和字体来赋予它独特的触感，从而使它成为您自己的设计——它从根本上消除了看起来您和每个人都使用相同模板的风险别的。 ⚠️ 潜在的陷阱 但有一个问题：非设计师可能会对自己的形象感到不确定，并认为简单的设计不够好。 他们最终可能会因为该工具过于基础而放弃该工具并选择其他工具，试图通过添加华丽的图形和效果来弥补他们设计技能的不足，并相信越多越好。您知道，经典的“将徽标做得更大”的情况 — 如果您曾经在设计机构与客户合作过，您就会完全明白我在说什么！ 既然我已经讨论了这些问题、解决方案和潜在的陷阱，现在是深入研究开发过程并了解我如何正面应对这些挑战的时候了。 📅 第一天 https://www.youtube.com/watch?v=I0vS9Yq2f58&embedable=true 第一天，我建立并运行了基本结构。旋转木马是功能性的，我特意将设置放在每张幻灯片下面，这样用户就不必直接与设计元素进行交互。他们不能移动或选择任何东西，这与其他设计工具截然不同。 我不完全确定这种方法的结果如何，这有点像赌博。这特别针对可能不习惯与设计画布交互的用户。相反，设置以易于填写和调整的形式呈现。 在“简介”幻灯片中，我添加了副标题、标题、说明、向右滑动图标和表情符号。这是我正在尝试的另一件事……添加表情符号可能是用户传达轮播主题的绝佳方式，而无需费力寻找与设计互补的图像。 但真正令人兴奋的是，当您更改文本时，字体大小会自动调整。您可以根据需要添加任意数量的文本，并且它始终会自动适应。 想象一下这可以节省多少时间和精力！无需在每次编辑文本时手动调整字体大小或重新定位元素。这可能是一个真正的游戏规则改变者，允许用户专注于创建引人入胜的内容，而不是陷入设计细节的泥潭。 我还包含了一组文本编辑选项，允许您为标题添加颜色或斜体。这是非常基本的，但现在应该可以完成工作。 至于常规幻灯片，我确保在整个轮播中保持字体大小一致，因为不断更改它确实会弄乱设计并使其看起来不专业。将来，我想通过添加通用尺寸选择器来为用户提供更多控制和灵活性。 最后，为了结束第 1 天，我添加了一个下载按钮，该按钮生成一个 PDF 文件，其中包含单独页面上的每个轮播幻灯片，这是目前 LinkedIn 在作为文档上传时创建轮播帖子所需的格式。 它可能不是世界上最漂亮的东西，但我可以正式地说旋转木马制造商工作！ 对于 Instagram，我将需要导出一系列图像，现在必须等待。 📅 第 02 天 https://www.youtube.com/watch?v=xDMPYtBbH7E&embedable=true 现在才第二天，我已经忍不住要增强 UI 以使其更具视觉吸引力。通常，我不会优先考虑 MVP 的外观，但由于这是一个设计工具，我认为它至少应该看起来不错。 还有什么是新的？在花费了大量的 🕒 之后，表情符号选择器现在有了完整的列表可供选择，而且我在幻灯片中添加了一个社交媒体徽章，用户稍后可以将其作为个人品牌的一部分进行自定义。 另外，我实现了允许用户根据需要删除、重新排序或添加新幻灯片的按钮。还有一点好处：幻灯片计数器会自动计数，因此用户不必担心跟踪它。 我还添加了为每张幻灯片打开和关闭元素的功能，从而更好地控制轮播内容。当我认为我已经完成了一天的工作时，我不得不回去修改介绍和结尾幻灯片的自动调整大小脚本。现在，它会考虑哪些元素是可见的或隐藏的，并相应地调整字体大小以（几乎）完美地适合文本。 至此，我为期 10 天的#buildinpublic 挑战的第二天结束了。我对到目前为止取得的进步感觉非常好！ 📅 第三天 https://www.youtube.com/watch?v=gvhaIhu9nrg&embedable=true 在第 3 天，我专注于实现一个允许用户管理轮播整体设置的侧边栏。这是我想要的主要设计 - 用于常规设置的左侧栏，同时仍允许用户自定义轮播中的每张幻灯片。 侧面菜单中的第一个选项选项是轮播类型。如果您选择 LinkedIn，您将下载 PDF，这是在平台上创建轮播所需的格式。如果您选择 Instagram，您将下载一系列 JPG。 另一个方便的功能是能够决定用户是否想要介绍和/或结尾幻灯片。有时，他们可能只想在没有任何介绍的情况下直接开始行动。 对于调色板，我想让用户非常容易地从一组经过优化的预选颜色中进行选择。现在，只有四个，但我计划添加更多，当然，将来允许用户创建自定义调色板。 介绍和结尾幻灯片上的文本自动调整大小功能非常酷，但正如我之前所说，常规幻灯片看起来更好，并且更易于阅读，字体大小一致。因此，我为文本大小引入了小、中和大选项，以确保仍然可以控制它们的整体大小以及对齐方式选择。 在字体方面，我采用了与颜色相同的原则——我提供精心挑选的字体配对，以消除对什么搭配看起来不错的猜测。 我计划在未来的更新中添加更多字体选项。但是，我知道这种方法可能并不适用于所有人，尤其是对于使用 Google 字体库之外的字体的品牌。 如果您喜欢更简洁的外观，我还可以禁用幻灯片计数器。 对于品牌推广，“个人”模式有头像、姓名或社交媒体句柄和网站选项，针对内容创作者、思想领袖或普通的 LinkedIn 和 Instagram 用户。对于公司，有一种“公司模式”可以显示您的徽标和网站。 我真的很高兴到目前为止取得的进展，它终于开始看起来像一个真正的产品，但今天仍然需要进行一些润色和错误修复。 📅 第 4 天 https://www.youtube.com/watch?v=i-mrUh2rB0Y&embedable=true 第 4 天的大部分时间我都在研究保存/加载功能。基本上，用户将能够设计一次轮播，将所有常规设置保存为模板，并在将来加载它以节省宝贵的时间。 现在，实现非常简单——它只是在本地保存一个 JSON 文件。但就像这个 MVP 阶段的大多数功能一样，它完成了工作！ 我还专门为 Instagram 故事添加了一个新的轮播类型选项。我不完全确定它是否会成为一个受欢迎的选择，但现在用户可以选择 Instagram 故事并下载一系列大小合适的图像，以直接作为故事上传。品牌在此选项中是隐藏的，因为 Instagram 在查看故事时已经显示了带有个人资料图片和名称的叠加层。 当天最重要的更新是“背景设计选项”功能。此功能的目标是添加一个微妙的背景设计元素，使轮播即使在滚动时也显得无缝。 我认为无缝效果让这些旋转木马非常酷，旋转木马变得像一个完整的图像，可以平滑滚动，没有任何视觉中断。 但这是一种平衡行为，因为我想提供美观的设计选项，同时补充任何品牌风格而不会显得格格不入。 今天我只有时间研究四个选项。这不是一件容易的事，因为我仅限于使用 HTML 元素，我可以操纵这些元素来使用 CSS 更改它们的颜色。但我相信我可以想出更多的设计方案。 这就是挑战第 4 天的全部内容，只剩下 6 天了！ 📅 第 5 天 https://www.youtube.com/watch?v=YZLIZqwRSlg&embedable=true 在第 5 天，事情没有往常那么令人兴奋。我大部分时间都在完善现有功能。 首先，我添加了更多调色板，包括创建您自己的自定义调色板的选项。而且，与颜色功能类似，我让用户更容易自定义他们的字体配对。他们可以选择自定义字体配对的复选框，或者选择只使用一种字体（如果他们喜欢的话）。 我还添加了更多微妙的设计背景效果来补充任何品牌风格，而不会显得脱节或格格不入。 另一个更新是“随机化”按钮。每次页面加载时轮播已经开始随机选项，但是“随机化”按钮可以帮助用户选择随机选项，直到他们找到他们喜欢的组合。这是一个很小的补充，但它可以非常方便！ 最后，我添加了“幻灯片类型”选项：文本、文本+图像或仅图像。我的目标受众（非设计师）可能更喜欢将所有内容都保留为文本，但我仍然想为那些想要将图像添加到他们的轮播中的人提供选项。 这就是第 5 天的内容，此时，该工具已正常运行，我几乎可以按原样启动它。然而，有一些真正令人兴奋的事情是我今天开始做的，但我想在揭开它之前完成它。 📅 第 6 天 https://www.youtube.com/watch?v=yNUu9Ffauwg&embedable=true #buildinpublic 个人挑战和旋转木马制作器的第 6 天即将完成！我感到非常自豪，但接下来是真正的樱桃。 我从构建其他产品 resumemaker.online 的经验中学到了很多东西。它是设计简历的工具，我花了一段时间才意识到提供内容方面的帮助与设计方面的帮助同样重要，甚至更重要。 因此，我想通过向轮播制作器添加 来查看这是否也适用于此。是的，我正在跳上 AI 炒作列车！ AI 内容生成器 它是这样工作的：您设置幻灯片的数量，选择您的主题，然后让 AI 为您的轮播编写引人入胜的内容。然后用户可以根据需要对其进行编辑和个性化设置，它甚至可以选择正确的表情符号！ 我认为此功能可以使该产品有别于其他轮播制造商。它不仅有助于设计，还有助于内容创建。我很高兴看到结果如何以及用户对此有何反应。 📅 第 7 天 第 7 天就在这里，仍然缺少一个重要方面 — 如何将其货币化。这是我的第一个基于订阅的产品，我对我应该怎么做有点无能为力，但这就是我的想法。 大多数功能将保持免费，但您可能已经注意到，我在幻灯片上添加了水印。用户可以免费下载没有水印的轮播，但他们需要在社交媒体上分享一个链接才能这样做。我还添加了一条消息，鼓励用户支持像我这样的独立创始人并在社交媒体上宣传。希望它能帮助更多人使用该工具！ 但是我计划在“Time Saver Pro Plan”下出售的付费专区后面还有一些功能。我不是真的在卖设计；我卖的是便利，一种做事更快的方法。我在卖时间。对于价格，我的起价为 9.95 美元/米，然后再看情况如何。 该计划包括： 无水印 无限下载 最多包含 10 张幻灯片的轮播 能够加载您自己的自定义预设 用于内容生成的 AI 功能 所以你有它 - 如果用户共享它，他们仍然可以免费使用没有水印的旋转木马制造商，但他们将无法访问 AI 内容生成器或加载自定义预设的能力。在他们达到一定的免费下载限制后，他们将需要从头开始，而且他们只能创建最多六张幻灯片的轮播。 总的来说，我认为免费选项真的很慷慨。为了展示 AI 内容生成器的价值，用户可以使用一些预先生成的结果来测试 AI 功能，这些结果可用于各种主题，例如创业、瑜伽和 UX 设计。 最后，我要感谢 ，因为它让付款流程的设置变得轻而易举。 Outseta 📅 第 8 天 https://www.youtube.com/watch?v=WdByyMlNpxc&embedable=true 第 8 天进展顺利，除了创建一个简单的徽标和登录页面之外，没有太多事情要做。 对于徽标，我不想在上面花太多时间，所以我从几个选项开始，但最终看起来与 Instagram 上的轮播图标太相似了。它本可以奏效，但我的设计师自豪感不能让它滑落，所以我不得不放弃它们。 然后，我尝试用不同的方法将旋转木马的形状提炼成最简单的形式。我尝试添加“AI”的首字母以及通常与魔法或人工智能相关的图标。 我更喜欢这些版本，并开始觉得我在它们上浪费了太多时间。就在我要敲定一个设计的时候，我把它导出了错误的方式，结果发现这个标志没有边框看起来好多了。它看起来更优雅，但仍传达相同的含义。 所以，我最终对结果非常满意——主要是偶然，而不是技巧。它仍然很重要，对吧？ 至于名称透露，我一直保密，因为我不想破坏 AI 功能带来的惊喜……但现在，事不宜迟，产品名称是 ！ aiCarousels 着陆页也已完成。 保持简单是我的目标，但为了让它在视觉上更有趣，我添加了一个小的 javascript 脚本，它可以在用户滚动时从左向右移动轮播示例。我什至在功能部分使用表情符号而不是设计图标，忠于旋转木马制造商背后的简单理念。 现在一切都已准备就绪，是时候为发布做准备了。在大门向公众开放之前，还有一些东西需要尝试，但我迫不及待地想与大家分享旋转木马制造商。 如果您想自己查看着陆页，请前往 www.aicarousels.com 📅 第 9 天 https://www.youtube.com/watch?v=Z-rYRdRytiA&embedable=true 现在是第 9 天，终于可以发布了！我之前提到过，我想涵盖从构思阶段到开发过程，现在我们正进入启动阶段。 在这篇文章中，我将分享我准备的东西，在下一篇文章中，我计划分享发布结果，看看人们是否真的喜欢这个产品！ 老实说，这很可能会失败！模板市场的竞争非常激烈，但这就是不在单个项目上投入太多时间的好处…… 想象一下，在某件事情上工作了六个月甚至一整年，结果人们告诉你，“嘿，你的产品是垃圾。”这会有点伤害，而且当你投入了这么多时间和精力时，很难不把它当成个人——它开始感觉像是你自己的一部分。 但是，如果您只在一个项目上工作几周（10 天可能有点短），您可以试水看看是否值得投入更多时间。即使没有成功，知道您已经获得了一些宝贵的经验教训可以应用于您的下一个项目，您仍然会感觉很好。 至于 Product Hunt 上的发布（对于那些不知道的人，它是发现新技术产品的首选网站），我设置了一个“即将推出”页面。它目前有 23 位注册用户，他们会在我们上线时收到通知，以便他们投票。 我还花时间设置了产品页面，该页面在太平洋时间上午 12 点上线。我写了详细的描述，准备了第一条评论，这对引发讨论非常重要，甚至还为 Product Hunt 用户增加了 50% 的折扣。 到了做图的时候，感觉有点傻。我在尝试为页面设计漂亮的图像时遇到了困难。然后，我想到了——我可以使用产品本身来制作它们！毕竟，还有什么更好的方式来展示产品呢？因此，我最终制作了 3 种不同风格的 9 张图片，每张图片都提供了对产品功能的一瞥。 现在，只需等待页面上线即可。您可以通过访问此链接来表达您的支持： 。你的支持对我来说意义重大！ https://www.producthunt.com/posts/aicarousels-com 不管结果如何，一段时间后从头开始构建一些东西真是太棒了。这也极大地分散了我个人生活中发生的一些不愉快的事情。那么，让我们看看发布的进展情况，明天我会告诉你结果！ 📅 第 10 天 — 任务完成！ https://www.youtube.com/watch?v=_Z40R-vFscY&embedable=true 在 10 天内构建和启动 SaaS 这一快速而激烈的挑战的最后一天。 现已上线，我想分享 的结果和一些结束的想法。 aiCarousels.com Product Hunt 发布 老实说，在没有适当测试的情况下推出产品有点像在黑暗中飞跃。我给一些朋友看了，但你知道朋友是怎样的——他们总是想让你感觉良好。所以，即使他们说他们喜欢它，我也对他们的反馈持保留态度。我真的不确定人们是否会喜欢它。尽管有我的顾虑，发布还是出奇的顺利！ aiCarousels 获得第 9 名，获得 154 票赞成票、64 条评论和 7 条 5/5 好评。 这与我的投票无关。 Product Hunt 已经变成了这场人气竞赛。因此，如果您是一位拥有大量追随者的创始人，那么您登上顶峰的机会就会高得多。 我更关注评论，因为积极的反馈是压倒性的，我想分享一些我最喜欢的评论，在那一刻，我开始验证产品： “好的！我打算让我的内容创作者试试这个，看看我们是否可以摆脱 Canva 并节省一些时间和金钱！它看起来很光滑，但似乎创建过程也非常简单明了！” “我刚刚付钱给 Fiverr 上的内容创作者，让我制作了一堆轮播，并且 ngl 你的产品为我制作的东西要好得多。哦，我希望我在几周前找到这个” “作为一些 Instagram 帐户的社交媒体经理，这个工具对我来说是纯金，我喜欢它！恭喜上线！ ❤” “美丽的！我一直在寻找这样的工具，尽管我可以使用 Figma。您的工具有助于加快速度，这非常有益。” 我从评论中得到的总体印象是，他们似乎都知道，投入更多精力来创建视觉上令人惊叹的旋转木马并不能提供太多额外价值。他们看到了获得足够好的东西并快速获得它的价值。 但锦上添花的是，有5个付费用户注册了！这就是最终的证据。人们可以说他们喜欢你的东西，但当他们真正为它付钱时，你就知道他们是认真的了！ 我对结果非常满意，非常感谢所有支持发布的人！ 那么现在，下一步是什么？问得好……我不想说得太快，所以我还没有想那么远。有很多事情我需要完善，但我为了 MVP 而推迟了，但至于大局，我还不太确定。也许我可以简单地把它发展到一个不错的 MRR，把它列出来，然后试着卖掉它！ 现在，我想我会冷静一点。这个为期 10 天的挑战真的很有趣，但也有点紧张！ 我只是希望你喜欢看一下构建 SaaS 背后的设计过程，就像我喜欢制作它一样，尽管我知道你们中的一些人希望就编码进行更多讨论。也许下一次，我会确保包含更多内容。 话虽如此，本系列到此结束！但是，我会继续在 上提供定期更新🐦 Twitter 再次感谢您的支持，我们那边见！ 也发布 。 在这里