Wie ich unsere Landingpage in 4 Stunden mit Claude neu aufgebaut habe

@DhravyaShah
ENGLISCHvor 3 Monaten · 15. Apr. 2026
1.3M
1.5K
59
111
4.2K

TL;DR

Dhravya Shah teilt seinen Workflow, mit dem er die Landingpage von Supermemory in vier Stunden neu aufgebaut hat – unter Nutzung von Claude Code, individuellen SVG-Animationskenntnissen und KI-nativer Kontextintegration, um die Verzögerungen durch klassische Design-Agenturen zu umgehen.

Iterationsgeschwindigkeit ist das Wichtigste für Startups. Die erste Version unserer Landing Page wurde von einer der besten Designagenturen erstellt. Dann haben wir sie nach ein paar Monaten wieder neu aufgebaut – diesmal mit einer anderen Agentur.

Diese großen Veränderungen zogen sich durch verschiedene Phasen der Reise von supermemory. Während sich unser Produktangebot, unser Branding und andere Dinge ständig weiterentwickelten, haben wir auch immer wieder daran gearbeitet, wie wir all das in unserem Marketing kommunizieren.

Die Agenturen haben wirklich großartige Arbeit geleistet! Sie haben einen großen Teil des Brandings und der Wahrnehmung hinter der heutigen supermemory-Marke geprägt. Ich bin ihnen für die gesamte bisherige Hilfe sehr dankbar.

Allerdings hatte ich ein einziges Problem.

Die Iterationsgeschwindigkeit.

Die Zeiten haben sich geändert. Ganz ehrlich – wenn du nicht mehr AI-native bist, wirst du es nicht schaffen.

Dhravya Shah - inline image

Die Feedback-Schleife

Einmal fragte ich die Agentur: Wie sieht der Zeitplan für dieses Projekt aus?

Ich hatte mit Tagen oder einer Woche gerechnet. Aber sie kamen mit einem großen Plan mit vielen Arbeitsebenen zurück – 2 Wochen, um herauszufinden, wie es aussehen wird, 1 weitere Woche für die Umsetzung, usw. usw.

Das ganze Projekt hätte Monate gedauert, und die Landing Page wäre dann auf Framer gewesen. Der Rest? App- und Konsolendesigns – wir hätten ihre Designs tatsächlich implementieren müssen, nachdem sie fertig waren.

Der No-Code-Fluch

Bevor Claude Code so gut wurde, war unsere Landing Page komplett auf Framer – vollständig gepflegt von denen, die auch das Design gemacht hatten. Es war geschmackvoll, und offensichtlich steckte viel Arbeit und Mühe darin. Aber für jede Änderung brauchte man Leute, die sich mit Framer auskannten.

Das wurde zu einem echten Fluch. Das Hinzufügen von Marketingseiten, Blogs usw. war eine Qual. Die Website lud zu viel JavaScript, war nicht gut für SEO, oder die Animationen drosselten die Browser komplett – und wir mussten ihnen dann nur sagen, sie sollen es verbessern.

Und wir wussten nicht genau, wie wir es verbessern konnten – es war für uns (da damals alle bei supermemory Entwickler waren) schwierig, A/B-Tests durchzuführen oder herauszufinden, wie wir unsere Botschaft am besten vermitteln oder den Text verbessern können. Zusätzlich zu den Zahlungen an die Designer zahlten wir Framer Tausende von Dollar pro Jahr. Für jede Änderung konnte ich nicht einfach meinen Agenten anweisen, sie zu machen. Ich musste ihnen detailliert erklären, wie es geht, und dann iterativ mit ihnen zusammenarbeiten, bis es für uns Sinn ergab.

Ich beschloss, das Ganze loszuwerden. Scheiß drauf. Ich mache die Landing Page selbst.

Großartiges Design mit Claude Code

Ich bin kein Designer. Aber du solltest dir https://supermemory.ai ansehen – es wurde in nur 4 Stunden mit Claude Code erstellt.

Ja, genau. Ich habe zuerst Claude gefragt, was wir unseren Nutzern genau vermitteln sollen, und den Text ausgearbeitet.

Das Ganze war eine einzige Claude Opus 4.6 1M-Sitzung.

Bereite die Fähigkeiten vor.

Basierend auf meinem Plan wusste ich, dass ich möchte, dass Claude wirklich gute SVG-Animationen macht. Ich durchforstete das Internet nach den besten SVG-Animationkursen, transkribierte sie und erstellte aus den besten Erkenntnissen eine Fähigkeit. Die Fähigkeit war nicht groß, aber sie reichte aus, um sicherzustellen, dass die Basis stark ist.

