StyleSeed – Yapay zeka kodlama araçlarına tasarım anlayışı kazandıran açık kaynak (2.200 satır tasarım kuralı)
(github.com/bitjaru)Vibe coding ile UI oluşturunca, "işlev çalışıyor ama tasarım kötü" sorunu ortaya çıkıyor.
StyleSeed, AI kodlama araçlarına (Claude Code vb.) tasarım kuralları kazandıran bir açık kaynak projesi.
Dosyaları projeye kopyaladığınızda, yapay zeka Toss uygulaması seviyesinde bir UI üretiyor.
İçerdiği şeyler:
- 2.200 satırlık görsel tasarım kuralı, 60 madde (renk felsefesi, tipografi hiyerarşisi, kart yapısı, yasaklı desenler vb.)
- 47 React bileşeni (
shadcn/uitabanlı 31 adet + dashboard kalıpları 16 adet) - 10 Claude Code becerisi (UI üretimi, UX denetimi, microcopy üretimi vb.)
- Tailwind CSS v4 teması (aydınlık/karanlık mod)
awesome-design-md (23K yıldız) içindeki DESIGN.md marka token'ları sağlıyorsa,
StyleSeed; yerleşim kuralları, UX rehberleri ve bileşenleri de içeren bir "tasarım beyni".
İlk seed Toss stili. Apple, Linear ve Stripe seed'leri de eklenecek. MIT lisanslı.
4 yorum
▎ Güncelleme — tıklanabilir canlı demoyu yükledim.
▎
▎ 🎬 https://styleseed-demo.vercel.app
▎
▎ Aynı sohbet arayüzünü Toss → Raycast → Arc olmak üzere üç markaya tek seferde morph eden bir ekran. Renk, yuvarlaklık, hareket, gölge ve gradyanların hepsi tek bir
data-skinözelliğiyle değişiyor. Kod dallanması olmadan, yalnızca token’larla.▎
▎ README’nin en üstüne GIF önizlemesini ekledim: https://github.com/bitjaru/styleseed
▎
▎ İlk paylaşımda görüş bırakan herkese teşekkürler 🙏
Açık kaynak sayesinde alan bilgisinin genişlemesi, ironik biçimde büyük yapay zeka çağında daha da parlıyor gibi görünüyor. Bu kadar harika bir bilgi paylaşımı için teşekkürler!
Paylaşım için teşekkürler. Kişisel projeler yaparken işime yarar gibi görünüyor.
Harika!