design-htmlyazan Garry Tan

Design HTML Skill.

Claude Code ve Codex için kullanıcı arayüzü tasarımına yönelik bir skill: üzerinde anlaşılan tasarım yönünden üretime hazır HTML/CSS üretir.

Web & UI
HTML

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

garrytan/gstack · design-html/SKILL.mdSKILL.md

--- name: design-html description: Design finalization: generates production-quality Pretext-native HTML/CSS. (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)

Üst bilgi ve bölüm başlıkları yukarı akış dosyasından 2026-09-14 tarihinde okundu · tam haliyle 54.976 karakter

01 Ne yapar

Claude Code ve Codex'te design-html Skill'inin Yaptıkları

Ö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

Metnin gerçekten yeniden aktığı, yüksekliklerin dinamik olarak hesaplandığı ve düzenlerin yeniden boyutlandırmada uyum sağladığı Pretext yerel metin düzenine sahip üretim kalitesinde HTML/CSS üretir. Onaylanmış mockup'lardan (/design-shotgun), CEO planlarından (/plan-ceo-review), tasarım inceleme bağlamından veya kullanıcı açıklamalarından çalışır. Tasarım karmaşıklığına göre doğru Pretext API katmanına yönlendirir (basit düzenler prepare + layout kullanır; sohbet arayüzleri prepareWithSegments + walkLineRanges kullanır; editoryal düzenler engellerin etrafına metin için layoutNextLine kullanır).

30KB ek yük, sıfır bağımlılık. Kendi içinde bütün HTML dosyaları (satır içi hazır Pretext ile) veya framework bileşenleri (React/Svelte/Vue) üretir. Anında tarayıcı önizlemesi için canlı yeniden yükleme sunucusuyla varsayılan olarak vanilla HTML kullanır. Asla lorem ipsum kullanmaz—mockup'lardan gerçek içerik çıkarır veya planlardan gerçekçi metin üretir.

Neler üretir

Satır içi hazır Pretext, token'lardan gelen CSS özel özellikleri, semantik HTML5, canlı düzenleme için contenteditable + MutationObserver, yeniden boyutlandırmada yeniden düzen için ResizeObserver içeren, ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/finalized.html konumuna kaydedilen kendi içinde bütün HTML dosyası
Proje bağımlılıklarına eklenen Pretext içe aktarmalarıyla, ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/finalized.[tsx|svelte|vue] konumuna kaydedilen framework bileşen dosyası (React TSX/JSX, Svelte, Vue)
source_mockup yolu, source_plan yolu, mod (approved-mockup/plan-driven/freeform/evolve), pretext_tier, framework seçimi, yineleme sayısı, tarih, ekran adı, dal bilgisini taşıyan HTML ile birlikte finalized.json meta verisi
Kullanıcı çıkarma teklifini kabul ederse, üretilen HTML'den çıkarılan CSS özel özellikleri, yazı tipi aileleri, renk paleti, boşluk ölçeği, kenarlık yarıçapı, gölge değerlerini içeren, açık DESIGN.md formatında DESIGN.md dosyası

Örnek istemi görün ↗

Nasıl Çalışır

