---
title: İlkeler
description: ikas uygulamalarında "AI slop" olmayan bir arayüzün pratikte ne anlama geldiği.
---

Bu sayfadaki ilkeleri bileşenler kendileri uygular. AI agent'lar için aynı kurallar `@ikas/ui-rules` dosyasında yer alır.

## Altı ilke

<Cards>
  <Card title="ikas paneline ait" description="Mağaza sahipleri uygulamanızı ikas panelinin içinde açar. Panelle aynı tip ölçeği, yoğunluk ve yüzeyleri kullanan ekranlar, gömülü bir web sitesi gibi değil panelin kendi ekranı gibi okunur." />
  <Card title="Seçenek değil karar" description="Her bileşen bir kararı taşır: ana aksiyon nereye konur, boş bir tablo nasıl görünür. Variant'lar zevk için değil, gerçek ihtiyaçlar için var." />
  <Card title="Durum renklerinin bir anlamı var" description="Yeşil tamamlandı, amber yakında ilgi istiyor, kırmızı bozuk ya da geri alınamaz, mavi bilgi demektir. Renk asla süs değildir." />
  <Card title="Sessiz yüzeyler, öne çıkan içerik" description="Nötr renkler, beyaz kartlar, ince gölgeler. Derinlik yalnızca tıklanabilen yerde: solid butonlar yükseltilmiş, geri kalan her şey düz." />
  <Card title="Her durum tasarlanmış" description="Yükleniyor, boş, hata ve başarı durumları bileşenin parçasıdır; her uygulamaya sonradan eklenen bir ayrıntı değildir." />
  <Card title="Kod sizin" description="Bileşenler shadcn CLI ile uygulamanıza kopyalanır. Gerektiğinde değiştirin; varsayılanlar yalnızca güçlü bir başlangıç noktasıdır." />
</Cards>

## Yan yana

Aynı içeriğin ikas bileşenleriyle ve onlarsız üretildiğinde nasıl göründüğü.

### Sayfa başlığı

_Görsel blok: Sayfa başlığı karşılaştırması._ [Önizlemeyi aç](https://builders.ikas.com/ui-preview/embed/comparison-page-header)

### Metrik

_Görsel blok: Metrik karşılaştırması._ [Önizlemeyi aç](https://builders.ikas.com/ui-preview/embed/comparison-metric)

### Boş tablo

_Görsel blok: Boş tablo karşılaştırması._ [Önizlemeyi aç](https://builders.ikas.com/ui-preview/embed/comparison-empty)

## Kısaca kurallar

- Renkler yalnızca token'lardan gelir. Uygulama kodunda hex değer veya ham Tailwind palet sınıfı kullanılmaz.
- Süs amaçlı gradient, glow, glassmorphism veya emoji kullanılmaz. Buton ve kartlardaki derinlik yalnızca bileşenlerden gelir.
- Varsayılan nötrdür. Her bölümde tek solid buton bulunur ve grubun en sonunda yer alır. Renk yalnızca bir anlam taşıyorsa kullanılır.
- Panel yoğunluğu: 36px kontroller, 14px gövde metni, 20px sayfa başlıkları. `4xl` ve üstü metin boyutu kullanılmaz.
- Yalnızca ilk harf büyük yazılır. Buton metni neyin olacağını söyler: "Siparişleri dışa aktar", tek başına "Tamam" değil.
- Her veri ekranı yükleniyor, boş, hata ve başarı durumlarını karşılar.

<Callout type="info" title="AI agent için tam liste">
Kuralların tamamı `@ikas/ui-rules` içindedir. Kurulum için [AI Agent ile Kullanım](https://builders.ikas.com/tr/docs/app-development/ui-kit/ai-agent) sayfasına bakın.
</Callout>