Interaktive Website Mit Claude Fable 5: Bild-Enthüllung

Interaktive Website Mit Claude Fable 5: Bild-Enthüllung

Der Effekt, der mich auf Pinterest stoppte, war dumm einfach. Ein dunkles Foto einer Felswand. Du scrollst, und Gras wächst über den Felsen — außer dass es nicht wächst, es wird enthüllt, als hätte das zweite Bild die ganze Zeit hinter dem ersten versteckt gelegen. Kein Video. Kein 3D. Zwei flache Bilder und ein visueller Trick.

Ich machte einen Screenshot, öffnete ein Terminal und beschloss, das Ganze als interaktive Website mit Claude Fable 5 nachzubauen — den Hero, die Enthüllung, den animierten Text, alles — ohne selbst CSS zu schreiben oder ein Design-Tool anzufassen. Vierzig Minuten später hatte ich eine Seite, die aussah, als hätte ein Studio sie geliefert. Dann postete ich eine Bildschirmaufnahme davon auf X, und die Antworten begannen alle dieselbe Frage zu stellen: „Warte, wie."

Dies ist das Wie. Nicht die polierte Version, in der alles beim ersten Mal funktioniert — die echte, einschließlich des Teils, wo ich die Enthüllung auf dem falschen Event ausgelöst und alles kaputt gemacht habe, und der Resize-Entscheidung, die das Ganze absichtlich wirken ließ statt zufällig. Am Ende wirst du denselben Effekt bauen können, Fable so steuern, dass es dein Design nicht in Verläufen ertränkt, und das Ergebnis in die Art von Post verwandeln, die Menschen tatsächlich teilen.

Lass mich mit dem einen Ding beginnen, das die meisten Leute falsch machen, bevor sie überhaupt ein AI-Tool öffnen.

Warum Ich Mit Claude Fable 5 im Terminal Baue, Nicht im Browser

Hier ist der Fehler, den ich ständig sehe: Leute versuchen, interaktive Websites in einem Browser-AI-Chat zu bauen, stoßen an eine Wand, sobald sie zwei Bilder mit pixelgenauer Positionierung übereinanderlegen wollen, und schlussfolgern „AI kann kein echtes Design." Das Tool war das Problem, nicht die AI.

Fable 5 ist dazu wirklich in der Lage. Es wurde am 9. Juni 2026 gelauncht als Anthropics leistungsfähigstes öffentlich verfügbares Modell — standardmäßig ein 1M-Token-Kontextfenster, bis zu 128k Output-Token pro Anfrage und 80,3% auf SWE-Bench Pro, wobei das nächstbeste Modell 11 Punkte hinterherhinkte (laut TrueFoundrys Benchmark-Analyse). Dieses Langzeit-Reasoning ist genau das, was eine interaktive Seite mit mehreren Ebenen braucht. Es muss das gesamte DOM, das CSS, die Scroll-Mathematik und die Design-Absicht gleichzeitig im Kopf behalten und über fünf Abschnitte konsistent halten.

Aber es braucht einen echten Arbeitsbereich dafür. Ich führe es über Claude Code im Terminal aus, auf einen echten Projektordner gerichtet, damit es Dateien lesen, Dateien schreiben, die vollständige Seite sehen kann, die es baut, und auf einem laufenden Dev-Server iterieren kann. Ein Browser-Chat gibt dir ein Snippet und vergisst, dass es existierte. Das Terminal gibt Fable ein Gedächtnis des Projekts — und bei einem 1M-Token-Kontextfenster ist dieses Gedächtnis die gesamte Codebasis, nicht eine verblassende Zusammenfassung.

Es gibt auch einen Kostengrund, so zu arbeiten. Fable berechnet $10 pro Million Input-Token und $50 pro Million Output — das Doppelte von Opus 4.8, dem teuersten Modell, das Anthropic je ausgeliefert hat. Es war kostenlos auf Pro und Max vom 9. Juni bis 22. Juni 2026, dann wechselte es zu Nutzungsguthaben zu API-Tarifen. Wenn jeder Output-Token Geld kostet, willst du nicht eine ganze Seite neu generieren, weil der Chat den Kontext verloren hat. Du willst chirurgische Bearbeitungen an Dateien, die bereits existieren. Ich bin tief in diese Kostenrechnung eingestiegen in meinem Claude Fable AIOS-Build, und die Lektion überträgt sich direkt auf Design-Arbeit: Strukturiere dein Projekt so, dass Fable bearbeitet, nicht neu emittiert.

