Panduan

Padukan dua situs referensi menjadi satu desain untuk prototipe

“Buat nuansanya seperti Notion bertemu Stripe.” Klien sering memberi brief prototipe seperti ini. Dengan DESIGN.md untuk setiap situs, Anda bisa mengubah kalimat itu menjadi satu spesifikasi yang konkret: bandingkan token-nya berdampingan, tentukan file mana yang memimpin, lalu gabungkan.

Design Extractor memberi Anda kedua file-nya. Penggabungannya Anda yang lakukan, secara manual atau dengan agen coding Anda, dan panduan ini menunjukkan keduanya.

Ditulis untuk desainer dan agensi yang membuat prototipe. Diperbarui .

Yang akan Anda dapatkan

  • Dua file DESIGN.md yang dibandingkan token demi token, sehingga perbedaannya konkret.
  • Rencana penggabungan: satu file sebagai dasar, ditambah grup token yang disebutkan dari file lainnya.
  • DESIGN.md gabungan, dibuat secara manual atau oleh agen Anda dengan prompt di bawah.
  • Pengecekan kontras, agar hasil paduannya tetap mudah dibaca.

Cara kerja memadukan desain

Memadukan bukan merata-ratakan. Mencampur separuh palet dari satu situs dengan separuh palet situs lain menghasilkan situs yang tidak mirip keduanya. Yang berhasil adalah satu file dasar ditambah beberapa bagian tertentu dari file lainnya:

  • Dasar memberi struktur: skala tipografi, spacing, radius, dan resep komponen.
  • Aksen meminjamkan grup secara utuh, seperti keluarga warna primary atau font display-nya, tidak pernah nilai tunggal yang lepas.

Kedua file mengikuti spesifikasi DESIGN.md dari Google, jadi grupnya sejajar: colors, typography, rounded, spacing, dan components. Lihat isi DESIGN.md untuk struktur lengkapnya.

Langkah-langkah

  1. Dapatkan kedua file

    Salin dari galeri jika tersedia, atau tempel setiap URL di beranda Design Extractor dan jalankan ekstraksi Pro untuk masing-masing.

  2. Letakkan berdampingan

    Bandingkan warna primary, latar, font, ukuran teks, dan radius, seperti di tabel di bawah.

  3. Pilih dasarnya

    Pilih situs yang layout dan kepadatannya cocok dengan prototipe.

  4. Sebutkan apa yang dipinjamkan aksen

    Tuliskan sebagai grup token, seperti “keluarga warna primary-nya”.

  5. Gabungkan secara manual atau dengan agen Anda

    Kedua cara ada di bawah. Simpan hasilnya sebagai DESIGN.md di repo prototipe.

  6. Cek kontras dan struktur

    Tempel file gabungan ke Validator DESIGN.md gratis.

Contoh nyata: Notion bertemu Stripe

Dua file asli dari galeri: DESIGN.md Notion dan DESIGN.md Stripe. Keduanya diekstrak dari website publik brand tersebut dan bukan pedoman brand resmi.

NotionStripe
Primary#0075DE#533AFD
Latar#FFFFFF#FFFFFF
Teks#000000#061B31
FontNotion Inter, Lyon TextSohne
Teks terbesarhero-display, 96px, ketebalan 600hero-display, 56px, ketebalan 500
Teks isibody, 16px, ketebalan 400body-lg, 18px, ketebalan 300
Radius tombol8px4px
Token warna2021
Resep komponen1471

Salah satu cara memadukannya

Ambil Notion sebagai dasar untuk tipografi, spacing, radius, dan komponennya, lalu biarkan Stripe meminjamkan keluarga warna primary-nya (primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft). Itulah brief klasik “layout kami, energi mereka”.

Cek angkanya sebelum Anda memutuskan. Warna primary Stripe di atas latar Notion memiliki kontras 6.1:1. Teks on-primary milik Notion di atas primary yang baru mencapai 6.1:1. Teks isi membutuhkan kontras minimal 4.5:1 menurut WCAG AA; teks besar dan ikon membutuhkan 3:1.

