Erstelle ein Freigabefeld für Creator mit gut lesbarem Kurskontext, klaren Kopieraktionen und verlässlichem Feedback zur Zwischenablage. Sieh dir die Rails-Komponentenstruktur von Sage, die veröffentlichten Typografiespezifikationen und die neuere, extern geladene Pine-Token-Ebene an.
Unabhängige native HTML-Umsetzung der Anatomie von Sage Copy Text, der veröffentlichten Schriftspezifikationen und der aktuellen Pine-Werte für den Standard-/Hellmodus. Keine Sage-Laufzeitumgebung und kein proprietäres Schriftpaket. · Implementierungsreferenz
02
Designreferenz für das Kajabi Sage-Designsystem
Öffentliche Komponenten- und Schriftdokumentation von Sage sowie das Stylesheet von Pine für den Standard-/Hellmodus, das von der aktuellen Dokumentation tatsächlich geladen wird. Die veröffentlichte Sage-Schrifttabelle und die neueren Pine-Aliase sind getrennte Referenzen; behandle sie nicht stillschweigend als identisch.
Kajabi Sage-Designsystem: Ein Freigabefenster für den Workflow von Kreativen
Der Kurs bleibt neben seinem Link erkennbar
Sage wird in den Benutzeroberflächen von Kajabi für Kreative und den Wissenshandel eingesetzt. Ein Kursfreigabefenster ist eine nützliche kleine Komposition: Es verbindet Produktkontext, einen langen technischen Wert und eine Aktion, deren Erfolg unabhängig von der Seite scheitern kann. Das Beispiel bietet zwei fiktive Kurse mit eigens erstellten Titelbildern, einer Lernenden-URL und einer E-Mail-fertigen Nachricht.
Beim Wechsel des Kurses werden beide Ausgaben aktualisiert. Beim Wechsel des Ausgabeformats ändert sich der zu kopierende Text, während der ausgewählte Kurs sichtbar bleibt. Es wird nichts veröffentlicht oder versendet; der einzige optionale Nebeneffekt tritt ein, wenn jemand die Schaltfläche für die Zwischenablage betätigt.
Kajabi Sage-Designsystem und Pine haben eine klar definierte Abhängigkeitsgrenze
Eine CSS-Farbfunktion liefert nicht immer einen Hex-Wert
In der aktuellen README von Sage Assets steht, dass Pine-Token von der einbindenden Anwendung geladen und nicht in sage-assets mitgeliefert werden. Sie unterscheidet sage-color(), das eine semantische CSS-Variable zurückgibt, von sage-color-hex(), das für Sass-Farboperationen ältere Werte ausliest. Eine Farbfunktion, die jetzt var(...) zurückgibt, kann nicht ohne Weiteres in eine Hex-Berechnung zur Kompilierzeit einfließen.
Die aktuellen Dokumentationsseiten laden @kajabi-ui/styles/dist/pine/pine.css. In dessen Standard-/Hellmodus-Stamm wird die primäre Rolle über grey-900 aufgelöst, während das Hex-Beispiel in der älteren README blau ist. Der Leitfaden hält diese Fakten auseinander: Ersteres ist die aktuelle semantische Rolle, Letzteres veranschaulicht das Auslesen eines älteren Hex-Werts. Eine neue Implementierung darf das eine nicht ohne Prüfung durch das andere ersetzen.
Kajabi Sage-Designsystem: Zurückhaltung in der Anwendung, Ausdruck im Inhalt
Aktionsfarben an ihre Bedeutung knüpfen
Die Farbrichtlinien von Sage setzen Farbe ein, um Interaktionen, ausgewählte Zustände und Rückmeldungen kenntlich zu machen, statt der Benutzeroberfläche willkürlich einen eigenen Charakter zu verleihen. Das Beispiel hält den Anwendungsrahmen neutral; die Kursgrafiken sorgen für ausdrucksstarke Farben. So ist die Kopieraktion leicht zu finden, ohne jedes Panel in einen anderen Statusfarbton zu tauchen.
Erfolg wird erst nach erfolgreichem Schreiben in die Zwischenablage gemeldet. Wird der Zugriff auf die Zwischenablage blockiert, sollte eine praktische Möglichkeit zum manuellen Kopieren angezeigt werden, keine grüne Erfolgsmeldung. Der ausgewählte Kurs und das ausgewählte Ausgabeformat haben eigene Steuerelementzustände, unabhängig vom Ergebnis des letzten Kopiervorgangs.
Kajabi Sage-Designsystem: Veröffentlichte Sage-Spezifikationen und aktuelle Token-Aliase
Schriftrolle und HTML-Semantik bleiben unabhängig voneinander
Die veröffentlichte Sage-Tabelle enthält die Klassen t-sage-heading und t-sage-body mit genau festgelegten Kombinationen aus Schriftgröße, Zeilenhöhe und Schriftstärke. Die Tabelle eignet sich zur Umsetzung dieser dokumentierten Spezifikation. Das neuere Pine-Stylesheet stellt außerdem eigene Fließtext-Aliase bereit, darunter eine mittlere Fließtextrolle mit 14 Pixeln. Bei einer aktuellen Integration sollte daher geprüft werden, welche Ebene die jeweilige Komponente verwendet.
Wenn einem Element eine visuelle Überschriftenklasse zugewiesen wird, ändert sich dadurch nicht seine semantische Ebene. Der Kursname bleibt eine Überschrift, die URL bleibt Formularinhalt und die Kopieraktion bleibt eine Schaltfläche. Die Vorschau verwendet die veröffentlichte Sage-Überschrift im Format 32/40 und den Fließtext im Format 16/24 mit einer Systemschrift als Fallback. Sie erweckt nicht den Eindruck, dass Schriftdateien mitgeliefert werden.
Kajabi Sage-Designsystem: Text kopieren, Kopierschaltfläche und Textkopierkarte
Komponentenstruktur nach Inhaltsform auswählen
Die Dokumentation unterscheidet zwischen Inline-Kopiertext, einer Blockkarte und einer Kopierschaltfläche. Der Block eignet sich, wenn eine Beschriftung und mehrere Zeilen zusammenbleiben sollen. Eine Schaltfläche kann den gesamten Container ausfüllen oder ohne Rahmen dargestellt werden; mit Semibold lässt sich die Hervorhebung auf Komponentenebene umsetzen.
Das Beispiel verwendet ein schreibgeschütztes Textarea-Feld für den aktuellen Inhalt. Diese native Umsetzung ist bewusst gewählt: Sie ermöglicht die Textauswahl, falls der Zugriff auf die Zwischenablage nicht verfügbar ist, und sorgt dafür, dass eine mehrzeilige E-Mail-Nachricht gut lesbar bleibt. Der Wert entspricht exakt dem an den Browser übergebenen Inhalt – ohne unsichtbare zusätzliche Beschriftung und ohne veraltete Kurskennung.
Inline-Kopiertext eignet sich für einen kurzen Einzelwert neben anderem Fließtext.
Eine Kopierkarte fasst zusammengehörige Zeilen zusammen und bietet genug Breite, um sie zu prüfen.
Eine separate Schaltfläche macht die Aktion deutlich, wenn der Wert lang ist oder mehrere Zeilen umfasst.
Kajabi Sage-Designsystem: Lange Links sollten das Panel nicht sprengen
Eine zweispaltige Anordnung, die in eine Abfolge untereinander übergeht
Im Desktop-Beispiel befindet sich neben dem aktiven Kurs eine Leiste zur Kursauswahl mit Teilen-Steuerelementen. Auf kleinen Bildschirmen wird die Leiste zu einer horizontalen Kartenreihe mit zwei Karten; das Teilen-Panel folgt darunter. Das Wertefeld passt sich der Breite seines Containers an; die Schaltfläche bleibt darunter sichtbar.
Die offiziellen Hinweise zu Copy Text empfehlen eine lokale maximale Breite und bieten für Karteninhalte eine Kürzungsoption. Dieses Beispiel setzt stattdessen auf Zeilenumbruch und manuelle Auswahl, damit kein wichtiger Teil der URL verborgen bleibt. Die Abstände folgen den verifizierten Pine-Abstufungen 8/16/24/32; das Zweispaltenverhältnis und der Breakpoint sind anwendungsspezifische Entscheidungen.
Kajabi Sage Designsystem – vollständiges öffentliches Beispiel und ein transparenter nativer Weg
Kopieren erst nach einer Aktion des Nutzers
Die eigenständige Einrichtung lädt öffentliche Pine-Tokens und stellt ein eigenes HTML sowie eine Zwischenablage-Logik bereit. Sie funktioniert ohne Zugang zu einem Sage-Paketkonto. Das native Rails-Beispiel wird separat als Integration in eine bestehende Sage-Anwendung ausgewiesen; es wird nicht behauptet, dass ein einzelner eingefügter Helfer das System installiert.
Sage Assets gibt GitHub Packages als Veröffentlichungs-Registry an. Teams, die diesen Weg nutzen, müssen den genehmigten Registry-Zugang verwenden und die externe Pine-Ebene laden, bevor sie auf semantische Farbvariablen zurückgreifen. In der Dokumentation werden außerdem Einschränkungen für Font-Domains erwähnt. Daher ist ein System-Fallback ehrlicher, als stillschweigend davon auszugehen, dass die Markenschriften erfolgreich geladen wurden.
Öffne das eigenständige Beispiel über localhost oder HTTPS und wähle einen Kurs sowie ein Ausgabeformat aus.
Kopiere den Text und melde den Erfolg erst, wenn das Clipboard-Promise aufgelöst wurde. Andernfalls wähle den Text zum manuellen Kopieren aus.
Ändere den Kurs oder das Format und setze den bisherigen Kopierstatus zurück, damit er sich nie auf einen veralteten Text bezieht.
Speichern Sie das vollständige Dokument als index.html und öffnen Sie es in einem Browser. Eigenständige Interpretation in nativem HTML, basierend auf dem Aufbau von Sage Copy Text, veröffentlichten Typografievorgaben und den aktuellen Pine-Werten für die Standard- und helle Darstellung. Keine Sage-Laufzeit und kein proprietäres Schriftpaket.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Course sharing — Sage interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#f8f8f8;color:#343332;font:16px/1.5 system-ui,sans-serif}main{max-width:1120px;margin:auto;padding:32px}.top{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.08em;border-bottom:1px solid #d2d1d1;padding-bottom:16px;gap:16px}h1{font-size:32px;line-height:40px;letter-spacing:-.5px;margin:24px 0 8px}h2{font-size:24px;line-height:32px;margin:0 0 8px}.intro{margin:0 0 24px;color:#6c6a69}.grid{display:grid;grid-template-columns:240px 1fr;gap:24px}.courses{display:grid;gap:16px;align-content:start}.course{background:white;border:1px solid #d2d1d1;border-radius:10px;padding:12px;text-align:left;color:inherit;font:inherit;cursor:pointer}.course[aria-pressed=true]{border:2px solid #343332;padding:11px}.course small{display:block;font-size:12px;color:#6c6a69}.art{position:relative;overflow:hidden;border-radius:6px;display:grid;place-content:center;letter-spacing:.08em;font-size:11px;text-align:center}.art b{z-index:1;position:relative;line-height:1.2}.art.studio{background:#f2b9a5;color:#682923}.art.studio:before{content:'';position:absolute;border-radius:50%;width:150px;height:150px;background:#c26e4f;right:-40px;top:25px}.art.studio:after{content:'';position:absolute;width:55px;height:120px;background:#f9e7bc;transform:rotate(25deg);left:20px;top:-20px}.art.journal{background:#d1ddaa;color:#203a30}.art.journal:before{content:'';position:absolute;width:100px;height:160px;border:22px solid #68865b;border-radius:60% 0;transform:rotate(20deg);right:5px;top:-5px}.art.journal:after{content:'';position:absolute;width:90px;height:70px;border:18px solid #b29f59;border-radius:50%;left:-30px;bottom:-20px}.course .art{height:115px;margin-bottom:12px}.panel{background:white;padding:24px;border:1px solid #d2d1d1;border-radius:10px}.hero{display:grid;grid-template-columns:140px 1fr;gap:24px;align-items:center;margin-bottom:24px}.hero .art{height:140px}.hero p{font-size:14px;color:#6c6a69;margin:0}.format{display:flex;gap:16px;border-bottom:1px solid #d2d1d1;margin-bottom:24px}.format button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 0;font:inherit;color:#6c6a69;cursor:pointer}.format button[aria-pressed=true]{border-bottom-color:#343332;color:#343332}label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}textarea{width:100%;resize:vertical;min-height:135px;border:1px solid #d2d1d1;border-radius:10px;padding:16px;font:14px/1.5 system-ui;background:#fcfcfc;color:#343332}.copy{font:600 14px/20px system-ui;border:0;border-radius:9999px;background:#343332;color:white;padding:12px 24px;cursor:pointer;margin-top:16px}.copy:hover{background:#1a1a19}button:focus-visible,textarea:focus-visible{outline:3px solid #6c6a69;outline-offset:3px}.status{min-height:42px;font-size:13px;color:#4d4d4c}.foot{font-size:12px;color:#6c6a69;margin-top:24px}@media(max-width:650px){main{padding:20px}.grid{grid-template-columns:1fr}.courses{grid-template-columns:1fr 1fr;gap:12px}.course .art{height:85px}.hero{grid-template-columns:90px 1fr;gap:16px}.hero .art{height:110px}.panel{padding:20px}.top{flex-direction:column;gap:4px}h1{font-size:28px;line-height:36px}h2{font-size:20px;line-height:28px}}</style><main><header class="top"><b>CREATOR WORKSPACE</b><span>Local sharing specimen</span></header><h1>Give your course a clear invitation.</h1><p class="intro">Choose a sample course and prepare the exact text to share.</p><div class="grid"><nav class="courses" aria-label="Choose a course"><button class="course" data-course="studio" aria-pressed="true"><div class="art studio" aria-hidden="true"><b>STUDIO<br>NOTES</b></div><b>Studio Notes</b><small>6 lessons · Original sample</small></button><button class="course" data-course="journal" aria-pressed="false"><div class="art journal" aria-hidden="true"><b>FIELD<br>JOURNAL</b></div><b>Field Journal</b><small>4 lessons · Original sample</small></button></nav><section class="panel"><div class="hero"><div id="cover" class="art studio" aria-hidden="true"><b>STUDIO<br>NOTES</b></div><div><h2 id="title">Studio Notes</h2><p id="description">A fictional course about building a daily creative practice.</p></div></div><div class="format" aria-label="Copy format"><button data-format="link" aria-pressed="true">Course link</button><button data-format="message" aria-pressed="false">Invitation text</button></div><label for="payload">Text to copy</label><textarea id="payload" readonly></textarea><button id="copy" class="copy" type="button">Copy visible text</button><p class="status" id="status" role="status"></p></section></div><p class="foot">Independent Sage interpretation using verified Pine light-theme colors and dimensions. Original course covers; system-font fallback. No course is published and no message is sent.</p></main><script>const courses={studio:{name:'Studio Notes',slug:'studio-notes',desc:'A fictional course about building a daily creative practice.',art:'STUDIO<br>NOTES'},journal:{name:'Field Journal',slug:'field-journal',desc:'A fictional course about observing, collecting and recording ideas.',art:'FIELD<br>JOURNAL'}};let selected='studio',format='link';const payload=document.querySelector('#payload'),status=document.querySelector('#status');function render(){const c=courses[selected],url='https://example.com/courses/'+c.slug;document.querySelector('#title').textContent=c.name;document.querySelector('#description').textContent=c.desc;document.querySelector('#cover').className='art '+selected;document.querySelector('#cover').innerHTML='<b>'+c.art+'</b>';payload.value=format==='link'?url:'You are invited to explore '+c.name+'.\n\n'+c.desc+'\n\nView the sample: '+url;document.querySelectorAll('[data-course]').forEach(b=>b.setAttribute('aria-pressed',b.dataset.course===selected));document.querySelectorAll('[data-format]').forEach(b=>b.setAttribute('aria-pressed',b.dataset.format===format));status.textContent=''}document.querySelectorAll('[data-course]').forEach(b=>b.onclick=()=>{selected=b.dataset.course;render()});document.querySelectorAll('[data-format]').forEach(b=>b.onclick=()=>{format=b.dataset.format;render()});document.querySelector('#copy').onclick=async()=>{try{await navigator.clipboard.writeText(payload.value);status.textContent='Visible text copied.'}catch{payload.focus();payload.select();status.textContent='Copy was unavailable. The text is selected; copy it manually.'}};render();</script></html>
Kopierversuche verwenden die Browser-Zwischenablage API und bieten eine manuelle Kopiermöglichkeit als Fallback. Die dargestellten Kurse sind eigene Beispiele; native Rails-CopyText-Komponenten werden separat dokumentiert.
Vollständige Kopierfunktion mit Fehlerbehandlung
Der kopierte Text bleibt auswählbar, falls Browserberechtigungen oder der Einbettungskontext das Schreiben in die Zwischenablage verhindern.
html
<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Share a sample course link</title>
<!-- Public Pine token stylesheet used by the Sage documentation. Pin its reviewed package version in production. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kajabi-ui/styles@latest/dist/pine/pine.css">
<style>
body{font-family:var(--pine-font-family-body);color:var(--pine-color-text);background:var(--pine-color-background-app);padding:var(--pine-dimension-md)}
main{max-width:42rem;margin:auto;background:var(--pine-color-background-container);padding:var(--pine-dimension-md);border:var(--pine-border-width) solid var(--pine-color-border);border-radius:var(--pine-border-radius-md)}
textarea{box-sizing:border-box;width:100%;padding:var(--pine-dimension-sm);font:inherit;resize:vertical}
button{font:inherit;cursor:pointer;margin-top:var(--pine-dimension-sm);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}
button:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:3px}
</style><main><h1>Share a sample course link</h1><p>This is a fictional course URL.</p>
<label for="link">Text to copy</label><textarea id="link" readonly rows="2">https://example.com/courses/studio-notes</textarea>
<button type="button" id="copy">Copy course link</button><p id="message" role="status"></p></main>
<script>
const field=document.querySelector('#link'),message=document.querySelector('#message');
document.querySelector('#copy').onclick=async()=>{
try{await navigator.clipboard.writeText(field.value);message.textContent='Course link copied.'}
catch{field.focus();field.select();message.textContent='Copy was unavailable. The link is selected; copy it manually.'}
};
</script></html>
Die Helfer setzen eine bestehende Integration von Sage Rails, Assets und System-JavaScript voraus.
Verwende für die gesamte Komponente Semibold, statt eine pauschale Bold-Überschreibung hinzuzufügen.
04
Kajabi Sage Designsystem – Einrichtung für AI Agents
Ausgangspunkt für die Implementierung
Vollständige eigenständige Implementierung mit öffentlichen Tokens. Speichere sie als Datei HTML und stelle sie für die Unterstützung der Zwischenablage über localhost oder HTTPS bereit. Lädt keine Sage-Rails-/React-Komponenten. Native Sage-Assets werden über die GitHub-Packages-Registry verteilt; laut aktueller Asset-README müssen Pine-Tokens separat geladen werden.
html
<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Share a sample course link</title>
<!-- Public Pine token stylesheet used by the Sage documentation. Pin its reviewed package version in production. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kajabi-ui/styles@latest/dist/pine/pine.css">
<style>
body{font-family:var(--pine-font-family-body);color:var(--pine-color-text);background:var(--pine-color-background-app);padding:var(--pine-dimension-md)}
main{max-width:42rem;margin:auto;background:var(--pine-color-background-container);padding:var(--pine-dimension-md);border:var(--pine-border-width) solid var(--pine-color-border);border-radius:var(--pine-border-radius-md)}
textarea{box-sizing:border-box;width:100%;padding:var(--pine-dimension-sm);font:inherit;resize:vertical}
button{font:inherit;cursor:pointer;margin-top:var(--pine-dimension-sm);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}
button:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:3px}
</style><main><h1>Share a sample course link</h1><p>This is a fictional course URL.</p>
<label for="link">Text to copy</label><textarea id="link" readonly rows="2">https://example.com/courses/studio-notes</textarea>
<button type="button" id="copy">Copy course link</button><p id="message" role="status"></p></main>
<script>
const field=document.querySelector('#link'),message=document.querySelector('#message');
document.querySelector('#copy').onclick=async()=>{
try{await navigator.clipboard.writeText(field.value);message.textContent='Course link copied.'}
catch{field.focus();field.select();message.textContent='Copy was unavailable. The link is selected; copy it manually.'}
};
</script></html>
Ein Prompt für dein Projekt
Agenten-Prompt
Erstelle ein Kajabi Sage-Panel zum Teilen von Kursen mit expliziter Kursauswahl und kopierbarem Text. Unterscheide klar zwischen veröffentlichter Sage-Typografie und der extern geladenen Pine-Token-Ebene. Lass den genauen Text sichtbar, zeige den Erfolg beim Kopieren erst nach erfolgreichem Abschluss an und biete bei einer Blockierung die manuelle Auswahl an. Verwende keine echten Kurse, Kunden oder Veröffentlichungsintegrationen.
05
Kajabi Sage Designsystem – Quellen und Geltungsbereich
Eigenständiger Leitfaden zu OpenDesign. Die Kurse und Titelillustrationen sind eigene Beispiele. Die Vorschau verwendet natives HTML und dokumentierte visuelle Referenzen; für Rails-Beispiele ist eine bestehende, autorisierte Sage-Integration erforderlich. Es werden keine Inhalte veröffentlicht oder versendet.