01
Tasarım Bağlamını Tespit Et ve Yönlendir
/design-shotgun'dan approved.json, CEO planları, tasarım varyantları veya DESIGN.md token'larını kontrol eder.
02
Uygulama Spesifikasyonunu Çıkar
Tasarım binary'si varsa, onaylanmış PNG üzerinde prompt komutunu çalıştırarak renkleri, tipografiyi, düzen yapısını GPT-4o vision aracılığıyla çıkarır.
03
Akıllı Pretext API Yönlendirmesi
Tasarımı katmana ayırır: basit düzenler yeniden boyutlandırmaya duyarlı yükseklikler için prepare + layout kullanır; kart ızgaraları kendi boyutunu ayarlamak için aynısını kullanır; sohbet arayüzleri sıkı oturan baloncuklar için prepareWithSegments + walkLineRanges kullanır; editoryal düzenler engellerin etrafında metin için layoutNextLine kullanır.
04
Pretext-native HTML Oluştur
Vendored Pretext'in satır içi olarak eklendiği (veya CDN yedeği), token'lardan gelen CSS özel özellikleriyle, semantik HTML5 ile, canlı düzenleme için contenteditable + MutationObserver ile, yeniden boyutlandırmada yeniden düzenleme için ResizeObserver ile, mockup veya plandan çıkarılan gerçek içerikle tek bir dosya yazar.
05
Önizlemeden Önce Slop Kapısı Taraması
Tasarım detektörü varsa, tamamlanmış sayfayı AI-slop desenleri (mor gradyanlar, aynı kart ızgaraları, mockup'tan gelmeyen genel CTA'lar) için bir kez tarar.

02 Uyumunuzu bulun

design-html Skill ne zaman kullanılır

İş bu türden UI tasarımı olduğunda Claude Code veya Codex'te design-html skill'ini kullanın. Aşağıdaki uyum ve sınırlar skill'in kendi dosyasından alınmıştır.

İyi Uyum

İçeriklerine göre sabit kodlanmış yükseklikler olmadan kendi boyutunu ayarlaması gereken kartların bulunduğu bir gösterge paneli, listeleme sayfası veya kart ızgarası oluşturma
Baloncukların metne sıkıca oturması ve minimum genişliği doğru şekilde hesaplaması gereken bir sohbet veya mesajlaşma arayüzü uygulama
/design-shotgun onaylı mockup, /plan-ceo-review ürün stratejisi veya /plan-design-review bağlamı mevcut olduğunda bir tasarımı sonlandırma
Metnin engellerin veya görsellerin etrafında dinamik olarak akması gereken bir editoryal düzen, blog düzeni veya içerik yoğun sayfa oluşturma

Sınırları Bilin

Yer tutucu içerik veya lorem ipsum gerektiren projeler—skill her zaman mockup'lardan, planlardan veya kullanıcı açıklamalarından çıkarılan gerçek içerik üretir
İnsan incelemesi olmadan otomatik çalıştırmalar—tasarım detektörü kurulum önerisi ve iyileştirme döngüsü, AskUserQuestion üzerinden kullanıcı kararları gerektirir

Ne Sağlamalısınız

Onaylanmış tasarım mockup PNG'siapproved.json içinde kaydedilmiş /design-shotgun'dan onaylı varyantın yolu veya kullanıcının sağladığı PNG yolu.
CEO planı veya tasarım inceleme notlarıÜrün vizyonu, UI gereksinimleri, kullanıcı akışları, hedef kitle, görsel his, içerik yapısı içeren /plan-ceo-review veya /plan-design-review'den markdown dosyası.
DESIGN.md token'larıMarka renkleri, yazı tipi ailesi, boşluk ölçeği, kenar yuvarlaklığı, gölge değerleri içeren deponun tasarım sistemi dosyası.
Serbest mod için kullanıcı açıklamasıMockup veya plan olmadığında, kullanıcı amaç/hedef kitle, görsel his (koyu/açık, eğlenceli/ciddi, yoğun/geniş), içerik yapısı, referans siteleri sağlar.
Evolve modu için önceki finalized.htmlÖnceki oturumdan mevcut sonlandırılmış HTML.

03 Skill'in içinde

design-html Skill'in Claude Code ve Codex'e Verdiği Kurallar

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

