✦ Arayüz

Arayüz & Tasarım

Claude'a arayüz yaptırırken elinin altında olması gereken referanslar: stiller canlı örnekle, paletler kopyalanabilir kodla, font eşleşmeleri gerçek yazıyla.

8Uçtan Uca Sistem 20UI Stili 24Renk Paleti 20Font Eşleşmesi 12Sayfa Düzeni 12Grafik Türü 15UX Kuralı

Karta tıkla, arkasındaki hazır prompt'u kopyala.

Glassmorphism

Buzlu cam etkisi: yarı saydam yüzey, arkasında bulanıklaşan zemin ve ince açık kenarlık. Renkli bir arka planın üstünde işe yarar, düz beyaz zeminde kaybolur.

#modern#saas#koyu-tema

CSS

background: rgba(255, 255, 255, 0.14);
backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);

↻ Prompt

Glassmorphism

Build the interface in the Glassmorphism style.

Frosted glass: translucent surface, blurred backdrop, thin light border. Needs a colorful background behind it.

Apply these properties to surfaces:
background: rgba(255, 255, 255, 0.14);
backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);

Rules:
- Keep the effect consistent across every card, modal and input — not just the hero.
- Verify text contrast stays at least 4.5:1 on top of the treated surface.
- Do not mix this with a conflicting style; pick one visual language and hold it.

Neumorphism

Yüzeyden kabarmış gibi duran yumuşak gölgeler. Zeminle aynı renkte kalır, ışığı bir köşeden alır. Kontrastı düşük olduğu için erişilebilirlikte dikkat ister.

#yumusak#minimal#acik-tema

CSS

background: #E7ECF3;
border-radius: 18px;
box-shadow: 8px 8px 18px #C5CBD4,
            -8px -8px 18px #FFFFFF;

↻ Prompt

Neumorphism

Build the interface in the Neumorphism style.

Soft extruded shadows on a same-color surface. Low contrast — watch accessibility.

Apply these properties to surfaces:
background: #E7ECF3;
border-radius: 18px;
box-shadow: 8px 8px 18px #C5CBD4,
            -8px -8px 18px #FFFFFF;

Rules:
- Keep the effect consistent across every card, modal and input — not just the hero.
- Verify text contrast stays at least 4.5:1 on top of the treated surface.
- Do not mix this with a conflicting style; pick one visual language and hold it.

Brutalism

Kalın siyah kenarlık, sert gölge, doygun renk, yuvarlatma yok. Dikkat çeker ama uzun metinli arayüzlerde yorar.

#cesur#yaratici#portfolyo

CSS

background: #fff;
border: 3px solid #111;
border-radius: 0;
box-shadow: 7px 7px 0 #111;

↻ Prompt

Brutalism

Build the interface in the Brutalism style.

Thick black borders, hard shadow, saturated color, no rounding.

Apply these properties to surfaces:
background: #fff;
border: 3px solid #111;
border-radius: 0;
box-shadow: 7px 7px 0 #111;

Rules:
- Keep the effect consistent across every card, modal and input — not just the hero.
- Verify text contrast stays at least 4.5:1 on top of the treated surface.
- Do not mix this with a conflicting style; pick one visual language and hold it.

Claymorphism

Kil hamurundan yapılmış gibi şişkin, yuvarlak formlar. İçeride açık, dışarıda koyu gölge. Oyun ve çocuk odaklı ürünlerde iyi durur.

#eglenceli#yumusak#3d

CSS

background: #F6F2FF;
border-radius: 26px;
box-shadow: 0 14px 28px rgba(109,91,255,.22),
            inset 0 -6px 12px rgba(109,91,255,.14),
            inset 0 6px 10px #fff;

↻ Prompt

Claymorphism

Build the interface in the Claymorphism style.

Puffy, clay-like rounded shapes with inner and outer shadows.

Apply these properties to surfaces:
background: #F6F2FF;
border-radius: 26px;
box-shadow: 0 14px 28px rgba(109,91,255,.22),
            inset 0 -6px 12px rgba(109,91,255,.14),
            inset 0 6px 10px #fff;

