我如何利用 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

反饋迴圈

有一次,我問設計公司:「這個專案的時程是怎麼安排的?」

我預期是幾天——或是一週。但他們卻回了一份大型計劃,包含許多層級的工作——花 2 週時間規劃外觀、之後再用 1 週實作,等等等等。

整個專案要耗費我們好幾個月,然後落地頁會放在 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 去研究如何在網路上以高效能的方式最佳化這些動畫,並為此建立了一個套件,以免跟主要設計內容混淆。

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 Agent 等等。

完整性

我請它分析整個頁面的效能和 SEO——它照做了。

Dhravya Shah - inline image

它看起來可能有點 vibe coding 的味道——但這對我來說沒問題。我知道我可以透過迭代來達到卓越,而不是等著好幾個月才發布任何東西。

AI 原生——連結到背景 Agent

我們只有 4 個全職員工在建構 supermemory。就這樣。而且這包括我——一個 solo 創辦人。

其中一位非技術背景的同事,現在可以透過一個背景 Agent,自主完成落地頁的所有工作。

Dhravya Shah - inline image

這意味著團隊中的每個人現在都是設計師,只需要足夠的迭代循環。

我們活在一個瘋狂的時代。大多數的設計工作,在團隊摸索階段時,都可以(也應該)由團隊自己完成。

設計對產品來說絕對重要——但大多數人可能為此花了太多錢。

二次創作

使用 YouMind 創作爆款文章

收集素材、拆解爆點、生成視覺資產、撰寫內容,並在一個 AI 工作空間裡完成分發。

了解 YouMind
寫給創作者

把你的 Markdown 變成乾淨的 𝕏 文章

圖片上傳、表格、程式碼區塊,往 𝕏 上手動重排太痛苦。YouMind 把整篇 Markdown 一鍵轉成乾淨、可直接發佈的 𝕏 文章草稿。

試試 Markdown 轉 𝕏

更多可拆解樣本

近期爆款文章

探索更多爆款文章