Rehber

Siteni yeniden mi inşa ediyorsun? Önce tasarım sistemini çıkar

Yeniden inşa, marka yenileme veya yeni bir framework'e geçiş, bir tasarım sisteminin sessizce kaybolduğu andır. Renkler eski CSS dosyalarında, yazı ölçeği birinin kafasında, buton durumları kimsenin açmak istemediği bir bileşende yaşar.

Herhangi bir şeyi değiştirmeden önce mevcut siteni DESIGN.md olarak çıkar. Yeni yapı için yazılı bir başlangıç noktası elde edersin; hem ekibinin hem de kodlama ajanının okuyabileceği bir başlangıç noktası.

yeniden inşa, marka yenileme veya geçiş planlayan ekipler için yazıldı. Güncellenme: .

Ne elde edeceksin

  • Mevcut sitenin, yeniden inşanın ilk satırından önce commit'lenmiş DESIGN.md dosyası.
  • Dosyanın neyi yakaladığına ve neyi yakalamadığına dair net bir görünüm.
  • Elle doğrulanacakların kontrol listesi: varlıklar, durumlar, hareket, breakpoint'ler ve giriş gerektiren sayfalar.
  • İş bittiğinde yeni siteyi eskisiyle karşılaştırmanın bir yolu.

Bunu ne zaman yapmalı

  • Framework geçişi. Aynı görünüm, yeni teknoloji yığını. DESIGN.md, kodlama ajanının eski stil dosyalarını okumak yerine bileşenleri birebir değerlerle yeniden oluşturmasını sağlar.
  • Marka yenileme. Önce eski sistemi kaydet; böylece hangi renklerin, fontların ve köşe yarıçaplarının değişip hangilerinin kaldığını tam olarak bilirsin.
  • Devir. Yeni bir ajans veya yeni bir ekip, kod tabanında tur atmak yerine sitenin bugün nasıl göründüğünü anlatan tek bir dosya alır.

Adımlar

  1. Herhangi bir şeyi değiştirmeden önce canlı siteyi çıkar

    Canlı sitenin URL'sini Design Extractor ana sayfasına yapıştır ve bir Pro çıkarma çalıştır. Sayfa herkese açık olmalı: çıkarma onu bir ziyaretçi gibi yükler, bu yüzden localhost ve giriş gerektiren sayfalar çalışmaz.

  2. Başlangıç noktası olarak commit'le

    Yeni repoya DESIGN.md olarak kaydet ve yeniden inşa başlamadan önce commit'le. Artık sitenin o gün nasıl göründüğünü kayıt altına alır.

  3. Known Gaps bölümünü oku

    Dosyanın sonu, çalıştırmanın yakalayamadıklarını listeler. Oradaki her madde elle kontrol edilecek bir şeydir.

  4. DESIGN.md'nin tutamayacaklarını kontrol et

    Varlıklar, giriş yapılmış ekranlar, hareket ve aşağıdaki diğer maddeler. İlerledikçe dosyaya notlar ekle.

  5. Ona göre geliştir

    Claude Code ve Cursor rehberinde gösterildiği gibi kodlama ajanını dosyaya yönlendir ve her yeni ekranı ona göre incele.

Dosyanın Stripe için yakaladıkları

Ne elde ettiğini görmek için galerideki Stripe DESIGN.md dosyasına bak. Pro çalıştırması stripe.com sitesinden 5 sayfa yakaladı: /nl, /nl/pricing, /nl/products, /nl/newsroom/news/stripe-openai-instant-checkout, /nl/contact/sales. Kendi sitende yapılan bir çalıştırma aynı yapıyı üretir.

RenklerHer biri rolüyle birlikte 21 token
TipografiSohne ile 17 stil
Köşe yarıçapları10 token
Boşluklar62 token
BileşenlerHTML ve CSS ile 71 tarif: 44 tanesi canlı sayfaya karşı kontrolü geçti, 27 tanesi işaretlendi veya kontrol edilemedi; her biri gerekçesiyle
BölümlerOverview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts, Responsive Behavior, Iteration Guide, Known Gaps

Kaçırdığını söyledikleri

Dosya sınırları konusunda dürüst. Known Gaps bölümündeki 11 maddenin ilk 5 tanesi:

Stripe DESIGN.md dosyasının sonundan, yazıldığı gibi.
## Known Gaps

