Situs Web Non-Template dengan Claude Code dan Refero DESIGN.md

Materi praktis tentang bekerja dengan proyek dan model: dokumentasi Ailoot.

Mengapa Situs Web Claude Code Tampak Seperti Template Tailwind?#

Dalam contoh Januari yang dijelaskan, sebuah proyek sampingan kecil sedang dibuat—dialer penjualan dingin. Di repositori kosong, Claude Code diminta membuat halaman beranda. Hasilnya generik: latar belakang gelap slate-950, aksen purple-500, judul tebal sans-serif, dan tiga kartu di bawahnya dengan bayangan identik. Tata letak yang sama dengan rilis pertama ChatGPT, rilis pertama Lovable, dan rilis pertama v0. Setelah lima penyuntingan prompt yang menambahkan “modern,” “premium,” dan “tidak seperti yang lain”—tidak ada yang berubah. Halaman itu tetap tampak seperti berasal dari sekumpulan Tailwind UI Templates.

Artinya, Claude bukannya “tidak tahu” cara membuat sesuatu yang indah. Claude tahu apa yang paling banyak dibuat orang dan mereproduksi mayoritas tersebut. Untuk mendapatkan hasil yang tidak berupa rata-rata, agen memerlukan batasan yang spesifik: warna apa yang harus digunakan, font apa, spasi seperti apa, dan komponen mana yang harus dianggap sebagai acuan.

Di sinilah sistem desain berperan sebagai konteks. Bukan “buatlah tampak indah,” melainkan “buat dengan gaya spesifik ini; berikut parameternya.”

Refero Styles menjembatani kesenjangan itu dengan artefak siap pakai—file DESIGN.md yang berisi parameter dari produk nyata.

Apa Itu Refero Styles?#

Halaman beranda styles.refero.design menyatakannya dengan lugas: “temukan lebih dari 2.000 sistem desain dari situs web produk terkemuka yang dapat dibaca oleh agen AI.” Katalognya menampilkan merek-merek yang menetapkan standar visual: Apple, Linear, Stripe, Notion, Vercel, ElevenLabs, Mercury, PostHog, xAI, Modal, Duolingo. Sistem tersebut tidak diekstrak secara manual—tim Refero menjalankan skrip yang menganalisis CSS dan markup aktual suatu situs lalu mengemas hasilnya menjadi markdown terstruktur. Pustaka styles.refero.design sendiri gratis.

Kata kuncinya adalah “terstruktur.” File ini tidak berisi tangkapan layar maupun deskripsi seperti “dengan gaya minimalis.” Isinya markdown dengan kode warna hex yang spesifik, ukuran font tepat dalam pt, satuan spasi, dan aturan untuk komponen. Agen AI membaca file ini dan bekerja dengan detail konkret, alih-alih mencoba menjelaskan selera dengan kata-kata.

Tim Refero mencantumkan alat yang didukung di halaman ai-agents sebagai “Cursor, Claude Code, Codex, v0, dan Lovable.” Dengan kata lain, DESIGN.md berfungsi sebagai artefak universal—satu file yang cocok untuk semua agen pengembangan AI utama.

Apa Isi DESIGN.md?#

Tim Refero menjelaskan struktur file di halaman design-md-template sebagai berikut:

Jadi, struktur file biasanya seperti ini:

Para pembuatnya juga menekankan prinsip yang menyelesaikan 80% masalah desain AI:

Artinya, kode hex #5E6AD2 lebih kuat daripada “seperti Linear.” Nilai tepat font-size: 13px / line-height: 18px lebih kuat daripada “teks ringkas.” Detail konkret mengalahkan interpretasi.

DESIGN.md di repo bukan gambar untuk tim. File ini adalah blok penyusun konteks permanen proyek Anda: pengetahuan terstruktur yang dibaca AI pada setiap permintaan.

Cara Membuat Situs Web Bergaya Linear dalam 4 Langkah#

Empat langkah ini membentuk urutan yang dijelaskan untuk memulai situs web baru. Bukan “empat langkah secara umum,” melainkan urutan spesifik dengan satu tindakan untuk setiap langkah.

