Kullanım kılavuzuna geç
Hueyazan dominikmartn

Hue Skill.

Yalnızca tek bir bitmiş ekranı değil, gelecekteki arayüz çalışmalarına yön verecek kuralları oluşturun.

  • Tasarım Sistemleri
  • Skill Oluşturma
  • Tasarım Token'ları
Kaynak İncelemesi · HueSKILL.md
Görev Tasarım Sistemleri Çıktılar • Doğruluk kaynağı olarak design-model.yaml dosyası bulunan, yeniden kullanılabilir bir tasarım Skill'i. • Token, bileşen ve platform eşlemesi referans dosyaları. • Gösterge paneli, bileşen kütüphanesi, açılış sayfası ve uygulama ekranı HTML önizlemeleri. Başlamadan Önce Dosya erişimi, uygun referans inceleme araçları, validate.mjs için Node ve görsel güven için tarayıcıda inceleme gerekir. Araçların bulunabilirliği çıkarım doğruluğunu etkiler.
Editoryal özet · kaynak incelendi 2026-10-07 · üretilmiş bir örnek değildir

01 İşlevler

Bir Tasarım Dilini Yeniden Kullanılabilir Bir Skill'e Dönüştürün

Referans analizinden, ortak bir YAML modelinden, dokümantasyondan ve doğrulanmış dört önizlemeden yeniden kullanılabilir bir tasarım skill'i üretir.

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

Çalışma Yaklaşımı

Hue, başka bir tasarım dili Skill'i üreten bir meta-Skill'dir. Bir marka, URL, kod tabanı, ekran görüntüleri, açıklama veya yeniden düzenlenecek mevcut bir Skill ile başlayabilir. Gözlemlenen tasarım olgularını türetilmiş seçimlerden ayırır, kararları design-model.yaml dosyasına kaydeder ve sonraki dokümantasyonu ile önizlemeleri bu modelden üretir.

Çıktısı yalnızca renkler ve yazı tiplerinden ibaret değildir. Kaynak; bileşen envanterlerini, simge yedeği gerekçelendirmesini, hero alanı kompozisyonunu, açık ve koyu token'ları, platform eşlemelerini ve dört görsel gösterimi kapsar. Ayrıca doğrulama ve görsel inceleme gerektirir. İncelenen kaynakta yazı tipi kaynağına ilişkin bazı tutarsız yönlendirmeler bulunduğundan, her öneriyi uyumlu saymak yerine yazı tipi lisansları ve bulunabilirlikleri kontrol edilmelidir.

Beklenen Çıktılar

  • Doğruluk kaynağı olarak design-model.yaml dosyası bulunan, yeniden kullanılabilir bir tasarım Skill'i.
  • Token, bileşen ve platform eşlemesi referans dosyaları.
  • Gösterge paneli, bileşen kütüphanesi, açılış sayfası ve uygulama ekranı HTML önizlemeleri.
Örnek Brief'i Gör

Brief'ten İncelemeye

  1. 01
    Girdiyi Analiz Edin

    Mümkün olduğunda gerçek değerleri kaynaktan veya hesaplanmış stillerden toplayın; ekran görüntülerinden veya metin çekmeden elde edilen daha düşük güvenilirlikteki gözlemleri etiketleyin.

  2. 02
    Yönü Onaylayın

    Daha büyük bir dosya seti üretmeden önce estetik yorumu ve çekirdek token'ları gözden geçirin.

  3. 03
    Önce Modeli Oluşturun

    İlkelleri, anlamsal rolleri, bileşenleri, simge yedeklerini ve hero alanı kararlarını YAML dosyasına kaydedin.

  4. 04
    Üretin ve Doğrulayın

    Referansları ve önizlemeleri modelden üretin, sağlanan doğrulayıcıyı çalıştırın ve çıktıları her iki modda da inceleyin.

02 Kullanım Alanları

Ne Zaman Kullanılır?

Dosya erişimi, uygun referans inceleme araçları, validate.mjs için Node ve görsel güven için tarayıcıda inceleme gerekir. Araçların bulunabilirliği çıkarım doğruluğunu etkiler.

İyi Bir Uyum

  • Yeniden Kullanılabilir Marka RehberliğiTekrarlanan asistan oturumlarının daha açık bir görsel dile ihtiyaç duyduğu durumlarda yararlıdır.
  • Tasarım Skill'i Yeniden DüzenlemeleriMevcut felsefeyi ve etkilenmeyen kuralları korurken seçili boyutların değiştirilmesini destekler.

Kontrol Edilecek Sınırlar

  • Varlık Sahipliği DeğildirGözlemlenen özel yazı tipleri, simgeler, fotoğraflar ve ürün görselleri yeniden dağıtım için otomatik olarak lisanslı değildir.
  • Birebir Marka Klonlama DeğildirYedek kitler ve türetilmiş bileşenler dürüstçe belirtilmelidir.
  • Ortama Bağlı AnalizHesaplanmış stil incelemesi, tarayıcı ekran görüntüleri ve yerel doğrulama için kullanılabilir araçlar gerekir; zayıf girdiler güveni azaltır.

