minimalist-uiyazan Leonxlnx

Minimalist UI Skill.

Claude Code ve Codex için UI tasarımı skill'i: temiz, monokrom, editoryal tarzda arayüzler.

Web & UI
UI kodu

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

Leonxlnx/taste-skill · skills/minimalist-skill/SKILL.mdSKILL.md

--- name: minimalist-ui description: Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows. --- ## 2. Absolute Negative Constraints (Banned Elements) ## 3. Typographic Architecture ## 4. Color Palette (Warm Monochrome + Spot Pastels) ## 5. Component Specifications ## 6. Iconography & Imagery Directives ## 7. Subtle Motion & Micro-Animations

Yukarı akış dosyasından 2026-09-14 tarihinde okunan ön bilgi ve bölüm başlıkları · tam haliyle 7.896 karakter

01 Ne yapar

minimalist-ui Skill 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

Bu skill, premium çalışma alanı platformlarından ilham alan ultra minimalist, doküman tarzı web arayüzleri üretir. Kırık beyaz ve antrasit tonlarıyla sıcak bir monokrom palet, editoryal serif ve geometrik sans-serif yazı tiplerinden oluşan özel tipografik hiyerarşiler ve soluk pastel vurgulu düz bento-grid düzenler zorunlu kılar.

Protokol; Inter, Roboto ve Open Sans fontlarını, Lucide ve Heroicons gibi standart ikon kütüphanelerini, Tailwind'in varsayılan ağır gölgelerini, gradyanları, emojileri ve AI metin yazarlığı klişelerini kesinlikle yasaklar. Bileşenler 1px solid #EAEAEA kenarlıklar, net 8-12px köşe yuvarlaklığı, geniş iç dolgu (padding) ve IntersectionObserver ile kaydırmada devreye giren animasyonlar kullanır. Hareket görünmez ve sofistikedir; yalnızca transform ve opacity ile animasyon uygulanır.

Neler üretir

HTML, React, Tailwind veya Vue'da, üst düzey, sade ve editoryal estetiği doğal biçimde yansıtan ön uç kodu
Asimetrik CSS Grid yapılarına sahip bento-grid düzenler ve geniş makro boşluk

Örnek istemi görün ↗

Nasıl Çalışır

01
Önce Makro Boşluğu Belirleyin
Bölümler arasında devasa dikey dolgu kullanın; özellikle Tailwind biriminde py-24 veya py-32.
02
İçerik Genişliğini Sınırlayın
Editoryal oranları korumak için ana tipografi içeriğini max-w-4xl veya max-w-5xl ile sınırlayın.
03
Tipografik Hiyerarşi ve Monokromatik Değişkenleri Uygulayın
Sıcak monokrom palet özelliklerine uygun özel fontları ve renk değişkenlerini hemen ayarlayın.
04
Kenarlık Standartlarını Uygulayın
Her kart, ayırıcı ve kenarlık tam olarak 1px solid #EAEAEA kullanmalıdır.
05
Kaydırmada Devreye Giren Animasyonlar Ekleyin
Tüm ana içerik bloklarına, window scroll dinleyicileri değil IntersectionObserver kullanarak animasyon uygulayın.
06
Görsel Derinliği Sağlayın
Bölümlerin boş düz arka planlar yerine görsellerle, ortam gradyanlarıyla veya ince dokularla derinlik kazanması gerekir.

02 Uyumunuzu bulun

minimalist-ui Skill Ne Zaman Kullanılır

İş bu tür bir UI tasarımı olduğunda Claude Code veya Codex'te minimalist-ui skill'ini kullanın. Uygunluk ve sınırlar aşağıda skill'in kendi dosyasından alınmıştır.

İyi Uyum