1. Instal Claude Code

   Penginstal satu perintah bawaan: curl -fsSL https://claude.ai/install.sh | bash (metode yang direkomendasikan dalam dokumentasi resmi). Di macOS, brew install --cask claude-code berfungsi; di Windows, winget install Anthropic.ClaudeCode. Jika sudah terinstal, periksa versinya: claude --version (diperlukan versi 2.1.178+—versi ini memperkenalkan izin Tool(param:value) dan pemblokiran perintah git berbahaya dalam mode auto). Masuk ke akun Anda: claude akan meluncurkan panduan penyiapan. Claude Code termasuk dalam langganan Pro ($17/bulan dengan tagihan tahunan atau $20/bulan dari bulan ke bulan).

2. Buka Refero Styles dan Pilih Merek

   Buka https://styles.refero.design dan buka katalognya. Kriteria pemilihan utama adalah seberapa cocok gaya itu dengan produk Anda, bukan apakah Anda “menyukai tampilannya.” Sedang membuat dasbor SaaS? Lihat Linear, Vercel, dan Notion. Sedang membuat produk fintech? Lihat Stripe, Mercury, dan Column. Sedang membuat produk untuk anggota? Lihat Duolingo. Buka kartu merek lalu klik “Copy DESIGN.md.”

3. Masukkan DESIGN.md ke Proyek sebagai Konteks

   Buat file docs/DESIGN.md di direktori root proyek dan tempel konten yang disalin. Lalu buka CLAUDE.md dan tambahkan satu baris: @docs/DESIGN.md. Ini adalah direktif impor—Claude Code memuat kontennya ke dalam konteks saat sesi dimulai. Untuk informasi selengkapnya tentang impor di CLAUDE.md, lihat panduan tentang satu file instruksi untuk Claude Code, Codex, dan Cursor.

4. Minta Halaman yang Spesifik

   Jangan katakan “buatlah indah.” Jelaskan secara spesifik: “Dengan menggunakan DESIGN.md dalam konteks, buat halaman beranda untuk produk SaaS manajemen tugas. Struktur: hero dengan judul dan subjudul, dua tombol CTA (primer dan sekunder), blok di bawahnya dengan 3 fitur dan ikon, lalu blok testimoni. Gunakan persis warna dan tipografi dari DESIGN.md; jangan mengarang sendiri.”

Setelah langkah keempat, Claude membuat halaman tersebut. Dalam pengalaman yang dijelaskan, halaman beranda rata-rata memerlukan 8–12 menit—and memang tampil mendekati gaya merek yang dipilih. Bukan salinan yang sempurna hingga ke piksel, tetapi memiliki estetika yang mudah dikenali: font yang sama, palet yang sama, ritme spasi yang sama, dan keputusan-keputusan kecil yang sama pada tombol.

Para pembuat Refero menjelaskan prinsip tiga langkah yang sama dengan lebih ringkas di halaman ai-agents/design-resources mereka:

Urutan empat langkah ini mengikuti logika yang sama, dengan tambahan langkah eksplisit untuk memasang Claude Code dan mengimpor file ke CLAUDE.md.

Gaya Mana yang Sebaiknya Dipilih untuk Produk Anda?#

Para pembuat Refero memberikan saran ini tepat di langkah pertama panduan mereka: pilih referensi bukan hanya berdasarkan nama merek, tetapi juga kepadatan, nada, dan audiens.

Apa artinya dalam praktik? Warna, tipografi, hierarki, dan gerak terkendali yang diturunkan dari Apple dapat cocok untuk dasbor SaaS, sementara jarak lapang pada halaman pemasaran produk tertentu mungkin tidak. Periksa referensi spesifik alih-alih memilih berdasarkan nama merek. Untuk dasbor akuntansi, tentukan tinggi baris, jarak, dan kepadatan informasi ringkas secara eksplisit dengan mempertahankan angka serta kontrol yang terbaca; jangan menyalin tata letak presentasi lapang tanpa perubahan.

Panduan sederhana untuk memilih berdasarkan jenis produk:

Jika masih ragu, pilih Linear. Dasarnya paling serbaguna: palet netral, tipografi yang mudah dibaca (Inter / Söhne), dan spasi terkendali. Situs web yang didasarkan pada Linear akan tampak profesional untuk 9 dari 10 jenis produk.

Mengapa Menjadikan DESIGN.md Bagian dari Konteks Permanen Proyek?#

