106.9K+İndir
Kullanım kılavuzuna geç
Create Canvasyazan ibelick

Create Canvas Skill'i.

Canlı tasarım alternatiflerini, adlandırılmış ve taşınabilir önizlemeler içeren bir karşılaştırma alanında tutun.

  • Tasarım keşfi
  • Tuval
OpenDesign İndirKullanım Kılavuzunu Görüntüle
Kaynak incelemesi · create-canvasSKILL.md
Görev Canlı tasarım alternatiflerini, adlandırılmış ve taşınabilir önizlemeler içeren bir karşılaştırma alanında tutun. Çıktılar Kaynakta tanımlanan, adlandırılmış canlı önizleme öğeleri kaydı. Başlamadan önce Hangi önizleme öğelerinin yer aldığı ve bunların uygulaması kaynakta kalır; depolama içerik oluşturamaz veya gizleyemez.
Editoryal özet · kaynak inceleme tarihi 2026-11-02 · oluşturulmuş bir örnek değildir

01 İşlevler

Canlı tasarım alternatiflerini, adlandırılmış ve taşınabilir önizlemeler içeren bir karşılaştırma alanında tutun

Adlandırılmış canlı önizlemeler, bağımsız alternatifler, kayıtlı yerleşim ve girdiyi koruyan güvenli etkileşimlerle serbest bir tuval oluşturun.

Kaynağa dayalı iş akışıÇalıştırma kıyaslaması değildir

Çalışma Yaklaşımı

Create Canvas, konuşma yoluyla birden fazla canlı tasarım alternatifini keşfetmek için bir çalışma alanı oluşturur. Her önizlemenin kaynakta tanımlanan kayıtta sabit bir ID'si ve okunabilir bir adı vardır. Kullanıcılar belirli bir sürüme başvurmak için adı kopyalayabilir, özel tutamaçlarla önizlemeleri taşıyabilir, kaydırma veya yakınlaştırmayla gezinebilir.

İçerik kaynak dosyalarda kalırken tarayıcı depolaması yerleşimi hatırlar. Bu ayrım sonraki istekleri somutlaştırır: başka bir sürüm kendi kimliğini ve durumunu alır, mevcut sürümde yapılan değişiklik ise yerini korur. Üretime taşınmaları istenene kadar deneyler yerel kalır.

Beklenen Çıktılar

  • Kaynakta tanımlanan, adlandırılmış canlı önizleme öğeleri kaydı.
  • Taşıma tutamaçları, kamera kontrolleri ve desteklenen genel tema seçimi olan tuval.
  • Kayıtlı kamera ve öğe konumları ile doğrulanan ve test edilmeyen etkileşimler raporu.
Örnek Brief'i Gör

Brifden İncelemeye

  1. 01
    Güvenli bir canlı önizleme kurun

    Yeni tuval oluşturmadan önce mevcut tuvali inceleyin. Projenin kendi framework'ünü kullanarak sentetik veri, ayrı etiket ve taşıma tutamacı olan tek önizleme bağlayın.

  2. 02
    Ayrı alternatifler ekleyin

    Her yeni varyasyona sabit ID, benzersiz ad ve bağımsız durum verin. İçerik eklerken önceki alternatifleri ve ölçülmüş konumları koruyun.

  3. 03
    Gezinirken girdiyi koruyun

    Tuval hareketlerini yazma, seçme ve iç içe kaydırmadan ayırın. Yerel portalları koruyun; kopyalama, taşıma veya yakınlaştırmanın önizlemeleri yeniden bağlamadığını kontrol edin.

  4. 04
    Yerleşimi kaydedip davranışı doğrulayın

    Sınırlandırılmış kamera değerlerini, desteklenen temayı ve kayıt ID'sine göre konumları kalıcılaştırın. Çalıştıklarını bildirmeden önce yeniden yüklemeyi, bozuk depolama verisini ve ilgili cihaz hareketlerini doğrulayın.

02 Kullanım Alanları

Ne zaman kullanılır

Hangi önizleme öğelerinin yer aldığı ve bunların uygulaması kaynakta kalır; depolama içerik oluşturamaz veya gizleyemez.

İyi Bir Uyum

  • Tasarım karşılaştırmasıBirden fazla canlı alternatifi yan yana tutun ve tam adlarıyla belirtin.
  • Keşfe devam etmeÖnceki alternatifleri veya yerleşim kararlarını kaybetmeden mevcut çalışma alanına dönün.

Kontrol Edilecek Sınırlar

  • İçeriği kaynak belirlerHangi önizleme öğelerinin yer aldığı ve bunların uygulaması kaynakta kalır; depolama içerik oluşturamaz veya gizleyemez.
  • Üretimden yalıtımDeneyler güvenli test verileri kullanır ve üretim bileşen kodunu değiştirmez.
  • Sınırlı düzenleyici kapsamıİstenmedikçe çizim, bağlantı çizgileri, yeniden boyutlandırma ve geri alma geçmişi eklenmez.

