Effekt-Lupe — Alexander Heyers

01 Was es ist

Eine Lupe für das Web — und ein Förderband ins Projekt.

Wenn mir auf einer Seite ein Effekt auffällt — eine Animation, ein Scroll-Verhalten, eine 3D-Szene — drücke ich auf die Effekt-Lupe. Die Extension liest aus, was diesen Effekt ausmacht: Design-Tokens, das relevante CSS, die echten Keyframes, ob WebGL im Spiel ist.

Statt das händisch zu rekonstruieren, schickt sie das Erfasste direkt über eine selbstgebaute lokale Node-Bridge in mein offenes Projekt. Dort baut ein eigener Claude-Code-Skill den Effekt nicht 1:1 ab, sondern im Stil des Projekts als echte Code-Edits ein.

Kein Build-Tooling, keine Framework-Abhängigkeit: Manifest V3, reines Vanilla JS — ein Stecker, den ich verstehe, weil ich jedes Teil selbst gesetzt habe.

Oberfläche der Effekt-Lupe — // Erfassungs-Oberfläche im Browser

02 Der Fluss

Vier Stationen, ein Förderband — klick dich durch.

Von der fremden Website bis zum eingebauten Effekt im eigenen Projekt. Tippe oder hover über eine Station, um zu sehen, was sie tut.

effekt-lupe · station-detail

# Station 01 — Erfassung im Browser
lupe> scan --design-tokens --css --keyframes --webgl --scroll
✓ Manifest V3 Content-Script liest die Live-Seite
✓ echte Web-Animations-API-Keyframes, kein Raten

# Station 02 — selbstgebaute Node-Bridge
bridge> node bridge.js # zero dependencies
✓ lauscht lokal, nimmt die Erfassung entgegen
✓ Auto-Discovery findet das offene Projekt selbst

# Station 03 — Zielprojekt
bridge> route → ./aktuelles-projekt
✓ die Erfassung landet als Datei im richtigen Repo
✓ jedes Projekt, ohne Konfiguration pro Projekt

# Station 04 — Claude-Code-Skill
claude> /effekt-lupe
✓ baut den Effekt im Stil des Projekts ein — echte Edits
✓ nicht copy-paste, sondern übersetzt & integriert

03 Was sie erfasst

Nicht ein Screenshot — die Mechanik dahinter.

Ein Bild zeigt, wie etwas aussieht. Die Effekt-Lupe greift, warum es so wirkt — die Werte, die Kurven, die Bewegung.

design tokens

Design-Tokens

Farben, Radien, Spacing, Typo-Skala — die DNA des Looks, nicht nur sein Aussehen.

css · keyframes

Kuratiertes CSS & echte Keyframes

Nur das relevante CSS, plus die tatsächlichen Animations-Keyframes über die Web-Animations-API.

@keyframes · WAAPI

webgl · 3d

3D- / WebGL-Erkennung

Erkennt, ob eine Szene auf WebGL läuft — damit der Rebuild die richtige Technik wählt.

scroll

Scroll-Momentum

Misst das Scroll-Verhalten — Trägheit und Tempo, das, was sich „teuer“ anfühlt.

transport

Eigene Node-Bridge

Zero-dependency, Auto-Discovery: schiebt das Erfasste in jedes offene Projekt — ohne Setup pro Projekt.

localhost → repo

skill

/effekt-lupe Skill

Ein eigener Claude-Code-Skill baut den Effekt als echte Edits im Stil des Ziels ein — nicht stumpf kopiert.

Ein Werkzeug ist erst dann meins, wenn ich jede Schicht selbst gesteckt habe.

// Manifest V3 · Vanilla JS · ~13 Commits

04 Was es beweist

Ich nutze KI nicht nur — ich baue ihr Werkzeug.

Die meisten zeigen, dass sie ein KI-Tool bedienen können. Die Effekt-Lupe zeigt etwas anderes: dass ich ein Tool für die KI gebaut habe — Extension, Transport-Bridge und Skill, drei Teile, die zusammen einen Arbeitsablauf automatisieren, den vorher niemand für mich erledigt hat.

Extension-Engineering

Browser-Tiefe

Manifest V3, Content-Scripts, Web-Animations-API, WebGL-Erkennung — gebaut, nicht nur konfiguriert.

Tool-Bau

Eigene Bridge

Eine zero-dependency Node-Bridge mit Auto-Discovery — die Sorte Infrastruktur, die ein Solutions Engineer beim Kunden auch entwirft.

Workflow-Automatisierung

End-to-End-Ablauf

Erfassen → transportieren → einbauen, als ein Fluss. Genau die Denkweise hinter n8n-, Parloa- oder Synthflow-Automationen.

3

Teile · Extension + Bridge + Skill

~13

Commits · alexheyers/effekt-lupe

0

Dependencies in der Bridge

Effekt-Lupe.