Kullanım kılavuzuna geç
huashu-designyazan alchaincyf

Huashu Design Skill.

Claude Code ve Codex için UI tasarım skill'i: yüksek kaliteli HTML prototipleri, slaytlar, animasyon ve görselleştirmeler; üç taslakla başlar.

  • Web & UI
  • HTML
alchaincyf/huashu-design · SKILL.mdSKILL.md
--- name: huashu-design description: 花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选(指定风格/品牌也不豁免),选定后才执行。触发词:做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。 --- ## 你是谁 ## 使用前提 ## 任务路由:一张表定入口 ## 核心原则 #0 · 事实验证先于假设(优先级最高,凌驾所有其他流程) ## 核心哲学(优先级从高到低) ## 设计方向顾问(Fallback 模式)
Ön bilgi ve bölüm başlıkları yukarı akış dosyasından 2026-09-14 tarihinde okundu · tam hâliyle 33.602 karakter

01 Ne yapar

huashu-design Skill'i Claude Code ve Codex'te Ne Yapar

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

Huashu-Design, bir ajanı yüksek doğruluklu prototipler, sunum destelerini, hareket demolarını ve görselleştirmeleri üretebilen HTML tabanlı bir tasarım stüdyosuna dönüştürür. Herhangi bir yeni görsel çalışmadan önce, bir stil veya marka belirtilmiş olsa bile, üç farklılaştırılmış yön taslağı oluşturulmasını zorunlu kılar; böylece kullanıcı, tek bir yapay zekanın belirlediği cevap yerine gerçekten render edilmiş seçenekler arasından seçim yapar.

Tahmin etmek yerine bir marka varlığı protokolü (logolar, ürün fotoğrafları, gerçek renk değerleri) çalıştırır, tasarımdan önce ürünlerle ilgili gerçek iddiaları WebSearch ile doğrular ve renk, ikon, kart ve görsel kullanımı için açık anti-AI-slop kurallarını uygular. Üretim web uygulamaları veya backend odaklı sistemler için tasarlanmamıştır.

Neler üretir

  • Açıklayıcı adlandırılmış HTML tasarım dosyaları, yoğun şekilde revize edildiğinde sürümlendirilir
  • Genel görünüm duvarına sahip, otomatik olarak PDF'e aktarılan ve isteğe bağlı olarak düzenlenebilir PPTX üretilebilen çok sayfalı HTML deste
  • Varsayılan olarak BGM ve SFX içeren MP4 animasyon dışa aktarımları
  • Varlıkları ve kullanıcının seçtiği yönü belgeleyen brand-spec.md ve direction-approved.md gibi geçit dosyaları
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Önce Gerçekleri Doğrulayın

    Gerçek bir ürün, teknoloji veya etkinlikle bağlantılı herhangi bir şey tasarlamadan önce ajan, eğitim belleğine güvenmek yerine varlığını, sürüm durumunu, sürümünü ve özelliklerini WebSearch ile doğrulamalıdır.

  2. 02
    Görevi Yönlendirin

    Bir sinyal tablosu, iş başlamadan önce görev ipuçlarını (marka adı, slayt/PPT, animasyon/dışa aktarım, uygulama/iOS prototipi, eleştiri) doğru giriş noktasına ve referans dosyasına eşler.

  3. 03
    Üç Yönlü Fallback'i Çalıştırın

    Yeni görseller üreten her görev Aşama 1-6'dan geçer: ihtiyaçları açıklığa kavuşturun, brief'i yeniden ifade edin, bir tasarım şartnamesini kilitleyin, gerçek görseller bulun, üç paralel tasarım mantığı oluşturun, ardından kullanıcının seçimini bekleyin.

  4. 04
    Beş Form Sorusunu Yanıtlayın

    Her sayfa veya çekim için ajan, tasarım sistemini oluşturmadan önce anlatı rolünü, görüntüleme mesafesini, görsel sıcaklığı, içerik kapasitesini ve görsel motifi yanıtlamalıdır.

  5. 05
    Doğrulamayla Dışa Aktarın

    Animasyonlar varsayılan olarak BGM ve SFX içeren MP4'e render edilir ve ffprobe ile bir ses akışı olup olmadığı kontrol edilir; destler otomatik olarak PDF'e ve isteğe bağlı olarak düzenlenebilir PPTX'e aktarılır.

02 Uyumunuzu bulun

huashu-design Skill Ne Zaman Kullanılır

Bu tür bir kullanıcı arayüzü tasarımı işinde Claude Code veya Codex'te huashu-design becerisini kullanın. Uygunluk ve sınırlar becerinin kendi dosyasından alınmıştır.

İyi Uyum

  • Kullanıcının tıklayarak gezinebileceği ve akışı hissedebileceği etkileşimli, yüksek kaliteli ürün mockup'ları
  • Bir PPT gibi işlev görmesi amaçlanan 1920x1080 HTML slayt setleri
  • Video materyali veya konsept demo olarak kullanılan, zaman çizelgesi tabanlı hareket tasarımı
  • Baskı kalitesinde infografikler ve veri odaklı görselleştirmeler
  • Birden fazla tasarım yönünü yan yana karşılaştırmak veya Tweaks ile ince ayar yapmak