Ein Unteragent hat das vorbereitet. https://github.com/supermemoryai/skills/blob/main/svg-animations/SKILL.md

Ähnlich bereitete ich die grundlegenden Fähigkeiten für all die Dinge vor, von denen ich wusste, dass ein Designer sie können sollte.

Dhravya Shah - inline image

Dieser Abschnitt zum Beispiel ist komplett mit SVG-Animationen erstellt.

Baue die Werkzeuge.

Für viele der visuellen Elemente wusste ich, dass ich einige Bibliotheken benötigen würde – nämlich für animierte ASCII-Kunst und die Pixelisierungseffekte.

Also schickte ich zwei Unteragenten los, um herauszufinden, wie wir diese Animationen am besten performant im Web umsetzen können, und baute daraus ein Paket, um die Hauptdesignarbeit nicht damit zu vermischen.

Claude erstellte automatisch ein Paket, legte es auf meinem Github ab – https://github.com/dhravya/landing-effects – und nahm sogar GIFs auf und fügte sie hinzu, um zu zeigen, wie die Animationen aussehen würden.

Dhravya Shah - inline image
Dhravya Shah - inline image

Den Kreislauf mit gutem Gedächtnis schließen

Während der gesamten Sitzung habe ich sichergestellt, dass Claude tatsächlich hinsieht und darüber nachdenkt, wie das aussieht. Es kennt auch alle geschäftlichen Anforderungen, was unserem Team wichtig ist und worum unsere Nutzer bitten, da ich das Supermemory Claude Code-Plugin verwendet habe.

Wir haben alle unsere Kundenaufzeichnungen und Teammeetings in unserem eigenen Team-Supermemory abgelegt, und die Codierungssitzungen erhalten ebenfalls Zugriff darauf. Da Claude bereits alles darüber wusste, was wir tun und wer wir sind, konnte es eine Designsprache und -strategie entwickeln, die unsere Konversionen um 40 % gesteigert hat. https://github.com/supermemoryai/claude-supermemory

Der Hauptpunkt ist nicht nur das gute Gedächtnis für Claude – das macht supermemory sehr gut. Der Hauptpunkt war die Tatsache, dass dieses Gedächtnis und dieser Kontext nicht nur aus Codierungssitzungen gesammelt werden, sondern aus unserem täglichen Leben, unseren claude.ai-Chats, den OpenClaw-Agenten des Teams und mehr.

Vollständigkeit

Ich bat es, die gesamte Seite auf Leistung und SEO zu analysieren – und das tat es auch.

Dhravya Shah - inline image

Es mag ein bisschen nach Vibe-Coding aussehen – und das ist für mich in Ordnung. Ich weiß, dass ich mich durch Iteration zur Größe vortasten kann, anstatt Monate zu warten, um etwas zu veröffentlichen.

AI-native – an einen Hintergrundagenten anbinden

Wir sind nur 4 Vollzeitmitarbeiter, die supermemory entwickeln. Das ist alles. Und das schließt mich ein – einen Solo-Gründer.

Einer von ihnen, der nicht technisch ist, kann die gesamte Arbeit an den Landing Pages autonom mit einem Hintergrundagenten erledigen.

Dhravya Shah - inline image

Was bedeutet, dass jetzt jeder im Team der Designer ist, mit nur genügend Iterationszyklen.

Wir leben in verrückten Zeiten. Der Großteil der Designarbeit kann (und sollte) vom Team erledigt werden, während wir die Dinge noch ausarbeiten.

Design ist definitiv wichtig für das Produkt – aber die meisten Leute zahlen wahrscheinlich zu viel dafür.

In YouMind remixen

Turn one viral article into a full content workflow

Collect the source, decode the pattern, create assets, draft the story, and distribute from one AI workspace.

Explore YouMind
Für Creator

Verwandle dein Markdown in einen sauberen 𝕏-Artikel

Wenn du eigene Langtexte veröffentlichst, wird die 𝕏-Formatierung von Bildern, Tabellen und Codeblöcken mühsam. YouMind macht aus einem ganzen Markdown-Entwurf einen sauberen, sofort postbaren 𝕏-Artikel.

Markdown zu 𝕏 testen

Mehr Muster zum Entschlüsseln

Aktuelle virale Artikel

Mehr virale Artikel entdecken