Metin Düzeni İçin Her Zaman Pretext Kullan
Tasarım basit görünse bile, Pretext yeniden boyutlandırmada doğru yükseklik hesaplamasını garanti eder. Ek yük 30KB'dır. Her sayfa bundan yararlanır.
Yer Tutucu Metin Değil, Her Zaman Gerçek İçerik
Bir mockup mevcutsa, metni ondan çıkarın. Plan odaklı modda, plandaki içeriği kullanın. Özgür formda ise kullanıcı açıklamasına dayanarak gerçekçi içerik üretin.
Kod Zarafeti Değil, Doğruluk Kaynağına Sadakat
Onaylanmış bir mockup mevcutsa, onu piksel piksel eşleştirin. Bu, CSS grid sınıfı yerine width: 312px gerektiriyorsa, bu doğrudur.
İyileştirme Döngüsünde Cerrahi Düzenlemeler, Asla Yeniden Üretme
Hedeflenmiş değişiklikler yapmak için Edit tool kullanın, tüm dosyayı yeniden üretmek için Write tool değil. Kullanıcı, korunması gereken contenteditable üzerinden manuel düzenlemeler yapmış olabilir.
Her Çağrı için Bir Sayfa
Çok sayfalı tasarımlar için, /design-html komutunu sayfa başına bir kez çalıştırın. Her çalıştırma bir HTML dosyası üretir.
Varsayılan Olarak Uygulanan AI-slop Kara Listesi
Onaylanmış mockup böyle bir şey içermedikçe, DESIGN.md bunu onaylamadıkça veya kullanıcı açıkça isteyip ödünleşimi bir kez belirtmedikçe; mor/mavi gradyanlar, krem-ve-serif palet, gradyan metin, jenerik 3 sütunlu özellik gridleri, birbirinin aynı kart gridleri, her şeyi ortalayan düzenler, başlıkların üzerinde kickerlar, hero metrik satırları, dekoratif bloblar, parlayan kenarlar, stok fotoğraf yer tutucuları, jenerik CTA'lar, gölgeli yuvarlak köşeli kartlar, emoji dekorasyonu, jenerik referanslar veya kalıp bölünmüş herolar asla kullanılmamalıdır.

04 İşe koyun

Claude Code veya Codex'e design-html Kur

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

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

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

Terminal

npx skills add https://github.com/garrytan/gstack --skill design-html

design-html/SKILL.md için genel skills CLI formu; depo kendi yolunu belgeleyebilir.

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

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

Starter prompt

Finalize the design for our [product name] landing page. I have an approved mockup from /design-shotgun at [path to approved.json]. The page needs a hero section with dynamic text that reflows on resize, a 3-card feature grid where cards self-size based on content, and a pricing table. Use our brand colors from DESIGN.md and make sure all text is editable in the browser so I can tweak copy live. Output as vanilla HTML first so I can preview immediately, then I'll ask for a React component version once the design is locked.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

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

Kullanıcının pencereyi yeniden boyutlandırarak metnin dinamik olarak yeniden aktığını doğrulayabilmesi ve herhangi bir metne tıklayarak contenteditable düzeninin anında yeniden hesaplandığını doğrulayabilmesi için canlı yeniden yükleme sunucusu http://localhost:PORT/finalized.html adresinde başlatıldı
Varsa, iyileştirme döngüsü sırasında görsel karşılaştırma için onaylanmış mockup PNG'si satır içinde gösterilir; aksi halde plan odaklı veya özgür modlar için döngü sırasındaki kullanıcı geri bildirimi doğruluk kaynağıdır
Pretext düzen hesaplaması için metin ölçümlerinin doğru olmasını sağlamak amacıyla, ilk prepare() çağrısından önce document.fonts.ready üzerinden yazı tiplerinin yüklendiği onayı alınır
Kullanıcı, yeniden boyutlandırma davranışını ve canlı metin düzenlemeyi test ettikten sonra iyileştirme döngüsünde 'done' / 'ship it' / 'looks good' / 'perfect' onayı verir; devam etmeyi veya tamamlandığını bildirmeyi önermeden önce en fazla 10 iterasyon

OpenDesign'da design-html'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: Garry Tan
Repository: github.com/garrytan/gstack Branch main
Skill dosyası: design-html/SKILL.md Doğrulama sırasında içerik sağlama toplamı kaydedildi; commit 71f6048
License: MIT LICENSE dosyasından.
Repository yıldızları: 132.921 GitHub anlık görüntüsü, bu katalogda 7 skill içeren tüm garrytan/gstack deposu için 2026-09-14'te alındı. design-html 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

