如何利用 Claude 在 4 小时内重构我们的落地页

@DhravyaShah
英语3个月前 · 2026年4月15日
1.3M
1.5K
59
111
4.2K

TL;DR

Dhravya Shah 分享了他如何利用 Claude Code、自定义 SVG 动画技能以及 AI 原生上下文集成来重构 Supermemory 落地页的工作流,从而绕过传统设计代理机构的漫长等待。

迭代速度是创业公司最重要的事。我们的第一版着陆页是由顶级设计机构打造的。几个月后,我们又重新做了一版——换了一家不同的机构。

这些大的变动贯穿了 supermemory 发展的不同阶段。随着产品功能、品牌形象等不断进化,我们也在持续迭代如何在营销中呈现自己。

那些设计机构确实非常出色!他们为如今 supermemory 品牌的形象和认知贡献了很多。我非常感谢他们至今为止的所有帮助。

然而,我遇到了一个问题。

迭代速度。

时代变了。说真的——如果你不是 AI 原生了,你就没戏了。

Dhravya Shah - inline image

反馈循环

有一次,我问那家机构:这个项目的时间表是怎样的?

我期待的是几天——或者一周。但他们拿回了一份庞大的计划,分为多个工作层级——用两周来确定设计方案,再用一周来实施,等等等等。

整个项目要花几个月时间,然后着陆页会放在 Framer 上。其他的东西呢?应用程序、控制台设计——我们还得在他们完成设计后自己去实现。

无代码的诅咒

在 Claude Code 变得如此出色之前,我们的着陆页完全在 Framer 上——完全由实际做设计的人维护。他们很有品味,显然投入了大量的工作和精力。但任何改动都需要懂 Framer 的人来做。

这成了一个真正的诅咒。添加营销页面、博客等内容变得很痛苦。网站加载了太多 JavaScript,或者 SEO 效果不好,或者动画完全拖垮了浏览器——而我们只能告诉他们去改进。

我们也不太清楚到底该如何改进——对我们(因为当时 supermemory 的每个人都是开发者)来说,很难做 A/B 测试,或者弄清楚如何最好地传达信息,或者改进文案。除了支付设计师费用,我们每年还要向 Framer 支付数千美元。对于任何改动,我无法直接提示我的 Agent 去完成。我必须详细地告诉他们怎么做,然后和他们反复协作,直到结果符合我们的要求。

我决定摆脱这一切。去他的。我自己来做着陆页。

用 Claude Code 实现出色设计

我不是设计师。但你应该去看看 https://supermemory.aihttps://supermemory.ai/)——它只用了 4 小时就用 Claude Code 建好了。

是的,没错。我首先让 Claude 明确我们应该向用户传达什么信息,并确定文案。

整个过程就是一个 Claude Opus 4.6 1M 会话。

准备技能

根据我的计划,我知道我希望 Claude 能做出非常棒的 SVG 动画。我在网上搜索了最好的 SVG 动画课程,把它们整理成文字,并从最佳经验中提炼出一个技能。这个技能不大,但足以确保基础牢固。

一个子 Agent 准备了它:https://github.com/supermemoryai/skills/blob/main/svg-animations/SKILL.md

同样地,我也准备了我知道设计师应该了解的所有基本技能。

Dhravya Shah - inline image

例如,这部分完全是用 SVG 动画实现的。

构建工具

对于很多视觉效果,我知道需要用到一些库——比如动画 ASCII 艺术和像素化效果。

于是,我派了两个子 Agent 去研究如何在 Web 上以高性能的方式实现这些动画,并为此构建了一个包,以免与主要设计工作混淆。

Claude 自动创建了一个包,放到我的 GitHub 上——https://github.com/dhravya/landing-effects——甚至还录制并添加了 GIF 来展示动画效果。

Dhravya Shah - inline image
Dhravya Shah - inline image

用良好的记忆闭环

在整个会话过程中,我确保 Claude 真正在观察和思考页面的视觉效果。它还了解所有的业务需求、我们团队关心的事情,以及用户的要求,因为我使用了 Supermemory Claude 代码插件。

我们一直把所有客户录音和团队会议都存入我们自己的团队 supermemory,而编码会话也能获取到同样的信息。因为 Claude 已经了解了我们做的一切以及我们是谁,它就能提出一个设计语言和策略,将我们的转化率提升了 40%。https://github.com/supermemoryai/claude-supermemory

关键不仅仅是 Claude 拥有好记忆——supermemory 在这方面做得非常好。关键是这些记忆和上下文不仅来自编码会话,还来自我们的日常生活、claude.ai 对话、团队的 openclaw agents 等等。

完整性

我让它分析整个页面的性能和 SEO——它做到了。

Dhravya Shah - inline image

它看起来可能有点"氛围编码"的味道——但我无所谓。我知道我可以迭代到卓越,而不是等上几个月才能发布任何东西。

AI 原生——连接到一个后台 Agent

我们只有 4 个全职员工在构建 supermemory。就这些。而且这还包括我——一个独立创始人。

其中一位非技术人员,现在可以通过一个后台 Agent,自主完成着陆页的所有工作。

Dhravya Shah - inline image

这意味着团队中的每个人现在都成了设计师,只需要足够的迭代周期。

我们正处在一个疯狂的时代。在探索阶段,大部分设计工作可以(也应该)由团队自己完成。

设计对产品来说当然重要——但大多数人可能为此支付了过高的费用。

二次创作

使用 YouMind 创作爆款文章

收集素材、拆解爆点、生成视觉资产、撰写内容,并在一个 AI 工作空间里完成分发。

了解 YouMind
写给创作者

把你的 Markdown 变成干净的 𝕏 文章

图片上传、表格、代码块,往 𝕏 上手动重排太痛苦。YouMind 把整篇 Markdown 一键转成干净、可直接发布的 𝕏 文章草稿。

试试 Markdown 转 𝕏

更多可拆解样本

近期爆款文章

探索更多爆款文章