你的 Claude Code 轮播图做得太烂了(修复方案来了)

CChase AI
마케팅/광고컴퓨터/소프트웨어AI/미래기술

Transcript

00:00:00Claude Code 做出来的轮播图很烂,这怪你。
00:00:03现在,社交媒体上充斥着
00:00:05大量低质量的 Claude Code 生成的轮播图,
00:00:08根本没人看。
00:00:10因为它们看起来都一模一样,
00:00:12而且全都是用纯 HTML 做的。
00:00:15如果你是那种想要在社交媒体营销中
00:00:17利用人工智能的人,这可是个大问题,
00:00:20因为轮播图是当今社交媒体上
00:00:23转化率最高的内容形式之一。
00:00:25所以在这期视频里,我会帮你
00:00:27打破这种趋势,
00:00:29采用一种混合方法:结合 Claude Code
00:00:32的 HTML 资产,以及外部图像模型,
00:00:36比如 GPT Images 2 和 Nano Banana Pro,
00:00:39制作出真正有效的轮播图。
00:00:42当我们谈论高转化率的轮播图时,
00:00:45我说的是像这样的。
00:00:46这是我五周前发布的一条帖子,
00:00:49有几十万的浏览量。
00:00:50这条帖子获得了大约 1.8 万个赞,
00:00:52它就是我将要教你们的这种混合方法的
00:00:55我将教你们这些方法。
00:00:56首先,当我们要谈论轮播图时,
00:00:59我们需要考虑封面图。
00:01:01这是人们第一眼会看到的东西,
00:01:03它必须具备最强烈的视觉冲击力。
00:01:05你在这里看到的,是用 GPT Images 2 制作的,
00:01:08而且正是靠这张封面图,
00:01:10我们要借助外部工具,
00:01:12无论是 GPT Images 2
00:01:14还是类似 Nano Banana Pro 的工具。
00:01:16当我们滚动浏览轮播图的其余部分时,
00:01:19比如正文页面或价值页面,
00:01:22这时候使用 Claude Code
00:01:25由 Cloud Code 本身创建的 HTML 素材就完全没问题。
00:01:28你已经用封面图吸引了他们。
00:01:30他们已经进来了。
00:01:31现在我们需要给他们提供真正的价值,
00:01:34而大家也不再那么强调
00:01:35内容是否必须视觉惊艳。
00:01:38我们只需要提供价值,
00:01:40并且需要能够以一种
00:01:41可重复的方式做到,
00:01:42我们可以一遍又一遍地
00:01:44以系统化的方式,
00:01:45在相对较短的时间内完成。
00:01:47而且还得省钱,
00:01:49因为请记住,
00:01:50用 GPT Images 2
00:01:52或 Nano Banana Pro
00:01:54生成这些图像不是免费的。
00:01:55我不可能给每一张图都这么做。
00:01:59嗯,我的意思是,我可以,
00:02:00但这太耗时了,对吧?
00:02:01我们需要在速度和质量之间取得平衡,
00:02:04而在我一次又一次地尝试后,
00:02:06我发现这是
00:02:07处理 AI 和社交媒体轮播图
00:02:09最好的方法。
00:02:12我们讨论过社交媒体上
00:02:13充斥着这些低质量轮播图。
00:02:15你知道我在说什么,
00:02:16特别是如果你是在 AI 这个领域。
00:02:18你现在看到的这六个里面有四个
00:02:19很明显是用 Claude Code 创建的。
00:02:21我甚至都不用指出来,对吧?
00:02:23它们有那种 HTML 幻灯片的感觉,
00:02:26而且看起来非常、非常雷同,
00:02:27而且你只会看到越来越多这样的东西。
00:02:29所以如果你想让你的轮播图转化,
00:02:31你必须想出一些与众不同的东西。
00:02:34所以,正如我刚才向你暗示的那样,
00:02:36这是一个两步的过程。
00:02:37第一步是封面图。
00:02:39那就是我们使用 AI 图像生成的地方。
00:02:41今天,我将向你展示
00:02:43如何使用 Higgsfield CLI 来做到这一点。
00:02:46我喜欢 Higgsfield CLI,
00:02:47因为它让我能够通过终端
00:02:49访问任何 AI 图像生成工具,
00:02:52无论是 Nano Banana,
00:02:55GPT Images 2,
00:02:55还是下周推出的任何顶级工具,
00:02:57都可以通过终端完成。
00:02:59第二部分是通过 Claude Code
00:03:00使用 HTML 资产制作正文幻灯片。
00:03:04但在开始构建之前,
00:03:06我们需要寻找灵感。
00:03:07我们需要进行一些调研,
00:03:08看看哪些轮播图格式是有效的,
00:03:11特别是在你的领域之外,
00:03:13这样我们才有参考基础。
00:03:15如果你只是试图从空白开始,
00:03:17我敢保证,你会很吃力,
00:03:18而且会浪费大量时间。
00:03:20为什么要从零开始?
00:03:21看看什么有效,
00:03:23不要照搬,但要吸取灵感。
00:03:25去哪里找灵感呢?
00:03:27其实就在社交媒体上。
00:03:29最简单的方法就是
00:03:30就是去 Instagram,
00:03:31去 TikTok,
00:03:32搜索“轮播图”,
00:03:33这就是我上面输入的,
00:03:34然后开始滚动浏览,
00:03:35看看什么内容能吸引你。
00:03:39你在视觉上被什么吸引?
00:03:41你觉得什么看起来很酷?
00:03:43这就是我们要做的。
00:03:44如果我看到喜欢的,
00:03:45我会做两件事。
00:03:48第一,我会点开它,
00:03:50截一张封面图的图,
00:03:54然后对正文页也做同样的事情。
00:03:57我会看一下正文页,
00:03:59看看是不是我喜欢的,
00:04:00然后也截个图。
00:04:02如果这是你第一次这样做,
00:04:04坦白说,你应该花
00:04:05至少 20 到 30 分钟做这个。
00:04:07你需要开始建立一个
00:04:10视觉灵感库。
00:04:13我本人有一个完整的文件夹
00:04:15专门存放轮播图灵感,
00:04:16而且不全是 AI 内容。
00:04:18坦白说,你应该关注
00:04:19你所在领域之外的东西,
00:04:21然后将其引入到你的领域中。
00:04:22因为如果我只是做
00:04:24AI 领域中其他人做的事,
00:04:26或者你做着
00:04:26你所在领域中其他人做的事,
00:04:28那是不可能脱颖而出的。
00:04:30所以看看别人在做什么是很好的,
00:04:31甚至是那些
00:04:32完全不同领域的人。
00:04:34所以,第零步,灵感。
00:04:36我希望你开始建立那个库。
00:04:38而对于今天的视频,
00:04:39我希望你专注于某一个特定的例子,
00:04:41你想用它作为模板,
00:04:43构建我们今天的轮播图。
00:04:44下一步,第一步,
00:04:46是安装 Higgsfield CLI。
00:04:47再说一次,这能让你访问
00:04:48市面上所有的
00:04:49不同图像生成器和视频生成器。
00:04:51所以,你只需要前往 Higgsfield.ai,
00:04:53去 MCP 和 CLI 标签页,
00:04:56点击这里的 CLI。
00:04:58也有 MCP,但我更喜欢 CLI。
00:04:59然后你只需要使用
00:05:00这条命令来安装它。
00:05:02接下来你要运行
00:05:03Higgsfield auth login
00:05:04来实际登录你的账户。
00:05:05然后你也可以添加这些技能。
00:05:07现在让我们谈谈如何制作这些轮播图。
00:05:09首先,第一件事,
00:05:12你需要为你的轮播图创建一个文件夹。
00:05:15我叫它“Chase AI 轮播图”。
00:05:15你自己叫什么无所谓。
00:05:18这样做是为了长远考虑,
00:05:19你想开始建立自己的
00:05:21表现良好的轮播图库。
00:05:24我们刚做完了整个过程,对吧?
00:05:25我们在寻找各种灵感。
00:05:28那么,想象一下,当你创建了
00:05:2930、40、50、60 个轮播图,
00:05:30并且知道你有 10 或 15 个
00:05:32总是有效的模板。
00:05:34那么在未来,创建轮播图
00:05:36就会变得无比简单,
00:05:39因为那时你只需要告诉 Claude Code:
00:05:41“嘿,去做第 10 版轮播图。”
00:05:43“我们现在要用这个主题来做。”
00:05:44因为到那时你只需要告诉 Claude Code,
00:05:46所以你今天就要开始建立
00:05:49那个基础。
00:05:51但今天,因为我们什么都没有,
00:05:51我们需要从一些灵感开始。
00:05:53所以我们要做的
00:05:54就是截一张
00:05:56我们喜欢的标题页的截图,
00:05:57尝试自己做出来。
00:05:59我找到了这个标题页作为灵感。
00:06:00这就是我将要使用的。
00:06:03即我们想要参考模仿的。
00:06:04我找到了这个标题幻灯片作为灵感。
00:06:06排名前五的 Claude Code 插件。
00:06:08有了那张图片的截图,
00:06:10放进 Claude Code 里,
00:06:12六月份的五大 Cloud Code 插件。
00:06:15所以,利用那张图片的截图
00:06:16放入 Cloud Code 中,
00:06:18“使用这个特定的图像模型。”
00:06:19“我们将使用 GPT Images 2。”
00:06:21“然后我会告诉你,我希望它如何”
00:06:22我想用作灵感的那张图。
00:06:24使用 Higgs field 命令行。
00:06:26使用这个特定的图像模型。
00:06:28我们也要用 GPT 图像。
00:06:29然后我会讲一下
00:06:30我希望它如何
00:06:32与原始图像有所不同。
00:06:34所以,我希望你使用这个 Higgs field 命令行
00:06:36来制作一张封面图,
00:06:38用于我的新轮播图,
00:06:40主题是关于
00:06:41六月份 Cloud Code 的五大插件。
00:06:45这就是我想要页面上的标题。
00:06:46六月份 Cloud Code 的五大插件。
00:06:48我想使用我刚刚给你的
00:06:51截图作为参考图像。
00:06:53所以我希望它
00:06:54基本上与那张图完全一样,
00:06:57但是把目前中间那个
00:07:02算是雕像的女人,
00:07:03换成一个男性。
00:07:05这样我们就稍微做些改变,
00:07:06但在美学方面保持其他一切不变。
00:07:08我还想改动的是,
00:07:09我不希望那些东西
00:07:10是 Photoshop 图标。
00:07:12就让它们变成 GitHub 图标
00:07:14或者 Anthropic 图标吧。
00:07:17我希望你使用 GPT 图像。
00:07:20我希望你使用的宽高比
00:07:22尽可能接近四比五。
00:07:24我希望它质量很高。
00:07:27我希望它是 2K 的。
00:07:28而且我想要你生成四张图。
00:07:29一旦完成,
00:07:32就把它们调出来给我看。
00:07:33所以现在它要开始为我构建了。
00:07:35我已经告诉了它参考图像。
00:07:36也告诉了它我希望怎么修改。
00:07:37因为记住,如果我们看一眼,
00:07:39我基本上是在说把雕像改成男性,
00:07:41把 Photoshop 图标换成 GitHub 图标,
00:07:42然后改变实际的文字。
00:07:45除此以外,我告诉了它使用哪个图像模型,
00:07:46GPT 图像,
00:07:48换成 GitHub 图标,
00:07:49然后再修改实际的文本。
00:07:51除此之外,我还告诉它使用哪个图像模型,
00:07:52GPT 图像模型也行,
00:07:54并给出了一些关于质量的说明。
00:07:56现在,如果你不知道
00:07:59针对特定的图像模型需要提供什么输入,
00:08:00比如你用的是 Nano Banana Pro
00:08:01而不是 GPT 图像模型,
00:08:02Claude Code 是知道的。
00:08:04它具备这些技能。
00:08:05Claude Code 知道。
00:08:07特别是在刚开始的时候,
00:08:07当你刚上手时,
00:08:08你可能得做几次。它会把图像反馈给我们。
00:08:11我们可能得编辑一下。
00:08:14所以这是一个迭代的创意过程。
00:08:16很少能一次成功。
00:08:19这就是为什么我们只在标题页做这个。
00:08:20想象一下对每一张幻灯片
00:08:21都经历这个过程,
00:08:23轮播图中的每一张图,
00:08:24可能有多达 10 张图。
00:08:25这太花时间了。
00:08:28这就是为什么我们只在标题上做这个,
00:08:30其余部分我们用 HTML 做会快得多。
00:08:33这是它生成的图像。
00:08:34首先,它缺少实际的文字。
00:08:36但我得说,总体来说还不错,
00:08:38就我们要的那种氛围而言。
00:08:39我喜欢雕像出来的效果。
00:08:41我喜欢图标出来的效果。
00:08:42我们可以对 Anthropic 的图标稍微挑剔一下。
00:08:46也许奶油看起来有点不同。
00:08:48但它有点我们想要的样子了。
00:08:52如果我们能想象文字被放上去,
00:08:56我会对这个很满意的。
00:08:58我们甚至有一些阴影之类的东西。
00:09:00如果我们把它和原图比较一下,
00:09:01关于 Anthropic 的那个图标,我们可以稍微挑剔一下。
00:09:05也许奶油色的部分看起来有点不同。
00:09:07就像你能看出灵感来自哪里一样。
00:09:09原图里还有点别的东西,对吧?
00:09:11它们在左上角还有另一个图标,
00:09:13但我喜欢它。
00:09:14我想如果我们现在加上文字,
00:09:16我会完全满意的。
00:09:18老实说,不太确定
00:09:20为什么文字消失了,
00:09:23但以后处理起来很容易,对吧?
00:09:24而且你实际上有两个选择。
00:09:26第一个是我们采用这个封面图,
00:09:27因为我喜欢它生成的这四个中的一个。
00:09:28我们把它喂回 Cloud Code,
00:09:30然后说,嘿,保持一切不变。
00:09:31我只需要你把文字加到顶部。
00:09:32另一个选择是你可以把它带到
00:09:34像 Canva 这样的软件里,
00:09:36如果你想更亲手操作的话。
00:09:38第一种选择是采用这一款封面
00:09:40因为在生成的四款中我最喜欢这一款。
00:09:43我们要给它这张图然后说,
00:09:45嘿,加上六月份 Cloud Code 五大技能
00:09:47或五大插件的标题,
00:09:51并且高亮显示其中的一部分,
00:09:52这样它就有一种,你知道的,
00:09:53像我们在眼睛上看到的那种彩虹效果。
00:09:55所以我喜欢我们做出的这张图,
00:09:57但我想要加上文字,
00:09:57并且我想要模仿
00:09:59我们用作参考的原始图像中的文字。
00:10:02或者六月份 Cloud Code 的五大插件
00:10:05并且突出显示其中的某一部分
00:10:07六月份 Cloud Code 的五大插件。
00:10:08其中一部分
00:10:11应该有一种那种彩虹渐变,
00:10:13就像我们的雕像眼睛上
00:10:15的那种效果一样。
00:10:16所以去把它做了,
00:10:20也创建四个版本。
00:10:21这就是在经历这个过程时
00:10:23六月份最值得关注的五款 Cloud Code 插件。
00:10:27不需要过度复杂化。
00:10:29其中一部分应该带有那种彩虹渐变效果,
00:10:33就像我们雕像眼睛上的那种效果一样。
00:10:35它一次可以做四个。
00:10:38实际上,我相信它一次可以做 16 个,
00:10:40但我发现四个是一个不错的折中点。
00:10:41我们看看它会返回什么。
00:10:44当我们告诉它添加文字时,我们得到了这个。
00:10:45就像我说的,我们得到了四个选项。
00:10:46我想我最喜欢这一个。
00:10:47如果我有更多时间,我可能会再稍微编辑一下,
00:10:48也许给文字本身添加某种投影,
00:10:50让它更突出一点。
00:10:52但你可能会没完没了地试图得到你喜欢的东西。
00:10:55但我认为这就足够了。
00:10:56如果我在 Instagram、TikTok 或其他地方刷到这个,
00:10:58看到它作为封面图,我会停下来。
00:11:02所以一旦封面图锁定,我们就可以进入正文幻灯片了。
00:11:05如果我有更多时间,我可能会再多做一点修改,
00:11:09或许给文字本身加个投影之类的,
00:11:12我们需要记住一些事情:
00:11:14我们没有太多的操作空间。
00:11:18就像这一张幻灯片,对吧?
00:11:20如果我在刷 Instagram 或 TikTok 之类的应用时看到这个,
00:11:23看到它作为封面图,我会停下来看。
00:11:25所以封面图确定好之后,我们就可以开始做内页幻灯片了。
00:11:29记住,当我们谈论内页幻灯片时,
00:11:31这仅仅是指标题页之后的所有内容。
00:11:35我们需要记住的一点是,
00:11:37我们在这里没有太多的操作空间。
00:11:40比如这一张幻灯片,对吧?
00:11:42我们放了一张图片,有个标题,
00:11:45然后只有一两行文字可以用来发挥。
00:11:48你得把它当成常规的 PowerPoint 幻灯片来处理。
00:11:51现在,这里的好处是这几乎完全是用 HTML 完成的。
00:11:53所以 Cloud Code 自己生成所有这些。
00:11:54只有一个例外,那就是这些截图。
00:11:55所以我给了 Cloud Code 这些截图。
00:11:58所以我给了它截图,并告诉它放进去。
00:12:00所以,你知道,这里非常强调精简操作。
00:12:03但你需要考虑的是,好吧,这些图片会是什么样的?
00:12:07所以这个显示终端的东西,Cloud Code 创建了这一切。
00:12:08我什么都没做。
00:12:10所以在这一部分,我们需要做的是算出这些幻灯片长什么样。
00:12:14然后,就像我们在封面幻灯片上所做的那样,进行迭代过程。
00:12:17但我们可以更亲力亲为。
00:12:20因为我要向你展示我们将让 Cloud Code 为我们创建这些 HTML 幻灯片。
00:12:24但我们会把它带到浏览器中。
00:12:25我们实际上可以做调整。
00:12:28我们可以进去,改文字,移动东西,让它进行编辑。
00:12:30所以我们比标题幻灯片有更多的控制权。
00:12:31比如这个显示终端界面的部分,都是 Cloud Code 自动生成的。
00:12:35我什么都没做。
00:12:36所以接下来,我们需要确定一下这些幻灯片想要呈现的效果。
00:12:42然后就像处理封面幻灯片那样,进行迭代式的打磨。
00:12:46而且我们能参与得更多、更深入。
00:12:48因为我接下来要演示的是,让 Cloud Code 为我们创建这些 HTML 幻灯片。
00:12:52现在让我们看看正文幻灯片。
00:12:54标题幻灯片我们做完了。
00:12:55比如我们可以直接进去,修改文字,移动元素,让它进行编辑。
00:13:00所以我们能比制作标题幻灯片时获得更多的控制权。
00:13:03但就像标题幻灯片一样,这里我们也可以借鉴灵感。
00:13:07比如说,我想复制我在这里已经完成的内容,或者我已有的某个幻灯片。
00:13:11我现在给 Cloud Code 的所有这些提示也都可以是技能,因为我们可以把所有这些都代码化。
00:13:12现在我拥有了所有这些东西的个人技能,以及我自己的轮播图示例。
00:13:13你可以在我的社区里得到所有这些。
00:13:15我会把链接放在评论区置顶。
00:13:16但如果你是自己做,听起来大概应该是这样的。
00:13:20现在让我们开始做正文幻灯片。
00:13:21标题幻灯片已经锁定了。
00:13:23我喜欢我们在那做的。
00:13:24现在正文幻灯片,它将是 HTML。
00:13:26我们开始吧。
00:13:27现在我只是在直接使用这些提示词。
00:13:30我刚才给 Claude Code 的所有提示词也都可以变成技能,因为我们完全可以将这一切代码化。
00:13:36现在我拥有了处理这些事情的个人技能,以及我自己的轮播图范例。
00:13:42你可以在我的社区里获取所有这些内容。
00:13:44我会把链接放在置顶评论里。
00:13:47但如果你是自己做,听起来大概是这样的。
00:13:50现在让我们进入制作正文页面的环节。
00:13:53标题页面已经锁定好了。
00:13:54我很喜欢我们刚才做的效果。
00:13:55现在正文页面将使用 HTML。
00:13:57你看到的这张图就是我想用作灵感来源的素材。
00:14:00我希望把这个作为我们制作正文页面的模板。
00:14:04我喜欢这种文本样式。
00:14:05我喜欢这个背景。
00:14:06这一切我都很喜欢。
00:14:07所以我想创建正文页面。
00:14:10我希望它是 HTML 格式。
00:14:11我希望你能把这些 HTML 在浏览器中调出来。
00:14:14并且我希望能进行微调。
00:14:15我想能够移动元素、调整字体大小、更改里面的实际文本,
00:14:19并且能够通过浏览器来完成。
00:14:21我得把 JSON 复制过去。
00:14:23如果做这些编辑是必须的,那就这样吧。
00:14:24但我希望这尽可能简单。
00:14:27对于这五个正文页面,我希望它们与六月的五个插件相关。
00:14:33比如,我们可以做五个插件。
00:14:35其中一个我们做。
00:14:36比如 Caveman 插件。
00:14:38下一个,我们做 Codex 插件。
00:14:41第三个,我们做 Impeccable 插件。
00:14:43至于第四和第五个插件,你自己想出来。
00:14:47做完之后再把它们调出来。
00:14:49它继续构建了页面,告诉我们它创建的五个插件,
00:14:53并且还创建了这个微调循环功能。
00:14:55所以我们现在在浏览器里把它调出来。
00:14:58你看得见。
00:14:59那么记住,我们给了它什么?
00:15:01我们给了它一张我创建的轮播图的截图。
00:15:05效果还挺像的,你可以看到它试图模仿这后面的 Anthropic 标志。
00:15:10我完全可以轻易地给 Claude Code 提供一张真正的 Anthropic 标志图片,
00:15:14让它基于那个来做。
00:15:16但我们现在有这样一个标签,插件一,Caveman 模式。
00:15:21而且我根本没告诉它 Caveman 是什么。
00:15:25记住,它是自己去查了资料,看了 GitHub,
00:15:28为我们写好了所有文案。
00:15:30我没给它任何文案。
00:15:31而且它基本上把所有东西都做完了。
00:15:34你可以看到这里底部,它创建的这个小终端窗口,
00:15:38相对简单,因为它是基于自己的 HTML 资源来做的。
00:15:41但我并没有给它任何截图。
00:15:43但它真正的强大之处在于这些微调功能。
00:15:45这个想法来源于 Claude Design,它也有类似的微调模式。
00:15:50所以我想到,嘿,为什么我们不开始实现类似的东西呢,
00:15:53在我们制作轮播图时这其实相当容易实现。
00:15:56所以我可以调整标题大小、正文大小,还有背景透明度。
00:16:03然后我真的可以非常轻松地在动态中做出改变,对吧?
00:16:10这就是通过 HTML 而非完全依赖 AI 图像生成器来做所有事的威力。
00:16:15上面的任何东西,我都可以调整,对吧?
00:16:17对于卡片,我们可以调整倾斜度。
00:16:20现在,如果我改变了什么,当它为你创建这个微调功能时,再一次提到,我在 School 社区里有确切的技能教程。
00:16:29但如果你自己做,它可能会提示你,嘿,当你做了这些修改后,你需要导出你的微调数据。
00:16:34所以底部有一个导出微调数据的选项,格式就是 JSON。
00:16:38所以任何时候我们做了更改,而且我可以在多页上同时操作,我只需要导出微调数据,回到这里,
00:16:44然后把它们直接粘贴到 Claude Code 中。
00:16:47然后它就会自动更新。
00:16:49所以修改内容真的非常容易。
00:16:51那么从这里开始,我们要做什么?
00:16:54我们要逐个检查页面。
00:16:55看看它是否符合我们的构想。
00:16:57比如,是不是文字太多了,还是太少?
00:17:00它说的是正确的内容吗?
00:17:01还有我觉得你可以真正增加价值的地方,就是给内容添加截图。
00:17:07比如,我们这里有什么素材?
00:17:10Caveman 模式。
00:17:11我可以去 Caveman 的 GitHub。
00:17:13操作可以很简单,比如截取这张图,回到 Claude Code,
00:17:19把图片粘贴进去,说:嘿,能不能把这张图加到 Caveman 页面上?
00:17:26这是那张 Caveman 图片,替换掉你刚才生成的那个。
00:17:30然后我们只需一遍又一遍地重复这个过程。
00:17:33你可以看到它把 Caveman 图片加到这里了。
00:17:36而且有点太大。
00:17:37所以我可以只管把它移动到我喜欢的位置。
00:17:43此外,你还可以让 Claude Code 到网上寻找所有这些内容对应的合适图片。
00:17:49这不仅仅是 HTML 或截图,你在这里可以发挥相当多的创意。
00:17:53此时,我们就只需一遍又一遍地重复这个过程,直到我们得到满意的结果。
00:17:58同样,在创意方面,很多灵感将来自你找到的参考素材。
00:18:02我的是这一张。
00:18:03但就像我之前谈到的,我们去 Instagram 上寻找轮播图素材,我们封面图也是这么做的。
00:18:09你也可以看看他们的所有正文页面。
00:18:11操作方法基本上就是这样了。
00:18:14现在,为了让效果更好,创意取决于你在谈论什么。
00:18:18但那确实就是 Claude Code 的部分。
00:18:20那就是构建部分。
00:18:21而且非常简单。
00:18:23再一次,像我早些时候谈到的,你只需要为所有的轮播图都这样做。
00:18:27它们都会有不同的模板。
00:18:28所以当到了制作第 20 张轮播图的时候,当你已经一遍又一遍地做过这些之后,
00:18:35你甚至不需要经历我们现在经历的这些麻烦,比如,
00:18:38好啦,找灵感,做微调。
00:18:39就像,它已经搭建好了。
00:18:41你只需要改改文案。
00:18:43所以,通过这个寻找灵感、用外部 AI 图像模型创建封面图、
00:18:49以及第三步,用 HTML 创建正文页面的三步法,我们获得了一个可持续且可重复的过程,
00:18:57这给了我们两全其美的效果。
00:18:58我们既能得到 AI 图像模型带来的炫酷创意和炫酷图像,
00:19:03同时 HTML 又作为骨干,而且执行起来足够简单,我们可以一遍又一遍地大规模执行,
00:19:08而不必每天坐在电脑前好几个小时。
00:19:11考虑到所有这些,这就是我今天想分享的内容。
00:19:14我希望这能让你更清楚如何制作出比你在外面看到的内容稍好一点的轮播图。
00:19:20不要陷入所谓的“你只需要 Claude Code 里的这一个技能”的陷阱。
00:19:25我们可以做得更多。
00:19:26而且再一次,这并没有多出多少工作量。
00:19:29你只需要建立一个基础。
00:19:31所以像往常一样,让我知道你的想法。
00:19:34如果你想获取我的 Claude Code 大师课,请务必看看 Chase AI Plus,
00:19:38以及我的所有技能教程和轮播图范例。
00:19:41就在置顶评论里。
00:19:43除此之外,我们回头见。

