Panduan

Mau membangun ulang situs Anda? Ekstrak dulu design system-nya

Rebuild, rebranding, atau pindah ke framework baru adalah saat sistem desain diam-diam hilang. Warnanya tersimpan di CSS lama, skala tipografinya di kepala seseorang, state tombolnya di komponen yang tidak ingin dibuka siapa pun.

Ekstrak situs Anda saat ini sebagai DESIGN.md sebelum Anda mengubah apa pun. Anda mendapat acuan tertulis untuk build baru, yang bisa dibaca tim Anda maupun agen coding Anda.

Ditulis untuk tim yang merencanakan rebuild, rebranding, atau migrasi. Diperbarui .

Yang akan Anda dapatkan

  • DESIGN.md dari situs Anda saat ini, di-commit sebelum baris pertama rebuild.
  • Gambaran jelas tentang apa yang berhasil ditangkap file itu dan apa yang tidak.
  • Checklist hal yang perlu diverifikasi secara manual: aset, state, motion, breakpoint, dan halaman di balik login.
  • Cara membandingkan situs baru dengan yang lama setelah selesai.

Kapan melakukan ini

  • Pindah framework. Tampilan sama, stack baru. DESIGN.md memungkinkan agen coding Anda membangun ulang komponen dengan nilai yang persis, alih-alih membaca stylesheet lama.
  • Rebranding. Simpan sistem lama terlebih dahulu, agar Anda tahu persis warna, font, dan radius mana yang berubah dan mana yang tetap.
  • Serah terima. Agensi atau tim baru mendapat satu file yang mendeskripsikan tampilan situs saat ini, alih-alih tur keliling codebase.

Langkah-langkah

  1. Ekstrak situs live sebelum Anda mengubah apa pun

    Tempel URL produksi Anda di beranda Design Extractor dan jalankan ekstraksi Pro. Halamannya harus publik: ekstraksi memuatnya seperti pengunjung, jadi localhost dan halaman di balik login tidak bisa.

  2. Commit sebagai acuan dasar

    Simpan sebagai DESIGN.md di repository baru dan commit sebelum rebuild dimulai. File ini kini mencatat tampilan situs pada hari itu.

  3. Baca bagian Known Gaps

    Bagian akhir file mencantumkan apa yang tidak dapat ditangkap ekstraksi. Setiap item di sana adalah hal yang perlu dicek secara manual.

  4. Cek apa yang tidak bisa dimuat DESIGN.md

    Aset, layar setelah login, motion, dan item lain di bawah. Tambahkan catatan ke file sambil jalan.

  5. Bangun dengan acuan file ini

    Arahkan agen coding Anda ke file ini, seperti yang ditunjukkan di panduan Claude Code dan Cursor, dan review setiap layar baru terhadapnya.

Apa yang ditangkap file dari Stripe

Untuk melihat apa yang Anda dapatkan, lihat DESIGN.md Stripe di galeri. Ekstraksi Pro-nya mengambil 5 halaman dari stripe.com: /nl, /nl/pricing, /nl/products, /nl/newsroom/news/stripe-openai-instant-checkout, /nl/contact/sales. Ekstraksi pada situs Anda sendiri menghasilkan struktur yang sama.

Warna21 token, masing-masing dengan perannya
Tipografi17 gaya dalam Sohne
Radius10 token
Spacing62 token
Komponen71 resep dalam HTML dan CSS: 44 lolos pengecekan terhadap halaman live, 27 ditandai atau tidak dapat dicek, masing-masing beserta alasannya
BagianOverview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts, Responsive Behavior, Iteration Guide, Known Gaps

Apa yang menurut file itu terlewat

File ini jujur tentang batasannya. 5 pertama dari 11 item di bagian Known Gaps-nya:

Dari bagian akhir DESIGN.md Stripe, persis seperti yang tertulis.
## 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.

Diekstrak dari website publik Stripe, bukan pedoman brand resmi. Baca DESIGN.md Stripe selengkapnya

File Anda sendiri akan punya daftarnya sendiri. Jadikan daftar itu to-do list untuk pengecekan di bawah.

Apa yang perlu dicek secara manual

ItemMengapa file mungkin melewatkannyaYang perlu dilakukan
Logo, ikon, gambarDESIGN.md mendeskripsikan style, bukan file.Ekspor dari codebase saat ini dan simpan bersama codebase yang baru.
Layar setelah loginEkstraksi hanya melihat halaman publik.Catat perbedaan aplikasi dengan situs pemasaran, seperti tabel yang lebih padat atau sidebar.
StateHover dan focus dicatat jika terlihat saat ekstraksi; state pressed, disabled, dan error sering tidak.Klik formulir dan tombol satu per satu dan catat state yang belum ada.
MotionTransisi dan animasi paling banyak hanya dideskripsikan dengan kata-kata.Catat durasi dan easing dari CSS saat ini.
BreakpointEkstraksi menangkap satu lebar desktop dan satu lebar mobile.Cek layout tablet dan catat di mana kolomnya berubah.
Template di luar sampelPro mengambil sampel sekitar lima halaman utama.Ekstrak secara terpisah halaman yang terlihat berbeda, seperti dokumentasi atau checkout.

Setelah rebuild

Setelah situs baru live, ekstrak lagi dan bandingkan kedua file-nya. Token yang tidak berubah berarti tampilannya bertahan; yang berubah adalah rebranding yang Anda rencanakan atau penyimpangan yang perlu diperbaiki.

Diff teks apa pun menampilkan nilai hex dan ukuran yang berubah. Paket @google/design.md dari Google menambahkan perintah diff yang membandingkan dua versi token demi token; penjelasan DESIGN.md membahas format dan tooling-nya. Jika Anda mengedit file secara manual di tengah jalan, cek dengan Validator DESIGN.md.

FAQ

Ekstrak sistem desain Anda sebelum rebuild: pertanyaan

Jawaban singkat atas pertanyaan yang sering diajukan sebelum mencoba ini.

Tidak. DESIGN.md adalah file teks yang mendeskripsikan style: warna, tipografi, spacing, radius, dan resep komponen dalam HTML dan CSS. Ekspor logo, ikon, ilustrasi, dan foto dari codebase atau file desain Anda saat ini dan simpan di sampingnya.

Tidak. Ekstraksi memuat halaman dari URL-nya seperti pengunjung biasa, jadi halaman di balik login, di localhost, atau di jaringan privat tidak didukung. Ekstrak situs publiknya, lalu catat perbedaan layar setelah login.

Pro mengambil sampel halaman-halaman utama situs, sekitar lima, dan menggabungkan temuannya ke dalam satu DESIGN.md. Jika template penting tidak termasuk, seperti halaman dokumentasi atau checkout, ekstrak juga URL halaman itu dan bandingkan kedua file-nya.

Ekstrak situs baru setelah live dan bandingkan kedua file-nya. Paket @google/design.md dari Google punya perintah diff yang membandingkan dua versi DESIGN.md token demi token, dan diff teks apa pun menampilkan nilai hex dan ukuran yang berubah.

Simpan situs Anda sebelum mengubahnya

Tempel URL produksi Anda. Ekstraksi Pro mengambil sampel halaman-halaman utamanya dan mengembalikan satu DESIGN.md.

Dapatkan DESIGN.md dari situs Anda saat ini

Panduan terkait

Lihat semua panduan DESIGN.md