Üst düzey çalışma alanı platformlarına benzer, son derece rafine, ultra minimalist, doküman tarzı web arayüzleri oluşturma
Editoryal bir hava oluşturmak için aşırı tipografik kontrast ve premium font seçimi gerektiren arayüzler
24px ile 40px arasında geniş iç dolguya sahip asimetrik bento box özellik ızgaraları gerektiren tasarımlar
IntersectionObserver kullanan kaydırmada devreye giren animasyonlarla sofistike hissettiren ince, görünmez hareket gerektiren projeler

Sınırları Bilin

Büyük öğeler veya bölümler için birincil renkli arka planlara sahip jenerik SaaS tasarım trendleri
Hafif navbar bulanıklıklarının ötesinde gradyan, neon renkler veya 3D glassmorphism gerektiren tasarımlar
Büyük konteynerler, kartlar veya birincil butonlar için hap şekilleri (rounded-full) kullanan arayüzler
Herhangi bir biçimde emoji veya John Doe ya da Acme Corp gibi jenerik yer tutucu isimler gerektiren içerik

03 Skill'in içinde

minimalist-ui Skill'in 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ı.

Yasaklı Yazı Tipleri
Inter, Roboto veya Open Sans asla kullanılmaz. Bunun yerine gövde ve UI için SF Pro Display, Geist Sans, Helvetica Neue veya Switzer kullanın.
Yasaklı İkon Kütüphaneleri
Lucide, Feather veya standart Heroicons kullanmayın. Bunun yerine Bold veya Fill ağırlıklarında Phosphor Icons veya Radix UI Icons kullanın.
Gölge Opaklık Sınırı
Tailwind'in shadow-md, shadow-lg veya shadow-xl sınıflarını kullanmayın. Gölgeler pratik olarak görünmez veya opaklığı 0.05'in altında ultra dağınık olmalıdır.
Hiçbir Yerde Emoji Yok
Kodda, markup'ta, metin içeriğinde, başlıklarda veya alt metinde emoji kullanmayın. Uygun ikonlar veya temiz SVG primitifleriyle değiştirin.
Yasaklı Metin Yazım İfadeleri
Yapay zeka metin yazımı klişelerini kullanmayın: Elevate, Seamless, Unleash, Next-Gen, Game-changer veya Delve. Bunun yerine sade, spesifik bir dil kullanın.
Gövde Metni Renk Kısıtlaması
Gövde metni asla mutlak siyah #000000 olmamalıdır. 1.6 satır yüksekliğiyle kapalı siyah veya antrasit #111111 veya #2F3437 kullanın.
Kart Kenarlık Spesifikasyonu
Kartlar tam olarak 1px solid #EAEAEA kenarlıklara ve en fazla 8px veya 12px keskin border-radius'a sahip olmalıdır.
Animasyon Performans Gereksinimi
Yalnızca transform ve opacity üzerinden animasyon yapın. top, left, width veya height gibi düzeni tetikleyen özellikleri asla kullanmayın.

04 İşe koyun

Claude Code veya Codex'e minimalist-ui kurun

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 minimalist-ui ekleyin

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

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill minimalist-ui

skills/minimalist-skill/SKILL.md için jenerik 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

Build a project dashboard using an asymmetrical bento-grid layout with the warm monochrome palette. Include feature cards with 1px solid #EAEAEA borders and 24px internal padding, a primary CTA button with #111111 background, status badges using pale blue and pale green pastels, and scroll-entry animations for each grid item. Use Geist Sans for body text and Instrument Serif for the hero heading. Add keystroke hints as <kbd> elements and ensure no Tailwind shadow utilities are used.

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:

Scroll-entry animasyonlarının IntersectionObserver ve 600ms süreyle translateY(12px) kullandığını doğrulayın

OpenDesign'da minimalist-ui'yi SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubukta 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: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Branch main
Skill dosyası: skills/minimalist-skill/SKILL.md İçerik sağlama toplamı doğrulamada kaydedildi; commit ccbc156
License: MIT LICENSE dosyasından.
Repository yıldızları: 86.946 Katalogda 11 skill içeren Leonxlnx/taste-skill deposunun tamamı için 2026-09-14 tarihinde alınan GitHub anlık görüntüsü. minimalist-ui için bir değerlendirme veya kullanım sayısı değil.
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