- **Many recipes did not reproduce exactly.** `button-primary` (84% pixel match), `card` (78%), `card-2` (94%), `promo-banner` (77%) and `skip-link` (0%; it is visually hidden until focused) are approximations. So are several header and footer recipes (`header-landing`, `header-inner-2` timed out, `footer-landing`, `footer-inner`, `footer-inner-2`).
- **Some recipes could not be judged at all.** `stat` and `stat-2` were not verifiable, because page media covered most of the element.
- **Some elements were never visible.** `footer-landing`, `header-inner` and `logo-strip-item` were not visible when verification ran, so their values come from computed styles only.
- **No section rhythm was measured.** `sectionRhythm` is empty, so vertical spacing between page sections and the inner padding of large cards is described only qualitatively.
- **No `base` spacing step was published.** The evidence frequency (4px, 8px, 12px, 16px and 24px most common) suggests a 4px-derived grid, but it is not a verified token.

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

Kendi dosyanın kendi listesi olacak. Onu aşağıdaki kontroller için yapılacaklar listen olarak kullan.

Elle kontrol edilecekler

MaddeDosya neden kaçırabilirNe yapmalı
Logo, ikonlar, görsellerDESIGN.md dosyaları değil, stilleri tanımlar.Mevcut kod tabanından dışa aktar ve yenisiyle birlikte sakla.
Giriş yapılmış ekranlarÇıkarma yalnızca herkese açık sayfaları görür.Uygulamanın pazarlama sitesinden nasıl farklılaştığını listele; örneğin daha yoğun tablolar veya bir kenar çubuğu.
DurumlarHover ve focus, çalıştırmanın onları gördüğü yerlerde kaydedilir; pressed, disabled ve hata durumları çoğu zaman kaydedilmez.Formlara ve butonlara tıklayarak eksik durumları not al.
HareketGeçişler ve animasyonlar en fazla kelimelerle tanımlanır.Süreleri ve easing değerlerini mevcut CSS kodundan not al.
Breakpoint'lerÇalıştırma bir masaüstü ve bir mobil genişlik yakalar.Tablet düzenini kontrol et ve sütunların nerede değiştiğini not al.
Örneklem dışındaki şablonlarPro yaklaşık beş önemli sayfayı örnekler.Dokümantasyon veya ödeme sayfası gibi farklı görünen her sayfayı ayrıca çıkar.

Yeniden inşadan sonra

Yeni site yayına girdiğinde onu tekrar çıkar ve iki dosyayı karşılaştır. Değişmeyen token'lar görünümün korunduğunu gösterir; değişenler ya planladığın marka yenilemesidir ya da düzeltilmesi gereken bir sapma.

Herhangi bir metin diff'i değişen hex değerlerini ve boyutları gösterir. Google'ın @google/design.md paketi, iki sürümü token token karşılaştıran bir diff komutu ekler; DESIGN.md açıklaması formatı ve araçlarını anlatır. Dosyayı bu süreçte elle düzenlersen DESIGN.md doğrulayıcıyla kontrol et.

SSS

Yeniden inşadan önce tasarım sistemini çıkar: sorular

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

Hayır. DESIGN.md stilleri tanımlayan bir metin dosyasıdır: renkler, tipografi, boşluklar, köşe yarıçapları ve HTML ile CSS olarak yazılmış bileşen tarifleri. Logoyu, ikonları, illüstrasyonları ve fotoğrafları mevcut kod tabanından veya tasarım dosyalarından dışa aktar ve onun yanında sakla.

Hayır. Çıkarma, sayfayı bir ziyaretçi gibi URL'sinden yükler; bu yüzden giriş gerektiren, localhost'ta veya özel bir ağda bulunan sayfalar desteklenmez. Herkese açık siteyi çıkar ve giriş yapılmış ekranların nasıl farklılaştığını not al.

Pro sitenin önemli sayfalarını, yaklaşık beş tanesini örnekler ve bulduklarını tek bir DESIGN.md'de birleştirir. Dokümantasyon sayfası veya ödeme sayfası gibi önemli bir şablon bunların arasında değilse, o sayfanın URL'sini de çıkar ve iki dosyayı karşılaştır.

Yeni site yayına girdiğinde onu çıkar ve iki dosyayı karşılaştır. Google'ın @google/design.md paketinde, bir DESIGN.md'nin iki sürümünü token token karşılaştıran bir diff komutu vardır; herhangi bir metin diff'i de değişen hex değerlerini ve boyutları gösterir.

Değiştirmeden önce siteni kaydet

Canlı sitenin URL'sini yapıştır. Pro çıkarma önemli sayfalarını örnekler ve tek bir DESIGN.md döndürür.

Mevcut sitenin DESIGN.md dosyasını al

İlgili rehberler

Tüm DESIGN.md rehberlerini gör