Kullanım kılavuzuna geç
industrial-brutalist-uiyazan Leonxlnx

Industrial Brutalist UI Skill.

Claude Code ve Codex için UI tasarımı skill'i: İsviçre tipografisini terminal estetiğiyle birleştiren brütalist arayüzler.

  • Web & UI
  • UI kodu
Leonxlnx/taste-skill · skills/brutalist-skill/SKILL.mdSKILL.md
--- name: industrial-brutalist-ui description: Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints. --- ## 1. Skill Meta ## 2. Visual Archetypes ## 3. Typographic Architecture ## 4. Color System ## 5. Layout and Spatial Engineering ## 6. UI Components and Symbology
Üst bilgi ve bölüm başlıkları kaynak dosyadan 2026-09-14 tarihinde okundu · tam hali 8.450 karakter

01 Ne yapar

Claude Code ve Codex'te industrial-brutalist-ui Skill 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, yirminci yüzyıl ortası İsviçre tipografik tasarımını, endüstriyel üretim kılavuzlarını ve retro-fütüristik havacılık/askeri terminal arayüzlerini sentezleyen web arayüzleri tasarlar. Katı modüler ızgaralar, aşırı tipografik ölçek karşıtlığı, tamamen işlevsel renk paletleri üzerinde tam bir hakimiyet ve yarım ton, CRT tarama çizgileri ve bitmap dithering dahil analog bozulmanın programatik simülasyonunu gerektirir.

Amaç, geleneksel tüketici UI kalıplarını bilinçli olarak bir kenara bırakarak ham işlevsellik, mekanik hassasiyet ve yüksek veri yoğunluğu yansıtan dijital ortamlar oluşturmaktır. Gizliliği kaldırılmış teknik çizimler gibi hissettirmesi gereken veri yoğun panolar, portfolyolar veya editoryal siteler için kullanılır.

Neler üretir

  • Katı modüler ızgaralara, uç noktalarda tipografik ölçek karşıtlığına ve işlevsel renk paletlerine sahip web arayüzleri
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Tek Bir Görsel Arketip Seçip Ona Bağlı Kalın

    Ya Swiss Endüstriyel Baskı (ağır sans-serif tipografiye sahip yüksek kontrastlı açık modlar) ya da Taktik Telemetri ve CRT Terminal (monospaced tipografi ve teknik çerçevelemeye sahip karanlık mod) seçin.

  2. 02
    Uç Noktalarda Tipografik Ölçek Karşıtlığı Kurun

    Sıkı harf aralığı ve sıkıştırılmış satır yüksekliğine sahip akışkan tipografi kullanarak devasa ölçeklerde, tamamen büyük harflerle makro-tipografi uygulayın.

  3. 03
    Tek Bir Alt Yapı Paletini Tutarlı Şekilde Seçin

    Ya karbon mürekkep metinli mat, ağartılmamış dokümantasyon kağıdı arka planlarına sahip açık mod ya da beyaz fosfor metinli devre dışı CRT arka planlarına sahip karanlık mod seçin.

  4. 04
    Blueprint Izgara Mimarisi Üzerine İnşa Edin

    Öğelerin ızgara çizgilerine ve kesişim noktalarına hassas biçimde sabitlendiği katı CSS Grid ile düzenler oluşturun.

  5. 05
    Analog Bozulma Efektleri Uygulayın

    Görsellerde yarım tonlama ve 1-bit dithering, tekrarlanan doğrusal gradyanlar aracılığıyla CRT tarama çizgileri ve arayüz genelinde birleşik fiziksel tane dokusu oluşturmak için genel olarak uygulanan mekanik gürültü filtreleri ile fiziksel medya sınırlamalarını simüle edin.

02 Uyumunuzu bulun

industrial-brutalist-ui Skill Ne Zaman Kullanılır

Bu tür bir UI tasarımı söz konusu olduğunda Claude Code veya Codex'te industrial-brutalist-ui skill'ini kullanın. Uygunluk ve sınırlar, skill'in kendi dosyasından alınmıştır.

İyi Uyum

  • Yüksek veri yoğunluğu ve mekanik hassasiyet gerektiren veri yoğun panolar

Sınırları Bilin

  • Geleneksel tüketici UI kalıpları gerektiren projeler

03 Skill'in içinde

industrial-brutalist-ui Skill'inin Claude Code ve Codex'e Verdiği Kurallar

Ajanın için SKILL.md dosyasının belirlediği 5 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

  1. Gradyan veya Yumuşak Gölge Yok

    Fiziksel medyayı veya ilkel yayıcı ekranları simüle etmek için gradyanlar, yumuşak düşen gölgeler ve modern yarı saydamlık kesinlikle yasaktır.

  2. Makro-tipografi Parametreleri

    Makro-tipografiyi yalnızca büyük harflerle, son derece sıkı harf aralığıyla (-0.03em ile -0.06em arası) ve son derece sıkıştırılmış satır yüksekliğiyle (0.85 ile 0.95 arası) clamp fonksiyonları kullanarak devasa ölçeklerde uygulayın.

  3. Mikro-tipografi Kısıtlamaları

    Tüm meta veriler, gezinme, birim kimlikleri ve koordinatlar için sabit küçük ölçeklerde (10px ile 14px arası), geniş harf aralığıyla (0.05em ile 0.1em arası) yalnızca büyük harfli monospace fontlar kullanın.

  4. Terminal Yeşili Tek Öğe Sınırı

    Terminal yeşili yalnızca tek bir durum göstergesi veya veri okuma gibi belirli bir UI öğesi için kullanılabilir. Açık bir amaca hizmet etmiyorsa tamamen kaldırılmalıdır.

  5. Bölücü Çizgiler İçin Izgara Determinizmi

    Karmaşık kenarlık tanımlamalarına gerek kalmadan matematiksel olarak kusursuz, tıraşlanmış görünen ince ayırıcı çizgiler oluşturmak için 1px boşluklu display grid ile karşıt üst/alt öğe arka plan renklerini kullanın.