Also: Lade Claude Code herunter, erstelle einen Ordner und lass Fable dort arbeiten, wo es tatsächlich denken kann. Jetzt der spaßige Teil — etwas finden, das es wert ist, gebaut zu werden.

Auf die Richtige Art Stehlen: Von Pinterest zu einem Dark-Mode-Quellbild

Ich starte nicht mit einem leeren Prompt. Ich starte mit einer Referenz, denn „bau mir einen coolen Hero" gibt dir den Durchschnitt von allem, was Fable je gesehen hat, und der Durchschnitt ist vergessenswert.

Pinterest ist meine Quelle. Ich suche nach dem Mechanismus, den ich will, nicht nach dem Thema — „Scroll-Reveal-Landingpage," „geteiltes Bild Hover," „minimaler dunkler Hero" — und ich speichere alles, wo die Interaktion das Reden übernimmt. Das Fels-und-Gras-Bild war ein einzelner statischer Pin. Die Interaktion war überhaupt nicht im Bild. Ich habe sie aus einem Gefühl heraus reverse-engineered.

Zwei Dinge sind wichtig, wenn du eine Referenz nimmst:

Mach es zuerst dunkel. Die meisten Pins sind hell. Ein Website-Hintergrund muss Dark Mode sein — nicht weil Dark Mode trendy ist, sondern weil dunkle Hintergründe die Nähte verbergen. Wenn du zwei Bilder übereinanderlegst und eines über dem anderen enthüllst, lässt ein schwarzer Hintergrund den Übergang als absichtlichen Kontrast wirken statt als sichtbare Bearbeitungsgrenze. Ich prompte Fables Bildschritt (oder ein dediziertes Bildmodell), die Referenz zu nehmen und eine dunklere Version mit höherem Kontrast zu produzieren: „Konvertiere dies in eine stimmungsvolle Dark-Mode-Szene, fast schwarzer Hintergrund, behalte die Felstextur bei, senke die Gesamthelligkeit um etwa 40%, kein hinzugefügtes Gras."

Generiere zwei Bilder, nicht eines. Das ist der ganze Trick, und es lohnt sich, hier innezuhalten.

Die Geschichtete Bild-Enthüllung: Zwei Bilder, Die So Tun, Als Wären Sie Eines

Die Illusion besteht aus zwei Bildern, die exakt zentriert übereinander gestapelt sind, wobei das obere progressiv weggeschnitten wird, während du scrollst. Darunter liegt das „Nachher." Darüber das „Vorher."

Für meinen Build bedeutete das:

• Basis (obere Ebene): die Felswand, kahl, dunkel.
• Enthüllung (untere Ebene): derselbe Fels, jetzt mit Gras — gleicher Kamerawinkel, gleiche Beleuchtung, gleicher Ausschnitt.

Die beiden Bilder müssen perfekt übereinstimmen, außer in dem einen Ding, das sich ändert. Hier beweist AI-Bildgenerierung ihren Wert. Ich generierte zuerst den kahlen Fels und promptete dann: „Gleiche Szene, gleicher Winkel und Beleuchtung, füge üppiges Gras hinzu, das über die Felsoberfläche wächst, halte den dunklen Hintergrund identisch." Die Variation vom Original aus zu generieren — statt zwei unabhängiger Bilder — ist das, was die Kanten ausgerichtet hält, damit die Enthüllung nicht springt.

Dann die Enthüllung selbst. Die meisten Tutorials greifen zu GSAP ScrollTrigger, und das funktioniert, aber für einen einzelnen Hero ließ ich Fable es mit einfachem CSS clip-path machen, angetrieben durch Scroll — leichter, keine Library und scharfe Kanten. Die Technik: Das obere Bild startet vollständig sichtbar, und während du scrollst, verbirgt ein clip-path: inset(...) es progressiv von einer Seite und legt das Grasbild darunter frei. Clips schlagen hier Masks, weil Clip Paths vektorbasiert sind und scharfe Kanten produzieren, während Masks speicher- und rechenintensiver sind.

