brand-landingpageyazan Seth Hobson

Brand Landing Page Skill.

Claude Code ve Codex için UI tasarımı skill'i: önce marka kimliği görüşmesi, ardından Stitch üzerinden açılış sayfası oluşturur ve iterasyon yapar.

Web & UI
UI kodu

OpenDesign İndir Kullanım kılavuzunu görüntüle

wshobson/agents · plugins/brand-landingpage/skills/brand-landingpage/SKILL.mdSKILL.md

--- name: brand-landingpage description: Brand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML. Use when the user asks to create, design, or build a landing page, homepage, or marketing page and has no established visual direction. Skip when they have a design mockup, need a dashboard or app UI, are working at … --- ## Phase 0: Prerequisites & Stitch Connection ## Phase 1: Brand Interview ## Phase 2: Design System Creation ## Phase 3: Generate & Review Loop ## Phase 4: Delivery Bundle ## Stitch Documentation

Ön bilgi ve bölüm başlıkları 2026-09-14 tarihinde kaynak dosyadan okunmuştur · tam hali 15.626 karakter

01 Ne yapar

brand-landingpage Skill'inin Claude Code ve Codex İçinde Yaptığı

Ö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

Üç bölümlü bir görüşme (ürün amacı, marka hissi, görsel tercihler) yürüten, yanıtları bir Stitch design system'e çeviren (sıfatları colorVariant'a, yazı tiplerini headlineFont/bodyFont'a, şekilleri roundness'a eşleyerek), masaüstü ve mobil ekranlar üreten, yapılandırılmış geri bildirim (varyantlar, düzenlemeler, geri alma) yoluyla yinelemeli iyileştirmeye öncülük eden ve sürümlenmiş HTML, DESIGN.md, renk token'ları ve DEPLOY.md içeren dağıtıma hazır bir paket sunan marka odaklı bir açılış sayfası tasarımcısı.

Belirli bir görsel yönü olmayan, tek amaçlı açılış sayfaları veya ürün pazarlama siteleri oluşturan kullanıcılar için. Panolar, çok sayfalı uygulamalar, bileşen düzeyinde çalışmalar veya mevcut tasarım maketleri olan kullanıcılar için değil.

Neler üretir

index.html (masaüstü), mobile.html (oluşturulmuşsa), DESIGN.md, color-tokens.json, kullanıcı varlıkları ve DEPLOY.md kontrol listesi içeren dağıtıma hazır zip paketi
Marka hissi, onaltılık kod ve gerekçesiyle renk yönü, tipografi seçimleri ve şekil yuvarlaklık açıklamasıyla design system'i belgeleyen DESIGN.md
Yapılandırılmış tasarım token'ları içeren color-tokens.json: birincil renk, colorMode, colorVariant, yazı tipleri, roundness
references/state-and-pitfalls.md içindeki şablondan oluşturulan DEPLOY.md dağıtım kontrol listesi

Örnek istemi görün ↗

Nasıl Çalışır

01
Stitch SDK ve Ortamı Doğrulayın
Görüşmeye başlamadan önce, skill eksikse SDK'yı kurar, API anahtarı ortam değişkeninin ayarlandığını doğrular ve kimlik doğrulamayı onaylamak için minimum bir SDK çağrısı yapar.
02
Üç Bölümlü Marka Görüşmesi Yürütün
A Aşaması ürün adını, ne yaptığını, hedef kullanıcıları ve istenen CTA'yı yakalar. B Aşaması 3 marka sıfatını ve açık/koyu tercihini yakalar.
03
Görüşmeyi Stitch Parametrelerine Çevirin
Skill, marka sıfatlarını colorVariant enum'una, açık/koyu tercihini colorMode'a, yazı tipi tercihini headlineFont ve bodyFont'a, keskin/yuvarlak tercihini bir çeviri tablosu kullanarak roundness enum'una eşler.
04
Ekranı Oluşturun ve Tarayıcıda Açın
Skill, deviceType DESKTOP ile generate_screen_from_text'i çağırır, döndürülen HTML'i .stitch/designs/ içinde desktop-v1.html olarak kaydeder ve işletim sistemine özel komutu kullanarak yerel olarak açar.
05
Geri Bildirim Döngüsünü Tekrarlayın
Her üretimden sonra skill üç geri bildirim sorusu sorar, kullanıcı geri bildirimini hedefli değişiklikler için edit_screens çağrılarına veya keşif için generate_variants çağrılarına dönüştürür ve yeni sürümleri artan dosya adlarıyla kaydeder.
06
Dağıtım Paketini Teslim Edin
Skill; nihai HTML'in index.html olarak yeniden adlandırıldığı, üretildiyse mobile.html, marka sistemini belgeleyen DESIGN.md, color-tokens.json, kullanıcı varlıkları ve bir DEPLOY.md kontrol listesi içeren bir zip oluşturur.