Satu jebakan: primary milik Notion sendiri, #0075DE, muncul 65 kali di file-nya, sebagian besar di dalam resep komponen. Mengganti token di bagian atas saja tidak cukup; setiap salinannya harus diubah.

Ilustrasi dari penggabungan manual yang dijelaskan di atas, disusun oleh halaman ini dari dua file galeri: token Notion dengan keluarga warna primary Stripe, diringkas. Ini bukan fitur Design Extractor dan bukan output agen.
---
name: Notion and Stripe prototype
colors:
  primary: "#533AFD"
  primary-focus: "#5452FB"
  primary-bright: "#635BFF"
  primary-pressed: "#4032C8"
  primary-deep: "#2E2B8C"
  primary-soft: "#D6D9FC"
  on-primary: "#FFFFFF"
  ink: "#000000"
typography:
  hero-display:
    fontFamily: Notion Inter
    fontSize: 96px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -4.6px
  body:
    fontFamily: Notion Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: normal
rounded:
  xs: 4px
  sm: 8px
  md: 12px
  full: 9999px
---

Gabungkan secara manual

  1. Salin file dasar ke DESIGN.md dan ubah name-nya.
  2. Di colors, ganti keluarga warna primary milik dasar dengan nilai dari aksen.
  3. Cari setiap nilai hex lama di seluruh file dan ganti. Resep komponen mengulang warna di CSS-nya, jadi daftar token saja tidak cukup.
  4. Tulis ulang teks Overview dan Colors agar mendeskripsikan hasil paduan, bukan salah satu brand.
  5. Cek file di validator dan perbaiki peringatan kontras apa pun.

Gabungkan dengan agen Anda

Simpan kedua file di repo prototipe, misalnya di bawah design/, lalu beri agen Anda prompt yang menyebut file dasar, grup yang diambil, dan pengecekan yang harus dijalankan. Prompt ini ditulis untuk panduan ini dengan nama file dan token yang asli.

Read design/notion.DESIGN.md and design/stripe.DESIGN.md. Write DESIGN.md for our prototype:
- Start from the Notion file: keep its typography, spacing, rounded tokens and component recipes.
- Take Stripe's primary color family (primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft) and use it wherever the Notion file uses its own primary colors, including inside the component recipes.
- Rename the file and rewrite the Overview and Colors prose so they describe the blend, not either brand.
- Keep the section order of Google's DESIGN.md spec, and make sure text on the new primary meets 4.5:1 contrast.
List every value you changed.

Review hasilnya seperti perubahan lainnya: baca diff-nya, lalu tempel file ke validator. Agen yang mengetik; keputusan di dalam prompt tetap milik Anda.

FAQ

Padukan dua desain website menjadi satu: pertanyaan

Jawaban singkat atas pertanyaan yang sering diajukan sebelum mencoba ini.

Tidak, tidak ada fitur penggabungan. Setiap ekstraksi mengembalikan DESIGN.md dari satu situs. Anda menggabungkan dua file secara manual, atau meminta agen coding Anda melakukannya dengan prompt seperti di panduan ini, lalu me-review hasilnya.

Dua, kadang tiga. Satu file menjadi dasar dan memberi struktur: skala tipografi, spacing, radius, dan komponen. File lainnya meminjamkan bagian tertentu, seperti keluarga warna atau font display. Mencampur nilai dari lebih banyak file membuat hasilnya terlihat tambal sulam.

File yang layout dan kepadatannya cocok dengan prototipe. Jika klien menginginkan produk yang tenang seperti dokumen dengan warna dari satu situs, situs yang tenang itu menjadi dasar dan situs lainnya meminjamkan warnanya, bukan sebaliknya.

Tempel file gabungan ke Validator DESIGN.md gratis. Validator mengecek struktur dan menandai warna teks dengan kontras yang terlalu rendah. Lalu bangun satu layar sungguhan dengan file itu sebelum Anda menunjukkannya ke klien.

Dapatkan kedua file untuk brief Anda

Tempel URL setiap situs referensi dan dapatkan DESIGN.md-nya, siap dibandingkan dan digabungkan.

Dapatkan DESIGN.md dari website apa pun

Panduan terkait

Lihat semua panduan DESIGN.md