Rules:
- Keep the effect consistent across every card, modal and input — not just the hero.
- Verify text contrast stays at least 4.5:1 on top of the treated surface.
- Do not mix this with a conflicting style; pick one visual language and hold it.

Minimalism

Bol boşluk, tek vurgu rengi, ince ayırıcılar. Süs yok; hiyerarşiyi tipografi ve boşluk kurar. İçerik ağırlıklı ürünlerin varsayılanı.

#temiz#icerik#varsayilan

CSS

background: #fff;
border: 1px solid #E8E6E1;
border-radius: 10px;
/* vurgu tek renkte, gölge yok */

↻ Prompt

Minimalism

Build the interface in the Minimalism style.

Generous whitespace, one accent color, hairline dividers.

Apply these properties to surfaces:
background: #fff;
border: 1px solid #E8E6E1;
border-radius: 10px;
/* vurgu tek renkte, gölge yok */

Rules:
- Keep the effect consistent across every card, modal and input — not just the hero.
- Verify text contrast stays at least 4.5:1 on top of the treated surface.
- Do not mix this with a conflicting style; pick one visual language and hold it.

Aurora UI

Kuzey ışıkları gibi birbirine karışan yumuşak renk lekeleri. Genelde koyu zeminde, radial gradyanlarla kurulur.

#gradyan#koyu-tema#modern

CSS

