AI-translated from English; not yet reviewed by a fluent editor. # Gunakan referensi DESIGN.md versi tetap di Claude Code untuk satu halaman > Pilih satu berkas DESIGN.md versi tetap, berikan kepada Claude Code untuk mengedit halaman yang diizinkan, lalu periksa kode serta tampilan komputer dan ponsel. By BIG CHANGE Editorial Published: 2026-10-20T00:01:06.937Z Updated: 2026-10-20T00:01:06.937Z Canonical: https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide ![Conceptual charcoal illustration of one clipped design-reference sheet beside an unbranded display showing a simple webpage layout.](https://bigchange.ai/api/media/file/pinned-design-reference-one-page-hero-v1.png) AI-generated conceptual illustration by BIG CHANGE; no Claude Code run, Notion or edited and tested page is depicted. Halaman yang sudah ada memberi hal konkret untuk diperbaiki dan dipertahankan. [Koleksi Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.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](https://code.claude.com/docs/en/quickstart) 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](https://code.claude.com/docs/en/data-usage) dan [izin alat](https://code.claude.com/docs/en/permissions) 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](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md). Pilih satu `design-md//DESIGN.md` yang menawarkan ide relevan bagi masalah halaman yang telah ditetapkan. Baca seluruh berkas sebelum memakainya. [Contoh Notion](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) 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](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) 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](https://code.claude.com/docs/en/common-workflows) dan secara terpisah [berkas petunjuk proyek](https://code.claude.com/docs/en/memory); 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. ```markdown 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](https://bigchange.ai/blog/genspark-design-prototype-source-zip) 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](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) 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`](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) menggambarkan format dan pertentangan di dalamnya. Ini bukan spesifikasi yang disetujui Notion maupun sumber hak atas aset Notion. - Lisensi repositori [MIT](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) mewajibkan pemberitahuan hak cipta dan izin tetap disertakan pada salinan atau bagian substansial. - Dokumentasi Anthropic berupa [panduan awal Claude Code](https://code.claude.com/docs/en/quickstart), [petunjuk referensi berkas](https://code.claude.com/docs/en/common-workflows) dan [dokumentasi petunjuk proyek](https://code.claude.com/docs/en/memory) menjelaskan akses dan konteks eksplisit. Dokumentasi itu tidak memverifikasi edit halaman ini atau pemuatan otomatis referensi terpisah. - Dokumentasi Anthropic mengenai [biaya](https://code.claude.com/docs/en/costs), [penggunaan data](https://code.claude.com/docs/en/data-usage) dan [izin](https://code.claude.com/docs/en/permissions) menjelaskan penggunaan dan kontrol sesuai akun. Tidak ada sesi, tagihan, atau halaman hasil yang diuji untuk panduan ini. ## Sources - [README Awesome DESIGN.md versi tetap](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) — Deskripsi utama repositori dan petunjuk menyalin satu berkas pada commit yang tidak berubah. Isinya disebut analisis situs publik yang disediakan apa adanya; pernyataan mutu hasil bersifat promosi. Pohon lengkap commit ini yang ditinjau secara independen berisi 84 berkas DESIGN.md langsung, jumlah yang terikat versi. - [Contoh Notion DESIGN.md pada commit tetap](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) — Contoh analisis tata letak, jarak, tipografi, dan komponen. Bentuk tombol kapsul dan persegi panjang saling bertentangan, tidak ada perilaku penunjuk atau gerakan yang terbukti, dan terdapat saran perintah pemeriksaan kode yang belum diverifikasi. Ini analisis komunitas, bukan spesifikasi merek resmi Notion atau izin menyalin aset. - [Lisensi MIT Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) — Copyright (c) 2026 VoltAgent; pemberitahuan hak cipta dan izin harus tetap ada dalam salinan atau bagian substansial. Lisensi repositori ini tidak membuktikan hak atas merek dagang, logo, font proprieter, atau gambar situs yang diwakili. - [Panduan awal Claude Code](https://code.claude.com/docs/en/quickstart) — Syarat resmi proyek, akun atau penyedia, dan masuk akun. Pembaca harus memakai jalur yang memenuhi syarat dan proyek sendiri; BIG CHANGE tidak menguji penyiapan Claude Code atau akun berbayar. - [Alur kerja umum Claude Code](https://code.claude.com/docs/en/common-workflows) — Petunjuk resmi konteks @file eksplisit dan pekerjaan proyek. Mendukung rujukan sengaja ke berkas salinan sesuai pengaturan dan batas, bukan pemuatan otomatis sembarang DESIGN.md. - [Memori proyek Claude Code](https://code.claude.com/docs/en/memory) — Menjelaskan berkas petunjuk proyek dan pemuatan sesuai konfigurasi. Tidak membuktikan bahwa DESIGN.md terpisah dimuat hanya karena ada dalam repositori; panduan ini tidak mengubah konfigurasi petunjuk. - [Biaya Claude Code](https://code.claude.com/docs/en/costs) — Konteks penggunaan dan tagihan sesuai akun. Referensi Markdown tidak menambah dependensi paket, tetapi panduan ini tidak membuktikan harga tugas Claude Code tetap, jatah gratis, atau penghematan waktu. - [Penggunaan data Claude Code](https://code.claude.com/docs/en/data-usage) — Penanganan data resmi sesuai akun dan perilaku transkrip lokal. Pemilik harus meninjau kebijakan sebelum berbagi kode atau aset pribadi klien; tidak ada klaim umum bahwa pemrosesan hanya lokal atau mengenai pelatihan. - [Izin Claude Code](https://code.claude.com/docs/en/permissions) — Kontrol resmi izin alat. Petunjuk dalam prompt tidak dengan sendirinya memberi atau menegakkan akses alat; pembaca harus memeriksa tindakan yang diusulkan dan berkas yang benar-benar diubah.