Transcription
您知道那个时刻吗？当您盯着一张空白的页面，知道您需要一个登陆页面，但您不是平面设计师，也不是开发人员，而且您的预算基本上为零。过去，这每次都是我 [音乐]。而这就是一切发生改变的地方。我停止了试图自己做所有事情。我让人工智能成为我的设计团队和我的开发团队。今天，我将向您展示如何在不到 10 分钟的时间内构建一个专业的登陆页面 [音乐]。无需编码。无需设计师，只有您和人工智能协同工作。看，创建登陆页面不应该感觉像指挥管弦乐队。但事实正是如此，对吧？您需要研究，您需要策略，您需要文案，您需要设计，然后您需要有人来编写整个代码。这是您需要 [音乐] 完美协调的五种不同的技能。如果其中任何一个元素出错，您的整个页面都会失败。而且说实话，您可能没有预算来支付所有这五项。所以您最终会得到一个像弗兰肯斯坦一样的页面，文案还不错，设计糟糕，功能勉强可用。在之前的视频中，我向您展示了人工智能如何处理研究和文案。但设计呢？代码呢？这部分通常会让人望而却步。好吧，看看这个。我将向您展示一些将彻底改变您对登陆页面的看法的东西。第一步是设计研究，因为说实话，所有好的设计都基于灵感。第一种方法实际上是使用您自己的风格指南或您已经喜欢的网站或页面设计。也许您想将它们延续下去，并用一些新的文案快速尝试一下，而无需在 WordPress 或您当前使用的任何登陆页面软件中重复它。您只是想能够提供文案，提供设计，然后让一些东西像 Lovable 一样快速为您编写代码。所以，在这种情况下，我正在看 Social Media Examiner 的 AI Business Society。我可以截取这个页面的屏幕截图，但我推荐的做法是使用一个名为 Go Full Page 的 Chrome 扩展程序。所以，如果您在 Google 上搜索 Go full page Chrome extension，您就可以免费获得这个插件，它将捕获整个登陆页面的完整快照。这对我们来说非常有帮助，因为它将为我们提供一张图像中的设计风格指南，我们可以将其用作后续设计的起点。所有设计师都会经历查看其他设计师作品以寻找灵感的过程。我们不会直接窃取页面，但我们会将其用作我们自己设计工作的起点。然后我们可以将其输入人工智能，以捕捉其精髓，或者捕捉其调色板，或者捕捉设计师可能在另一个页面上使用的一些独特的 UI 选择。所以，在这种情况下，您可以去 Pinterest 这样的地方，输入登陆页面，看看会出现什么样的灵感，您可以浏览各种登陆页面。继续寻找一个您认为会引起您的受众共鸣的页面，然后将其拖放到您的桌面上以备后用。一个快速提示。如果您正在寻找登陆页面的灵感，您应该更多地关注登陆页面的 UI，而不是库存照片或插图。一张好的库存照片或插图可以让登陆页面脱颖而出。但这并不是登陆页面的实际设计。例如，如果我们看这个登陆页面，您可以看到这个照片气泡以及文本与之交织的方式非常吸引人。它在视觉上令人惊叹。然而，这可能不是您可以轻松复制到您的登陆页面上的东西。事实上，页面的 UI 其实相当简单。如果您向下看，这个页面上并没有太多设计。所以，当您浏览登陆页面时，请确保您注意到他们使用的字体类型、颜色、布局，而不是页面上的特定照片，而是它们如何将一切分层在一起，以创建一种视觉层次结构，这种结构将与您知道将出现在您的登陆页面上的元素类型一起工作。例如，这是一个非常独特的登陆页面，具有独特的 UI。您可以看到那种鹤的颜色，但您也可以看到粗体排字。它非常简单和简约。然而，您可以看到，即使是盒子和照片也有一种非常独特的处理方式，可以被引入到我们为我们的品牌制作的登陆页面中。寻找不同设计师在登陆页面上使用的细微 UI 变化，因为这些将融入我们页面的设计中。当我们有了像 Lovable 这样的东西时，我们可以查看它，然后为您的公司编写代码。例如，我正在使用 GoF 拍摄的我们现有登陆页面设计的长快照。我从 Pinterest 上获取了这个登陆页面模型，以便看看它们各自的潜在效果。现在，在我们继续之前，我必须告诉您，构建登陆页面只是人工智能可以改进您营销的数百种方式之一。这就是为什么我们创建了 AI Business Society，因为您独自一人可以走很远。但如果您与社区一起，如果您一起前进，您可以走得更远更快。因为在 AI Business Society 中，我们是一个营销人员社区，他们利用人工智能来扩展我们的业务，更快地行动，更好地构建，并更聪明地思考。我们与一些顶尖的 AI 商业和营销教师一起进行现场培训。我们还一直在分享我们最好的技巧、最好的窍门，并在人工智能这个快速变化的环境中共同进步。所以，如果这听起来对您有帮助，请点击描述中的链接来尝试 AI Business Society。它是无风险的，因为有 30 天退款保证。现在，有趣的时刻来了，因为我们有了设计灵感，也有了所有文案，我在另一个视频中展示了如何使用 Claude 创建高度说服性的登陆页面文案。我不会再次涵盖整个过程。您可以查看上面的链接或此视频下方的描述。我们现在进入第二步。我们将使用 Lovable 进行编码和设计，您可以在 lovable.dev 上找到它。一旦您访问 lovable.dev，您就会看到一个大型对话框来启动您的项目。您甚至不需要创建帐户。一旦您输入第一个提示，它就会提示您设置帐户。所以，设置一个帐户。您甚至可以免费开始，并了解它会是什么样子。现在，如果您转到付费计划，您可以做更多的事情。但即使是免费帐户，您也可以品尝并了解 Lovable 将为您在业务中做什么。所以，让我们谈谈我们已经收集到的配料。我们将转到附加，然后我们将获取登陆页面设计。我将以我们现有登陆页面的大屏幕截图作为起点，然后使用这个确切的提示说明。根据附加的参考设计创建一个登陆页面。使用 UI 布局和结构作为灵感，但进行调整以适应我的文案。使其干净、现代、移动响应。专注于清晰度和转化。然后我在下面留了一个空间用于登陆页面文案。我将再次回到 Claude。我们制作了一个关于如何制作有说服力、令人惊叹、可操作的登陆页面文案的完整视频。请查看下面的链接。我将复制并将其粘贴到“登陆页面文案”下方，然后单击“开始”。您可以看到 Lovable 立即开始工作，思考它需要做的一切才能创建这个登陆页面。它是一个思考模型。所以它会一步一步地完成创建登陆页面的过程。好了，构建完成了。但首先，在我们深入研究它给我们的设计之前。让我们看看它实际采取的思考方法。它实际上花时间考虑了图像，并在创建之后做了一些笔记，然后开始为转化重新排列它，然后为我们实际构建页面设定了一些可能的下一步目标。当然，CTA，它甚至认识到我们没有 CTA 的链接。那么，按钮去哪里？还没有链接。您可能想添加一些分析。可能想进行优化和自定义。并且总是有需要优化和自定义的事情。但让我们向下滚动看看。您可以看到它组织得很好。它看起来相当不错。留白很好。嗯，所有信息都组织得很好。哦，我喜欢这个定价。嗯，年度与月度比较。而这正是它开始闪耀的地方，因为它借鉴了一些最佳实践，如何让一个脱颖而出，而另一个呢？对吧？结尾有一个很棒的呼吁栏。FAQ 很棒。而且，它已经内置了很棒的交互性。所以，哦，我们有一些它设计并放入其中的图像和一个强大的页脚。好了，这就是我们与 Lovable 的第一次尝试。现在，显而易见的是，我们是根据我们给它的设计完成的，它应该更像这个页面。您可以看到它并没有完全捕捉到页面的设计。它确实借鉴了一些元素。您可以看到这里有一些绿色、灰色、绿色、灰色的组合。它已经融入了一些。它不是同一种绿色，但它有那种灰色对比。嗯，它看起来很干净。您可以看到它借鉴了这个页面 UI 中的一些橙色，然后将其融入到这个页面上的更多号召性用语中。现在，这没关系，因为您知道吗？我们现在可以告诉 Lovable 我们想修复页面上的什么，我们想改变页面上的什么，而我们不必担心点击、拖放和更改所有内容。它给了我们一个很棒的、干净的第一次尝试。但我第二次运行了 Lovable，使用了我们之前选择的另一个设计。还记得 Pinterest 上的那个吗？您可以看到它使用了一些。它已经获得了蓝色，因为这个有一个更深的、像深青色的。而这个在很多地方都给了它一种直的、几乎是青色的蓝色。但同样，这是可以修复的。它给了我们一个很好的第一次尝试。现在我们可以实际进行更新。更改它。更改间距，更改字体大小，也许让这个字体稍微小一点。所以，让我们进入第三步，在 Lovable 中，这总是会是完善阶段。在查看了页面之后，我发现 Lovable 需要纠正一些不同的事情。而且它非常容易。我现在所做的只是提示它进行以下更正。我将所有需要进行的更改都列成了一个粗体列表。现在，您可以一次进行这些更改，但最好一次进行多次修订。一，因为它有能力这样做，然后二，当您一次加载大量更改时，您实际上使用的 Lovable 积分更少，因为之后您按积分收费。您希望尽可能多地节省积分，用于您将来想要进行的更改。这些是我进行的一些更改。我想使用附加的图像，我附加了另一个，并说将其用作此处英雄部分的背景。因为我不太喜欢这张图片，我宁愿使用我们以前用过的东西，我想将标题颜色更改为更匹配我们已经有的红色。而不是浅灰色作为分隔符，您可以看到它在白色之间使用这种浅灰色来分隔。我想转到米色，我为所有号召性用语提供了链接，以便这个页面实际上可以工作。所以，我将单击“开始”。好了，Lovable 已经根据我告诉它的内容对不同的文件进行了所有更改。您可以看到它编辑了所有这些不同的代码行，所有这些您不必自己编辑的行。现在，当然，如果您知道如何编辑代码，您可以随时切换到代码编辑器，然后浏览不同的页面并自己进行代码更改。偶尔，我可能会深入研究代码来自己挑剔它，但通常我只是直接去 Lovable，让它进行更改，然后您可以看到这里它已经完成了我想要的所有更改。它已经在下方添加了背景图像。现在，我可能需要更改颜色。图像上方有一个渐变色，我想要。我需要更改它。但它已经添加了米色。标题现在是红色的。而且它看起来越来越接近我最初的意图。现在，有些地方它使用了灰色而不是米色，但它越来越接近了。可能只需要再几个提示，我就可以让它看起来不错了。这就是使用 Lovable 这样的东西的巨大区别。您不必去做所有细枝末节的事情。您只需要清楚您想要什么。所以，只要您清楚您想看到什么，Lovable 就可以采取所有关于设计和代码的行动，为您实现目标。现在，在我向您展示如何发布此页面之前，请不要忘记点赞并订阅，这样您就可以及时了解我每周都在这个频道上发布的各种人工智能教程。现在，让我们进入第四步，我们将实际发布这个网页。如果完成了，发布很容易。只需两次点击即可。但有一个设置我们需要更改才能使其上线。那就是选择一个域名来发布。所以，让我们转到右上角，然后单击发布。您可以看到我们有一些发布到域名的选项。我们可以使用 lovable.app 发布到这个子域名。我们有 marketer guide。我们可以将其更改为类似 AI business.lovable.app 的内容。但如果您像我一样，您可能想使用自己的自定义域名。所以，您可以单击自定义域名，它会为您提供几个不同的选项。您可以连接到现有域名。也许您在 Cloudflare、GoDaddy 或 NameCheep 上购买了域名。如果您单击连接域名，它将引导您完成一个分步过程。您只需在此处输入域名，它就会有一个很棒的过程来指导您如何从 GoDaddy、Cloudflare 或 NameCheep（无论您在哪里获得域名）进行连接。但如果您是新手并想在此处注册域名，您可以直接从 Lovable 购买域名。这可以不仅仅是一个登陆页面。您实际上可以用它来构建完整的网站、完整的博客。但就目前而言，我最喜欢的用例是设置登陆页面，以便我可以测试它们之间的许多不同变体。如果您认为这很疯狂，请等到您看到人工智能可以为您的品牌声音做什么。我指的是为您的播客、YouTube 视频和社交媒体内容制作完全定制的音乐。在下一个视频中查看。