background:
  radial-gradient(60% 80% at 20% 10%, #6D5BFF55, transparent 60%),
  radial-gradient(55% 70% at 85% 30%, #FF5C9755, transparent 60%),
  #14121F;

↻ Prompt

Aurora UI

Build the interface in the Aurora UI style.

Soft blended color blobs like northern lights, usually on dark.

Apply these properties to surfaces:
background:
  radial-gradient(60% 80% at 20% 10%, #6D5BFF55, transparent 60%),
  radial-gradient(55% 70% at 85% 30%, #FF5C9755, transparent 60%),
  #14121F;

Rules:
- Keep the effect consistent across every card, modal and input — not just the hero.
- Verify text contrast stays at least 4.5:1 on top of the treated surface.
- Do not mix this with a conflicting style; pick one visual language and hold it.

Bento Grid

Farklı boyutlarda kutuların bento kutusu gibi dizildiği ızgara. Her kutu tek bir bilgi taşır; anasayfa ve özet ekranlarında iyi çalışır.

#duzen#anasayfa#modern

CSS

display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 120px;
gap: 12px;
/* öne çıkanlar: grid-column: span 2; grid-row: span 2 */

↻ Prompt

Bento Grid

Build the interface in the Bento Grid style.

Grid of differently sized boxes, each holding one idea.

Apply these properties to surfaces:
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 120px;
gap: 12px;
/* öne çıkanlar: grid-column: span 2; grid-row: span 2 */

Rules:
- Keep the effect consistent across every card, modal and input — not just the hero.
- Verify text contrast stays at least 4.5:1 on top of the treated surface.
- Do not mix this with a conflicting style; pick one visual language and hold it.

Dark Mode (OLED)

Saf siyah zemin: OLED ekranda pikseller kapanır, pil ömrü uzar. Yüzeyler siyahtan birkaç ton açık gri ile ayrılır, beyaz metin hafif kırılır.

#koyu-tema#mobil#erisilebilir

CSS

--bg: #000000;
--surface: #0D0D0F;
--border: #1F1F24;
--text: #E9E9EC; /* saf beyaz değil, göz yormasın */

↻ Prompt

Dark Mode (OLED)

Build the interface in the Dark Mode (OLED) style.

True black background for OLED; surfaces separated by near-black greys.

Apply these properties to surfaces:
--bg: #000000;
--surface: #0D0D0F;
--border: #1F1F24;
--text: #E9E9EC; /* saf beyaz değil, göz yormasın */

Rules:
- Keep the effect consistent across every card, modal and input — not just the hero.
- Verify text contrast stays at least 4.5:1 on top of the treated surface.
- Do not mix this with a conflicting style; pick one visual language and hold it.

Liquid Glass

Cam etkisinin yoğun hali: daha güçlü bulanıklık, iç parlama ve renkli kenar yansımaları. Vitrin sayfalarında etkili, veri yoğun ekranlarda okunabilirliği düşürür.

#premium#vitrin#koyu-tema

CSS

background: linear-gradient(160deg, rgba(255,255,255,.20), rgba(255,255,255,.06));
backdrop-filter: blur(22px) saturate(160%);
border: 1px solid rgba(255,255,255,.30);
box-shadow: inset 0 1px 0 rgba(255,255,255,.5),
            0 18px 40px rgba(0,0,0,.35);

↻ Prompt

Liquid Glass

Build the interface in the Liquid Glass style.

Heavier glass: stronger blur, inner glow, colored edge reflections.

Apply these properties to surfaces:
background: linear-gradient(160deg, rgba(255,255,255,.20), rgba(255,255,255,.06));
backdrop-filter: blur(22px) saturate(160%);
border: 1px solid rgba(255,255,255,.30);
box-shadow: inset 0 1px 0 rgba(255,255,255,.5),
            0 18px 40px rgba(0,0,0,.35);

Rules:
- Keep the effect consistent across every card, modal and input — not just the hero.
- Verify text contrast stays at least 4.5:1 on top of the treated surface.
- Do not mix this with a conflicting style; pick one visual language and hold it.

Swiss / International

Katı ızgara, Helvetica benzeri gresk tipografi, sola dayalı metin, kırmızı-siyah vurgu. Editoryal ve kurumsal işlerde zamansız durur.

#editoryal#kurumsal#tipografi

CSS

/* 12 sütunlu katı ızgara */
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
border-left: 4px solid #E4002B;

↻ Prompt

Swiss / International

Build the interface in the Swiss / International style.

Strict grid, grotesque type, flush-left text, red-black accents.

Apply these properties to surfaces:
/* 12 sütunlu katı ızgara */
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
border-left: 4px solid #E4002B;

Rules:
- Keep the effect consistent across every card, modal and input — not just the hero.
- Verify text contrast stays at least 4.5:1 on top of the treated surface.
- Do not mix this with a conflicting style; pick one visual language and hold it.

Gradient Mesh

Birden çok radial gradyanın örgü gibi karıştığı canlı zemin. Hero bölümlerinde dikkat çeker; metin okunabilirliği için üstüne koyu bir katman gerekir.

#gradyan#hero#renkli

CSS

background:
  radial-gradient(at 15% 20%, #FF8A3D 0px, transparent 50%),
  radial-gradient(at 85% 15%, #6D5BFF 0px, transparent 50%),
  radial-gradient(at 50% 85%, #17C3B2 0px, transparent 50%),
  #FFDCA8;

↻ Prompt

Gradient Mesh

Build the interface in the Gradient Mesh style.

Multiple radial gradients woven into a vivid backdrop.

Apply these properties to surfaces:
background:
  radial-gradient(at 15% 20%, #FF8A3D 0px, transparent 50%),
  radial-gradient(at 85% 15%, #6D5BFF 0px, transparent 50%),
  radial-gradient(at 50% 85%, #17C3B2 0px, transparent 50%),
  #FFDCA8;

Rules:
- Keep the effect consistent across every card, modal and input — not just the hero.
- Verify text contrast stays at least 4.5:1 on top of the treated surface.
- Do not mix this with a conflicting style; pick one visual language and hold it.

Retro / Y2K

2000'lerin krom parlaklığı, mor-mavi degrade, piksel ve parıltı detayları. Nostalji satan ürünlerde ve etkinlik sayfalarında kullanılır.

#nostalji#eglenceli#etkinlik

CSS

background: linear-gradient(180deg, #D9E5FF, #9EB6FF);
border: 2px solid #fff;
box-shadow: 0 0 0 3px #7A1F8F,
            0 10px 24px rgba(0,0,0,.4);

↻ Prompt

Retro / Y2K

Build the interface in the Retro / Y2K style.

Y2K chrome shine, purple-blue gradients, pixel accents.

Apply these properties to surfaces:
background: linear-gradient(180deg, #D9E5FF, #9EB6FF);
border: 2px solid #fff;
box-shadow: 0 0 0 3px #7A1F8F,
            0 10px 24px rgba(0,0,0,.4);

Rules:
- Keep the effect consistent across every card, modal and input — not just the hero.
- Verify text contrast stays at least 4.5:1 on top of the treated surface.
- Do not mix this with a conflicting style; pick one visual language and hold it.

Cyberpunk / Neon

Koyu zeminde neon kenarlıklar ve parlama. Yüksek kontrast, tek renk vurgusu. Oyun ve kripto arayüzlerinde sık görülür.

#oyun#kripto#koyu-tema

CSS

border: 1px solid #00E5FF;
box-shadow: 0 0 14px rgba(0,229,255,.45),
            inset 0 0 14px rgba(0,229,255,.14);
text-shadow: 0 0 8px currentColor;

↻ Prompt

Cyberpunk / Neon

Build the interface in the Cyberpunk / Neon style.

Neon borders and glow on dark; high contrast, single hue accent.

Apply these properties to surfaces:
border: 1px solid #00E5FF;
box-shadow: 0 0 14px rgba(0,229,255,.45),
            inset 0 0 14px rgba(0,229,255,.14);
text-shadow: 0 0 8px currentColor;

Rules:
- Keep the effect consistent across every card, modal and input — not just the hero.
- Verify text contrast stays at least 4.5:1 on top of the treated surface.
- Do not mix this with a conflicting style; pick one visual language and hold it.

Material

Yükseklik kademeleriyle kurulan gölge sistemi, belirgin dolgu renkleri ve dalga (ripple) geri bildirimi. Android tarafında beklenen dil.

#android#sistem#urun

CSS

/* elevation 2 */
box-shadow: 0 1px 2px rgba(0,0,0,.30),
            0 2px 6px 2px rgba(0,0,0,.15);
border-radius: 12px;
/* düğmeler tam yuvarlak: 999px */

↻ Prompt

Material

Build the interface in the Material style.

Elevation-based shadows, filled colors, ripple feedback.

Apply these properties to surfaces:
/* elevation 2 */
box-shadow: 0 1px 2px rgba(0,0,0,.30),
            0 2px 6px 2px rgba(0,0,0,.15);
border-radius: 12px;
/* düğmeler tam yuvarlak: 999px */

Rules:
- Keep the effect consistent across every card, modal and input — not just the hero.
- Verify text contrast stays at least 4.5:1 on top of the treated surface.
- Do not mix this with a conflicting style; pick one visual language and hold it.

Editorial

Dergi düzeni: iri serif başlıklar, dar ölçü sütunlar, bol satır aralığı. Uzun okuma için tasarlanır.

#blog#okuma#tipografi

CSS

max-width: 68ch;      /* ölçü */
line-height: 1.75;
font-family: "Playfair Display", Georgia, serif;
letter-spacing: -0.01em;

↻ Prompt

Editorial

Build the interface in the Editorial style.

Magazine layout: large serif headlines, narrow measure, airy leading.

Apply these properties to surfaces:
max-width: 68ch;      /* ölçü */
line-height: 1.75;
font-family: "Playfair Display", Georgia, serif;
letter-spacing: -0.01em;

Rules:
- Keep the effect consistent across every card, modal and input — not just the hero.
- Verify text contrast stays at least 4.5:1 on top of the treated surface.
- Do not mix this with a conflicting style; pick one visual language and hold it.

Flat Design

Gölge ve derinlik yok; düz renk blokları ve net kenarlar. Hızlı yüklenir, her ekranda aynı görünür.

#basit#hizli#kurumsal

CSS

background: #fff;
border-radius: 6px;
border: 1px solid #DDE4EA;
/* gölge yok, gradyan yok */

↻ Prompt

Flat Design

Build the interface in the Flat Design style.

No shadows or depth — flat color blocks and crisp edges.

Apply these properties to surfaces:
background: #fff;
border-radius: 6px;
border: 1px solid #DDE4EA;
/* gölge yok, gradyan yok */

Rules:
- Keep the effect consistent across every card, modal and input — not just the hero.
- Verify text contrast stays at least 4.5:1 on top of the treated surface.
- Do not mix this with a conflicting style; pick one visual language and hold it.

Skeuomorphism

Gerçek nesneleri taklit eden dokular: deri, metal, kabartma. Bugün ana dil olarak değil, tekil vurgularda kullanılır.

#nostalji#doku#vurgu

CSS

background: linear-gradient(180deg, #F7EFE2, #E2D3BC);
border: 1px solid #B99F79;
box-shadow: inset 0 1px 0 #fff,
            0 6px 14px rgba(0,0,0,.35);

↻ Prompt

Skeuomorphism

Build the interface in the Skeuomorphism style.

Textures imitating real objects: leather, metal, emboss.

Apply these properties to surfaces:
background: linear-gradient(180deg, #F7EFE2, #E2D3BC);
border: 1px solid #B99F79;
box-shadow: inset 0 1px 0 #fff,
            0 6px 14px rgba(0,0,0,.35);

Rules:
- Keep the effect consistent across every card, modal and input — not just the hero.
- Verify text contrast stays at least 4.5:1 on top of the treated surface.
- Do not mix this with a conflicting style; pick one visual language and hold it.

AI-Native UI

Sohbet alanı, akış halinde gelen metin, kaynak rozetleri ve öneri çipleri. Belirsizliği görünür kılan durum göstergeleri esastır.

#sohbet#arac#modern

CSS

/* mesaj balonu */
border-radius: 18px;
padding: 12px 16px;
/* akış imleci */
@keyframes blink { 50% { opacity: 0 } }

↻ Prompt

AI-Native UI

Build the interface in the AI-Native UI style.

Chat surface, streaming text, source chips, visible uncertainty states.

Apply these properties to surfaces:
/* mesaj balonu */
border-radius: 18px;
padding: 12px 16px;
/* akış imleci */
@keyframes blink { 50% { opacity: 0 } }

Rules:
- Keep the effect consistent across every card, modal and input — not just the hero.
- Verify text contrast stays at least 4.5:1 on top of the treated surface.
- Do not mix this with a conflicting style; pick one visual language and hold it.

Motion-Driven

Hareketin bilgi taşıdığı yaklaşım: kaydırmaya bağlı geçişler, aşamalı belirme, düzen değişimlerinde yumuşak taşınma. Süre 150-300ms arasında kalmalı.

#animasyon#vitrin#etkilesim

CSS

transition: transform .22s cubic-bezier(.2,.8,.2,1),
            opacity .22s ease;
/* aşamalı belirme */
.item:nth-child(n) { transition-delay: calc(var(--i) * 60ms); }
@media (prefers-reduced-motion: reduce) { * { transition: none } }

↻ Prompt

Motion-Driven

Build the interface in the Motion-Driven style.

Motion carries meaning: scroll-linked transitions, staggered reveals.

Apply these properties to surfaces:
transition: transform .22s cubic-bezier(.2,.8,.2,1),
            opacity .22s ease;
/* aşamalı belirme */
.item:nth-child(n) { transition-delay: calc(var(--i) * 60ms); }
@media (prefers-reduced-motion: reduce) { * { transition: none } }

Rules:
- Keep the effect consistent across every card, modal and input — not just the hero.
- Verify text contrast stays at least 4.5:1 on top of the treated surface.
- Do not mix this with a conflicting style; pick one visual language and hold it.

Terminal / Monospace

Terminal / Monospace

Tek aralıklı yazı, hizalı sütunlar, imleç ve komut istemi göstergeleri. Geliştirici araçlarında güven veren bir dil.

#gelistirici#arac#koyu-tema

CSS

font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-variant-ligatures: none;
tab-size: 2;
/* komut istemi */
&::before { content: "$ "; color: #35C46A; }

↻ Prompt

Terminal / Monospace

Build the interface in the Terminal / Monospace style.

Monospace type, aligned columns, prompt and cursor cues.

Apply these properties to surfaces:
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-variant-ligatures: none;
tab-size: 2;
/* komut istemi */
&::before { content: "$ "; color: #35C46A; }

Rules:
- Keep the effect consistent across every card, modal and input — not just the hero.
- Verify text contrast stays at least 4.5:1 on top of the treated surface.
- Do not mix this with a conflicting style; pick one visual language and hold it.

Arayüz işi yapan skill ve subagent'ları arıyorsan: kütüphanedeki UI kaynakları →