02 Uyumunuzu bulun

brand-landingpage Skill Ne Zaman Kullanılır

Bu tür UI tasarımı işinde brand-landingpage skill'ini Claude Code veya Codex'te kullanın. Uygunluk ve sınırlar, skill'in kendi dosyasından alınmıştır.

İyi Uyum

Kullanıcı bir açılış sayfası, ana sayfa veya pazarlama sayfası oluşturmak, tasarlamak ya da inşa etmek istiyor ve henüz belirlenmiş bir görsel yönü yok
Kullanıcı bir ürün, yan proje veya hizmet geliştirmiş ve bir açılış sayfasına ihtiyacı var ama marka kimliği veya görsel yön konusunda çok düşünmemiş
Tek amaçlı açılış sayfaları ve ürün pazarlama siteleri

Sınırları Bilin

Kullanıcının bir tasarım maketi var
Kullanıcının bir dashboard veya uygulama arayüzüne ihtiyacı var
Kullanıcı bileşen düzeyinde çalışıyor
Kullanıcı çok sayfalı bir uygulama oluşturuyor veya bilinen tasarım token'larıyla yeniden tasarlıyor (bunun yerine frontend-design kullanın)

Ne Sağlamalısınız

Ürün adı ve amacıÜrünün ne yaptığı, hedef kullanıcıların kimler olduğu ve ziyaretçilerin ne yapması gerektiği (kaydolma, demo deneme, bekleme listesine katılma).
Üç marka sıfatıSkill, seçilebilecek bir sıfat menüsü sunar. Faz B'den Faz C'ye geçmek için gereklidir.
Açık veya koyu tercihiStitch tasarım sistemindeki colorMode parametresine (LIGHT veya DARK) doğrudan karşılık gelir.
Renk yönüMevcut marka veya uygulama renkleri hex olarak, ya da yerleşik bir paletleri yoksa istenen bir renk hissi. customColor parametresine karşılık gelir.
Yazı tipi ve şekil tercihleriModern ile geleneksel yazı tipi tercihi headlineFont ve bodyFont'a karşılık gelir.

03 Skill'in içinde

brand-landingpage Skill'inin Claude Code ve Codex'e Verdiği Kurallar

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

API Anahtarlarını Asla Görüntülemeyin
Skill, ortamı doğrularken veya kimlik doğrulama hatalarını teşhis ederken Stitch API anahtarını asla görüntülememeli, yazıya dökmemeli veya tekrar etmemelidir.
Görsel İstemeyin
Skill, kullanıcılardan görsel veya logo sağlamalarını istememelidir çünkü Stitch API üzerinden görsel yüklemeyi kabul etmez.
HTML Dosyalarını Sıralı Olarak Sürümleyin
Üretilen HTML'i ilk üretim için desktop-v1.html, sonraki yineleme için desktop-v2.html olarak kaydedin ve bu şekilde devam edin.
Güncellenmiş HTML'i Her Zaman Tarayıcıda Açın
Her üretim, düzenleme veya varyant seçiminden sonra skill, güncellenmiş HTML'yi Stitch yanıtından kaydetmeli ve yerel dosyayı kullanıcının tarayıcısında açmalıdır.
3 Olumlu Turdan Sonra Yayınlamayı Öner
3 tur olumlu geri bildirimden sonra skill şunu sormalıdır: 'Bu iyi görünüyor. İterasyona devam mı edelim yoksa yayınlayıp sonra mı iyileştirelim?'
Dört Vazgeçilmez Görüşme Sorusu
Skill, Faz A'dan Faz B'ye geçmeden önce proje adını, ne yaptığını, hedef kullanıcıları ve istenen CTA'yı toplamalıdır. Bu dört soru vazgeçilmezdir.
Başarısız Üretimleri Hemen Yeniden Denemeyin
Üretim başarısız olursa hemen yeniden denemeyin. İşlemin asenkron olarak tamamlanıp tamamlanmadığını kontrol etmek için get_screen veya list_screens kullanın.