Key Takeaway

通过将外部 AI 图像生成的封面与 Claude Code 生成的 HTML 内页相结合,并配合个人化的模板库与微调流程,可以高效产出具有高转化率的定制化轮播图。

Highlights

  • 社交媒体轮播图是当前转化率最高的内容格式之一,但纯 HTML 生成的图表极易同质化,导致观众审美疲劳。

  • 采用“外部图像模型生成封面 + Claude Code 生成内页 HTML”的混合工作流,可平衡高质量视觉冲击与大规模生产效率。

  • 利用 Higgsfield CLI 终端工具可快速调用 GPT Images 2 或 Nano Banana Pro 等顶级 AI 模型,实现高效的封面图创作。

  • 建立视觉灵感库能显著缩短创作时间,定期收集不同领域(不仅限于 AI 领域)的高性能轮播图作为参考模板是必要的前提步骤。

  • HTML 内页方案支持浏览器端动态微调(如修改文字、背景透明度、排版布局),无需反复调用 AI 生成器,极大提升了内容迭代速度。

  • 通过导出和导入 JSON 格式的微调数据,可实现 Claude Code 配置的可编程化与标准化,使未来制作轮播图仅需修改文案即可完成。

Timeline

轮播图的现状与痛点

  • 大量纯 HTML 制作的 Claude Code 轮播图因同质化严重而缺乏点击吸引力。
  • 高质量封面是提升轮播图转化的关键,而内页则应专注于提供核心价值。

