Seçilebilir bir yaratıcı varlık tablosu ve dışa aktarma ön ayarı inceleyicisiyle React Spectrum v3’ü keşfedin. Provider temalarını ve giriş ölçeğini, desteklenen stil özelliklerini, anahtarlı koleksiyonları ve v3 ile daha yeni Spectrum 2 uygulaması arasındaki farkı öğrenin.
Belgelenmiş v3 koleksiyonu ve denetleyici iş akışının özgün HTML/CSS yorumu. Palet ve görseller örnek amaçlıdır; yerel Spectrum çalışma zamanı veya görsel dönüştürme içermez. · Uygulama başvurusu
02
Adobe Spectrum Tasarım Sistemi Tasarım Referansı
React Spectrum v3 API’leri ve boyut eşlemeleri. Sayısal boyut sütunu, Adobe’un geçiş tablosundaki temel dönüşümü gösterir; ölçeğe duyarlı size-* değerleri dokunmatik kullanım için uyarlanabilir. Bu, Spectrum 2 token dışa aktarımı değildir. Önizleme renkleri ve özel görseller uygulama tercihleridir.
Adobe Spectrum Tasarım Sistemi v3’ü bilinçli seçin; Spectrum nesillerini karıştırmayın
Bu örneğin kurdukları
Adobe artık Spectrum 2’yi v3 kütüphanesinin yanında belgeliyor. Bu sayfa, Provider, koleksiyon ve stil özelliği sözleşmeleri belgelenmiş eksiksiz bir varlık inceleme örneği sunduğu için @adobe/react-spectrum@3 sürümünü seçiyor. v3 tarifi, mevcut bir v3 uygulaması için kullanışlıdır; ancak Spectrum’ın en yeni uygulaması olarak tanımlanmamalıdır. Yeni kullanım kararları, bir nesil seçmeden önce bağlantısı verilen geçiş referansını incelemelidir.
Pratik fark kodda görülür. v3, stil özellikleri aracılığıyla size-300 değerini iletir ve Provider’a defaultTheme sağlar. Geçiş kılavuzu bu yaklaşımları farklı bir stil oluşturma API düzenine dönüştürür. Yalnızca paket adını değiştirmek örneği geçiş yaptırmaz; bileşen içe aktarımları, stiller ve desteklenen özellikler birlikte gözden geçirilmelidir.
Adobe Spectrum Tasarım Sistemi Provider görünüm, ölçek ve yerel ayarı koordine eder
Tek kök, birbirinden bağımsız birkaç ayar
Provider; tablo, picker ve button bileşenlerinin kullandığı ortamı oluşturur. Tema nesnesi renk şeması ve ölçek tanımlarını içerir. colorScheme, işletim sistemi tercihini geçersiz kılabilirken scale giriş özelliklerini dikkate alır. Bunlar birbirinden ayrı ayarlardır: koyu bir masaüstü arayüzü büyük dokunma hedefleri gerektirmez; açık renkli bir dokunmatik ekran da yanlışlıkla sıkışık bir fare düzenini devralmamalıdır.
Normal üretim kullanımı için ölçeği otomatik bırakın. Bileşen incelemesinde orta veya büyük boyutu açıkça seçmek, denetimleri karşılaştırmaya yardımcı olabilir; ancak bunun bir inceleme ayarı olduğu belirtilmelidir. locale, proje verilerinizi çevirmek yerine dil bağlamını belirler. Kampanya adları, inceleme notları ve tarif etiketleri uygulama içeriği olarak kalır.
Temel size-100 eşlemesi 8, size-200 eşlemesi 16 ve size-300 eşlemesi 24’tür. Referans tablosunda başka kullanışlı adımlar da bulunur. size-* boyutu platform ölçeğine göre uyarlanabilir; static-size-* değeri ise özellikle sabittir. Bir denetleyiciyi veya etkileşim hedefini boyutlandırırken bu ayrımı koruyun. Masaüstünde çözümlenen her değeri CSS içine kopyalamak, bileşen ortamının sağladığı uyarlamayı ortadan kaldırır.
Flex ve View, TableView’ın iç yapısını yeniden yazmadan örneğe kararlı bir dış yapı kazandırır. Tablo flex ile büyüyebilir ve minWidth={0} ile küçülebilir; denetleyici temel düzende üst üste dizilir, açıkça tanımlanmış tablet kesme noktasında ise sınırlandırılır. İç boşluk, yüzeyin sahibi olan View’a eklenmelidir. Belgeler, güvenli olmayan geçiş yollarıyla iç renkleri, kenarlıkları ve tipografiyi geçersiz kılmayı önermez.
Adobe Spectrum Tasarım Sistemi Yerel renk ve tipografiyi temaya bırakın
Örnek paletiyle token dışa aktarımını birbirinden ayırın
Önizlemede ölçülü gri bir tuval, nötr kontroller ve özgün, renkli çizimler bulunur. Bu illüstrasyon renkleri, onaylanmış Spectrum belirteç değerleri değildir. Yerel örnekte, desteklenen bileşenlerin görünümü defaultTheme üzerinden sağlanır. Özel bir yerel yüzey, her iki renk şemasında da aynı örneklenmiş hex değerinin işe yarayacağını varsaymak yerine belgelenmiş backgroundColor değerlerini kullanmalıdır.
Heading, bulunduğu bağlamda hem anlamsal yapı hem de Spectrum sunumu sağlar. Sayfa başlığında level={1} kullanılır; Text ise seçili öğe sayısı gibi sıradan içerikleri sunar. Özel HTML önizlemesinde, uygulamanın seçtiği sistem yazı tipi yedeği ve yazı boyutları kullanılır. Bu, iş akışını ve göreli hiyerarşiyi gösterir; çevresindeki OpenDesign yazı tipinin ya da illüstrasyondaki tipografinin Spectrum yazı tipi tanımı olduğu iddiasını taşımaz.
Adobe Spectrum tasarım sistemi: Anahtarları, sütunları ve seçim anlambilimi olan bir koleksiyon tablosu
Seçim bir veri sözleşmesidir
Tablo; TableHeader ve Column bileşenlerinin yanı sıra TableBody, Row ve Cell bileşenlerinden oluşur. Her varlığın sabit bir id değeri vardır. selectedKeys ve onSelectionChange seçimi kontrollü hâle getirir; böylece dışa aktarma denetçisi sayıyı aynı durum üzerinden hesaplayabilir. Kullanıcı, kimliğini değiştirmeden bir varlığın adını değiştirebilir. Satır konumunu kimlik olarak kullanmak, sıralama değişikliklerinden sonra seçimi kırılgan hâle getirir.
Seçim, all özel değeri olabilir. Kurulum, tarifi oluşturmadan önce bu değeri mevcut tüm varlıklara dönüştürür. Toplu işlem isteğe bağlı olduğundan boş bir Set de geçerlidir; disallowEmptySelection özellikle etkinleştirilmemiştir. Uzak ya da sayfalanmış bir uygulamada, o veri kaynağı için all değerinin ne anlama geldiğini tanımlayın; o anda görüntülenen satırların koleksiyonun tamamı olduğunu varsaymayın.
Varlık kimliği: Koleksiyonda kullanılan sabit anahtar.
İnceleme: bağımsız örnekte daha büyük gösterilen çizim.
Toplu seçim: hazırlanan tarifte yer alan anahtarlar.
Adobe Spectrum tasarım sistemi: Picker ve Button dışa aktarma denetçisini tamamlar
Biçim, toplu seçimden bağımsız olarak kontrol edilir
Picker, görünür bir etiket ve sabit Item anahtarları kullanır. selectedKey değeri png ya da jpeg olur; onSelectionChange seçilen anahtarı sağlar. Bu yöntem, yerel bir select öğesinden event.target.value okumaktan farklıdır. Toplu seçim temizlendiğinde biçim seçimi korunur; böylece incelemeyi yapan kişi bir ön ayarı baştan oluşturmadan seçimi değiştirebilir.
Button, etkinleştirme için onPress; seçili varlık yokken devre dışı kalmak için isDisabled kullanır. Yerel örnek, id değerlerini ve biçimi yerel bir tarife serileştirir. Görüntü verilerini dönüştürmez, gerçek bir dışa aktarma dosyası oluşturmaz ya da bir varlık hizmetine bağlanmaz. Bu, yararlı bir uygulama sınırıdır: dönüştürme motoru tasarım sisteminin dışında olsa da eylem ve girdileri somuttur.
Adobe Spectrum tasarım sistemi: Çizimleri sıkıştırmak yerine düzeni uyarlayın
Kesme noktası sözleşmesini belirleyin
Bu örnekte tablet:640 ve desktop:1024 tanımlanır. Bu seçim açıkça belirtilmiştir; çünkü Provider sayfasında açıklayıcı metin ile oluşturulan API üst verisi arasında varsayılanlar tutarsızdır. Duyarlı değerler bu tam anahtarlara başvurur. Denetçi başlangıçta tam genişliktedir; ardından esnek tablonun yanına geçer. Bu kesme noktalarının sahibi uygulamadır; bunlar Spectrum için yeni ve evrensel bir standart değildir.
Bağımsız illüstrasyonda geniş bir tuval, yanında bir denetçi ve küçük resim şeridi bulunur. Küçük ekranlarda denetçi normal akışa geçer, çizim ise en-boy oranını korur. Boyutlar ve biçim gibi metinler çizimin dışında kalır; böylece okunabilirliklerini korur ve incelenen çizimi değiştirmezler.
Adobe Spectrum tasarım sistemi: İnceleme, seçme ve hazırlama farklı eylemlerdir
Örneği sınanabilir hâle getirin
Bir çizim küçük resmine tıklamak, büyük illüstrasyonu ve açıklayıcı üst verisini değiştirir. Bir onay kutusu, dışa aktarma toplu seçimini değiştirir. Bu ikisini birbirinden bağımsız tutmak, seçilmemiş bir varlığı yanlışlıkla dışa aktarmadan incelemeyi sağlar. Önizleme, seçili öğe sayısını gösterir ve incelemeyi yapan kişi toplu seçimi değiştirirken biçimi korur.
Yerel TableView, koleksiyon etkileşimini sağlar; HTML örneği ise sıradan düğmeler ve onay kutuları kullanır ve tam tablo klavye etkileşim modelini taklit ettiğini iddia etmez. Her ikisi de gösterilen eylemlere klavyeyle erişim sunar. Tarif sonucu yalnızca geçici bir görsel etki değil, metindir; böylece incelemeyi yapan kişi hangi id değerlerinin ve biçimin hazırlandığını tam olarak görebilir.
Adobe Spectrum tasarım sistemi: Aracı genişletmeden önce yerel parçayı tümleştirin
Gerçek bir dışa aktarma hizmetini açıkça tanımlanmış bir sınırdan bağlayın
Mevcut bir React uygulamasına v3 paket takımını kurun, ardından aşağıdaki tam girişi kullanın. Örnek; sağlayıcıyı, içe aktarımları, koleksiyon verilerini, seçim durumunu, biçim durumunu ve sonuç durumunu içerir. Üretim entegrasyonunda tarif hazırlama adımı, bir dışa aktarma isteğiyle değiştirilir ve her varlık için onaylanmış sonuç gösterilir. Böyle bir hizmet devreye girmeden yerel yanıtı “Dışa aktarma tamamlandı” olarak adlandırmayın.
Spectrum 2'ye geçerken boyutlar, kesme noktaları ve bileşen değişiklikleri için Adobe'nin eşlemelerini kullanın. Seçim davranışını ve biçimin korunmasını yeniden doğrulayın; görsel olarak benzer bir tablo bile farklı bir sözleşme sunabilir. Kaynak neslini açıkça belirtin ki gelecekte katkıda bulunanlar v3 Provider bileşenini uyumsuz örneklerle bir araya getirmesin.
Bir varlık seçin ve id değerinin yerel tarifte göründüğünü doğrulayın.
Tümünü seçin, PNG'yi JPEG olarak değiştirin ve seçilen kümenin tamamını inceleyin.
Seçimi temizleyin; biçim seçimi korunurken eylemin devre dışı kaldığını doğrulayın.
Görünüm alanını daraltın ve inceleme, seçim ve tarif çıktısına erişimin sürdüğünü doğrulayın.
Belgenin tamamını index.html adıyla kaydedip tarayıcıda açın. Belgelenmiş v3 koleksiyon ve denetçi iş akışının özgün HTML/CSS yorumu. Renk paleti ve çizimler örnek amaçlıdır; yerel Spectrum çalışma zamanı ya da görüntü dönüştürme özelliği içermez.
html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Spectrum asset inspector study</title><style>*{box-sizing:border-box}body{margin:0;font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#2c2c2c;background:#f5f5f5}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #999;border-radius:16px;background:white;color:inherit;padding:5px 16px;font-weight:600}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #1473e6;outline-offset:3px}button:disabled{opacity:.45;cursor:not-allowed}header{padding:16px 24px;background:white;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;gap:16px;align-items:center}header b{font-size:16px}header span{font-size:12px;color:#666}.workspace{display:grid;grid-template-columns:160px minmax(0,1fr) 230px;min-height:540px}.rail{padding:20px 16px;border-right:1px solid #ddd}.rail h2,.inspector h2{font-size:14px;margin:0 0 16px}.thumb{margin-bottom:20px}.thumb button{width:100%;border-radius:4px;padding:6px;background:transparent;border:2px solid transparent}.thumb button[aria-pressed=true]{border-color:#1473e6;background:#e7f1ff}.thumb label{display:flex;align-items:center;gap:6px;font-size:12px;margin-top:6px}.thumb input{accent-color:#1473e6}.mini{height:70px;display:grid;place-items:center;font-size:26px;font-weight:800;letter-spacing:-2px;background:linear-gradient(125deg,#fcab64,#ee6e63);color:#472c52;border-radius:2px}.thumb:nth-of-type(2) .mini{background:linear-gradient(125deg,#c4bdff,#8b7ddd)}.thumb:nth-of-type(3) .mini{background:linear-gradient(125deg,#9ed5c8,#449c8c)}.canvas-wrap{padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}.canvas-meta{align-self:stretch;display:flex;justify-content:space-between;margin-bottom:20px;font-size:12px;color:#666;gap:12px}.art{width:min(100%,540px);aspect-ratio:4/3;background:linear-gradient(130deg,#ffbd7c,#ed8178);color:#412754;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;isolation:isolate}.art:before{content:'';position:absolute;z-index:-1;width:70%;aspect-ratio:1;border:45px solid rgba(255,240,197,.65);border-radius:50%;left:-24%;bottom:-25%}.art:after{content:'';position:absolute;z-index:-1;width:60%;aspect-ratio:1;background:rgba(217,69,117,.32);border-radius:50%;right:-25%;top:-25%}.art small{letter-spacing:3px;font-size:11px;font-weight:700}.art h1{font-size:clamp(28px,5vw,64px);line-height:.96;margin:16px 0 18px;letter-spacing:-3px;font-weight:800}.art p{font-size:12px;margin:0}.art[data-art=square]{aspect-ratio:1;background:linear-gradient(130deg,#d8d0ff,#9588dd)}.art[data-art=story]{aspect-ratio:9/16;max-height:470px;width:auto;min-width:210px;background:linear-gradient(130deg,#caeee2,#69b7a5)}.art[data-art=story] h1{font-size:40px;letter-spacing:-2px}.canvas-note{font-size:12px;color:#666;margin-top:16px}.inspector{background:white;padding:24px 20px;border-left:1px solid #ddd}.inspector dl{margin:0 0 24px}.inspector dt{font-size:12px;color:#666;margin-top:16px}.inspector dd{margin:4px 0 0;overflow-wrap:anywhere}.inspector hr{border:0;border-top:1px solid #ddd;margin:24px 0}.inspector label{display:block;font-size:12px;font-weight:600;margin-bottom:6px}.inspector select{width:100%;border:1px solid #999;border-radius:4px;padding:8px;background:white}.selected-count{font-size:12px;margin:16px 0}.primary{background:#1473e6;border-color:#1473e6;color:white;width:100%}.primary:hover{background:#0d66d0}.result{margin:0 24px 20px;padding:16px;background:white;border:1px solid #ddd;border-radius:4px}.result[hidden]{display:none}.result h2{font-size:16px;margin:0 0 8px}.result pre{white-space:pre-wrap;font:12px/1.5 ui-monospace,monospace}.result p{font-size:12px;margin:0}footer{padding:12px 24px;color:#666;font-size:12px;border-top:1px solid #ddd;background:white}@media(max-width:760px){.workspace{grid-template-columns:110px minmax(0,1fr)}.rail{padding:16px 8px}.inspector{grid-column:1/-1;border-left:0;border-top:1px solid #ddd;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}.inspector h2{grid-column:1/-1;margin:0}.inspector dl{margin:0}.inspector hr{display:none}.canvas-wrap{padding:16px}.art h1{letter-spacing:-1px}.art p{padding:0 12px}.canvas-meta{display:block}.art:before{border-width:24px}header span{display:none}.inspector dt:first-child{margin-top:0}}@media(max-width:440px){.workspace{grid-template-columns:1fr}.rail{border-right:0;border-bottom:1px solid #ddd;display:flex;gap:8px}.rail h2{display:none}.thumb{flex:1;min-width:0;margin:0}.mini{height:44px;font-size:20px}.thumb label{font-size:11px}.art[data-art=story]{max-height:390px}.canvas-meta{display:flex}.inspector{grid-template-columns:1fr 1fr;padding:20px 16px}header{padding:16px}.result{margin:0 16px 16px}}
</style></head><body><header><b>Campaign library <span>/ Autumn collection</span></b><button id="select-all">Select all</button></header><main><div class="workspace"><nav class="rail" aria-label="Artwork variants"><h2>Assets</h2><div class="thumb"><button data-id="hero" aria-label="Inspect campaign master" aria-pressed="true"><div class="mini" aria-hidden="true">Made.</div></button><label><input type="checkbox" value="hero" checked>Master</label></div><div class="thumb"><button data-id="square" aria-label="Inspect social square" aria-pressed="false"><div class="mini" aria-hidden="true">Made.</div></button><label><input type="checkbox" value="square">Square</label></div><div class="thumb"><button data-id="story" aria-label="Inspect vertical story" aria-pressed="false"><div class="mini" aria-hidden="true">Made.</div></button><label><input type="checkbox" value="story">Story</label></div></nav><section class="canvas-wrap" aria-label="Selected artwork"><div class="canvas-meta"><span id="art-name">Campaign master</span><span id="dimensions">1600 × 1200</span></div><div class="art" id="art" data-art="hero" role="img" aria-label="Original orange campaign artwork with the words Made for what comes next"><div><small>AUTUMN COLLECTION</small><h1>Made for<br>what comes<br>next.</h1><p>Small ideas. A different perspective.</p></div></div><p class="canvas-note">Original artwork · illustrative preview</p></section><aside class="inspector"><h2>Export inspector</h2><dl><dt>Selected artwork</dt><dd id="detail-name">Campaign master</dd><dt>Source dimensions</dt><dd id="detail-dimensions">1600 × 1200 px</dd><dt>Review</dt><dd>Draft artwork</dd></dl><hr><div><label for="format">Export format</label><select id="format"><option value="png">PNG</option><option value="jpeg">JPEG</option></select><p class="selected-count" id="selected-count">1 asset selected</p><button class="primary" id="prepare">Prepare recipe</button><p style="font-size:12px;color:#666">Creates a local recipe only. No files are converted.</p></div></aside></div><section class="result" id="result" hidden><h2>Local export recipe</h2><pre id="recipe"></pre><p role="status" id="status"></p></section></main><footer>React Spectrum v3 collection study · HTML/CSS interpretation with illustrative colors. Inspecting an artwork and selecting it for export are independent.</footer><script>
const assets={hero:{name:'Campaign master',dimensions:'1600 × 1200',color:'orange'},square:{name:'Social square',dimensions:'1080 × 1080',color:'purple'},story:{name:'Vertical story',dimensions:'1080 × 1920',color:'green'}};const boxes=[...document.querySelectorAll('.thumb input')],$=id=>document.getElementById(id);document.querySelectorAll('[data-id]').forEach(button=>button.onclick=()=>{document.querySelectorAll('[data-id]').forEach(b=>b.setAttribute('aria-pressed',String(b===button)));const id=button.dataset.id,a=assets[id];$('art').dataset.art=id;$('art').setAttribute('aria-label','Original '+a.color+' campaign artwork with the words Made for what comes next');$('art-name').textContent=$('detail-name').textContent=a.name;$('dimensions').textContent=a.dimensions;$('detail-dimensions').textContent=a.dimensions+' px';});function update(){let n=boxes.filter(b=>b.checked).length;$('selected-count').textContent=n+' asset'+(n===1?'':'s')+' selected';$('prepare').disabled=n===0;$('select-all').textContent=n===boxes.length?'Clear selection':'Select all';$('result').hidden=true;}boxes.forEach(b=>b.onchange=update);$('format').onchange=()=>{$('result').hidden=true;};$('select-all').onclick=()=>{const all=boxes.every(b=>b.checked);boxes.forEach(b=>b.checked=!all);update();};$('prepare').onclick=()=>{const ids=boxes.filter(b=>b.checked).map(b=>b.value);$('recipe').textContent=JSON.stringify({format:$('format').value,assets:ids},null,2);$('status').textContent='Recipe prepared for '+ids.length+' assets. No image files were converted.';$('result').hidden=false;};
</script></body></html>
Çizimler özgün örnek içeriklerdir. Tarif hazırlamak, dönüştürülmüş görüntü dosyaları değil, seçim üst verisi oluşturur; bu belge Spectrum v3 ya da Spectrum 2'yi yüklemez.
Tam yerel uygulama girişi
Kurulumdan itibaren tam uygulama; odaklanmış API açıklamalarının yanında burada bir araya getirilmiştir. Kurulum bölümünde belgelenen paket ve derleme ön koşullarını izleyin.
Mevcut bir React uygulaması için tam v3 koleksiyon ve denetçi örneği. Görüntü dosyaları değil, yerel durumda bir dışa aktarma tarifi oluşturur. Çözümlenmiş paket sürümünü kilit dosyasında tutun ve bu girişi Spectrum 2 içe aktarımlarıyla karıştırmayın.
Seçim yalnızca Set değil, all da olabilir
Toplu seçimi hesaplamadan ya da eylemi etkinleştirmeden önce koleksiyon sözleşmesini normalleştirin. Bu parçada, kurulumun tamamındaki assets ve keys kullanılır.
Provider referansındaki açıklamalarla oluşturulan varsayılanlar tablosunda varsayılan kesme noktaları birbiriyle uyuşmuyor; açık bir eşleme belirsizliği ortadan kaldırır.
Mantıksal marginStart ve marginEnd özellikleri, fiziksel left ve right kenar boşluklarından daha iyi uyum sağlar.
04
Adobe Spectrum tasarım sistemi Yapay Zekâ Ajanı Kurulumu
Uygulamaya Başlangıç Noktası
Mevcut bir React uygulaması için tam v3 koleksiyon ve denetçi örneği. Görüntü dosyaları değil, yerel durumda bir dışa aktarma tarifi oluşturur. Çözümlenmiş paket sürümünü kilit dosyasında tutun ve bu girişi Spectrum 2 içe aktarımlarıyla karıştırmayın.
@adobe/react-spectrum v3'ü Provider ve defaultTheme ile kullanın. Sağlanan anahtarlara sahip TableView koleksiyonunu ve dışa aktarma denetçisini Picker, Item, Flex, View ve Button ile oluşturun. Seçimi Set ya da all olarak ele alın, seçim değiştiğinde biçimi koruyun ve gerçek bir dönüştürme hizmeti bağlanana kadar sonucu yerel tarif olarak adlandırın. Açıkça belirtilmiş tablet/desktop kesme noktası anahtarlarını ve desteklenen stil özelliklerini kullanın. v3 ve Spectrum 2 API'lerini birbirinden ayrı tutun.
05
Adobe Spectrum tasarım sistemi Kaynaklar ve Kapsam
@adobe/react-spectrum kullanan, bakımı sürdürülen React Spectrum v3 belgelerinin OpenDesign uygulama incelemesi. Spectrum 2 de kullanılabilir ve farklı API'lere sahiptir; bu sayfa v3'ü en yeni uygulama olarak tanımlamaz. Bağımsız varlık panosu önizlemesi; örnek çizimler ve uygulamanın seçtiği renklerle oluşturulmuş özgün bir HTML/CSS yorumdur; yerel bir Spectrum bileşeni ya da renk yönetimli görüntü düzenleyicisi değildir.
