Buat Claude Code dan Cursor membangun UI yang mirip sebuah website

Mengapa DESIGN.md lebih baik daripada screenshot#

Langkah-langkah#

1. 1

   Pilih situs yang antarmukanya terasa seperti yang sedang Anda bangun

   Layar produk dengan kepadatan serupa lebih cocok daripada landing page dengan hero besar. Jika Anda membangun dashboard, pilih produk yang punya dashboard. Cek galeri DESIGN.md dulu: mungkin file-nya sudah ada di sana.

2. 2

   Dapatkan DESIGN.md-nya

   Salin dari halaman galeri, atau tempel URL-nya di beranda Design Extractor dan jalankan ekstraksi Pro. Pro mengambil sampel halaman-halaman utama situs, dan satu ekstraksi memakan waktu setidaknya satu menit.

3. 3

   Simpan sebagai DESIGN.md di root repository Anda

   Taruh di samping README.md dan AGENTS.md lalu commit, agar setiap branch dan agen milik setiap rekan tim membaca file yang sama.

4. 4

   Arahkan agen Anda ke file itu

   Tambahkan rujukan singkat ke CLAUDE.md untuk Claude Code, atau project rule untuk Cursor. Blok-bloknya ada di bawah.

5. 5

   Minta UI dengan istilah dari file itu

   Sebutkan token dan komponen di prompt Anda (primary, body-md, resep tombol) dan minta agen mencantumkan nilai yang tidak ditemukannya alih-alih mengarangnya.

6. 6

   Review hasilnya terhadap file

   Cek warna, font, radius, dan state terhadap DESIGN.md sebelum Anda menerima perubahannya.

Contoh nyata: Linear#

---
name: Linear
colors:
  primary: "#5E6AD2"
  canvas: "#08090A"
  surface: "#121414"
  surface-raised: "#1C1C1F"
  ink: "#F7F8F8"
  ink-secondary: "#D0D6E0"
  muted: "#8A8F98"
  subtle: "#62666D"
typography:
  hero-display:
    fontFamily: Inter Variable
    fontSize: 72px
    fontWeight: 510
    lineHeight: 1
    letterSpacing: -1.584px
  body-lg:
    fontFamily: Inter Variable
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: normal
rounded:
  xs: 2px
  sm: 4px
  sm-2: 4.4625px
  md: 5px
---

Arahkan agen Anda ke file itu#

## Design
Follow DESIGN.md in the repository root for every UI change.
Use its color, typography, rounded and component tokens instead of inventing values.
Before you build a button, card or input, read its recipe in the Components section.

---
description: Follow DESIGN.md for every UI change
alwaysApply: true
---
Follow DESIGN.md in the repository root for every UI change.
Use its color, typography, rounded and component tokens instead of inventing values.
Before you build a button, card or input, read its recipe in the Components section.

Prompt yang memakai token#

Build a pricing page with three plan cards. Follow DESIGN.md:
- use primary (#5E6AD2) only where the file says it belongs
- set headings in hero-display and body copy in body-lg
- reuse the button-ghost recipe for the plan buttons, with its hover and focus states
- start the plan cards from the card recipe
List any value you could not find in DESIGN.md instead of inventing one.

@DESIGN.md Restyle the settings form in src/app/settings to match this file.
Take colors, type and radii from the tokens and inputs and buttons from the component recipes.
Keep the existing layout and logic, and list any value you could not find in the file.

Review apa yang dibangun agen#

• Warna. Cari nilai hex di diff. Setiap nilai seharusnya ada di DESIGN.md. Nilai baru biasanya berarti agen menebak.
• Font. Banyak brand memakai font komersial yang tidak boleh Anda pakai. Bagian Typography di file biasanya menyebut pengganti open source; pastikan agen memuat font itu, bukan fallback sembarangan.
• Radius dan spacing. Tombol dan kartu seharusnya memakai token rounded dari file, bukan default seperti 8px di semua tempat.
• State. Style hover dan focus adalah bagian dari setiap resep komponen. Tekan Tab untuk menelusuri halaman dan cek focus ring-nya.
• Resep yang ditandai. Jika file menandai sebuah resep sebagai flagged, geometrinya hanya perkiraan. Bandingkan komponen itu dengan situs aslinya.

Jika Anda mengedit DESIGN.md secara manual, cek dengan Validator DESIGN.md gratis sebelum agen Anda membacanya lagi.

File yang dipakai dalam panduan ini#

Setiap halaman galeri ini berisi DESIGN.md lengkap untuk disalin ke repo Anda, beserta palet dan contoh tipografinya.

• 
  Software & SaaS · Productivity & Notes

  Linear

  Sistem desain Linear mengusung gaya dark-first dan berkepadatan tinggi, dibuat untuk tim engineering. Palet permukaannya berpusat pada hitam pekat (#08090a, #0f1011) dengan lapisan abu-abu gelap yang berbeda-beda untuk membedakan sidebar, kartu, dan panel. Tipografinya hanya menggunakan Inter Variable dengan letter-spacing negatif yang presisi pada ukuran display, dan Berkeley Mono untuk kode inline. Bahasa radius-nya sengaja dibuat kecil (dominan 2–6px), sedangkan bentuk pill hanya dipakai untuk badge dan chip status. Elevasi dibentuk lewat border inset 1px yang halus dan bayangan tipis beropasitas rendah, bukan lapisan yang dramatis. Warna CTA utama adalah indigo khas Linear (#5e6ad2), digunakan pada tombol Sign Up dan tautan-tautan penting.

• 
  Keuangan & Fintech

  Stripe

  Homepage marketing Stripe menggunakan sistem desain yang sangat terkontrol (HDS — Stripe Design System) yang dibangun di sekitar font variabel "sohne-var" pada bobot ringan (300–400), palet merek dari navy tua hingga indigo yang berpusat pada #533afd (Stripe Indigo), dan hero dengan gradien spektral tepi-ke-tepi yang menjadi ciri khasnya. Komponennya memiliki radius sudut rendah (4–6px), bayangan datar hingga minimal, serta tersusun di atas grid spasi dasar 8px. Nuansa keseluruhannya berwibawa namun tetap ramah, menyampaikan infrastruktur keuangan lewat tipografi yang percaya diri dan penggunaan warna yang terukur.

• 
  Developer & Infrastruktur · Developer Tools & IDEs

  Supabase

  Supabase menggunakan sistem desain yang mengutamakan tema gelap, bertumpu pada latar belakang hampir hitam pekat (oklch ~0.19) dengan aksen hijau cerah sebagai warna merek (#3ecf8e / #3fcf8e). Tata letaknya tersusun dalam grid kartu fitur yang responsif, dengan Manrope untuk judul display dan Inter untuk teks badan serta elemen antarmuka. Source Code Pro digunakan untuk semua konteks monospace dan kode. Sistem warnanya dibangun di atas custom property oklch dengan penamaan semantik. Kartu memakai radius 12px dengan perlakuan border yang halus, tombol memakai radius 6–8px, dan kepadatan keseluruhannya sedang dengan grid spasi dasar 8px.

Jelajahi semua contoh DESIGN.md