Rehber

Tasarımcın yok mu? Uygulaman için kanıtlanmış bir tasarım sistemi ödünç al

İyi tasarımı görünce tanırsın ama sıfırdan üretemezsin. Üretmen de gerekmiyor. Beğendiğin bir ürünü seç, tasarım sistemini DESIGN.md olarak al, onu o markaya ait kılan kısımları değiştir; kodlama ajanın da uygulamanı geliştirmek için kanıtlanmış bir sisteme sahip olur.

Kanıtlanmış, gerçek kullanıcılarla test edilmiş demek: rahat okunan yazılar, nefes alan boşluklar, buton gibi görünen butonlar. Bunları korur, kendi kimliğini eklersin.

tek başına girişimciler ve küçük ekipler için yazıldı. Güncellenme: .

Ne elde edeceksin

  • İyi bir referans siteyi neyin belirlediğine dair kısa bir liste; böylece ürününe uyan birini seçersin.
  • Başlangıç tasarım sistemin olarak repona koyabileceğin bir DESIGN.md.
  • Neyin korunacağı (yazı ölçeği, boşluklar, köşe yarıçapları, bileşen biçimleri) ile neyin değiştirileceği (marka rengi, logo, fontlar, üslup) arasında net bir ayrım.
  • Değişikliği senin yerine yapan bir prompt ve sonucun hâlâ rahat okunduğunu doğrulayan bir kontrol.

Referans site nasıl seçilir

Ödünç aldığın site, uygulamanın nasıl hissettireceğinin büyük kısmını belirler; bu yüzden buna on dakika ayır. İyi bir referansın şu özellikleri vardır:

  • Aynı türde bir ürün. Bir dashboard, moda mağazasından değil, başka bir dashboard'dan iyi ödünç alır.
  • Benzer bir yoğunluk. Uygulaman formlardan ve tablolardan oluşuyorsa, tek bir büyük hero alanı olan değil, formları ve tabloları olan bir site seç.
  • Tek ve net bir eylem rengi. Tıklanacak yeri tek bir renk işaretliyorsa, markayı değiştirmek o tek renk ailesini değiştirmek demektir.
  • Okunabilir yazılar. Siteyi telefonunda aç ve bir paragraf oku. Rahat okunuyorsa yazı ölçeği almaya değer.
  • İstediğin gibi açık ya da koyu. Önce koyu tema için tasarlanmış bir sistemi açık temaya çevirmek ince ayar değil, yeniden tasarımdır.
  • Markanın kendisi olmayan bir görünüm. Siteyi yalnızca renginden tanıyabiliyorsan, çok fazlasını değiştirmen gerekir.

DESIGN.md galerisi kategoriye göre filtrelenebilir; bu da birkaç adayı hızlıca karşılaştırmayı kolaylaştırır.

Adımlar

  1. İki üç site seç

    Yukarıdaki özellikleri kullan. Beğendiğin ekranların ekran görüntüleri sonra karar vermene yardımcı olur.

  2. Favorinin DESIGN.md dosyasını al

    Galeri sayfasından kopyala ya da URL'yi Design Extractor ana sayfasına yapıştırıp bir Pro çıkarma çalıştır. Pro sitenin önemli sayfalarını örnekler ve renkler, tipografi, boşluklar, köşe yarıçapları ve bileşen tarifleriyle tek bir dosya döndürür. Bu formatı ilk kez mi duyuyorsun? DESIGN.md'nin ne olduğunu oku.

  3. Kendine uyarla

    Marka rengi ailesini, ticari iseler fontları, adı ve üslubu değiştir. Aşağıdaki prompt bunu tek seferde yapar.

  4. Repona koy ve ajanını ona yönlendir

    Reponun kök dizinine DESIGN.md olarak kaydet. Eklenecek yönlendirme Claude Code ve Cursor rehberinde.

  5. Kontrol et

    Düzenlenmiş dosyayı ücretsiz DESIGN.md doğrulayıcıya yapıştır. Yapıyı kontrol eder ve kontrastı yetersiz metin renklerini işaretler.

Uygulamalı örnek: Notion

Diyelim ki Notion sitesinin hissini seviyorsun. İşte galerideki DESIGN.md'nin kaydettiği hâliyle tasarım sistemi ve neyi koruyup neyi değiştireceğin.

Renkler

Tipografi

hero-displayDesign is intelligence made visibleNotion Inter96px / 600 / 1.05
display-lgDesign is intelligence made visibleNotion Inter72px / 500 / 1.2
display-mdDesign is intelligence made visibleNotion Inter54px / 700 / 1.05
display-smDesign is intelligence made visibleNotion Inter40px / 400 / 1.5
title-lgDesign is intelligence made visibleNotion Inter24px / 500 / 0.85
title-mdDesign is intelligence made visibleNotion Inter22px / 700 / 1.25

Şekiller

xs · 4px
sm · 8px
md · 12px
full · 9999px

Notion DESIGN.md dosyasından çizilen ilk 12 renk, 6 yazı stili ve 4 köşe yarıçapı. Hex değerini kopyalamak için bir renk örneğine tıkla.

Neyi korumalı, neyi değiştirmeli