Sınırları Bilin

  • Backend gerektiren, üretim seviyesinde web uygulamaları veya sistemler kapsam dışıdır
  • SEO web siteleri ve dinamik, backend odaklı sistemler bu skill'den geçmez

Ne Sağlamalısınız

  • Marka varlığı kontrol listesiLogo, ürün görselleri, UI ekran görüntüleri, renk paleti, fontlar ve yasaklı alanlar, resmi kanallarda arama yapılmadan önce tek bir toplu istekle sorulur.
  • Stil veya marka referansıBeğenilen bir web sitesi URL'si, ekran görüntüsü veya hissiyatı eşleştirilmesi istenen bir ürün; hiçbiri yoksa ajan belirtilen bir varsayımla devam eder.
  • Mevcut tasarım sistemi veya kod tabanıAjan, sıfırdan herhangi bir hi-fi tasarım yapmadan önce bir tasarım sistemi, UI kiti, kod tabanı veya Figma bulunup bulunmadığını önce kontrol eder.

03 Skill'in içinde

huashu-design Skill'inin Claude Code ve Codex'e Verdiği Kurallar

SKILL.md'nin ajan için belirlediği 8 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

  1. Üç Yönlü Gate %100 Zorunludur

    Yeni görseller üreten her görev, kullanıcı bir stil veya marka belirtse bile, uygulamadan önce birbirinden farklı üç yön taslağı göstermelidir; yalnızca üç sınırlı istisna geçerlidir.

  2. Logo Zorunlu Bir Varlıktır

    Bir tasarımda tanınabilir bir ürün veya marka adı görünüyorsa, resmi logosunu getirmek opsiyonel değil zorunludur; kaç ürün görünüyorsa o kadar logo gerekir.

  3. Kötü Uygulama Yerine Placeholder

    Eksik ikonlar, kötü çizilmiş bir SVG yerine gri bir blok ve metin etiketiyle gösterilir; eksik veri için ise sayı icat edilmez, dürüst bir yorum yazılır.

  4. Doldurma İçerik Yok

    Her öğe yerini hak etmelidir; boş alan, istatistik icat etmek, her başlığa ikon eklemek veya her yere gradyan koymak yerine kompozisyonla çözülür.

  5. Belirlenmiş AI-slop Kalıplarından Kaçının

    Mor gradyanlar, emoji ikonlar, renkli sol kenarlıklı yuvarlatılmış kartlar ve AI ile çizilmiş SVG insan/yüz görselleri, marka bunları zaten kullanmadıkça kaçınılması gereken varsayılan AI görsel kalıpları olarak işaretlenir.

  6. React Kapsam Kısıtlamaları

    Birden fazla bileşen çakışacağı için bir stil nesnesine asla const styles = {...} adı verilmemelidir; bileşenler script etiketleri arasında Object.assign(window, {...}) ile export edilmelidir.

  7. Animasyon Export'ları Varsayılan Olarak Audio'dur

    Animasyon HTML'i varsayılan olarak hem BGM hem SFX içeren bir MP4 olarak teslim edilir; kullanıcı açıkça sessiz istemedikçe sessiz bir sürüm eksik bir teslimat olarak kabul edilir.

  8. Sunumlar Varsayılan Olarak Genel Bakış Duvarı ile Çok Dosyalı

    Slayt sunumları varsayılan olarak birden çok HTML dosyası ile genel bakış olarak assets/deck_index.html içerir; tek dosyalı mimari yalnızca genel bakışa açıkça gerek olmayan ≤5 sayfalık minimal pitch'ler için kullanılır.

04 İşe koyun

huashu-design'ı Claude Code veya Codex'e Yükleyin

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

huashu-design'ı Claude Code, Codex veya Ajanınıza Ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal
npx skills add https://github.com/alchaincyf/huashu-design --skill huashu-design

SKILL.md için genel skills CLI formu; depo kendi yolunu belgeleyebilir.

Skill'e İlk UI Tasarım Görevini Verin

Bu isteği kendi içeriğiniz ve kısıtlamalarınızla uyarlayın, ardından Claude Code veya Codex'te çalıştırın.

Example prompt
做个咖啡主题的 PPT

Kaynak: SKILL.md örneği (birebir).

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

  • Teslim etmeden önce bir Playwright ekran görüntüsü alın ve konsol hatalarını kontrol edin
  • AI tarafından yazılan kodda genellikle etkileşim hataları olduğundan teslimden önce sonucu tarayıcıda bizzat inceleyin
  • Uygulama prototiplerinde sıfır pageerror ile üç Playwright tıklama testi çalıştırın (detay görünümü, temel hotspot, sekme değiştirme)
  • Okunabilirlik alt sınırını kontrol edin: gövde metni en az 14px, etiketler en az 12px, kontrast en az 4.5:1