Bu Girdileri Getirin

  • Deney listesiAlternatifleri, amaçlanan boyutları ve keşfedilecek farkları adlandırın.
  • Güvenli bileşenlerKişisel veri ve gerçek yazmalardan kaçınan genel bileşen API'leri ile test verilerini sağlayın.
  • Mevcut çalışma alanıKorunacak mevcut rotayı, kaydı, temayı ve yerleşimi belirtin.

03 Önemli Kararlar

Önemli kararlar

  1. Kesin referanslar

    Kopyalanabilir adlar, tek sürümü değiştirmek gibi sonraki istekleri açık hâle getirir.

  2. Bağımsız alternatifler

    Yeni sürümler ayrı kimliklerini ve etkileşim durumlarını korur.

  3. Kalıcı düzen

    Güncel kaynak belirleyici olmaya devam ederken kayıtlı yerleşim konumları geri yükler.

04 Örnek Görev Tanımı

Odaklı bir brief deneyin

Aşağıdaki örnek brif test edilmemiştir. Kullanmadan önce skill'in kurulumunu kontrol edin.

Kaynağı ve kurulumu inceleyin

Alternatifleri, amaçlanan boyutları ve keşfedilecek farkları adlandırın.

Üst Kaynak Dosyası
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/create-canvas/SKILL.md

Aşağıdaki referans, özgün talimatları açar. Kullanmadan önce depo kurulumunu inceleyin; bu bir kurulum komutu değildir.

Tek bir çıktıyla başlayın

Skill'i çalıştırmadan önce bu brifteki kapsamı, kaynak materyali ve kısıtları uyarlayın.

Örnek Brif
Mevcut projemizde üç fiyat kartı deneyini karşılaştırmak için create-canvas kullan. Özgün kartı koru; aynı plan verileri ve boyutlarla, bağımsız adlandırılmış iki alternatif oluştur. Güvenli test verileri kullan ve mevcut üretim bileşen uygulamalarımızı koru. Kopyalanabilir adlar, özel taşıma tutamaçları, kaydırma, yakınlaştırma ve ekrana sığdırma kontrolleri ekle. Önizlemelerde yazmayı ve seçimi koru. Form içeriği yerine yerleşimi kaydet. Oluşturduktan sonra yeniden yüklemeyi, taşımayı ve yakınlaştırmayı test et; doğrulayamadığın cihaz hareketlerini veya tarayıcı geçmişi davranışını raporla.

Sonucu inceleyin

Gerçek çıktıyı bu gözlemlenebilir ölçütlere göre kontrol edin.

  • Yeni alternatifler önceki ID'leri, adları ve konumları korur.
  • Kamera değişimleri ve öğe taşıma, önizleme girdisini silmez.
  • Depolama yalnızca yerleşim içerir; geçersiz kayıtlarda güvenli alternatife dönülür.

OpenDesign, kodlama ajanları için yerel bir tasarım çalışma alanı sağlar. Bu listeleme, skill'in paketle birlikte geldiği veya harici araçlarının, kimlik bilgilerinin ve yazılım bağımlılıklarının dahil olduğu anlamına gelmez.

OpenDesign İndirHızlı Başlangıcı Oku

05 Kaynak ve Lisans

Kaynak ve lisans

Bu sayfa, aşağıda bağlantısı verilen sabitlenmiş kaynak revizyonunu açıklar. Upstream davranışı ve gereksinimleri değişebilir.

Kaynak Sahibi
ibelick
Depo
ibelick/ui-skills
Skill Dosyası
SKILL.md
Lisans
MIT
İncelenen Sürüm
2026-11-02 · 4907a526b079
Editoryal Kaynak Özeti
Canlı tasarım alternatiflerini, adlandırılmış ve taşınabilir önizlemeler içeren bir karşılaştırma alanında tutun.

Bağlantılı kaynağa dayanan, OpenDesign tarafından hazırlanmış özgün özet. Depo yıldızları tarihli bir popülerlik göstergesidir; skill kullanımını veya kalite puanını göstermez.

06 Başlamadan Önce Sorular

Başlamadan önce sorular

Tarayıcı depolaması içerik kaynağı olabilir mi?

Hayır. Kayıt, hangi önizleme öğelerinin bulunduğunu ve uygulamalarını tanımlar; kayıtlı konumlar yalnızca mevcut ID'lere uygulanır.

Ayrı bir iframe güvenliği garanti eder mi?

Hayır. Kaynak, bağlamadan önce güvenli provider ve test verileri gerektirir; yalnızca belgeleri ayırmak gerçek istekleri önlemez.

Sıfırlama deneyleri kaldırır mı?

Sıfırlama kamerayı değiştirir; önizleme öğelerini, konumları, temaları ve taslakları korur.

OpenDesign

Brief'inizi ve tasarım çalışmanızı bir arada tutun.

Brifinizi, kaynak materyalinizi ve tasarım çalışmanızı yerel bir çalışma alanında bir arada tutun. İş akışınıza eklemeden önce skill'in kendi kurulumunu kontrol edin.

OpenDesign İndirTasarım Skill'lerine Göz At
Üst Kaynak Dosyası
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/create-canvas/SKILL.md