Dosyanın bölümüNotion DESIGN.md dosyasındaNe yapmalı
Yazı ölçeğihero-display, 96px, ağırlık 600 ile body, 16px, ağırlık 400 arasıKoru
Köşe yarıçaplarıxs 4px, sm 8px, md 12px, full 9999pxKoru
Nötr renklersurface #FFFFFF, ink #000000Koru
Bileşen biçimleriBoyut, iç boşluk, kenarlık ve durumlarıyla 14 bileşen tarifiKoru
Marka rengiprimary #0075DE, primary-focus #0075DE, primary-link #097FE8, primary-pressed #005BAB, primary-tint #E6F3FEKendi rengin ve tonlarıyla değiştir
FontlarNotion Inter, Lyon TextYalnızca kullanımı ücretsizse koru, değilse bir alternatif kullan
Adname: NotionÜrününün adıyla değiştir
ÜslupOverview bölümü onların kişiliğini anlatırBir iki cümleyle kendi kişiliğini anlatacak şekilde yeniden yaz
Logo ve görsellerDosyada yokKendi logonu, ikonlarını ve illüstrasyonlarını kullan
Fontlardan emin değil misin? Notion DESIGN.md dosyası bunu Typography bölümünde kelimesi kelimesine yanıtlıyor:
### Note on Font Substitutes
Notion Inter is a proprietary cut; use open-source **Inter** (variable) and keep the token tracking values exactly, since the negative display tracking is calibrated for Inter's metrics. Lyon Text is commercial; substitute **Source Serif 4** or **Newsreader** at the `quote` size and 1.55 line height, or fall back to Georgia as the site's own stack does. Check that the serif's x-height doesn't make 18px quotes read larger than surrounding 16px body.

Notion markasının herkese açık web sitesinden çıkarılmıştır; resmi marka yönergeleri değildir. Notion DESIGN.md dosyasının tamamını oku

Tek bir prompt'la kendine uyarla

Düzenlemeyi kodlama ajanın yapabilir. DESIGN.md'nin bulunduğu repoyu aç ve Acme'nin yerine kendi adın, rengin ve cümlenle şuna benzer bir prompt yapıştır. Bu prompt bu rehber için Notion markasının gerçek token adlarıyla yazıldı.

Make DESIGN.md our own design system:
- Rename it from "Notion" to "Acme" in the front matter name and the title.
- Replace primary (#0075DE) with our brand color #2F6FEB, and recompute primary-focus, primary-link, primary-pressed, primary-tint as matching shades.
- Replace the old primary hex values everywhere they appear, including in the component recipes.
- Where Notion Inter or Lyon Text is a commercial font, swap it for the open-source stand-in the Typography section names.
- Rewrite the Overview in our voice: Acme helps small teams plan their week.
Keep every other token as it is, and check that text on the new primary meets 4.5:1 contrast.

Sonra diff'i oku. Hex değerleri iki yerde değişir: en üstteki colors token'larında ve aşağıdaki her bileşen tarifinin CSS kodunda. İkisinin birlikte değişmesi gerekir, yoksa butonlar eski rengi korur.

Bir markayı neden olduğu gibi kopyalamamalısın

Ödünç alınan bir sistem bir başlangıç noktasıdır, kılık değil. Başkasının görünümünü hiç değiştirmeden yayınlamak sana faydadan çok zarar verir:

  • İnsanlar fark eder. Ünlü bir ürüne benzeyen ama farklı bir adı olan uygulama kopya gibi görünür ve bu güven kaybettirir.
  • Kimlik senin alabileceğin bir şey değil. Logolar, ürün adları, imza renkler, illüstrasyonlar ve metinler markaya aittir. Boşluklar, yazı boyutları ve köşe yarıçapları ise öğrenebileceğin ortak zanaattir.
  • Fontların lisansı vardır. Onların sitesindeki ticari bir font, seninki için lisansla gelmez.
  • Onu büyütmek isteyeceksin. Renkler ve üslup sana ait olduğunda yeni ekranlar eklemek, başkasının değil kendi ürününü geliştirmek gibi hissettirir.

Temel kural: yapıyı koru, kimliği değiştir. En azından marka rengini, logoyu, varsa ticari fontu ve üslubu değiştir. Galeri dosyaları her markanın herkese açık web sitesinden çıkarılmıştır, resmi marka yönergeleri değildir; senin çıkardığın her şey için de aynısı geçerli.

SSS

Tasarımcı olmadan bir tasarım sistemi ödünç al: sorular

Bunu denemeden önce en çok sorulanlara kısa yanıtlar.

Bir sitenin boşluklarını, yazı boyutlarını ve köşe yarıçaplarını başlangıç noktası olarak kullanmak, çoğu arayüzün yapılış biçimidir. Kimliğini kopyalamak ise uygun değildir: logosu, adı, imza marka rengi, illüstrasyonları veya metinleri. Bunları değiştir ve ticari bir fontu yalnızca lisansını alırsan kullan. Galeri dosyaları herkese açık web sitelerinden çıkarılmıştır; resmi marka yönergeleri değildir.

Birçok marka ticari veya özel fontlar kullanır. DESIGN.md her font ailesini tipografi token'larında adıyla belirtir ve Typography bölümü genellikle harf aralığı ve ağırlıklara dair notlarla birlikte açık kaynak bir alternatif önerir. Bu alternatifi kullan ya da benzer oranlara sahip ücretsiz bir font seç.

Galeriden bir dosyayı okumak ve kopyalamak ücretsizdir. Seçtiğin bir siteyi çıkarmak ön ödemeli kredi kullanır: bir Pro çıkarma 10 kredi tutar ve en uygun paket $5 for 50 credits. Krediler hiç sona ermez ve abonelik yoktur.

Hayır. Bu bir metin dosyası: renkler hex değerleri, fontlar adlar, boyutlar pikseldir. Değerleri değiştir ya da değişikliği kodlama ajanından iste, sonra sonucu ücretsiz DESIGN.md doğrulayıcıyla kontrol et; doğrulayıcı kontrastı yetersiz metin renklerini de işaretler.

Beğendiğin bir site mi buldun?

URL'sini yapıştır ve tasarım sistemini, kendine uyarlamaya hazır bir DESIGN.md olarak al.

Herhangi bir web sitesinden DESIGN.md al

İlgili rehberler

Tüm DESIGN.md rehberlerini gör