OpenDesign'da huashu-design'ı SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubuktan seçin.

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Skill dosyası
SKILL.md İçerik doğrulama toplamı doğrulama sırasında kaydedildi; commit a790f70
License
MIT LICENSE'dan.
Repository yıldızları
24.121 14 Eylül 2026 tarihinde tüm alchaincyf/huashu-design deposu için alınan GitHub anlık görüntüsü. huashu-design için bir derecelendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı
2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

  1. 你是谁Ajanı altı rol üstlenen bir stüdyo olarak çerçeveler: sanat yönetmeni, marka araştırmacısı, görsel/hareket tasarımcı, mühendis, metin yazarı.
  2. Ön koşullarSkill'in hangi çıktı türlerini kapsadığını ve üretim ortamındaki web uygulamalarının kapsam dışı olduğunu belirtir.
  3. 任务路由:一张表定入口Görev sinyallerini doğru giriş noktası ve referans dosyasıyla eşleştiren tablo.
  4. 核心原则 #0 · 事实验证先于假设Herhangi bir tasarım işi başlamadan önce ürün gerçeklerinin WebSearch ile doğrulanmasını gerektirir.
  5. 核心哲学(优先级从高到低)Altı sıralı ilke: mevcut bağlamı kullan, inşa etmeden önce hizala, varyasyonlar ver, yer tutucuları tercih et, doldurmadan kaçın, AI slop'tan kaçın.
  6. 设计方向顾问(Fallback 模式)Uygulamadan önce üç paralel tasarım yönü üreten zorunlu yedi aşamalı süreci tanımlar.
  7. App / iOS 原型专属守则(速查版)Mobil uygulama prototipleri için mimari, görseller, cihaz çerçeveleri, tıklama testlerini kapsayan özel geçersiz kılan kurallar.
  8. 工作流程Kontrol noktaları, gate-file protokolü ve soru şablonları içeren numaralandırılmış standart iş akışı.
  9. 异常处理Belirsiz istekler, reddedilen sorular, çakışan bağlam, sıkışık son teslim tarihleri için önceden tanımlanmış yedek eylemler.
  10. 技术红线(必读 references/react-setup.md)Müzakere edilemez React/Babel ve Stage/Sprite uygulama kısıtlamaları.
  11. Starter Components(assets/下)Hazır bileşenleri listeler (deck_index.html, animations.jsx, ios_frame.jsx vb.) ve her birinin ne zaman kullanılacağını belirtir.
  12. 产出要求Adlandırma kuralları, sürümleme, dosya konumu ve son tarayıcı/Playwright kontrol gereksinimleri.
Skill'in Kendi Açıklaması
"Huashu Design — HTML ile yüksek kaliteli prototip, sunum, animasyon, görselleştirme ve uzman değerlendirmesi yapın. Her yeni tasarım %100 önce kullanıcının seçmesi için üç farklı yön taslağı ile başlar (belirtilen stil/marka bile muaf değildir), seçim yapıldıktan sonra uygulamaya geçilir. Tetikleyici kelimeler: prototip yap, PPT, sunum, animasyon, tasarım stili, değerlendirme, bir HTML sayfası yap, UI mockup, MP4/GIF dışa aktar, güzel bir şey yap. Üretim seviyesi Web App/arka uç gerektiren sistemler için uygun değildir."

SKILL.md dosyasından ön tanım açıklaması. Dosyanın tamamı yaklaşık 33.602 karakterdir. GitHub'da dosyanın tamamını okuyun.

06 Kurmadan önce

huashu-design Skill Hakkında Sorular

Yanıtlar, 2026-09-14 tarihinde okunan SKILL.md üzerinden alınmıştır, kaydedilmiş bir çalıştırmadan değil.

Bu skill sadece Claude Code'da mı çalışıyor?

Hayır, skill ajan-bağımsız olarak tanımlanır ve Claude Code, Codex, Cursor, Trae, OpenClaw, Hermes Agent veya markdown tabanlı herhangi bir skill ajanında çalışır; alt-ajan oluşturamayan daha zayıf runtime'lar için belgelenmiş bir düşük mod içerir.

Huashu Design

huashu-design ile gerçek bir UI tasarım görevi üzerinde çalışın.

OpenDesign'ı indirin, huashu-design'ı SKILL.md bağlantısından içe aktarın, yukarıdaki istemi yapıştırın ve sonuçtan önce planı okuyun.

Terminal
npx skills add https://github.com/alchaincyf/huashu-design --skill huashu-design

OpenDesign Masaüstü

Tek tasarım sistemi. Her çıktıda tutarlı bir marka

Tam Vibe Design Workspace içinde aynı marka kurallarını web sitelerine, sunumlara, etkileşimli prototiplere, panolara, görsellere ve HTML videolara uygulayın. Yerel Codex, Claude Code, Cursor ve diğer kodlama ajanlarını bağlayıp ücretsiz üretin.

  • Web, sunum, prototip, pano, görsel ve video
  • 140+ tasarım sistemi ve eksiksiz şablon ile beceri kitaplığı
  • Yerel Codex ve 21+ kodlama ajanını bağlayın · Ücretsiz
Ücretsiz indir

macOS ve Windows için