04 İşe koyun

Claude Code veya Codex'e industrial-brutalist-ui Yükleyin

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 industrial-brutalist-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 industrial-brutalist-ui

skills/brutalist-skill/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
Build a tactical telemetry dashboard interface for [SYSTEM NAME] monitoring [DATA TYPE] across [NUMBER] operational units. Use CRT terminal aesthetics with dark substrate, monospaced data readouts, ASCII bracket framing, and simulated scanline degradation. Display real-time metrics in tight grid compartments with aviation red accent for critical alerts. Include crosshair markers at grid intersections and randomized unit IDs.

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

İlk Sonucu Kontrol Edin

Çıktıyı kabul etmeden önce, transkript ve dosyalarda bunları arayın:

  • Sonuç, bu skill için katalog listelerinin gösterdiği gibi, UI kodu olarak teslim edilir.
  • Ajan, sonucu üretmeden önce planında veya kaydında industrial-brutalist-ui skill adını belirtir.
  • Kendi içeriğiniz, isimleriniz ve numaralarınız çıktıda değişmeden görünür.

OpenDesign içinde industrial-brutalist-ui'yi 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.

Author
Leonxlnx
Repository
github.com/Leonxlnx/taste-skill Branch main
Skill dosyası
skills/brutalist-skill/SKILL.md Doğrulama sırasında içerik checksumu kaydedildi; commit ccbc156
License
MIT LICENSE dosyasından.
Repository yıldızları
86.946 Tüm Leonxlnx/taste-skill deposu için 2026-09-14 tarihinde alınan GitHub snapshot; bu katalogda 11 skill içerir. industrial-brutalist-ui için 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. Skill MetaSkill'i, İsviçre tipografisi ile askeri terminal arayüzü sentezinde ileri düzey yetkinlik olarak tanımlar
  2. Görsel Arketiplerİki farklı mod belirler: Swiss Industrial Print (açık) ve Tactical Telemetry & CRT Terminal (koyu)
  3. Tipografik MimariYazı tipleri, ölçek, aralık ve büyük/küçük harf kullanımı dahil olmak üzere makro tipografi, mikro tipografi ve dokusal kontrast uygulama parametrelerini belirtir
  4. Renk SistemiHavacılık kırmızısı vurgu ve isteğe bağlı terminal yeşiliyle açık ve koyu modlar için ödünsüz zemin paletlerini tanımlar
  5. Yerleşim ve Uzamsal MühendislikGörünür bölmelendirme, iki modlu yoğunluk ve 90 derecelik geometriyle katı CSS Grid mimarileri şart koşar
  6. UI Bileşenleri ve SimgelerStandart UI'yi ASCII sözdizimi süslemeleri, endüstriyel işaretler ve nişangah ile uyarı şeritleri gibi teknik varlıklarla değiştirir
  7. Dokusal ve Son İşlem EfektleriYarı ton tarama, CRT tarama çizgileri ve mekanik gürültü filtreleriyle analog bozulma tasarlar
  8. Web Mühendisliği YönergeleriGrid determinizmi, semantik HTML etiketleri ve tipografi kısıtlaması için somut uygulama talimatları sağlar
Skill'in Kendi Açıklaması
"İsviçre tipografik baskısını askeri terminal estetiği ile birleştiren ham mekanik arayüzler. Sert grid'ler, aşırı yazı tipi ölçek kontrastı, faydacı renk, analog bozulma efektleri. Gizlilik derecesi kaldırılmış planlar gibi hissettirmesi gereken veri yoğun gösterge panelleri, portföyler veya editoryal siteler için."

SKILL.md'den front-matter açıklaması. Tam dosya yaklaşık 8.450 karakterdir. Tam dosyayı GitHub'da okuyun.

06 Kurmadan önce

industrial-brutalist-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.

Bu stil için hangi yazı tiplerini kullanmalıyım?

Makro tipografi (yapısal başlıklar) için Neue Haas Grotesk Black, Inter Extra Bold/Black, Archivo Black, Roboto Flex Heavy veya Monument Extended gibi kalın neo-grotesk sans-serif yazı tipleri kullanın.

Mikro tipografi (veri ve telemetri) için JetBrains Mono, IBM Plex Mono, Space Mono, VT323 veya Courier Prime gibi monospace yazı tipleri kullanın. Playfair Display gibi yüksek kontrastlı serif yazı tipleri, ağır son işlemlerle sınırlı şekilde kullanılır.

Industrial Brutalist UI

industrial-brutalist-ui'yi Gerçek Bir UI Tasarım Görevinde Çalıştırın.

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

Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill industrial-brutalist-ui

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