Edisi Markdown

AI-translated from English; not yet reviewed by a fluent editor.

# Buat DESIGN.md yang disetujui pemilik untuk Claude Code

> Tulis spesifikasi visual dari keputusan merek yang disetujui, gunakan untuk dua penyuntingan kecil dengan Claude Code, lalu periksa perbedaan dan hasil rendernya.

By BIG CHANGE Editorial

Published: 2026-10-20T01:05:55.739Z
Updated: 2026-10-20T01:05:55.739Z
Canonical: https://bigchange.ai/blog/claude-code-owner-approved-design-md-guide

![Conceptual charcoal illustration of a small visual reference clipped to a wall rail above two separate framed layout proofs.](https://bigchange.ai/api/media/file/owner-approved-design-reference-two-proofs-hero-v1.png)
AI-generated conceptual illustration by BIG CHANGE.

Agen pemrograman AI hanya dapat mengikuti referensi visual sejauh keputusan di dalamnya jelas. Jika Anda memiliki proyek dan sudah mempunyai aturan merek yang disetujui, kumpulkan aturan itu dalam satu berkas `DESIGN.md` yang dapat ditinjau, lalu gunakan Claude Code untuk dua penyuntingan kecil yang Anda periksa sendiri. Hasil yang harus diserahkan adalah spesifikasi Anda yang disetujui. Kedua penyuntingan memeriksa kegunaannya pada materi tertentu tersebut; keduanya tidak menetapkan hasil penyuntingan berikutnya.

Prosedur ini berdasarkan dokumentasi. BIG CHANGE meninjau koleksi berkas desain pada revisi tetap dan panduan Claude Code dari Anthropic pada 20 Oktober 2026. Kami tidak menjalankan Claude Code, menyunting atau merender kedua materi, maupun mengukur biaya atau kualitas desain.

## Perubahan utama

- **Apa yang berubah:** Pemilik dapat menulis spesifikasi visual berversi dari keputusan yang disetujui dan memberikan berkas yang tepat tersebut kepada Claude Code sebelum penyuntingan terbatas.
- **Mengapa ini penting:** Satu sumber yang diperiksa menyediakan aturan warna, tipografi, dan tata letak untuk dibandingkan dengan dua revisi nyata, sedangkan pemilik menentukan apakah setiap hasil dapat diterima.
- **Yang perlu diperhatikan:** Berkas harus dibaca seluruhnya sebelum setiap penyuntingan. Keberadaannya di proyek, penyebutan jalur, atau jaminan Claude tidak membuktikan bahwa berkas dimuat atau diikuti.

## Sebelum memulai

Anda memerlukan proyek milik sendiri, izin menyuntingnya, dua materi kecil yang sudah ada dan dapat dirender, serta salinan kerja atau titik kontrol versi yang dapat dipulihkan. Materi itu boleh berupa dua halaman atau satu halaman dan satu presentasi, asalkan Anda mengetahui alur penyuntingan dan render yang sebenarnya untuk setiap proyek. Pilih satu perubahan visual terbatas untuk masing-masing. Simpan teks, tautan, dan interaksi yang masih berfungsi untuk perbandingan.

Kumpulkan nilai warna yang disetujui pemilik **dan fungsinya**, fon berlisensi atau diizinkan beserta penggantinya, aturan penggunaan logo dan gambar, pembaca sasaran, ukuran, serta persyaratan aksesibilitas. Gunakan catatan persetujuan yang nyata atau minta pemilik menyelesaikan pilihan yang belum ditentukan. Situs publik perusahaan atau analisis desain orang lain tidak mengizinkan nilai atau aset untuk proyek Anda. Persetujuan pemilik atas suatu aset juga tidak otomatis mengizinkan pengirimannya kepada penyedia model.

Siapkan [Claude Code](https://code.claude.com/docs/en/quickstart) dengan akun atau penyedia yang memenuhi syarat, lalu tinjau [ketentuan penggunaan data](https://code.claude.com/docs/en/data-usage) dan [izin alat](https://code.claude.com/docs/en/permissions) akun tersebut sebelum mengungkap kode, teks, atau aset privat. Proyek yang disimpan secara lokal tetap dapat mengirim konten ke layanan model. Periksa siapa yang boleh melihat materi, alat mana yang dapat membaca atau mengubah berkas, dan apakah Anda boleh mengirim setiap item. [Panduan biaya](https://code.claude.com/docs/en/costs) bergantung pada akun dan penyedia; panduan ini tidak dapat menetapkan harga tetap untuk sesi Anda.

Koleksi [Awesome DESIGN.md pada revisi tetap](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) adalah inspirasi opsional untuk bagian-bagian berkas. Koleksi itu menganalisis situs publik; bukan pedoman merek yang disetujui pemilik. Anda dapat menulis berkas langsung dari keputusan yang disetujui. Jika menyalin teks repositori, pertahankan [pemberitahuan hak cipta dan izin MIT](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE)-nya. Pemberitahuan itu tidak memberikan hak atas merek, berkas fon, atau gambar milik situs lain.

## Buat referensi yang disetujui pemilik

1. Buat `brand-reference/DESIGN.md` di proyek milik sendiri. Isi struktur minimal ini berdasarkan catatan persetujuan. Teks dalam kurung siku menyebut informasi yang harus diberikan pemilik; bukan usulan merek. Biarkan suatu item bertanda `UNRESOLVED` sampai pemilik memutuskannya. Jangan meminta Claude mengarang nilai untuk mengisi kekosongan.

```markdown
# Visual specification

Owner: [owner or approving role]
Approved version/date: [version and approval date, or UNRESOLVED]
Audience and artifact purpose: [owner-approved description]
Approval evidence: [internal record or location, without private data in a shared copy]

## Color roles and values
- Background: [approved value and color format, or UNRESOLVED]
- Text: [approved value and color format, or UNRESOLVED]
- Primary action: [approved value and color format, or UNRESOLVED]
- Link, border and status roles: [each approved value, or UNRESOLVED]

## Typography and scale
- Heading family and permitted fallback: [approved names, or UNRESOLVED]
- Body family and permitted fallback: [approved names, or UNRESOLVED]
- Heading/body sizes, weights and line heights: [approved scale, or UNRESOLVED]
- Font license or use restriction: [approved terms, or UNRESOLVED]

## Spacing and layout
- Spacing scale, content width and grid: [approved values, or UNRESOLVED]
- Target artifact dimensions: [approved sizes, or UNRESOLVED]

## Components and states
- Buttons, links, inputs and navigation: [approved appearance and behavior]
- Hover, focus, disabled and error states: [approved rules, or UNRESOLVED]

## Responsive and accessibility rules
- Desktop/phone behavior and breakpoints: [approved rules, or UNRESOLVED]
- Contrast, readable type, focus order and touch use: [approved requirements]

## Assets and forbidden substitutions
- Permitted logo/image assets and usage: [approved paths and permissions]
- Do not substitute: [owner-approved prohibited colors, fonts, marks or patterns]

## Owner approval and changes
- Approved by: [person or role and date, or UNRESOLVED]
- Version: [version]
- Changelog: [date, change, approver]
- Unresolved decisions: [list, or "none" after owner review]
```

2. Periksa setiap baris yang diisi terhadap keputusan asli pemilik, termasuk hak penggunaan fon dan gambar. Selesaikan konflik antara gaya lama proyek dan aturan terkini yang disetujui bersama pemilik. Minta persetujuan atas berkas yang tepat ini dan catat versinya. Tunda penyuntingan yang bergantung pada nilai yang belum diselesaikan. Simpan berkas yang disetujui dan kedua materi awal dalam kontrol versi atau salinan lain yang dapat dipulihkan.

## Gunakan berkas untuk dua penyuntingan terbatas

3. Di proyek milik sendiri, mulai sesi Claude Code dengan akun dan izin yang telah diperiksa. Berikan jalur yang tepat untuk `brand-reference/DESIGN.md` dan materi pertama. Minta Claude terlebih dahulu membaca **seluruh** referensi dan materi, lalu berhenti sebelum menyunting. Periksa hasil nyata pembacaan berkas atau alat untuk memastikan jalur benar dan konten lengkap. Pembacaan yang ditolak, hasil terpotong, penyebutan jalur saja, atau ringkasan lisan tidak cukup. Anthropic mendokumentasikan [berkas instruksi proyek](https://code.claude.com/docs/en/memory) sebagai pilihan penyiapan terpisah; jangan menganggap sembarang `DESIGN.md` ditemukan otomatis atau mengandalkan referensi `@` berperilaku sama pada berbagai versi.
4. Setelah pembacaan lengkap terlihat, minta satu perubahan visual yang dipilih untuk materi pertama dengan menggunakan aturan yang disetujui saja. Batasi berkas yang disentuh; pertahankan teks, tautan, kontrol, dan kode yang tidak terkait. Minta diperlihatkan perbedaan usulan dan cara render yang sudah digunakan proyek. Periksa setiap berkas yang diubah sebelum menerimanya. Tolak warna, fon, aset, dependensi, atau penyuntingan tambahan yang tidak disetujui.
5. Render materi pertama dengan **alur proyek yang sebenarnya**. Bandingkan hasilnya dengan berkas yang disetujui dan materi awal pada ukuran komputer serta ponsel yang sesuai bagi proyek. Periksa nilai token dalam berkas yang diubah, kontras yang terbaca, hierarki judul dan tipografi, bagian terpotong atau luapan horizontal, fokus yang terlihat, papan ketik dan interaksi yang disentuh, serta teks dan tautan yang tidak berubah. Catat versi referensi, revisi materi, pemeriksaan, dan koreksi. Deskripsi render bukan hasil yang dirender.
6. Untuk materi kedua, sebutkan lagi jalur tepatnya dan `brand-reference/DESIGN.md`. Minta pembacaan lengkap yang baru **sebelum** menyuntingnya dan periksa hasil alat. Kemudian minta satu perubahan terbatas, tinjau perbedaan, render dengan alur materi kedua sendiri, dan ulangi pemeriksaan yang sama. Bandingkan kedua revisi terhadap **versi berkas disetujui yang sama**. Catat setiap aturan sebagai diikuti, terlewat, atau memerlukan revisi yang disetujui pemilik; perbaiki penyimpangan dan periksa ulang kedua materi jika referensi berubah.

Pekerjaan selesai ketika Anda memiliki spesifikasi berversi yang disetujui pemilik, dua revisi yang diperiksa dan dirender, serta catatan singkat aturan yang dipenuhi atau terlewat. Simpan revisi asli agar dapat dipulihkan. Jika pembacaan gagal, periksa jalur tepat, izin, dan ukuran berkas atau pemotongan sebelum meminta penyuntingan. Jika spesifikasi bertentangan dengan gaya proyek atau aksesibilitas, dapatkan keputusan pemilik dan persempit perubahan. Jika materi tidak dapat dirender atau interaksi tidak dapat diperiksa, jangan menerima penyuntingan itu sampai pemeriksaannya dapat dilakukan. Perubahan merek berikutnya memerlukan peninjauan baru yang disengaja terhadap hasil sebelumnya.

Untuk tugas berbeda yang memakai berkas komunitas sebagai referensi satu halaman, lihat [panduan DESIGN.md kami pada revisi tetap](https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide). Tugas panduan ini adalah membuat dan menyetujui spesifikasi Anda sendiri terlebih dahulu.

## Sumber dan bacaan lanjutan

- Dokumen [README Awesome DESIGN.md pada revisi tetap](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) memberikan contoh bagian dan menyebut berkasnya sebagai analisis situs publik yang disediakan apa adanya. Bahasa tentang kualitas keluaran bukan hasil yang diuji di sini. [Lisensi MIT](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) mengatur materi repositori yang disalin, bukan identitas atau aset pihak ketiga.
- Panduan [mulai cepat Anthropic](https://code.claude.com/docs/en/quickstart) mencakup penyiapan akun dan proyek. [Alur kerja umum](https://code.claude.com/docs/en/common-workflows) dan [panduan memori proyek](https://code.claude.com/docs/en/memory) -nya menjelaskan alur berkas dan instruksi; keduanya bukan bukti bahwa berkas mandiri ini dibaca sepenuhnya dalam sesi pembaca.
- Panduan Anthropic tentang [izin](https://code.claude.com/docs/en/permissions), [penggunaan data](https://code.claude.com/docs/en/data-usage) dan [biaya](https://code.claude.com/docs/en/costs) menjelaskan kontrol dan ketentuan yang bergantung pada akun. Panduan tersebut tidak menetapkan adanya penyuntingan yang diamati, pemrosesan khusus lokal, tagihan tetap, atau peningkatan kualitas dalam panduan ini.

## Sources

- [README Awesome DESIGN.md pada revisi tetap](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) — Koleksi komunitas pada revisi tetap dan contoh bagian referensi desain. Koleksi itu menganalisis situs publik dan menyediakan berkas apa adanya; promosi tentang kualitas dan pemakaian instan bukan bukti hasil pemilik ini atau persetujuan merek yang ditampilkan. Salinan sumber privat lengkap dan verifikasi independen ada dalam paket penerimaan yang disetujui.
- [Lisensi MIT Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) — Pemberitahuan hak cipta dan izin repositori pada revisi tetap harus tetap menyertai teks yang disalin atau bagian substansialnya. Pemberitahuan itu sendiri tidak memberikan hak atas nama, merek dagang, logo, fon milik eksklusif, atau gambar situs yang ditampilkan.
- [Mulai cepat Claude Code](https://code.claude.com/docs/en/quickstart) — Persyaratan resmi akun/penyedia, masuk, dan proyek. BIG CHANGE tidak menguji pemasangan, akses, atau sesi Claude untuk panduan ini.
- [Alur kerja umum Claude Code](https://code.claude.com/docs/en/common-workflows) — Alur resmi berkas proyek dan peninjauan perubahan. Panduan ini mengharuskan pembacaan lengkap yang teramati dan perbedaan nyata untuk setiap materi, alih-alih bergantung pada singkatan referensi berkas yang peka versi.
- [Memori proyek Claude Code](https://code.claude.com/docs/en/memory) — Mendokumentasikan instruksi proyek dan impor opsional sebagai konfigurasi. Tidak membuktikan bahwa brand-reference/DESIGN.md mandiri dimuat otomatis atau salah satu penyuntingan pembaca mengikutinya.
- [Izin Claude Code](https://code.claude.com/docs/en/permissions) — Kontrol resmi izin alat. Persetujuan pemilik atas konten merek dan instruksi prompt Claude terpisah dari kewenangan nyata atas berkas/alat serta izin mengirim materi privat.
- [Penggunaan data Claude Code](https://code.claude.com/docs/en/data-usage) — Pemrosesan dan retensi bergantung pada akun dan penyedia. Proyek lokal tidak menetapkan sesi model yang hanya lokal; pembaca harus memeriksa hak sebelum memberikan konten privat.
- [Biaya Claude Code](https://code.claude.com/docs/en/costs) — Panduan resmi penggunaan dan penagihan menurut akun serta penyedia. Tidak ada harga tetap, jatah gratis, penghematan waktu, atau biaya tugas yang diukur untuk prosedur ini.
- [BIG CHANGE: gunakan referensi DESIGN.md pada revisi tetap dalam Claude Code untuk satu halaman](https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide) — Liputan terkait sebagai konteks tentang penerapan referensi komunitas pada revisi tetap ke halaman yang sudah ada. Tidak menulis spesifikasi disetujui yang khusus untuk pemilik dan bukan sumber langkah baru panduan ini atau kelanjutan dalam “In this story”.