# HTML Taslak Çizici > Tek bir yaklaşıma bağlanmadan önce UI/UX tasarım yönlerini karşılaştırmak için 2-3 etkileşimli HTML taslak varyantı oluşturun. Farklı görsel duruşları hızla keşfedin ve geri bildirim toplayın. - Canonical: https://nanoskill.ai/tr/skills/html-mockup-sketcher - Markdown: https://nanoskill.ai/tr/skills/html-mockup-sketcher.md - Author: NousResearch - Published: 2026-06-04T05:30:00.000Z - Updated: 2026-07-21T18:34:02.819Z - Language: tr - Source type: github - Popularity signal: 2137 ## Sources - https://github.com/NousResearch/hermes-agent ## Install ```shell npx skills add https://github.com/NousResearch/hermes-agent/tree/main/skills/creative/sketch ``` ## About HTML Taslak Çizici, kullanıcıların tek kullanımlık HTML taslakları aracılığıyla UI/UX tasarım yönlerini hızla keşfetmelerine ve karşılaştırmalarına yardımcı olmak için tasarlanmış güçlü bir beceridir. Tek bir tasarıma bağlanmak yerine, bu araç 2-3 etkileşimli varyant üretir ve farklı görsel duruşların yan yana karşılaştırılmasını sağlar. Erken aşama tasarım keşfi için idealdir; önemli geliştirme yatırımı yapmadan önce kavramları görselleştirmenize ve geri bildirim toplamanıza yardımcı olur. Bu beceri, statik görüntülerin ötesine geçen işlevsel, etkileşimli HTML taslakları oluşturmaya odaklanır. Her varyant, satır içi CSS, sistem yazı tipleri ve gerçekçi içerik içeren bağımsız bir HTML dosyasıdır. En önemlisi, taslaklar tıklanabilir bağlantılar, üzerine gelme durumları ve en az bir durum geçişi gibi temel etkileşimler içerir, böylece kullanıcı deneyimi için daha somut bir his sağlar. Entegre tarayıcı araçları, taslakların temiz ve hatasız olmasını sağlamak için görsel doğrulama yapılmasına olanak tanır. Bilinçli karar vermeyi kolaylaştırmak için HTML Taslak Çizici yapılandırılmış bir karşılaştırma sunar. Her varyant, tasarım ilkelerini, önemli tercihleri, ödünleşimleri ve en uygun kullanım durumlarını özetleyen ayrıntılı bir \`README.md\` ile birlikte gelir. Oluşturma işleminden sonra, çeşitli tasarım boyutlarındaki farklılıkları özetleyen karşılaştırmalı bir tablo ve bir kazanan seçmenize, öğeleri birleştirmenize veya daha fazla yineleme yapmanıza yardımcı olacak görüşlü bir analiz sunulur. ## Key features - **Birden Fazla Tasarım Varyantı Oluşturun**: Yan yana karşılaştırma için, her biri farklı bir tasarım duruşunu (ör. yoğunluk, vurgu, estetik, düzen) keşfeden 2-3 farklı HTML maketi varyantını aynı anda üretin. - **Etkileşimli HTML Maketleri**: Satır içi CSS, sistem yazı tipleri ve gerçekçi sahte içerikle kendi kendine yeten HTML dosyaları oluşturun. Maketler etkileşimlidir; tıklanabilir bağlantılar, fareyle üzerine gelme ve en az bir durum geçişi sağlar. - **Tarayıcı Araçlarıyla Görsel Doğrulama**: Yerleşik tarayıcı gezintisi ve görüntü araçlarını kullanarak her HTML maketini görsel olarak inceleyin ve doğrulayın; sunumdan önce düzenlerin temiz, okunabilir ve hatasız olmasını sağlayın. - **Yapılandırılmış Varyant Belgeleri**: Her HTML maketi varyantı, bilinçli karşılaştırmayı kolaylaştırmak için tasarım duruşunu, temel seçimleri (düzen, tipografi, renk, etkileşim), ödünleri ve ideal kullanım durumlarını ayrıntılandıran bir \`README.md\` içerir. - **Karşılaştırmalı Analiz Tablosu**: Tüm oluşturulan HTML maketi varyantlarını bir karşılaştırma tablosunda sunun; yoğunluk, birincil eylem görünürlüğü, taranabilirlik ve genel his gibi temel boyutlardaki farklılıkları görüşlü bir özetle birlikte vurgulayın. ## Use cases - **UI/UX Tasarım Yönlerini Keşfedin**: Önemli geliştirme zamanı harcamadan önce farklı kullanıcı arayüzü ve kullanıcı deneyimi tasarım fikirlerini keşfetmek için birden fazla HTML maketi varyantını hızla oluşturun ve karşılaştırın. - **Görsel Konseptler Hakkında Geri Bildirim Toplayın**: Paydaşlara veya kullanıcılara etkileşimli HTML maketleri sunarak çeşitli görsel yönler hakkında erken geri bildirim toplayın; bu, konseptleri iyileştirmeye ve bilinçli tasarım kararları almaya yardımcı olur. - **Yeni Özellikler için Hızlı Prototipleme**: Üretime hazır kod yerine temel işlevsellik ve görsel akışa odaklanarak yeni özelliklerin veya ekranların hızlı prototipini oluşturmak için atılabilir HTML maketleri oluşturun. ## Result preview Bu Ajan Becerisi tarafından oluşturulan butik otel web sitelerine ait gerçek HTML'leri görün. ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-1.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-2.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-3.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-4.jpg) ## Result walkthrough ### Adım 1：Kurulum Beceriyi ajanınıza ekleyin. ![a simple demonstration of the first step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-1.jpg) ### Adım 2：Web Sitenizi Tanımlayın Oluşturmak istediğiniz web sitesinin ayrıntılı bilgilerini (ör. stil, tür) açıklayın. ![a simple demonstration of the second step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-2.jpg) ### Adım 3：Sonucu İnceleyin Oluşturulan HTML taslaklarını inceleyin ve karşılaştırın. ![a simple demonstration of the third step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-3.jpg) ## Skill definition # Taslak Bu beceriyi, kullanıcı bir tasarıma karar vermeden önce **tasarım yönünü görmek** istediğinde kullanın — bir UI/UX fikrini, atılıp yeniden yapılabilecek HTML maketler olarak keşfetmek için. Amaç, kullanıcının görsel yönleri yan yana karşılaştırabilmesi için 2-3 etkileşimli varyant üretmektir; teslim edilebilir kod üretmek değil. Kullanıcı şunları söylediğinde bu beceriyi yükleyin: "bu ekranı taslakla", "X nasıl görünebilir göster", "A ve B düzenini karşılaştır", "bu arayüz için 2-3 farklı yorum ver", "birkaç varyant göreyim", "inşa etmeden önce bunun maketini yap". ## Ne zaman KULLANILMAMALI - Kullanıcı bir üretim bileşeni istiyor — `claude-design` kullanın ya da düzgün bir şekilde inşa edin - Kullanıcı gösterişli, tek seferlik bir HTML çalışması (açılış sayfası, sunum) istiyor — `claude-design` - Kullanıcı bir diyagram istiyor — `excalidraw`, `architecture-diagram` - Tasarım zaten kilitlenmiş — sadece inşa edin ## Kullanıcı tam GSD sistemine sahipse Eğer `gsd-sketch` bir kardeş beceri olarak görünüyorsa (`npx get-shit-done-cc --hermes` ile yüklenmiş), tam iş akışı için **`gsd-sketch`** tercih edin: MANIFEST ile kalıcı `.planning/sketches/`, frontier modu analizi, geçmiş taslaklar arasında tutarlılık denetimleri ve GSD'nin geri kalanıyla entegrasyon. Bu beceri, durum makinesi olmadan hafif bir bağımsız sürümdür — tek seferlik taslaklama. ## Temel yöntem ``` girdi → varyantlar → başa baş karşılaştırma → kazananı seç (veya yinele) ``` ### 1. Girdi (kullanıcı zaten yeterli bilgi verdiyse atlayın) Varyantları oluşturmadan önce üç şeyi öğrenin — hepsini bir anda değil, her seferinde bir soru: 1. **His.** "Bu nasıl hissettirmeli? Sıfatlar, duygular, bir atmosfer." — *"sakin, editoryal, Linear gibi"* demek *"minimal"* demekten daha fazlasını anlatır. 2. **Referanslar.** "Hangi uygulamalar, siteler veya ürünler hayal ettiğiniz hissi yakalıyor?" — gerçek referanslar soyut tariflerden üstündür. 3. **Temel eylem.** "Bir kullanıcının bu ekranda yaptığı en önemli tek şey nedir?" — varyantların hepsi buna iyi hizmet etmeli; etmezlerse yalnızca dekorasyondurlar. Bir sonraki soruya geçmeden her yanıtı kısaca yansıtın. Kullanıcı üçünü de önceden verdiyse doğrudan varyantlara geçin. ### 2. Varyantlar (2-3 tane, asla 1, nadiren 4+) Bir seferde **2-3 varyant** üretin. Her varyant tam, kendi başına çalışan bir HTML dosyasıdır. Varyantları tarif etmeyin — inşa edin. Amaç karşılaştırmadır. Her varyant **farklı bir tasarım duruşu** almalıdır, farklı piksel değerleri değil. Üç iyi varyant ekseni: - **Yoğunluk:** kompakt / havadar / ultra-yoğun (iki karşıt uç seçin) - **Vurgu:** içerik-öncelikli / eylem-öncelikli / araç-öncelikli - **Estetik:** editoryal / faydacı / oyuncu - **Düzen:** tek sütun / kenar çubuğu / bölünmüş panel - **Temellendirme:** kart-tabanlı / yalın-içerik / belge-stili Bir eksen seçin ve ondan ayrıştırın. Yalnızca vurgu renginde farklılık gösteren iki varyant boşa harcanmış çabadır — kullanıcı onları ayırt edemez. **Varyant adlandırma:** duruşu tarif edin, numarayı değil. ``` taslaklar/ ├── 001-sakin-editoryal/ │ ├── index.html │ └── README.md ├── 001-faydacı-yoğun/ │ ├── index.html │ └── README.md └── 001-oyuncu-bölünmüş/ ├── index.html └── README.md ``` ### 3. Onları gerçek HTML yapın Her varyant **tek başına çalışan bir HTML dosyasıdır**: - Satır içi ` ``` ### 4. Varyant README Her varyantın `README.md`'si şunları yanıtlar: ```markdown ## Varyant: {duruş adı} ### Tasarım duruşu Bu varyantı yönlendiren ilkeyi tek cümleyle. ### Temel seçimler - Düzen: ... - Tipografi: ... - Renk: ... - Etkileşim: ... ### Ödünleşmeler - Güçlü olduğu: ... - Zayıf olduğu: ... ### En iyi olduğu - Bu varyantın gerçekten hizmet ettiği kullanıcı tipi veya kullanım durumu ``` ### 5. Başa baş Tüm varyantlar inşa edildikten sonra, onları bir karşılaştırma olarak sunun. Sadece listelemeyin — **yorumlayın**: ```markdown ## Ana ekran için üç yorum | Boyut | Sakin editoryal | Faydacı yoğun | Oyuncu bölünmüş | |-----------|----------------|-------------------|---------------| | Yoğunluk | Düşük | Yüksek | Orta | | Birincil eylem görünürlüğü | Düşük | Yüksek | Orta | | Taranabilirlik | Yüksek | Orta | Düşük | | His | Sakin, güvenilir | Keskin, alet gibi | Davetkar, enerjik | **Benim yorumum:** Güç kullanıcıları için faydacı yoğun, içerik odaklı kitleler için sakin editoryal. Oyuncu bölünmüş en zayıfı — ikisini birden yapmaya çalışıp hiçbirine bağlanmıyor. ``` Kullanıcının bir kazanan seçmesine, ikisini birleştirip melez bir tane oluşturmasına ya da başka bir tur istemesine izin verin. ## Tema oluşturma (projenin görsel bir kimliği olduğunda) Kullanıcının mevcut bir teması (renkler, fontlar, jetonlar) varsa, paylaşılan jetonları `sketches/themes/tokens.css` dosyasına koyun ve her varyantta `@import` edin. Jetonları minimal tutun: ```css /* sketches/themes/tokens.css */ :root { --color-bg: #fafafa; --color-fg: #1a1a1a; --color-accent: #0066ff; --color-muted: #666; --radius: 8px; --font-display: "Inter", sans-serif; --font-body: -apple-system, BlinkMacSystemFont, sans-serif; } ``` Atılıp yeniden kullanılacak bir taslağı aşırı jetonlaştırmayın — genellikle üç renk ve bir font yeterlidir. ## Etkileşim çıtası Bir taslak, kullanıcı şunları yapabildiğinde yeterince etkileşimlidir: 1. **Birincil eyleme tıklayabilir** ve görünür bir şey olur (durum değişikliği, modal, bildirim, gezinme yanılsaması) 2. **Anlamlı bir durum geçişi görebilir** (bir listeyi filtreleyebilir, bir modu değiştirebilir, bir paneli açıp kapatabilir) 3. **Tanınabilir eylem belirteçlerinin üzerine gelebilir** (düğmeler, satırlar, sekmeler) Bundan fazlası, atılıp yeniden kullanılacak bir şey için aşırı mühendisliktir. Daha azı ise bir ekran görüntüsüdür. ## Frontier modu (sırada neyi taslaklayacağını seçme) Taslaklar zaten mevcutsa ve kullanıcı "sırada neyi taslaklamalıyım?" derse: - **Tutarlılık boşlukları** — farklı taslaklardan kazanan iki varyant, henüz birleştirilmemiş bağımsız seçimler yapmıştır - **Taslaklanmamış ekranlar** — referans verilmiş ama hiç keşfedilmemiş - **Durum kapsamı** — mutlu yol taslaklanmış, ama boş / yükleniyor / hata / 1000-öğe durumları yok - **Duyarlılık boşlukları** — tek bir görüntü alanında doğrulanmış; mobil / ultra geniş ekranda tutarlı mı? - **Etkileşim desenleri** — statik düzenler var; geçişler, sürükleme, kaydırma davranışı yok 2-4 adet adlandırılmış aday önerin. Kullanıcının seçmesine izin verin. ## Çıktı - Depo kökünde `sketches/` (veya kullanıcı GSD kurallarını kullanıyorsa `.planning/sketches/`) oluşturun - Varyant başına bir alt dizin: `NNN-duruş-adı/index.html` + `README.md` - Kullanıcıya nasıl açacaklarını söyleyin: macOS'ta `open sketches/001-sakin-editoryal/index.html`, Linux'ta `xdg-open`, Windows'ta `start` - Varyantları atılabilir tutun — koruma ihtiyacı hissettiğiniz bir taslak gerçek proje koduna yükseltilmeli, bir varlık olarak düzenlenmemelidir **Bir varyant için tipik araç sırası:** ``` terminal("mkdir -p sketches/001-sakin-editoryal") write_file("sketches/001-sakin-editoryal/index.html", "...") write_file("sketches/001-sakin-editoryal/README.md", "## Varyant: Sakin editoryal\n...") browser_navigate(url="file://$(pwd)/sketches/001-sakin-editoryal/index.html") browser_vision(question="Bu nasıl görünüyor? Bariz düzen sorunları var mı?") ``` Her varyant için tekrarlayın, ardından karşılaştırma tablosunu sunun. ## Atıf GSD (Get Shit Done) projesinin `/gsd-sketch` iş akışından uyarlanmıştır — MIT © 2025 Lex Christopherson ([gsd-build/get-shit-done](https://github.com/gsd-build/get-shit-done)). Tam GSD sistemi, kalıcı taslak durumu, tema/varyant deseni referansları ve tutarlılık denetimi iş akışları sağlar; `npx get-shit-done-cc --hermes --global` ile yükleyin. ## FAQ ### HTML maketi nedir? HTML maketi, farklı UI/UX tasarım fikirlerini hızlı bir şekilde görselleştirmek ve karşılaştırmak için HTML ve temel stil (genellikle satır içi CSS) ile oluşturulmuş, atılabilir, etkileşimli bir web sayfasıdır. Üretim için değil, erken aşama tasarım keşfi içindir. ### Bu beceri kaç HTML maketi varyantı üretir? Bu beceri genellikle bir seferde 2-3 etkileşimli HTML maketi varyantı üretir. Amaç, küçük varyasyonların kapsamlı bir listesini değil, karşılaştırma için zıt tasarım duruşları sağlamaktır. ### Bu beceriyi üretime hazır kod oluşturmak için kullanabilir miyim? Hayır, bu beceri özellikle tasarım yönlerini keşfetmek için 'atılabilir' HTML maketleri için tasarlanmıştır. Üretime hazır bileşenler veya cilalanmış yapıtlar için, \`claude-design\` gibi diğer araçları veya becerileri kullanmalısınız. ### HTML maketlerinin ne tür bir etkileşimi vardır? Oluşturulan HTML maketleri etkileşimlidir; yani bağlantılar tıklanabilir, fareyle üzerine gelme gerçekçidir ve en az bir durum geçişi (ör. bir paneli açma/kapama, bir listeyi filtreleme) vardır. Bu, durağan görüntülere göre daha gerçekçi bir his sağlar. ### Bu beceri farklı tasarımları karşılaştırmama nasıl yardımcı olur? HTML maketlerini oluşturduktan sonra, beceri çeşitli tasarım boyutlarındaki (ör. yoğunluk, düzen, estetik) temel farklılıkları vurgulayan bir karşılaştırma tablosu sunar. Ayrıca karar vermenize rehberlik etmesi için görüşlü bir özet de sağlar. ### HTML maketi oluşturmak için hangi bilgileri sağlamam gerekir? Etkili HTML maketleri oluşturmak için, istenen 'his' (sıfatlar, hava), bu hissi yansıtan referans uygulamalar/siteler ve kullanıcının ekranda gerçekleştirdiği en önemli 'temel eylem' hakkında sorular sorulur.