Dalam praktik yang dijelaskan, DESIGN.md disimpan di samping CLAUDE.md dalam setiap proyek yang dikelola dengan agen AI. File ini tidak dianggap “sementara untuk satu tugas.” File ini adalah kanon permanen yang menjadi acuan semua sesi mendatang. Sebulan lagi, Anda dapat meminta Claude menambahkan halaman baru ke proyek—Claude akan membuka DESIGN.md yang sama dan membuatnya dengan gaya yang sama. Enam bulan lagi, Anda dapat menyerahkan proyek kepada anggota tim lain—mereka juga dapat menjalankan Claude dan memperoleh hasil yang konsisten karena DESIGN.md berada di repo.

Dalam desain, prinsipnya bekerja seperti ini: sebuah keputusan dibuat sekali—palet, tipografi, dan ritme spasi. Setelah itu, setiap agen AI menganggapnya sebagai ketentuan.

Artinya, desain hidup sebagai kode (markdown adalah kode), bukan sebagai file Figma yang tidak dapat dibaca AI. Saat desain menjadi file di repo, Claude Code membacanya, Codex membacanya, dan alat apa pun di masa mendatang dapat membacanya. Saat desain berada di Figma, desain itu hidup di ruang terpisah dan harus diterjemahkan secara manual untuk setiap sesi.

Dalam proyek sampingan yang dijelaskan, struktur ini digunakan:

project/
├── CLAUDE.md            (imports @docs/DESIGN.md)
├── docs/
│   ├── DESIGN.md        (visual canon, copied from Refero)
│   ├── ARCHITECTURE.md  (project structure)
│   └── BRAND.md         (tone of voice, vocabulary)
└── ...

Ketiga file ini merupakan salah satu cara menata konteks permanen proyek. DESIGN.md menangani visual, ARCHITECTURE.md menangani struktur, dan BRAND.md menangani suara merek. Agen AI mana pun yang dapat mengakses repo akan memperoleh ketiganya sebagai konteks.

Apa Itu Refero MCP dan refero_skill?#

Refero Styles adalah lapisan dasar (DESIGN.md sebagai file). Gelombang berikutnya terdiri atas integrasi yang membuat akses ke pustaka tersebut menjadi “native” bagi agen AI.

Refero MCP (resmi). Ini adalah server API di https://api.refero.design/mcp yang dihubungkan ke Claude Code menggunakan token bearer. Agen kemudian memiliki akses ke lebih dari 150.000 layar dan lebih dari 6.000 alur pengguna dari produk nyata. Anda dapat memasangnya dengan sebuah skill:

npx skills add https://github.com/referodesign/refero_skill --skill refero-design

Setelah dipasang, Claude menjalankan “riset desain” pada awal setiap sesi sebagai langkah awal wajib: Claude melihat pilihan visual yang sesuai dengan tugas dan, jika perlu, mengusulkan tiga arah yang terkait dengan referensi pilihan. Per 23 Juni 2026, repositori refero_skill memiliki 67 commit dan 135 bintang. Ini produk baru yang sedang aktif dikembangkan.

Praktik yang dijelaskan menggunakan pendekatan sederhana: buka situs secara manual, salin DESIGN.md, lalu masukkan ke file. MCP berguna ketika bekerja dengan sistem desain menjadi rutinitas—misalnya, saat Anda mengelola beberapa proyek klien dan beralih di antara kanon visual setiap hari. Untuk informasi lebih lanjut tentang menghubungkan server MCP ke Claude Code, lihat panduan tentang NotebookLM dan MCP.

4 Kesalahan Apa yang Mengacaukan Alur Kerja?#

Empat kesalahan ini muncul dalam pengalaman bekerja dengan konteks desain yang dijelaskan. Masing-masing tampak tidak berbahaya, tetapi setiap kesalahan mengembalikan hasil ke template Tailwind standar.

Kesalahan 1. Prompt “buatlah modern.” Ini pola kesalahan yang paling umum. Orang membuka Claude Code dan menulis, “buatkan saya situs web SaaS, gaya modern, tampilan premium.” Hasilnya adalah latar belakang gelap dan aksen ungu. Dalam data pelatihan, kata “modern” berkorelasi dengan semua landing page 2022–2024 yang dibuat dari template yang sama. Tanpa parameter tepat dari DESIGN.md, “modern” berarti “rata-rata.”