Hier ist der Kern von dem, was Fable geschrieben hat, aufgeräumt:

.reveal-stack {
  position: relative;
  display: grid;
  place-items: center;
}

/* beide Bilder belegen dieselbe Grid-Zelle, zentriert */
.reveal-stack img {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
}

/* das „Vorher"-Bild sitzt oben und wird beim Scrollen weggeschnitten */
.reveal-stack .top {
  z-index: 2;
  /* --p wird von 0 auf 1 aktualisiert, während der Abschnitt durch die Ansicht scrollt */
  clip-path: inset(0 0 calc(var(--p) * 100%) 0);
}

// steuere --p über die Scrollposition des Abschnitts
const stack = document.querySelector('.reveal-stack');
const onScroll = () => {
  const rect = stack.getBoundingClientRect();
  const progress = 1 - Math.min(Math.max(rect.bottom / window.innerHeight, 0), 1);
  stack.style.setProperty('--p', progress.toFixed(3));
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();

Das Grasbild wird von unten nach oben enthüllt, während --p von 0 auf 1 steigt. Tausche die inset-Richtung und du enthüllst von einer anderen Kante. Das ist der gesamte Mechanismus. Alles andere ist Dekoration.

Und hier ist der Fehler, den ich versprochen habe. Meine erste Version löste die Enthüllung bei Mouse-Hover aus, weil das der originale Pinterest-Pin implizierte. Es fühlte sich billig an — man musste das Bild finden und den Cursor darüber bewegen, und auf Mobilgeräten tat es gar nichts. Der Wechsel zu Scroll veränderte das gesamte Gefühl. Jetzt ist die Enthüllung Teil der Erzählung der Seite: Du scrollst, die Welt verändert sich, du scrollst weiter. Scroll ist eine Geschichte, die du bereits liest. Hover ist ein Spielzeug, das du erst entdecken musst. Für visuelles Storytelling gewinnt Scroll jedes Mal — und es funktioniert auf Handys, wo der Großteil deines Traffics lebt.

Ich setze ständig auf scroll-gesteuerte Interaktion; ich habe die ausführlichere Version in meinem Artikel über Apple-ähnliche 3D-Scroll-Animationen mit AI bauen dargelegt, und derselbe Instinkt gilt hier — binde den Effekt an die eine Eingabe, die jeder Besucher bereits nutzt.

Noch ein Schritt, bevor wir die Enthüllung verlassen: Ich bat Fable, beide Bilder um etwa 20% zu verkleinern. Bei voller Breite war der Effekt überwältigend und die Naht war leichter zu bemerken. Um 20% eingezogen, eingerahmt von dunklem Negativraum, sah es plötzlich komponiert aus — wie ein Galeriestück statt eines Bildschirmschoners. Diese einzelne Größenänderung ist der Unterschied zwischen „netter Trick" und „das sieht designt aus."

Wenn du Hilfe beim Einbauen dieser Enthüllungsinteraktionen in eine echte Kundenseite brauchst statt in eine Demo, ist das genau die Art von Build, die ich über mein Fiverr-Profil annehme — gerne zusammen mit dir oder für dich.

Jetzt lebt die Enthüllung im Vakuum. Sie braucht einen Hero drumherum.

Den Hero Bauen: Wie Ich Fable Dazu Bringe, Aufzuhören Müll Hinzuzufügen

Sich selbst überlassen, gibt dir Fable einen „kompletten" Hero: einen geloopten Video-Hintergrund, drei Feature-Karten, ein Verlaufsgitter, ein Testimonial und einen Footer. All das konkurriert mit deiner einen guten Idee. Die Fähigkeit ist nicht, AI etwas hinzufügen zu lassen — sie ist, AI dazu zu bringen, wegzulassen.

Mein Hero-Prompt ist größtenteils eine Liste von Subtraktionen:

„Baue einen Hero-Abschnitt. Rein schwarzer Hintergrund, keine Verläufe, kein Mesh, kein Video-Hintergrund. Behalte nur: eine minimale obere Navigationsleiste und eine Zeile großen animierten Hero-Text. Entferne alle dekorativen Abschnitte, Karten oder Bilder, die du normalerweise hinzufügen würdest. Animierter Text soll auf Scroll reagieren — nach unten driften und leicht verblassen, wenn der Nutzer vorbeiscrollt. Bewahre die Schriftfamilie, -stärke und -größe, die du verwendet hast; ich will sie konsistent über jeden Abschnitt, den wir als nächstes bauen."

Dieser letzte Satz leistet echte Arbeit. Der Grund, warum AI-gebaute Seiten zusammenhangslos aussehen, ist, dass jeder generierte Abschnitt die Typografie neu erfindet. Indem du Fable vorab sagst, die Schriftstile und -größen zu fixieren und sie weiterzutragen, erbt jeder spätere Abschnitt dasselbe Type-System. Konsistenz ist das, was als „ein Designer hat das gemacht" gelesen wird.

Der scroll-reaktive Text ist der zweite kleine Dopamin-Hit auf der Seite. Die Enthüllung behandelt die Mitte; der Hero-Text behandelt den oberen Teil. Während du scrollst, driftet die Überschrift nach unten und dimmt, und übergibt die Bühne an den Fels-und-Gras-Effekt darunter. Zwei scroll-verknüpfte Momente, gestapelt, sodass die allererste Geste, die ein Besucher macht, belohnt wird.

Schneller Check, bevor wir weitermachen: schwarzer Hintergrund, eine Nav, eine animierte Textzeile, sonst nichts. Wenn dein Hero mehr hat als das, hast du mehr als einen Hero — du hast Unordnung in Hero-Kleidung. Ich habe einen ganzen Artikel über animierte Hero-Abschnitte mit AI bauen geschrieben, wenn du das breitere Menü an Effekten willst, aber für diesen Build ist Zurückhaltung die gesamte Ästhetik.

Jetzt erweitern — ohne Fable vergessen zu lassen, was es gerade gebaut hat.

Die Seite Erweitern: 3–4 Abschnitte, Die Nicht Gegeneinander Kämpfen

Ein Hero allein ist keine Landingpage. Ich bitte Fable um drei bis vier weitere Abschnitte, und der Prompt ist so konstruiert, dass er alles bewahrt, was bereits funktioniert:

„Füge 3–4 Abschnitte unter dem Hero hinzu. Einschränkungen, nicht verhandelbar: derselbe rein schwarze Hintergrund, nirgends Verläufe, verwende exakt dieselbe Schriftfamilie und -größen wie der Hero, halte Layouts einfach und textorientiert — kein Stockfoto-Durcheinander. Jeder Abschnitt soll sich wie dieselbe Seite anfühlen, nicht wie ein neues Template. Sauber, modern, viel Negativraum."

Der Ausdruck „nicht verhandelbar" zählt mehr, als er sollte. Fable behandelt auf einem langen Kontext explizite Einschränkungen als Leitplanken, die es aktiv verteidigt — und bei einem 1M-Token-Kontextfenster kann es jeden vorherigen Abschnitt im Blick behalten, während es den nächsten schreibt, also ist „verwende exakt dieselbe Schrift" keine Hoffnung, es ist etwas, das es gegen die bereits auf der Festplatte liegenden Dateien verifizieren kann. Vage Anleitung („mach es konsistent") driftet ab. Harte Regeln („nirgends Verläufe") halten.

Was du bekommst, ist eine Seite, über die das Auge nie stolpert. Dasselbe Schwarz. Dieselbe Schrift. Derselbe großzügige Abstand. Der Enthüllungseffekt ist das eine Moment der Bewegung, und weil alles drumherum ruhig ist, trifft dieses Moment härter. Zurückhaltung ist nicht die Abwesenheit von Design — sie ist der Rahmen, der deine eine mutige Wahl lesbar macht.

Weil Fable dies als echtes, semantisches HTML und CSS in einem Projektordner geschrieben hat — nicht als ein gesperrtes Template — ist es standardmäßig responsiv. Flexbox, Grid, relative Einheiten und ein paar Media-Queries, die das Modell ohne Aufforderung hinzufügt. Ich testete meins bei 375px und 1440px; die Enthüllung skalierte, der Text floss um, nichts brach. Das ist der stille Gewinn vom Bauen in Code statt in einem Drag-and-Drop-Builder: Mobile Responsivität kommt gratis, weil das Layout nie auf feste Pixel gepinnt war. Für die Analytics-und-Experimentier-Ebene auf Seiten wie diesen habe ich meine vollständige Landingpage-Pipeline mit MCPs separat dokumentiert — dort lebt das A/B-Testing.

Die Seite ist fertig. Jetzt kommt der Teil, der entscheidet, ob sie jemals jemand sieht.

Den Build in einen Post Verwandeln, Den Menschen Tatsächlich Teilen

Eine schöne Seite, die niemand sieht, ist ein Tagebucheintrag. Der Enthüllungseffekt ist gebaut, um geteilt zu werden — er ist ein Vorher/Nachher in einer einzigen Geste — also sollte die Distribution genauso durchdacht sein wie der Build.

Hier ist, was ich beim Posten auf X gelernt habe:

Poste das Video, nie den Screenshot. Der gesamte Wert liegt in der Bewegung. Ein Standbild eines dunklen Felsens ist nichts; der Drei-Sekunden-Clip von Gras, das beim Scrollen den Felsen hochfegt, ist der gesamte Hook. Video und die ersten drei Sekunden Bewegung sind genau das, was der X-Algorithmus 2026 belohnt, und die Plattform gewichtet Antworten jetzt ungefähr 150x mehr als Likes — also übertrifft ein Clip, der Menschen fragen lässt „wie hast du das gemacht", alles Passive.

Führe mit der Geschwindigkeit und der Geste. Meine Posts, die landen, eröffnen mit der reibungslosen Version der Geschichte: „Ich habe dieses Scroll-Reveal mit Claude Fable 5 in einem Prompt gebaut 👇" dann der Clip. Leute antworten, um zu fragen wie. Diese Antworten füttern den Algorithmus, der es mehr Leuten zeigt, die antworten, um zu fragen wie. Der Mechanismus ist das Marketing.

Passe jedes Asset an, damit deines einzigartig ist. Das zählt mehr, als es klingt. Wenn jeder denselben Felsen postet, ist der Effekt bis Dienstag nicht mehr neu. Ändere die Bilder. Ändere die Überschrift. Baue die Enthüllung um dein eigenes Thema — ein Produkt, ein Gesicht, eine Skyline. Einzigartigkeit ist das, was etwas teilbar hält, nachdem der Trend seinen Höhepunkt erreicht hat, weil die Technik der Trend ist und ein frisches Thema es wieder neu wirken lässt.

Nenne das Tool. „Claude Fable 5" ist gerade ein aktiver Suchbegriff — es wurde überall von TechCrunch bis zu Microsofts eigenem Azure-Blog seit dem Launch am 9. Juni behandelt. Den Trending-Tool-Namen in den Post zu setzen, erreicht ein Publikum, das bereits danach sucht. Du kämpfst nicht um Aufmerksamkeit; du stehst dort, wo die Aufmerksamkeit bereits gerichtet ist.

Tagge die Leute, die es interessieren würde. Tagge den Creator, dessen Pin du reverse-engineered hast. Tagge Tool-Accounts. Nicht zum Betteln — zum Einladen. Die Hälfte meiner besten Kooperationen begann als Antwort auf einen Post, in dem ich jemanden getaggt habe und die Person zurückschrieb. Prompt-Beispiele und wiederverwendbare Assets kursieren in Communities wie motionsites.ai; der Punkt ist, ins Gespräch einzutreten, nicht hineinzusenden.

Das tiefere Muster: Baue etwas, dessen Wert in drei Sekunden Bewegung sichtbar ist, und lass das Format die Verkaufsarbeit machen. Ich halte einen ganzen Workflow dafür bereit — Builds in Distribution verwandeln — in meinen Notizen über SEO und Social Media automatisieren mit Claude.

Was Dieser Ansatz Falsch Macht (Der Ehrliche Teil)

Zwei Dinge, denn so zu tun als wäre es anders, würde dies zu einem weiteren Hype-Post machen.

Die Enthüllung ist ein Trick, und Tricks haben ein Verfallsdatum. Das erste Mal, wenn jemand Gras über einen Felsen beim Scrollen wachsen sieht, ist es Magie. Das vierzigste Mal ist es ein Klischee. Ich baue meine tatsächlichen Produkte nicht darum herum — ich nutze es als Hook, um Leute zu Arbeit zu ziehen, die darunter Substanz hat. Wenn die Enthüllung die einzige Idee auf deiner Seite ist, hast du einen Zaubertrick gebaut, kein Produkt. Nutze es als Tür, nicht als Raum.

„Ein Prompt" ist größtenteils eine Marketing-Geschichte. Ich sage „ein Prompt" in meinen Posts, weil es knackig ist und für den ersten Entwurf grob stimmt. Die Realität ist, dass die erste Generation mich zu 70% dorthin brachte, und die restlichen 30% — das Fixen des Hover-vs-Scroll-Triggers, die 20%-Größenänderung, das Abtöten der Verläufe, die Fable immer wieder einschmuggelte — ein Dutzend Iterationen brauchte. Jeder, der fehlerfreien One-Shot-Output verspricht, verkauft dir die Demo, nicht den Workflow. Die Iteration ist, wo der Geschmack lebt, und Geschmack ist immer noch etwas, das du mitbringst. AI ist schnelle Hände; das Auge bist du. Ich habe diesen Punkt ausführlich dargelegt in warum AI-Webdesign immer noch menschliche Aufsicht braucht.

Es gibt auch die Kostenwand. Baue dies während eines kostenlosen Fensters und es fühlt sich reibungslos an; baue es auf Guthaben zu $50 pro Million Output-Token und jede Neugenerierung hat ein Preisschild. Was zurückführt zum Arbeiten im Terminal mit chirurgischen Bearbeitungen statt vollständiger Seitenneu-Emissionen — keine Stilpräferenz, eine Budgetpräferenz.

Was solltest du also realistisch erwarten, wenn du das versuchst?

Was Du Realistisch Erwarten Kannst, Wenn Du Das Baust

Eine saubere, responsive, interaktive Single-Page-Site mit einem funktionierenden Scroll-Reveal, einem animierten Hero und drei oder vier konsistenten Abschnitten — in deutlich unter einer Stunde, sobald du es einmal gemacht hast. Das erste Mal dauert länger; du lernst, wo Fable überliefert und wo es harte Einschränkungen braucht.

Die Seite wird responsiv sein, ohne dass du Media-Queries von Hand schreibst, weil es echter Code ist, kein gepinntes Template. Sie wird aussehen, als hätte ein kleines Studio sie gemacht, weil Zurückhaltung plus eine mutige Bewegung als Absicht gelesen wird.

Was ich nicht versprechen werde: virale Zahlen. Ich hatte Enthüllungsclips, die gut liefen, und ich hatte welche, die in derselben Woche mit demselben Effekt flat landeten. Viralität ist kein garantierter Output eines guten Builds — es ist eine Wahrscheinlichkeit, die du erhöhst, indem du Video postest, mit der Geste führst, das Tool nennst und das Asset anpasst, damit deines hervorsticht. Mach diese vier Dinge konsequent und die Mathematik bricht irgendwann zu deinen Gunsten. Mach sie einmal und hoffe, und du würfelst.

Miss das Richtige, auch. Nicht Likes — Antworten und Saves. Beim X-Algorithmus 2026 sind das die Signale, die tatsächlich kumulieren, und eine „wie hast du das gebaut"-Antwort ist hundert stille Likes wert. Wenn Leute fragen wie, hast du das Richtige gebaut.

Häufig Gestellte Fragen

Wie erstellt man einen Bild-Enthüllungseffekt beim Scrollen?

Staple zwei übereinstimmende Bilder exakt zentriert, dann schneide das obere mit CSS clip-path: inset() weg, gesteuert durch die Scrollposition. Das untere Bild wird enthüllt, während das obere progressiv verborgen wird. Clip Paths geben scharfe Kanten und brauchen keine JS-Animationsbibliothek für einen einzelnen Hero — siehe den Abschnitt über geschichtete Bilder oben für das exakte CSS und den Scroll-Handler.

Kann Claude Fable 5 eine vollständige interaktive Website bauen?

Ja. Claude Fable 5 baut komplette responsive interaktive Sites — Hero, Scroll-Effekte, mehrere Abschnitte — besonders wenn es über Claude Code in einem Terminal läuft, wo es Projektdateien lesen und bearbeiten kann. Sein 1M-Token-Kontextfenster lässt es die gesamte Seite konsistent halten. In einem echten Ordner zu arbeiten schlägt einen Browser-Chat, der Kontext zwischen Nachrichten vergisst.

Ist eine mit Claude Fable 5 gebaute Website mobil-responsiv?

Generell ja, weil Fable echtes semantisches HTML und CSS mit Flexbox, Grid und relativen Einheiten schreibt statt Templates mit festen Pixeln. Responsivität kommt von der Layout-Methode, nicht von manuellem Anpassen. Ich testete meins bei 375px und 1440px und sowohl die Enthüllung als auch die Typografie skalierten sauber. Überprüfe immer auf einem echten Gerät.

Warum Scroll statt Hover für den Enthüllungseffekt?

Scroll-Trigger funktionieren auf Mobilgeräten, wo Hover nichts tut, und sie betten den Effekt in die natürliche Erzählung der Seite ein. Hover erfordert, dass der Besucher das Element entdeckt und darauf zielt; Scroll belohnt eine Geste, die jeder Besucher bereits macht. Für visuelles Storytelling und Handy-Traffic ist Scroll der stärkere Trigger.

Was macht eine AI-gebaute Website viral auf X?

Poste ein Video der Interaktion (keinen Screenshot), führe mit der Geste in den ersten drei Sekunden, nenne das Trending-Tool, und passe deine Assets an, damit der Effekt frisch wirkt. Der X-Algorithmus 2026 gewichtet Antworten weit über Likes, also übertrifft ein Clip, der Menschen fragen lässt „wie", jedes Mal ein passives Bild.

Die Echte Erkenntnis

Dieser Pinterest-Pin war ein statisches Bild eines Felsens. Kein Code, keine Interaktion, keine Anweisungen — nur ein Gefühl, das ich reverse-engineeren musste. Vierzig Minuten und ein hartnäckiger Nachmittag später war es eine live, scrollende, responsive Seite, auf die Fremde antworteten.

Die Lektion ist nicht „AI baut jetzt Websites." Es ist, dass die Lücke zwischen etwas sehen und es ausliefern auf etwa eine Stunde zusammengebrochen ist — wenn du den Geschmack mitbringst. Fable liefert unendliche schnelle Hände. Das Auge, das sagt „verkleinere es 20%," „töte den Verlauf," „löse es bei Scroll aus, nicht bei Hover" — das bist immer noch du. Das ist immer noch der ganze Job.

Also hier ist deine nächste Stunde: Finde einen Pin, bei dem die Interaktion das Reden übernimmt. Öffne Claude Code. Baue es nach. Dann poste den Clip und beobachte, wer fragt wie. Die erste Person, die antwortet „Warte, wie hast du das gemacht" ist der Moment, in dem du verstehst, was sich gerade verändert hat.

Lass Uns Zusammenarbeiten

Möchtest du AI-Systeme bauen, Workflows automatisieren oder deine technische Infrastruktur skalieren? Ich helfe dir gerne.

• Fiverr (individuelle Builds & Integrationen): fiverr.com/s/EgxYmWD
• Portfolio: mejba.me
• Ramlit Limited (Enterprise-Lösungen): ramlit.com
• ColorPark (Design & Branding): colorpark.io
• xCyberSecurity (Sicherheitsdienste): xcybersecurity.io