Bu skill ne zaman çağrılırOnaylanmış mockuplar, CEO planları, tasarım inceleme bağlamı veya üretim HTML/CSS için kullanıcı açıklamalarıyla çalışır
Ön hazırlık (önce çalıştırılır)gstack-skill-start'ı çalıştırır, STATUS satırlarını okur, kısıtlı modu (degraded mode) yönetir, oryantasyon/onay için GSTACK_INSTRUCTION bloklarını takip eder
Plan Modunda Güvenli İşlemlerPlan modunda izin verilen işlemler: codex exec/review, ~/.gstack/ dizinine yazma, plan dosyası, artifactlar için open
Plan Modu Sırasında Skill ÇağrısıSkill talimatları referans değil, yürütülebilirdir; AskUserQuestion, tur sonu koşulunu karşılar; ExitPlanMode yalnızca workflow tamamlandıktan sonra kullanılır
AskUserQuestion FormatıTool çözümü SESSION_KIND'a göre dallanır; spawned önerilen seçeneği otomatik seçer; Conductor düz metin kullanır; hata durumunda yedek işleme
Artifact Senkronizasyonu (skill başlangıcı)skill-start çıktısına göre işlem yapar: GBrain ipucu, ARTIFACTS_SYNC durumu, GSTACK_INSTRUCTION üzerinden tek seferlik gizlilik onayı kapısı
Modele Özgü Davranış Yaması (claude)Yapılacaklar listesi disiplini, ağır eylemlerden önce düşünme, Bash yerine özel tool'lar—tercihler skill talimatlarına bağlıdır
Ses TonuGStack ses tonu: önce esas noktayı belirtin, somut ayrıntılar verin, seçimleri kullanıcı sonuçlarına bağlayın, kalite konusunda dürüst olun, sınırlı kapanışlar kullanın
Bağlam KurtarmaSon ürünleri, incelemeleri, zaman çizelgesini, kararları, en son kontrol noktasını kurtarır; RECENT_PATTERN bir sonraki skill'i işaret ediyorsa öneride bulunur
Yazım StiliÖzel terimleri ilk kullanımda açıklar, soruları sonuçlar üzerinden çerçeveler, kısa cümleler ve etken çatı kullanır, EXPLAIN_LEVEL: terse ise atlar
Bütünlük İlkesi — Okyanusu KaynatYZ bütünlüğü ucuz kılar; kapsamlı çözümü önerin; kapsam farklıysa Bütünlük: X/10 belirtin
Kafa Karışıklığı ProtokolüYüksek riskli belirsizlikte DUR, belirsizliği adlandır, artı ve eksileriyle 2-3 seçenek sun, sor—rutin kodlama için değil

Skill'in Kendi Açıklaması

Tasarım finalizasyonu: üretime hazır Pretext-native HTML/CSS üretir. (gstack)

SKILL.md dosyasından ön bilgi açıklaması. Dosyanın tam uzunluğu yaklaşık 54.976 karakterdir. Dosyanın tamamını GitHub'da okuyun.

06 Kurmadan önce

design-html 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, React/Svelte/Vue projemle mi çalışıyor yoksa yalnızca vanilla HTML ile mi?

Her ikisiyle de. Adım 2.5, package.json içinde çerçevenizi tespit eder ve vanilla HTML (ilk geçiş için önerilen, kendi içinde tam bir önizleme dosyası) mi yoksa Pretext kancalarına sahip çerçeveye özgü bir bileşen mi istediğinizi sorar. Çerçeve tespit edilmezse vanilla varsayılan olur. Çerçeve çıktısı için TypeScript veya JavaScript seçersiniz.

Design HTML

design-html'yi gerçek bir UI tasarım görevinde çalıştırın.

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

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