社交媒体轮播图虽然具有极高的转化率,但目前 AI 生成内容普遍存在格式雷同的问题。创作者需要打破这种趋势,将封面图的视觉吸引力与正文页的内容价值分离开来,以平衡生产效率和视觉效果。

封面图生成工作流

  • 通过 Higgsfield CLI 在终端调用 GPT Images 2 或 Nano Banana Pro 构建视觉冲击力强的封面。
  • 封面创作是一个迭代过程,通常需要输入参考截图并针对性修改主体元素、图标或标题文字以确保与众不同。

封面图应使用专业的 AI 图像模型生成。 Higgsfield CLI 提供了通过终端便捷访问各类图像生成工具的能力。创作者应提供参考图并描述具体的修改需求,通过 4 张一组的迭代生成,挑选最匹配目标氛围的作品。

HTML 正文页的构建与微调

  • 正文页采用 Claude Code 生成的 HTML 格式,便于直接在浏览器中进行元素移动、文本修改与字体调整。
  • 可以通过截取实际应用界面图并告知 Claude Code 将其整合进 HTML 模板,大幅增加内容的可信度与专业度。

正文页通过 HTML 骨干结构实现,允许用户进行精细化微调,这是完全依赖图像生成所不具备的优势。创作者可以直接在浏览器中调整排版,并将软件截图等素材整合进页面中,从而实现低成本、高质量的内容扩充。

流程标准化与大规模生产

  • 通过导出微调数据(JSON 格式),可将成功的排版逻辑代码化并复用于后续创作。
  • 建立个人灵感库与模板范例是实现轮播图规模化生产的基础,未来仅需少量文案改动即可快速产出。

为了实现可持续生产,创作者应将每一步的提示词与排版逻辑转化为个人技能。当积累了足够多的模板库后,制作新的轮播图不再是从零开始的创作,而是针对特定文案的填充式更新,极大降低了每日的制作工作量。

Community Posts

No posts yet. Be the first to write about this video!

Write about this video