KI-Kennzeichnung in Framer: Canvas, CMS-Collection und Custom Code
- Framer bietet drei Wege: von Hand im Canvas, über ein Feld in der CMS-Collection oder automatisiert per Script.
- Die veröffentlichte Seite ist echtes HTML – anders als bei Baukästen, die ihre Inhalte erst im Browser aufbauen.
- Framer benennt Bilder nach ihrem Inhalt; die Adresse ändert sich nur, wenn Sie das Bild austauschen.
- Eigener Code steht nicht in jedem Tarif zur Verfügung – vorher prüfen.
Was Framer ist: Ein Baukasten, in dem Websites visuell auf einer Fläche entstehen und direkt veröffentlicht werden – mit eigenem CMS für wiederkehrende Inhalte wie Blogbeiträge oder Projektlisten.
Framer ist ein Baukasten mit einem ungewöhnlichen Vorteil: Die veröffentlichte Seite ist echtes, fertiges HTML. Was im Canvas steht, steht auch in der ausgelieferten Datei – und damit lässt sich der Bestand an Medien von außen vollständig erfassen, ohne Zugang zu Ihrem Konto.
Das ist nicht selbstverständlich. Andere Baukästen bauen ihre Seiten erst im Browser des Besuchers zusammen; dort findet ein Abgleich von außen nichts. Der Unterschied und was er bedeutet, steht in KI-Kennzeichnung auf Websites & im CMS.
Was bei Framer besonders ist
Die Medien liegen zentral, aber ohne Ordner. Framer legt alle Bilder unter
framerusercontent.com ab, in einer flachen Liste. Es gibt keine
Ordnerstruktur, an der sich eine Regel wie „alle Bilder aus dem Ordner Team”
festmachen ließe – die Zuordnung erfolgt stattdessen über die Seite, auf der ein
Bild vorkommt.
Die Dateinamen sind stabil. Framer benennt jedes Bild nach seinem Inhalt. Solange Sie das Bild nicht austauschen, bleibt die Adresse über jedes Veröffentlichen hinweg gleich. Für ein Register ist das die angenehmste Eigenschaft überhaupt: Eine einmal getroffene Einstufung bleibt gültig, ohne dass irgendetwas nachgeführt werden muss.
Eigener Code ist möglich, aber an einer Stelle. Framer erlaubt Scripte über
die Projekteinstellungen unter Custom Code, wahlweise im head oder am Ende
des body. Das gilt für die ganze Seite, nicht pro Bild – was für unseren Zweck
genau richtig ist.
Der Bereich Custom Code steht nicht in jedem Framer-Tarif zur Verfügung. Das lässt sich in einer Minute klären: Projekteinstellungen öffnen, in der linken Spalte nach Custom Code sehen. Ist der Bereich da, funktioniert der automatisierte Weg. Ist er es nicht, bleiben Weg A und Weg B – die kommen ohne eigenen Code aus.
Was vorher geklärt sein muss
Bevor Sie etwas einbauen, muss feststehen, welche Medien betroffen sind. Die Pflicht greift nicht bei allem, was mit KI zu tun hatte, sondern bei Deepfakes – siehe Was gekennzeichnet werden muss und Deepfake, KI-generiert, KI-bearbeitet. Wer pauschal alles markiert, produziert Arbeit ohne Nutzen und entwertet die Kennzeichnung dort, wo sie zählt.
Für eine erste Einordnung genügen ein paar Fragen im Kennzeichnungs-Check.
Was die Kennzeichnung leisten muss
Sie gestalten in Framer im Canvas, das Markup entsteht daraus. Worauf es ankommt, gibt Artikel 50 Absatz 5 vor: Wer den Inhalt sieht, muss den Hinweis spätestens in diesem Moment vorfinden, klar und eindeutig, und er muss für assistive Technologien lesbar sein. Der Verhaltenskodex der EU-Kommission ergänzt, wo er sitzen soll – deutlich wahrnehmbar, ohne Elemente darüber, im Inhalt eingebettet und möglichst auch dann noch sichtbar, wenn jemand das Bild teilt. Verpflichtend ist Artikel 50, der Kodex ist es nicht.
Für ein Framer-Projekt folgt daraus:
- Sichtbar heißt: auf jedem Breakpoint. Ein Textelement, das Sie für die Handy-Ansicht ausblenden, fehlt dort – und die Pflicht gilt auf dem Handy genauso wie am Schreibtisch.
- Effekte gehören nicht über den Hinweis. Verläufe, Hover-Zustände und Scroll-Animationen sind in Framer schnell gesetzt. Prüfen Sie, ob der Hinweis darunter verschwindet – auch während der Animation.
- Der Alt-Text am Symbol ist ein eigener. Framer bietet ihn je Bild in den
Ebeneneinstellungen an. Das Symbol ist ein Bild wie jedes andere und braucht
seinen eigenen, etwa
EU-Symbol: KI-generiert.
Weg A, von Hand im Canvas. Ein Textelement unter dem Bild, gesetzt wie jedes andere. Ohne Code und sofort sichtbar – aber pro Platzierung einzeln.
Weg B, über ein Feld in der CMS-Collection. Ein Schalter am Datensatz steuert, ob der Hinweis erscheint. Wächst mit dem Bestand, greift aber nur bei Bildern aus einer Collection.
Weg C, automatisiert. Ein Script kennzeichnet anhand einer zentral gepflegten Liste, unabhängig davon, wo ein Bild eingebunden ist. Dafür braucht es ein Werkzeug, das diese Liste führt.
Die Wege schließen sich nicht aus. Viele fangen mit A an und stellen um, wenn der Bestand wächst.
Weg A: von Hand, direkt im Canvas
Sinnvoll bei überschaubaren Projekten oder wenn nur einzelne Bilder betroffen sind.
Setzen Sie unter das Bild einen Textblock mit dem Hinweis und daneben das EU-Symbol als Bild-Ebene. Wichtig sind drei Dinge:
- Der Hinweis gehört unter oder auf das Bild, nicht in eine Fußzeile.
- Das Symbol braucht einen Alt-Text, etwa
EU-Symbol: KI-generiert. In Framer setzen Sie den in den Einstellungen der Bild-Ebene. - Nichts darf darüberliegen – Verläufe, Play-Buttons und Lightbox-Bedienung an derselben Stelle sind laut Verhaltenskodex problematisch.
Die drei offiziellen EU-Symbole dürfen Sie frei verwenden, alle Fassungen zum Herunterladen stehen in Die offiziellen EU-Icons.
Für das Symbol müssen Sie nichts entwerfen: Die EU-Kommission hat im Juni 2026 drei Zeichen veröffentlicht, die frei genutzt werden dürfen. Welches davon passt, hängt davon ab, wie stark KI beteiligt war:
Basissymbol KI war an der Erstellung beteiligt.
Vollständig KI-generiert Komplett von einer KI erzeugt, ohne von Menschen geschaffene Elemente.
Teilweise KI-verändert Bestehender Inhalt wurde mit KI verändert, etwa ein ausgetauschtes Gesicht.
Es gibt sie in Schwarz, Weiß und je einer halbtransparenten Fassung. Alle zwölf Dateien und die Platzierungsregeln stehen in Die offiziellen EU-Icons.
Ein Hinweis, der oft untergeht: Die Verwendung dieser Symbole ist freiwillig, die Kennzeichnungspflicht ist es nicht. Und die Kommission hat getestet, dass die Zeichen deutlich besser verstanden werden, wenn ein kurzer Text danebensteht – das Symbol allein sagt vielen Menschen noch nichts.
Bauen Sie sich das einmal als Framer-Komponente, dann lässt es sich überall einsetzen und später an einer Stelle ändern.
Der Haken ist die Pflege: Sie müssen wissen, welches Bild betroffen ist, und daran denken, wenn jemand ein Bild austauscht. Bei zwanzig Bildern geht das, bei zweihundert nicht mehr.
Weg B: über ein Feld in der CMS-Collection
Der bessere Weg, sobald Bilder aus dem Framer-CMS kommen – also bei Blogs, Projektlisten, Teamseiten.
Legen Sie in der Collection ein Ja/Nein-Feld an, etwa KI-generiert. Im Layout
binden Sie die Sichtbarkeit des Hinweis-Elements an dieses Feld: Steht es auf
Ja, erscheint der Hinweis, sonst nicht.
Der Vorteil gegenüber Weg A ist die Pflege. Wer einen Beitrag anlegt, entscheidet die Frage einmal am Datensatz, und das Layout kümmert sich um den Rest. Neue Einträge sind damit von Anfang an richtig ausgezeichnet, ohne dass jemand am Design arbeiten muss.
Die Grenze: Es wirkt nur für Medien aus dem CMS. Bilder, die direkt im Canvas platziert wurden – Hero-Bereiche, Landingpages, Hintergründe – bleiben Handarbeit nach Weg A.
Weg C: automatisiert mit wirklich.ai
Ab ein paar hundert Medien wird Handarbeit unwirtschaftlich, spätestens beim zweiten Durchgang. Und anders als bei Weg A und B haben Sie hier am Ende einen Nachweis darüber, wer wann was entschieden hat.
Voraussetzung: eine Sitemap
Der Abgleich liest die Seitenliste aus Ihrer Sitemap. Framer legt die
automatisch an, sie liegt unter ihre-domain.de/sitemap.xml. Sie müssen dafür
nichts tun – ein Blick darauf lohnt trotzdem, weil dort genau die Seiten stehen,
die wir später prüfen.
Fehlen dort Seiten, fehlen sie auch im Register. Das betrifft vor allem Seiten, die Sie in den Einstellungen von der Indexierung ausgenommen haben.
Anbindung einrichten
Beim Anlegen des Projekts in der wirklich.ai App wählen Sie Framer und tragen die Adresse Ihrer veröffentlichten Seite ein. Mehr braucht es nicht: kein Token, kein Zugriff auf Ihr Framer-Konto.
Der Abgleich liest dann die Sitemap, ruft jede Seite einmal auf und sammelt die gefundenen Bilder und Videos ein – samt der hinterlegten Alt-Texte.
Einbau
Projekteinstellungen in Framer öffnen, Custom Code, dann Add Script. Framer bietet
head und Ende des body an – nehmen Sie Ende des body.
Script 1: Kennzeichnung. Läuft auf allen Seiten und kennzeichnet die Medien, die Sie in der wirklich.ai App als kennzeichnungspflichtig eingestuft haben, mit dem EU-Piktogramm und dem hinterlegten Hinweis. Unter 10 kB, lädt asynchron, setzt keine Cookies.
<!-- wirklich.ai · KI-Kennzeichnung -->
<script src="https://cdn.wirklich.ai/label.js"
data-wirklich-site="IHRE-SITE-ID" async></script>Script 2: Transparenz-Protokoll. Kommt auf eine Unterseite, verlinkt aus Footer oder Impressum. Legen Sie dafür in Framer eine Seite an und setzen Sie ein Embed-Element mit folgendem Inhalt hinein. Es zeigt Prüfstand, Ergebnisse und das KI-Inventar und hält sich selbst aktuell.
<!-- wirklich.ai · KI-Transparenz-Protokoll -->
<div id="wirklich-protokoll"></div>
<script src="https://cdn.wirklich.ai/protokoll.js"
data-wirklich-site="IHRE-SITE-ID" async></script>Script 3: Trust-Badge. Optional, siehe Das wirklich.ai Signet – und den Abschnitt am Ende dieses Kapitels.
Die Site-ID finden Sie in der wirklich.ai App. Zusätzlich hinterlegen Sie dort die Domains,
auf denen die Scripte laufen dürfen – auf allen anderen bleiben sie stumm. Das
ist bei Framer besonders praktisch, weil neben Ihrer Domain immer noch die
framer.app-Vorschauadresse existiert.
Was der Abgleich nicht sieht
Zwei Dinge stehen nicht im HTML und bleiben deshalb unsichtbar:
Bilder als CSS-Hintergrund. Wenn ein Bild als Hintergrund einer Ebene gesetzt ist statt als Bild-Ebene, taucht es im Markup nicht als Bild auf.
Medien hinter einer Interaktion. Ein Slider, der weitere Folien erst beim Weiterklicken nachlädt, gibt beim ersten Aufruf nur die erste Folie preis.
Beides lässt sich in der wirklich.ai App von Hand über die Adresse des Mediums ergänzen. Die Kennzeichnung greift danach genauso automatisch wie bei allen anderen.
- Adresse Ihrer Framer-Seite in der wirklich.ai App eintragen, Abgleich starten.
- Die gefundenen Medien durchgehen und einstufen – geführt, Frage für Frage.
- Script einbauen. Ab jetzt trägt jedes eingestufte Medium seinen Hinweis.
- Nach jeder Veröffentlichung läuft der Abgleich automatisch weiter und meldet neue Medien.
Die Basisnutzung der wirklich.ai App ist dauerhaft kostenlos – kostenloses Konto erstellen.
Haltung zeigen: der wirklich.ai Transparenz-Pledge
Wer Aufwand in Transparenz steckt, muss das nicht im Hintergrund verstecken. Mit dem wirklich.ai Transparenz-Pledge setzen Sie ein Zeichen für ehrliche Kommunikation im Netz – unabhängig davon, ob Sie KI-Medien einsetzen und offen ausweisen oder vollständig auf echte Fotografie setzen.
Das Signet für Ihren Footer verlinkt direkt auf Ihr öffentliches Transparenz-Protokoll. Es zeigt Kundschaft, Partnern und Behörden auf einen Blick, dass auf Ihrer Website nicht nur behauptet, sondern geprüft wird:
Es behauptet bewusst wenig: keine Zertifizierung, keine Rechtskonformität, sondern nur, dass hier gekennzeichnet und darüber Buch geführt wird – nachprüfbar über das verlinkte Protokoll. Was es genau aussagt und was nicht, steht in Das wirklich.ai Signet.
Andere Systeme
Die Anforderungen sind überall dieselben, die Umsetzung nicht. Betreuen Sie weitere Websites, finden Sie hier die passende Anleitung:
Webflow Live 
WordPress Live 
Sanity Live 
Astro Live 
Statische Sites Live 
Lovable Live 
Shopify Bald 
Wix Bald 
Strapi Bald Häufige Fragen
Muss ich jedes KI-Bild in Framer kennzeichnen?
Nein. Die Pflicht aus Artikel 50 Absatz 4 greift bei Deepfakes – also bei Inhalten, die reale Personen, Orte oder Ereignisse zeigen und für echt gehalten werden könnten. Abstrakte Hintergründe, Icons und erkennbar gezeichnete Illustrationen fallen in der Regel nicht darunter. Die Abgrenzung steht in Deepfake, KI-generiert, KI-bearbeitet, für eine schnelle Einordnung genügt der Kennzeichnungs-Check.
Brauche ich einen Zugang oder API-Schlüssel für die Anbindung?
Nein. Framer-Seiten werden über die Sitemap ihrer Live-Adresse gelesen. Es braucht keinen Zugriff auf Ihr Framer-Konto, und es kann nichts an Ihrem Projekt verändert werden – der Abgleich liest ausschließlich das, was ohnehin öffentlich ausgeliefert wird.
Was passiert mit meinen Einstufungen, wenn ich neu veröffentliche?
Nichts. Framer legt Bilder unter einem Dateinamen ab, der aus dem Bildinhalt berechnet wird – er ändert sich nur, wenn Sie das Bild selbst austauschen. Ihre Prüfentscheidungen überleben also jedes Veröffentlichen. Tauschen Sie ein Bild aus, erscheint es als neues Medium und will neu eingestuft werden, was richtig ist: Es ist ja ein anderes Bild.
Funktioniert die Kennzeichnung auch bei Bildern in einer CMS-Collection?
Ja. Für die Kennzeichnung ist es unerheblich, woher ein Bild stammt – das Script arbeitet am fertigen Seiteninhalt und erkennt die Medien an ihrer Adresse. Ob das Bild im Canvas platziert oder aus einer Collection eingesetzt wurde, macht keinen Unterschied.
Warum findet der Abgleich manche Bilder nicht?
Weil sie nicht im ausgelieferten HTML stehen. Das betrifft vor allem Bilder als CSS-Hintergrund und Medien, die erst nach einer Interaktion erscheinen – etwa in einem Slider, der weitere Folien nachlädt. Solche Medien lassen sich in der wirklich.ai App von Hand über ihre Adresse ergänzen; die Kennzeichnung greift danach automatisch.
Reicht ein Hinweis im Footer meiner Framer-Seite?
Nein. Der Hinweis gehört an den Inhalt, nicht auf die Seite. Wer nur im Footer schreibt, dass auf der Website KI zum Einsatz kommt, erfüllt die Anforderung aus Absatz 5 nicht – beim einzelnen Bild bleibt dann offen, ob es gemeint ist.
Quellen
Dieser Beitrag gibt den Verordnungstext und benannte Quellen wieder. Er ist keine Rechtsberatung und ersetzt im Einzelfall keine anwaltliche Prüfung.
Angaben zur Rechtslage, zu deren Auslegung sowie zu Funktionen, Oberflächen und Schnittstellen fremder Systeme geben den Stand zum oben genannten Datum wieder. Beides kann sich jederzeit und ohne Ankündigung ändern. Für Aktualität, Richtigkeit und Vollständigkeit übernehmen wir keine Gewähr; eine Haftung für Schäden aus der Nutzung dieser Inhalte, der beschriebenen Anleitungen oder der Code-Beispiele ist ausgeschlossen, soweit gesetzlich zulässig. Genannte Produkt- und Firmennamen gehören ihren jeweiligen Inhabern; eine Verbindung zu ihnen besteht nicht.
Dieser Text wurde mit Unterstützung von KI erstellt und redaktionell geprüft.