Protokol Genel BakışSıcak monokrom palet ve düz mimariye sahip ultra-minimalist, doküman tarzı web arayüzlerine yönelik direktifi tanıtır
Kesin Olumsuz Kısıtlamalar (Yasaklı Öğeler)Inter yazı tipi, Lucide ikonları, ağır gölgeler, gradyanlar, emojiler ve klişe metin yazımı gibi kesinlikle yasaklanmış tasarım öğelerini listeler
Tipografik MimariGeometrik sans-serif, editoryal serif ve sıkı harf aralığına sahip monospace kullanarak yazı tipi ailelerini, boyutlarını ve hiyerarşiyi belirtir
Renk Paleti (Sıcak Monokrom + Nokta Pasteller)Saf beyaz, sıcak kemik rengi arka planlar, antrasit metin ve dört soluk pastel vurgu dahil temel renkleri tanımlar
Bileşen ÖzellikleriBento gridler, butonlar, etiketler, akordeonlar, tuş vuruşu arayüzleri ve sahte işletim sistemi pencere çerçeveleri için uygulama detaylarını verir
İkonografi ve Görsel DirektifleriPhosphor veya Radix ikonlarını, monokromatik illüstrasyonları, doygunluğu düşürülmüş fotoğrafları ve derinlik için ince arka plan işlemlerini belirtir
İnce Hareket ve Mikro AnimasyonlarYalnızca transform ve opacity kullanarak scroll ile ortaya çıkan animasyonları, hover durumlarını, kademeli akışları ve ortam hareketini tanımlar
Uygulama ProtokolüBoşluktan animasyonlara kadar tasarım sistemini uygulamak için adım adım iş akışı sunar

Skill'in Kendi Açıklaması

"Temiz editoryal tarzı arayüzler. Sıcak monokrom palet, tipografik kontrast, düz bento ızgaralar, mat pastel tonlar. Degrade yok, ağır gölge yok."

SKILL.md'den ön bilgi açıklaması. Tam dosya yaklaşık 7.896 karakter. Tam dosyayı GitHub'da okuyun.

06 Kurmadan önce

minimalist-ui 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.

Inter veya Roboto yerine hangi yazı tiplerini kullanmalıyım?

Gövde ve UI metni için SF Pro Display, Geist Sans, Helvetica Neue veya Switzer kullanın. Hero başlıklar ve alıntılar için sıkı harf aralığına sahip Lyon Text, Newsreader, Playfair Display veya Instrument Serif kullanın. Kod ve tuş vuruşları için Geist Mono, SF Mono veya JetBrains Mono kullanın.

Bu stil için hangi ikon kütüphaneleri önerilir?

Teknik, hafif daha kalın çizgili bir estetik için Phosphor Icons'ı Bold veya Fill ağırlıklarıyla veya Radix UI Icons'ı kullanın. Lucide, Feather veya standart Heroicons gibi genel ince çizgili kütüphaneleri kullanmayın. Tutarlılık için tüm ikonlarda çizgi kalınlığını standartlaştırın.

Minimalist UI

minimalist-ui'yi Gerçek bir UI Tasarım Görevinde çalıştırın.

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

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

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill minimalist-ui

minimalist-ui Skill Claude Code ve Codex'te Ne Yapar

Skill'in Kendi İfadeleriyle

Nasıl Çalışır

minimalist-ui Skill Ne Zaman Kullanılır

İyi Uyum

Sınırları Bilin

minimalist-ui Skill'in Claude Code ve Codex'e Verdiği Kurallar

Yasaklı Yazı Tipleri

Yasaklı İkon Kütüphaneleri

Gölge Opaklık Sınırı

Hiçbir Yerde Emoji Yok

Yasaklı Metin Yazım İfadeleri

Gövde Metni Renk Kısıtlaması

Kart Kenarlık Spesifikasyonu

Animasyon Performans Gereksinimi