Gunakan referensi DESIGN.md versi tetap di Claude Code untuk satu halaman

Halaman yang sudah ada memberi hal konkret untuk diperbaiki dan dipertahankan. Koleksi Awesome DESIGN.md dari VoltAgent menyediakan analisis teks biasa atas situs publik sebagai konteks bagi agen pemrograman AI. Panduan ini memakai satu berkas dari commit 14 Oktober 2026 sebagai referensi visual untuk edit terbatas di Claude Code. Hasil baru dianggap selesai setelah Anda memeriksa sendiri kode yang diubah dan halaman yang ditampilkan.

BIG CHANGE meninjau repositori versi tetap dan dokumentasi Claude Code. Kami tidak menjalankan Claude Code, mengedit halaman, mengukur waktu, atau memeriksa hasil buatan model. Pohon versi tersebut memuat 84 berkas langsung di bawah design-md/*/DESIGN.md; jumlah itu menggambarkan commit tersebut, bukan ukuran katalog yang tetap selamanya.

Perubahan besar

• Apa yang berubah: Satu analisis desain yang dikunci pada sebuah versi dapat diberikan sebagai konteks eksplisit untuk mengedit satu halaman yang diizinkan.
• Mengapa penting: Pemilik dapat mengambil ide tata letak atau jarak yang berguna sambil membandingkan hasil dengan isi, identitas, dan perilaku nyata halaman.
• Yang perlu diperhatikan: Referensi adalah analisis komunitas. Detail merek bahkan sebagian petunjuk di dalamnya mungkin keliru atau tidak cocok untuk halaman Anda.

Sebelum memulai

Anda memerlukan halaman dan repositori yang boleh diedit, salinan kerja atau cabang, cara menampilkan halaman secara lokal, serta akses ke Claude Code melalui akun atau penyedia yang memenuhi syarat. Tentukan berkas yang akan diubah dan cara proyek biasanya menjalankan serta memeriksa halaman tersebut. Catat pembaca sasaran, teks dan tautan penting, warna, font dan logo yang disetujui, serta satu masalah visual yang hendak diselesaikan. Simpan keputusan pemilik itu dekat salinan kerja sebagai dasar penilaian edit.

Periksa kebijakan data dan izin alat akun sebelum memberikan materi pribadi klien. Claude Code memproses prompt dan isi proyek sesuai ketentuan akun; proyek lokal tidak membuat sesi model sepenuhnya lokal. Pastikan Anda boleh membagikan teks, aset, atau kode pribadi yang akan terungkap melalui tugas tersebut.

Satu referensi untuk satu halaman

1. Buka README koleksi versi tetap. Pilih satu design-md/<name>/DESIGN.md yang menawarkan ide relevan bagi masalah halaman yang telah ditetapkan. Baca seluruh berkas sebelum memakainya. Contoh Notion menunjukkan formatnya: saran tata letak, tipografi, jarak, dan komponen. Di dalamnya ada bentuk tombol kapsul sekaligus persegi panjang. Pertentangan ini mengharuskan keputusan Anda sendiri, bukan meminta Claude Code mematuhi setiap baris.
2. Salin hanya satu DESIGN.md versi tetap itu ke proyek kerja, misalnya di design-reference/DESIGN.md. Catat URL asli, jalur, dan commit 3b605329240ce735b510037cca322f1831fdd7f8 di dekatnya. Sertakan pemberitahuan hak cipta dan izin MIT repositori bersama salinan. Referensi Markdown sendiri tidak memerlukan instalasi paket. Lisensi mencakup materi repositori, bukan hak memakai logo, berkas font, gambar, atau merek dagang perusahaan yang diwakili.
3. Buka Claude Code dari proyek yang diizinkan dan berikan berkas salinan sebagai konteks secara eksplisit. Anthropic mendokumentasikan referensi berkas dan secara terpisah berkas petunjuk proyek; menaruh DESIGN.md tersendiri dalam folder tidak membuktikan bahwa Claude Code telah memuatnya. Ganti jalur halaman dan aturan pemilik dalam kurung siku di bawah dengan nilai nyata, lalu pastikan Claude Code sudah membaca referensi sebelum menerima edit.

Read @design-reference/DESIGN.md as a visual reference. Edit only [path/to/owned-page] and the existing styles that page needs. Improve [one specific layout or hierarchy problem]. Keep the page's current audience, approved copy, links, brand colors, font and logo. Use only layout, hierarchy or spacing ideas that fit those rules. Do not copy the example site's name, assets or identity. Preserve working interactions and keyboard access. Show the proposed file changes and tell me how to render and check this page with this project's existing commands.

4. Baca perbedaan yang diusulkan sebelum menjalankan atau menerima. Periksa setiap berkas, teks, dan tautan yang berubah. Tolak dependensi, aset, atau edit halaman lain yang tidak diminta. Tampilkan halaman menggunakan perintah proyek yang sudah didokumentasikan. Buka pada lebar komputer dan ponsel; periksa halaman nyata, bukan penjelasan mengenai niat agen.
5. Bandingkan tampilan dengan persyaratan tertulis. Pastikan teks dan tautan yang diperlukan tetap ada, urutan judul berguna, kontras teks dan kontrol cukup, dan tata letak ponsel tidak memotong isi atau membutuhkan gulir mendatar. Gunakan papan ketik untuk menjangkau dan mengoperasikan tautan, tombol, menu, dan formulir yang terpengaruh. Uji interaksi yang diubah, termasuk fokus serta kesalahan yang terlihat. Catat revisi halaman, lebar, pemeriksaan, dan cacat. Terima edit hanya setelah pemeriksaan pada halaman Anda lulus.

Jika Claude Code melewatkan referensi, tunjukkan lagi berkasnya dan minta bagian yang dipakai. Jika referensi bertentangan dengan aturan merek, hapus petunjuk itu dari permintaan dan perbaiki kode terkait. Jika tautan, jalur fokus, atau interaksi rusak, pulihkan perilaku sebelumnya lalu buat edit lebih kecil. Jika halaman tidak bisa ditampilkan atau hasil tidak bisa diperiksa, jangan terima perubahan sampai pemeriksaan memungkinkan.

Koleksi berisi deskripsi komunitas tentang situs lain dan disediakan apa adanya oleh pengelola. Berkas Notion memiliki bentuk tombol yang bertentangan, perilaku saat penunjuk berada di atasnya yang tidak terdokumentasi, dan saran perintah pemeriksaan kode yang belum diverifikasi panduan ini. Pakai pemeriksaan proyek yang dikenal, bukan perintah itu. Penggunaan Claude Code serta biaya hosting atau aset berikutnya bergantung pada akun dan proyek; waktu edit maupun mutu desain akhir tidak dibuktikan di sini.

Untuk pendekatan lain dalam pembuatan halaman berbantuan AI, panduan prototipe Genspark kami menjelaskan menyalin prototipe yang dihosting dan memeriksa ZIP kode sumber hasil ekspor. Tugas itu dimulai dari artefak berbeda dan memiliki patokan selesai berbeda.

Sumber dan bacaan lanjutan

• README versi tetap VoltAgent menjelaskan koleksi serta analisis situs publik yang disediakan apa adanya. Jumlah berkas berasal dari pohon rekursif versi tetap, bukan pernyataan tentang versi mendatang.
• Berkas versi tetap Notion DESIGN.md menggambarkan format dan pertentangan di dalamnya. Ini bukan spesifikasi yang disetujui Notion maupun sumber hak atas aset Notion.
• Lisensi repositori MIT mewajibkan pemberitahuan hak cipta dan izin tetap disertakan pada salinan atau bagian substansial.
• Dokumentasi Anthropic berupa panduan awal Claude Code, petunjuk referensi berkas dan dokumentasi petunjuk proyek menjelaskan akses dan konteks eksplisit. Dokumentasi itu tidak memverifikasi edit halaman ini atau pemuatan otomatis referensi terpisah.
• Dokumentasi Anthropic mengenai biaya, penggunaan data dan izin menjelaskan penggunaan dan kontrol sesuai akun. Tidak ada sesi, tagihan, atau halaman hasil yang diuji untuk panduan ini.