Kesalahan 2. Menempelkan DESIGN.md ke chat sebagai pesan. Terkadang orang menyalin DESIGN.md ke jendela chat Claude Code dan berkata, “ini gayanya, gunakan.” Cara ini berhasil sekali—sampai sesi berakhir. Buka sesi baru (atau beralih ke tugas lain, /clear), dan konteksnya hilang. Jika ingin gaya tersebut tetap tersedia, file harus berada di repo dan diimpor dalam CLAUDE.md. Untuk mengetahui alasan CLAUDE.md menjadi sumber konteks permanen, lihat panduan memori Claude.

Kesalahan 3. Memilih gaya karena Anda “menyukainya.” Referensi pemasaran Apple yang lapang mungkin buruk jika disalin tanpa perubahan ke dasbor real estat yang memerlukan 30 listing di layar. Itu tidak menyingkirkan tipografi, palet, atau hierarki turunan Apple: sesuaikan jarak dan kepadatan baris dengan tugas, lalu periksa informasi yang benar-benar terlihat pada ukuran layar sasaran. Pilih referensi tertentu berdasarkan kepadatan, nada, dan audiens, bukan hanya nama merek.

Kesalahan 4. Tidak menyebut DESIGN.md dalam prompt itu sendiri. DESIGN.md mungkin ada di repo, diimpor melalui CLAUDE.md, dan terlihat oleh agen. Namun, jika prompt mengatakan “buat situs web,” Claude mungkin memilih cara standar tanpa secara eksplisit merujuk pada file tersebut. Untuk setiap prompt desain, baris ini berguna: “Gunakan persis warna, font, dan spasi dari docs/DESIGN.md. Jangan mengarang nilai sendiri—ambil dari file.” Ini memastikan agen menggunakan DESIGN.md alih-alih melewatinya.

Token yang tepat adalah kode hex, ukuran font dalam pt, dan satuan spasi dalam DESIGN.md. Bahasa alami berarti “modern,” “premium,” “bersih,” atau “seperti Apple.” Token yang tepat berfungsi; kata-kata bebas tidak.

Apa yang Harus Dilakukan Selanjutnya?#

Kini Anda memiliki alur kerja dasar: Claude Code + DESIGN.md dari Refero + 4 langkah = situs web non-template. Ini mencakup 70% kebutuhan. Sisa 30% adalah kasus ketika Anda memerlukan presisi lebih tinggi, kecepatan lebih tinggi, atau verifikasi.

Tiga arah yang dapat ditempuh setelah menguasai dasar-dasarnya:

1. Frontend Design Skill. Ini adalah skill resmi untuk Claude Code yang menambahkan umpan balik visual. Agen mengambil tangkapan layar halaman yang telah dirakit dengan Puppeteer, melihatnya dengan “matanya” (model visi), membandingkannya dengan DESIGN.md, lalu mengusulkan sendiri koreksi. Ini adalah putaran otomatis “prompt → kode → tangkapan layar → kritik → prompt.” Berguna ketika halaman rumit dan Anda tidak dapat membuatnya benar dalam satu iterasi.

2. Refero MCP dalam mode produksi. Saat Anda mengelola 3–5 proyek secara paralel, menambahkan DESIGN.md secara manual untuk setiap proyek menjadi merepotkan. Refero MCP dapat menemukan 3 gaya yang sesuai berdasarkan deskripsi proyek dan menawarkan pilihan. Ini mempercepat memulai proyek baru dari 30 menit menjadi 3.

3. Kombinasi dengan Context Engineering. DESIGN.md adalah salah satu artefak konteks. Bersamanya, biasanya ada ARCHITECTURE.md (struktur proyek), BRAND.md (suara merek), dan business/audience.md (audiens sasaran). Semuanya diimpor dalam CLAUDE.md. Saat Claude membuat halaman, Claude mengandalkan visual, audiens, dan struktur produk. Pada dasarnya, ini adalah context engineering—kerja sistematis atas informasi yang Anda berikan kepada agen sebelum permintaan dibuat.

Materi praktis: dokumentasi Ailoot.

Materi praktis: dokumentasi Ailoot.

Materi dan alat lainnya: Ailoot.