Bu Girdileri Getirin

  • Tasarım ReferansıBir marka URL'si, kod tabanı, ekran görüntüleri, yazılı yön veya mevcut bir Skill sağlayın.
  • Kapsam ve PlatformÜrün alanını ve CSS, Tailwind veya SwiftUI eşlemelerinin yararlı olup olmadığını belirtin.
  • Varlık ve Marka KısıtlarıÖzel materyalleri, onaylı yedekleri ve değişmeden kalması gereken kararları belirtin.

03 Önemli Kararlar

Önemli Kararlar

  1. Gözlemlenen ve Türetilen

    Kaynakta bulunan bir düğme ile yeni çıkarılmış bir anahtar eşit derecede doğrulanmış gibi sunulmamalıdır.

  2. Tek Model Sapmayı Sınırlar

    Dokümanları ve önizlemeleri aynı YAML dosyasından üretmek, belirtilen token'lar ile işlenen değerler arasındaki uyuşmazlığı azaltır.

  3. Uygulama Ekranlarında Test Edin

    Yalnızca bir hero alanında çalışan bir tasarım dili yoğun bir uygulama ekranında başarısız olabilir; dördüncü önizleme bu farkı test eder.

04 Örnek Görev Tanımı

Odaklı Bir Brief Deneyin

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

Kurulumu İnceleyin

Şablonları ve doğrulama betiğiyle birlikte tam üretici deposunu kullanın. Üretilen Skill klasörlerinin kendi keşif adlandırması ve kurulum konumları vardır; bunlar ajana göre değişir.

Üst Kaynak Dosyası
https://github.com/dominikmartn/hue/blob/a910e31cd24b45b9455c0c3502150413aa5a3b32/SKILL.md

Dosya erişimi, uygun referans inceleme araçları, validate.mjs için Node ve görsel güven için tarayıcıda inceleme gerekir. Araçların bulunabilirliği çıkarım doğruluğunu etkiler.

Tek Bir Çıktıyla Başlayın

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

Örnek Brief
Sağlanan yerel UI kodundan ve ekran görüntülerinden yeniden kullanılabilir bir tasarım dili Skill'i oluşturmak için hue kullan. Gözlemlenen bileşenleri türetilenlerden ayır, gerçek vurgu rengimizi ve köşe işlemeyi koru ve lisanslı yazı tipi/simge yedekleri öner. Yönü ve çekirdek token'ları onayla, ardından modeli, referansları ve dört önizlemeyi doğrulama kanıtıyla birlikte üret.

Sonucu İnceleyin

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

  • İşlenen her token design-model.yaml dosyasına kadar izlenebilir.
  • Gözlemlenen özel varlıklar ile yedek seçimler açıkça ayırt edilir.
  • Üretilen tüm HTML dosyaları yapısal doğrulamadan ve gerçek görsel incelemeden geçer.

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.

05 Kaynak ve Lisans

Kaynak ve Lisans

Bu sayfa, aşağıda bağlantısı verilen sabitlenmiş kaynak sürümünü anlatır. Üst kaynağın davranışı ve gereksinimleri değişebilir.

Kaynak Sahibi
dominikmartn
Skill Dosyası
SKILL.md
Lisans
MIT
İncelenen Anlık Görüntü
2026-10-07 · a910e31cd24b
Editoryal Kaynak Özeti
Referans analizinden, ortak bir YAML modelinden, dokümantasyondan ve doğrulanmış dört önizlemeden yeniden kullanılabilir bir tasarım skill'i üretir.

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ı veya kalite puanı değildir.

06 Başlamadan Önce Sorular

Başlamadan Önce Sorular

Hue yalnızca bir açılış sayfası mı oluşturur?

Hayır. Açılış önizlemesi, üretilen bir tasarım Skill'inin; gösterge paneli, bileşen kütüphanesi ve uygulama ekranıyla birlikte sunulan gösterimlerinden yalnızca biridir.

Mevcut bir tasarım Skill'ini revize edebilir mi?

Evet. Kaynağın yeniden düzenleme (remix) yolu önce modeli değiştirir ve tüm sistemi değiştirmek yerine yalnızca etkilenen dosyaları yeniden üretir.

Kaynak markanın yedek simge kitini kullandığını iddia eder mi?

Etmemelidir. Kaynak, gözlemlenen simge stilini önizlemeler için seçilen serbestçe lisanslı kitten açıkça ayırır.

OpenDesign

Bir Sonraki Tasarım Yinelemesine Yer Açın.

Brief'inizi, 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.

Üst Kaynak Dosyası
https://github.com/dominikmartn/hue/blob/a910e31cd24b45b9455c0c3502150413aa5a3b32/SKILL.md