04 İşe koyun

brand-landingpage'i 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.

brand-landingpage'i 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/wshobson/agents --skill brand-landingpage

plugins/brand-landingpage/skills/brand-landingpage/SKILL.md için genel skills CLI biçimi; depo kendi yolunu belgeleyebilir.

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

SKILL.md bir örnek prompt içermez; bu başlangıç, katalog tek satırından yazılmıştır. Görev satırını gerçek brief'inizle değiştirin.

Starter prompt

Use the brand-landingpage skill on the material I attach. What the skill should do here: Brand-identity interview first, then generates and iterates a landing page through Stitch. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

Kaynak: katalog tek satır kullanımından yazılmış başlangıç promptu (SKILL.md'den değil).

İlk Sonucu Kontrol Edin

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

Tasarımı tam sadakatle görmek için işletim sistemine özel komut kullanarak (macOS'te open, Linux'te xdg-open, Windows'ta start) kaydedilen HTML dosyasını kullanıcının tarayıcısında açın
Üç geri bildirim sorusunu sorun: ilk 5 saniyedeki içgüdüsel tepki, bunun kendi ürünleri gibi hissedilip hissedilmediği ve yanlış veya eksik hissedilen bir şey olup olmadığı
Kullanıcının dikkatini belirli tasarım boyutlarına çekin: mesaj netliği, CTA görünürlüğü, renklerin belirttikleri sıfatlarla uyumu ve okuma akışı
Bir oturum devam ettirilirken .stitch/metadata.json dosyasının var olduğunu ve proje ID'si, tasarım sistemi varlık ID'si, görüşme özeti ile ekran geçmişini içerdiğini doğrulayın
Barındırma, alan adı kurulumu, analitik ve görsel değişimlerini kapsayan DEPLOY.md dosyasındaki dağıtım kontrol listesini izleyin

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

OpenDesign İndir Hızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

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

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Skill dosyası: plugins/brand-landingpage/skills/brand-landingpage/SKILL.md İçerik sağlama toplamı doğrulamada kaydedildi; commit 4236bb9
License: MIT LICENSE dosyasından.
Repository yıldızları: 39.635 GitHub anlık görüntüsü 2026-09-14 tarihinde, bu katalogda 18 skill içeren wshobson/agents deposunun tamamı için alınmıştır. brand-landingpage için bir değerlendirme 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

Faz 0: Ön Koşullar ve Stitch BağlantısıGörüşmeye başlamadan önce SDK kurulumunu, API anahtarı ortam değişkenini doğrulayın ve minimal bir test çağrısı yapın
Referans DosyalarWorkflow sırasında interview-framework.md, stitch-architecture.md ve state-and-pitfalls.md dosyalarının ne zaman okunacağını listeler
Workflow Genel BakışıDört faz: kurulum, üç bölümlü görüşme, tasarım sistemi çevirisi, üretim ve inceleme döngüsü, teslim paketi
Faz 1: Marka GörüşmesiÜç bölüm: ürün amacı, sıfatlarla marka hissi, renk yazı tipi ve şekil için görsel tercihler
Faz 2: Tasarım Sistemi OluşturmaGörüşme yanıtlarını eşleştirme tablosuyla Stitch parametrelerine çevirin, tasarım sistemini oluşturun ve güncelleyin, DESIGN.md yazın
Faz 3: Üretim ve İnceleme DöngüsüMasaüstü ekranı üretin, tarayıcıda açın, üç soru üzerinden geri bildirim toplayın, düzenlemeler veya varyantlarla iterasyon yapın
Faz 4: Teslim PaketiSon HTML'yi, DESIGN.md'yi, renk token'larını, kullanıcı varlıklarını ve DEPLOY.md kontrol listesini sürümlü bir zip içine paketleyin
Stitch Belgeleristitch-design.ai adresindeki SDK kullanım belgelerine ve DESIGN.md örneklerine bağlantılar
Devam Ettirme ve Hata Kurtarmametadata.json'dan durumu yükleyin, üretim hatalarını, hız sınırlamasını ve devam ettirmede süresi dolmuş projeleri ele alın

Skill'in Kendi Açıklaması

"Marka odaklı açılış sayfası tasarımcısı — bir marka kimliği görüşmesi yürütür (renkler, tipografi, şekil dili), ardından Stitch aracılığıyla dağıtıma hazır HTML ile cilalı bir açılış sayfası üretir ve üzerinde iterasyon yapar. Kullanıcı bir açılış sayfası, ana sayfa veya pazarlama sayfası oluşturmayı, tasarlamayı veya inşa etmeyi istediğinde ve yerleşik bir görsel yönü olmadığında kullanın. Bir tasarım mockup'ları varsa, bir gösterge paneli veya uygulama UI'ına ihtiyaç duyuyorlarsa, bileşen düzeyinde çalışıyorlarsa, çok sayfalı bir uygulama inşa ediyorlarsa veya bilinen tasarım token'larıyla yeniden stil veriyorlarsa atla — bunun yerine frontend-design kullanın."

SKILL.md dosyasındaki ön bilgi açıklaması. Tam dosya yaklaşık 15.626 karakter uzunluğundadır. Tam dosyayı GitHub'da okuyun.

06 Kurmadan önce

brand-landingpage 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.

Kendi logomu veya ürün ekran görüntülerimi verebilir miyim?

Stitch, metin komutlarından üretim yapar ve API üzerinden görsel yüklemesi kabul etmez. Bir görsel eklerseniz, skill sizden bunun baskın renklerini, ruh halini ve şekil dilini kendi ifadelerinizle tanımlamanızı ister, ardından bu özellikleri tasarıma dahil eder.

Orijinal dosyanız paket içinde saklanır, böylece basit bir img etiketi değişikliğiyle bunu nihai HTML'ye yerleştirebilirsiniz.

Neden doğrudan üretime geçmek yerine görüşmeden geçmem gerekiyor?

Değerin büyük kısmı görüşmede oluşur. Görüşme olmadan sonuç, sıradan bir şablon olurdu.

Görüşme yaklaşık 5 dakika sürer ve ürün amacını, hedef kullanıcıları, marka sıfatlarını ve görsel tercihleri yakalar; skill bunları tek tip bir çıktı yerine gerçekten markanıza uyan bir tasarım sistemine dönüştürür.

Sonunda ne elde ederim?

index.html olarak yeniden adlandırılmış nihai masaüstü HTML'yi, mobil bir varyant istediyseniz mobile.html'yi, marka tasarım sisteminizi belgeleyen DESIGN.md'yi, yapılandırılmış tasarım token'larını içeren color-tokens.json'ı, kullanıcı tarafından sağlanan tüm varlıkları ve bir dağıtım kontrol listesi içeren DEPLOY.md'yi barındıran, dağıtıma hazır bir zip paketi. Tüm ara sürümler ve durum, referans için .stitch/ içinde saklanır.

Marka Açılış Sayfası

brand-landingpage becerisini gerçek bir UI tasarım görevinde çalıştırın.

OpenDesign'ı indirin, brand-landingpage'i SKILL.md bağlantısından içe aktarın, yukarıdaki prompt'u yapıştırın ve sonucu görmeden önce planı okuyun.

OpenDesign'ı İndirin Tüm skill'lere göz atın