Crea un pannello di condivisione per creator con informazioni chiare sul corso, azioni di copia immediate e riscontri affidabili sugli appunti. Esplora l’anatomia dei componenti Rails di Sage, le specifiche tipografiche pubblicate e il più recente livello di token Pine caricato esternamente.
Interpretazione indipendente e nativa HTML dell'anatomia di Sage Copy Text, delle specifiche tipografiche pubblicate e dei valori Pine live predefiniti/chiari. Nessun runtime Sage né bundle proprietario di font. · Riferimento per l’implementazione
02
Riferimenti di progettazione del sistema sistema di design Kajabi Sage
Documentazione pubblica di Sage per componenti e tipografia, oltre al foglio di stile Pine predefinito/chiaro effettivamente caricato dalla documentazione attuale. La tabella tipografica pubblicata di Sage e i più recenti alias Pine sono riferimenti distinti: non considerarli identici senza indicarlo.
Sistema di design Kajabi Sage: un pannello di condivisione per il flusso di lavoro di un creator
Il corso resta riconoscibile accanto al relativo link
Sage è pensato per le interfacce dedicate ai creator e al commercio di contenuti formativi di Kajabi. Un pannello di condivisione di un corso è una composizione semplice ma utile, perché combina il contesto del prodotto, un valore tecnico lungo e un’azione il cui esito può non dipendere dal resto della pagina. L’esempio include due corsi fittizi con copertine originali, un URL per gli studenti e un messaggio pronto per l’invio tramite email.
Cambiare corso aggiorna entrambi gli output. Cambiare il formato di output modifica il testo che verrà copiato, mentre il corso selezionato resta visibile. Non viene pubblicato né inviato nulla; l’unico effetto collaterale facoltativo si verifica quando una persona attiva il pulsante degli appunti.
Sistema di design Kajabi Sage Il sistema di progettazione e Pine hanno un confine di dipendenza esplicito
Una funzione colore CSS non restituisce sempre un valore esadecimale
Il README attuale di Sage Assets dichiara che i token Pine vengono caricati dall’applicazione che li utilizza e non sono inclusi in sage-assets. Distingue sage-color(), che restituisce una variabile semantica CSS, da sage-color-hex(), che legge i valori legacy per le operazioni colore di Sass. Una funzione colore che ora restituisce var(...) non può essere usata in sicurezza in un calcolo esadecimale eseguito in fase di compilazione.
La documentazione online carica @kajabi-ui/styles/dist/pine/pine.css. Nella radice predefinita/chiara di questo foglio di stile, il ruolo primario rimanda a grey-900, mentre l’esempio esadecimale del README precedente è blu. La guida mantiene distinti questi fatti: il primo indica il ruolo semantico attuale, il secondo illustra una ricerca esadecimale legacy. Una nuova implementazione non deve sostituire l’uno con l’altro senza verificarlo.
Sistema di design Kajabi Sage Sobrietà del sistema di progettazione nell’applicazione, espressività nei contenuti
Associa i colori delle azioni al loro significato
Le indicazioni sui colori di Sage prevedono di usarli per identificare le interazioni, gli stati selezionati e i feedback, anziché aggiungere arbitrariamente carattere all’interfaccia. L’esempio mantiene neutra la struttura dell’applicazione; è la grafica del corso a fornire il colore espressivo. In questo modo l’azione di copia è facile da individuare, senza colorare ogni pannello con una diversa tonalità di stato.
Il feedback di operazione riuscita è appropriato solo dopo aver copiato correttamente negli appunti. Se l’accesso agli appunti è bloccato, occorre mostrare uno stato pratico che consenta la copia manuale, non un messaggio verde di conferma. Il corso selezionato e il formato di output selezionato hanno stati di controllo distinti, indipendenti dall’esito dell’ultima copia.
Sistema di design Kajabi Sage Specifiche Sage pubblicate e alias dei token attuali
Il ruolo tipografico e la semantica HTML restano indipendenti
La tabella pubblicata di Sage fornisce le classi t-sage-heading e t-sage-body, con combinazioni precise di dimensione, interlinea e spessore. È utile per riprodurre le specifiche documentate. Il foglio di stile più recente di Pine espone anche i propri alias per il testo del corpo, incluso uno stile medio da 14 pixel; un’integrazione aggiornata dovrebbe quindi verificare quale livello utilizza il componente.
Applicare a un elemento una classe visiva per i titoli non ne modifica il livello semantico. Il nome del corso resta un titolo, l’URL resta contenuto del modulo e l’azione di copia resta un pulsante. L’anteprima usa lo stile pubblicato di Sage per i titoli 32/40 e per il testo di lettura 16/24, con un carattere di sistema come alternativa; non finge che i file dei font siano inclusi.
Kajabi Sage Testo da copiare, pulsante Copia e scheda di testo da copiare del sistema di design
Scegli la struttura in base alla forma del contenuto
La documentazione distingue tra testo da copiare in linea, scheda a blocco e pulsante Copia. Il blocco è utile quando un’etichetta e più righe devono rimanere insieme. Un pulsante può occupare interamente il contenitore o presentarsi senza bordi; il semigrassetto aggiunge enfasi a livello di componente.
L’esempio usa un’area di testo in sola lettura per il contenuto attivo. È una scelta di implementazione intenzionale: consente di selezionare il testo quando l’accesso agli appunti non è disponibile e mantiene leggibile un messaggio email su più righe. Il valore corrisponde esattamente al contenuto inviato al browser, senza etichette aggiuntive invisibili né identificativi obsoleti del corso.
Il testo da copiare in linea è adatto a un singolo valore breve accanto ad altro testo.
Una scheda di copia raggruppa righe correlate e offre larghezza sufficiente per esaminarle.
Un pulsante separato rende esplicita l’azione quando il valore è lungo o disposto su più righe.
Sistema di design Kajabi Sage: i link lunghi non devono andare a capo nel pannello
Una composizione a due colonne che diventa sequenziale
L’esempio desktop mostra una barra di selezione dei corsi accanto al corso attivo e ai controlli di condivisione. Su uno schermo piccolo, la barra diventa una coppia di schede disposte in orizzontale e il pannello di condivisione viene visualizzato subito dopo. Il campo del valore va a capo all’interno del contenitore; il pulsante rimane visibile sotto di esso.
Le indicazioni ufficiali per Copy Text raccomandano una larghezza massima locale e prevedono il troncamento dei contenuti delle schede. In questo esempio, invece, il testo va a capo e può essere selezionato manualmente, così da non nascondere una parte essenziale dell’URL. La spaziatura interna segue gli incrementi verificati di 8/16/24/32 previsti per le dimensioni Pine, mentre il rapporto tra le due colonne e il breakpoint sono scelte specifiche dell’applicazione.
Sistema di design Kajabi Sage: un esempio pubblico completo e un percorso nativo descritto con trasparenza
Copia solo dopo che l’utente ha attivato l’azione
La configurazione autonoma carica i token Pine pubblici e fornisce il proprio HTML e gestore degli appunti. Può essere eseguita senza un account per i pacchetti Sage. L’esempio nativo per Rails è identificato separatamente come una composizione destinata a un’applicazione Sage esistente; non afferma che basti incollare un helper per installare il sistema.
Sage Assets indica GitHub Packages come registro di pubblicazione. I team che utilizzano questo percorso devono usare l’accesso al registro approvato e caricare il livello esterno Pine prima di fare affidamento sulle variabili dei colori semantici. La documentazione segnala anche restrizioni sui domini dei font: usare un font di sistema come fallback è più trasparente che dare per scontato, senza segnalarlo, che i font del brand siano stati caricati correttamente.
Apri l’esempio autonomo da localhost o tramite HTTPS, quindi seleziona un corso e un formato del contenuto.
Attiva la copia; segnala l’esito positivo solo dopo la risoluzione della promise degli appunti. In caso contrario, seleziona il testo per copiarlo manualmente.
Modifica il corso o il formato e cancella il precedente stato della copia, così non descriverà mai un contenuto non più aggiornato.
Esempi di componenti del sistema di design Kajabi Sage
Esempio interattivo completo e autonomo
Salva il documento completo come index.html e aprilo in un browser. Interpretazione nativa e indipendente di HTML dell’anatomia di Copy Text di Sage, delle specifiche tipografiche pubblicate e dei valori Pine predefiniti e chiari disponibili in tempo reale. Nessun runtime Sage né pacchetto proprietario di font.
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>
I tentativi di copia usano gli appunti del browser API e offrono un’alternativa per la copia manuale. I corsi illustrati sono originali; i componenti Rails CopyText nativi sono documentati separatamente.
Interazione di copia completa con gestione degli errori
Il testo copiato resta selezionabile se le autorizzazioni del browser o il contesto di incorporamento non consentono la scrittura negli appunti.
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>
Gli helper richiedono l’integrazione esistente di Sage Rails, degli asset e del sistema-JavaScript.
Usa il semibold per l’intero componente, invece di aggiungere un override bold generico.
04
Configurazione dell’agente del sistema di design Kajabi Sage
Punto di partenza per l’implementazione
Implementazione autonoma completa con token pubblici; salvala in un file HTML e pubblicala su localhost o HTTPS per supportare gli appunti. Non carica i componenti Sage Rails/React. Gli asset Sage nativi sono distribuiti tramite il registro GitHub Packages e il README attuale degli asset richiede che i token Pine vengano caricati separatamente.
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>
Un prompt per il tuo progetto
Prompt per l’agente
Crea un pannello Kajabi Sage per condividere corsi, con selezione esplicita del corso e del contenuto da copiare. Mantieni distinta la tipografia Sage pubblicata dallo strato di token Pine caricato esternamente. Mostra il contenuto esatto, conferma la copia negli appunti solo dopo che è riuscita e consenti la selezione manuale quando è bloccata. Non collegarti a corsi, clienti o integrazioni di pubblicazione reali.
05
Origini e ambito del sistema di design Kajabi Sage
Guida indipendente a OpenDesign. I corsi e le illustrazioni delle copertine sono originali. L’anteprima usa HTML nativo e riferimenti visivi documentati; gli esempi Rails richiedono un’integrazione Sage autorizzata già esistente. Nessun contenuto viene pubblicato o inviato.
