Laman Web Tanpa Templat dengan Claude Code dan Refero DESIGN.md

Bahan praktikal tentang bekerja dengan projek dan model: dokumentasi Ailoot.

Mengapa Laman Web Claude Code Kelihatan Seperti Templat Tailwind?#

Dalam contoh Januari yang dihuraikan, sebuah projek sampingan kecil sedang dibina — pendail jualan sejuk. Claude Code diminta membina halaman utama dalam repositori kosong. Hasilnya generik: latar belakang gelap slate-950, aksen purple-500, tajuk tebal dengan fon sans serif dan tiga kad di bawahnya yang mempunyai bayang-bayang serupa. Susun atur yang sama seperti keluaran pertama ChatGPT, keluaran pertama Lovable dan keluaran pertama v0. Selepas lima suntingan pada arahan dengan tambahan “moden”, “premium” dan “tidak seperti yang lain” — tiada apa yang berubah. Halaman itu masih kelihatan seperti diambil daripada koleksi Tailwind UI Templates.

Maksudnya, Claude bukannya “tidak tahu” cara menghasilkan sesuatu yang cantik. Claude tahu apa yang dilakukan oleh kebanyakan orang lalu mengulanginya. Untuk mendapatkan hasil yang bukan purata, ejen memerlukan kekangan khusus: warna yang perlu digunakan, fon, jarak dan komponen yang perlu dianggap sebagai piawaian.

Di sinilah sistem reka bentuk berperanan sebagai konteks. Bukan “jadikannya cantik”, tetapi “hasilkannya dalam gaya khusus ini; berikut parameternya”.

Refero Styles merapatkan jurang itu dengan artifak sedia guna — fail DESIGN.md yang mengandungi parameter daripada produk sebenar.

Apakah Refero Styles?#

Halaman utama styles.refero.design menyatakannya dengan jelas: “terokai lebih daripada 2,000 sistem reka bentuk daripada laman web produk terkemuka yang boleh dibaca oleh ejen AI”. Katalognya menampilkan jenama yang menetapkan piawaian visual: Apple, Linear, Stripe, Notion, Vercel, ElevenLabs, Mercury, PostHog, xAI, Modal, Duolingo. Sistem ini tidak diekstrak secara manual — pasukan Refero menjalankan skrip yang menganalisis CSS dan penanda sebenar sesebuah laman, kemudian membungkus hasilnya menjadi Markdown berstruktur. Pustaka styles.refero.design sendiri adalah percuma.

Kata kuncinya ialah “berstruktur”. Fail itu tidak mengandungi tangkap layar atau huraian seperti “dalam gaya minimalis”. Ia ialah Markdown dengan warna heks yang khusus, saiz fon tepat dalam pt, unit jarak dan peraturan untuk komponen. Ejen AI membaca fail ini dan menggunakan butiran khusus, bukannya cuba menghuraikan cita rasa dengan kata-kata.

Pasukan Refero menyenaraikan alat yang disokong pada halaman ai-agents sebagai “Cursor, Claude Code, Codex, v0 dan Lovable”. Dengan kata lain, DESIGN.md berfungsi sebagai artifak sejagat — satu fail yang sesuai untuk semua ejen pembangunan AI utama.

Apakah yang terkandung dalam DESIGN.md?#

Pasukan Refero menerangkan struktur fail pada halaman design-md-template seperti berikut:

Struktur fail biasanya kelihatan seperti ini:

Para pencipta turut menekankan satu prinsip yang menyelesaikan 80% masalah reka bentuk AI:

Kod heks #5E6AD2 lebih berkesan daripada “seperti Linear”. Nilai tepat font-size: 13px / line-height: 18px lebih berkesan daripada “teks padat”. Butiran khusus mengatasi tafsiran.

DESIGN.md dalam repositori bukan imej untuk pasukan. Ia ialah blok binaan konteks kekal projek anda: pengetahuan berstruktur yang dibaca AI bagi setiap permintaan.

Cara Membina Laman Web dalam Gaya Linear dalam 4 Langkah#

Empat langkah ini membentuk urutan yang dihuraikan untuk memulakan laman web baharu. Bukan “empat langkah secara umum”, tetapi urutan khusus dengan satu tindakan bagi setiap langkah.

1. Pasang Claude Code

   Pemasang asli dengan satu arahan: curl -fsSL https://claude.ai/install.sh | bash (kaedah yang disyorkan dalam dokumentasi rasmi). Pada macOS, brew install --cask claude-code berfungsi; pada Windows, winget install Anthropic.ClaudeCode. Jika sudah dipasang, semak versi: claude --version (versi 2.1.178+ diperlukan — versi ini memperkenalkan kebenaran Tool(param:value) dan menyekat arahan git berbahaya dalam mod automatik). Log masuk ke akaun anda: claude akan melancarkan wizard. Claude Code disertakan dalam langganan Pro ($17/bulan dengan pengebilan tahunan atau $20/bulan dengan pengebilan bulanan).

2. Buka Refero Styles dan Pilih Jenama

   Pergi ke https://styles.refero.design dan buka katalog. Kriteria utama pemilihan ialah sejauh mana ia sepadan dengan produk anda, bukannya sama ada anda “suka rupanya”. Sedang membina papan pemuka SaaS? Lihat Linear, Vercel dan Notion. Membina produk fintech? Lihat Stripe, Mercury dan Column. Membina produk untuk ahli? Lihat Duolingo. Buka kad jenama dan klik “Copy DESIGN.md”.

3. Letakkan DESIGN.md dalam Projek sebagai Konteks

   Cipta fail docs/DESIGN.md pada akar projek dan tampal kandungan yang disalin. Kemudian buka CLAUDE.md dan tambah satu baris: @docs/DESIGN.md. Ini ialah arahan import — Claude Code memuatkan kandungannya ke dalam konteks apabila sesi bermula. Untuk maklumat lanjut tentang import dalam CLAUDE.md, lihat panduan satu fail arahan untuk Claude Code, Codex dan Cursor.

4. Minta Halaman Khusus

   Jangan kata “jadikannya cantik”. Berikan butiran khusus: “Dengan menggunakan DESIGN.md dalam konteks, bina halaman utama untuk produk SaaS pengurusan tugas. Struktur: bahagian hero dengan tajuk dan subtajuk, dua butang CTA (utama dan sekunder), bahagian di bawah dengan 3 ciri serta ikon, kemudian bahagian testimoni. Gunakan warna dan tipografi tepat daripada DESIGN.md; jangan reka sendiri.”

Selepas langkah keempat, Claude membina halaman tersebut. Dalam pengalaman yang dihuraikan, halaman utama mengambil masa purata 8–12 minit — dan memang kelihatan hampir sama dengan gaya jenama yang dipilih. Bukan salinan tepat hingga ke piksel, tetapi estetikanya dapat dikenali: fon yang sama, palet yang sama, rentak jarak yang sama dan keputusan kecil yang sama pada butang.

Pencipta Refero menerangkan prinsip tiga langkah yang sama dengan lebih ringkas pada halaman ai-agents/design-resources:

Urutan empat langkah ini mengikut logik yang sama, dengan langkah tambahan yang dinyatakan secara jelas untuk memasang Claude Code dan mengimport fail ke dalam CLAUDE.md.

Gaya Mana yang Patut Dipilih untuk Produk Anda?#

Pencipta Refero memberikan nasihat ini pada langkah pertama panduan mereka: pilih rujukan bukan sahaja berdasarkan nama jenama, tetapi juga kepadatan, nada dan khalayak.

Apakah maksudnya dalam praktik? Warna, tipografi, hierarki dan gerakan terkawal berasaskan Apple boleh sesuai untuk papan pemuka SaaS, sementara jarak luas sesuatu halaman pemasaran mungkin tidak. Periksa rujukan khusus, bukan memilih berdasarkan nama jenama. Untuk papan pemuka perakaunan, tetapkan tinggi baris, jarak dan kepadatan maklumat padat secara jelas sambil mengekalkan nombor serta kawalan mudah dibaca; jangan salin susun atur pembentangan luas tanpa perubahan.

Panduan ringkas pemilihan berdasarkan jenis produk:

Jika anda masih ragu-ragu, pilih Linear. Asasnya paling serba guna: palet neutral, tipografi yang mudah dibaca (Inter / Söhne) dan jarak yang sederhana. Laman web berasaskan Linear akan kelihatan profesional untuk 9 daripada 10 jenis produk.

Mengapa Menjadikan DESIGN.md Sebahagian daripada Konteks Kekal Projek?#

Dalam amalan yang dihuraikan, DESIGN.md disimpan di sebelah CLAUDE.md dalam setiap projek yang diuruskan dengan ejen AI. Fail ini tidak dianggap “sementara untuk satu tugas”. Ia ialah kanun kekal yang menjadi sandaran semua sesi akan datang. Sebulan kemudian, anda boleh meminta Claude menambah halaman baharu kepada projek — Claude akan membuka DESIGN.md yang sama dan membinanya dalam gaya yang sama. Enam bulan kemudian, anda boleh menyerahkan projek kepada ahli pasukan lain — mereka juga boleh menjalankan Claude dan mendapat hasil yang konsisten kerana DESIGN.md berada dalam repositori.

Dalam reka bentuk, prinsip ini berfungsi begini: satu keputusan dibuat sekali — palet, tipografi dan rentak jarak. Selepas itu, setiap ejen AI menganggapnya sebagai ketetapan.

Maksudnya, reka bentuk hidup sebagai kod (Markdown ialah kod), bukannya sebagai fail Figma yang tidak dapat dibaca AI. Apabila reka bentuk berupa fail dalam repositori, Claude Code membacanya, Codex membacanya dan apa-apa alat pada masa hadapan juga boleh membacanya. Apabila reka bentuk berada dalam Figma, ia terpisah dan perlu diterjemahkan secara manual dalam setiap sesi.

Dalam projek sampingan yang dihuraikan, 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-tiga fail ini ialah satu cara untuk menyusun konteks kekal projek. DESIGN.md mengurus visual, ARCHITECTURE.md mengurus struktur dan BRAND.md mengurus suara. Mana-mana ejen AI yang mendapat akses kepada repositori akan menerima ketiga-tiganya sebagai konteks.

Apakah Refero MCP dan refero_skill?#

Refero Styles ialah lapisan asas (DESIGN.md sebagai fail). Gelombang seterusnya terdiri daripada integrasi yang menyediakan akses “natif” kepada pustaka untuk ejen AI.

Refero MCP (rasmi). Ini ialah API pelayan di https://api.refero.design/mcp yang disambungkan kepada Claude Code menggunakan bearer token. Ejen itu kemudian mendapat akses kepada lebih daripada 150,000 skrin dan 6,000 aliran pengguna daripada produk sebenar. Anda boleh memasangnya dengan skill:

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

Selepas pemasangan, Claude memulakan “penyelidikan reka bentuk” pada permulaan setiap sesi sebagai langkah pertama yang wajib: Claude melihat pilihan visual yang sesuai untuk tugas tersebut dan, jika perlu, mencadangkan tiga arah yang dikaitkan dengan rujukan pilihan. Pada 23 Jun 2026, repositori refero_skill mempunyai 67 commit dan 135 bintang. Produk baharu yang sedang giat dibangunkan.

Amalan yang dihuraikan menggunakan pendekatan mudah: buka laman secara manual, salin DESIGN.md dan letakkannya dalam fail. MCP berguna apabila bekerja dengan sistem reka bentuk menjadi rutin — contohnya, apabila anda mengurus beberapa projek pelanggan dan bertukar antara kanun visual setiap hari. Untuk maklumat lanjut tentang menyambungkan pelayan MCP kepada Claude Code, lihat panduan NotebookLM dan MCP.

Apakah 4 Kesilapan yang Mengganggu Aliran Kerja?#

Empat kesilapan ini muncul dalam pengalaman bekerja dengan konteks reka bentuk yang dihuraikan. Setiap satunya nampak tidak berbahaya, tetapi semuanya mengembalikan hasil kepada templat Tailwind standard.

Kesilapan 1. Arahan “jadikannya moden”. Ini corak kesilapan yang paling lazim. Orang membuka Claude Code dan menulis, “buatkan saya laman web SaaS, gaya moden, rupa premium”. Mereka mendapat latar belakang gelap dan aksen ungu. Dalam data latihan, perkataan “moden” berkait dengan semua halaman pendaratan 2022–2024 yang dibina daripada templat yang sama. Tanpa parameter tepat daripada DESIGN.md, “moden” bermaksud “purata”.

Kesilapan 2. Menampal DESIGN.md dalam sembang sebagai mesej. Kadangkala orang menyalin DESIGN.md ke tetingkap sembang Claude Code dan berkata, “ini gayanya, gunakannya”. Ia berfungsi sekali — sehingga sesi itu tamat. Buka sesi baharu (atau beralih kepada tugas lain, /clear), lalu konteks itu hilang. Jika anda mahu gaya tersebut kekal, fail itu mesti berada dalam repositori dan diimport dalam CLAUDE.md. Untuk mengetahui sebab CLAUDE.md ialah titik konteks kekal, lihat panduan memori Claude.

Kesilapan 3. Memilih gaya kerana anda “menyukainya”. Rujukan pemasaran Apple yang luas mungkin tidak sesuai disalin tanpa perubahan ke papan pemuka hartanah yang memerlukan 30 senarai pada skrin. Itu tidak menolak tipografi, palet atau hierarki berasaskan Apple: sesuaikan jarak dan kepadatan baris dengan tugasan, kemudian periksa maklumat sebenar yang kelihatan pada saiz skrin sasaran. Pilih rujukan khusus berdasarkan kepadatan, nada dan khalayak, bukan nama jenama sahaja.

Kesilapan 4. Tidak menyebut DESIGN.md dalam arahan itu sendiri. DESIGN.md mungkin berada dalam repositori, diimport melalui CLAUDE.md dan boleh dilihat oleh ejen. Tetapi jika arahan hanya berbunyi “bina laman web”, Claude mungkin memilih cara standard tanpa merujuk fail itu secara jelas. Untuk setiap arahan reka bentuk, ayat ini berguna: “Gunakan warna, fon dan jarak tepat daripada docs/DESIGN.md. Jangan reka nilai sendiri — ambil daripada fail itu.” Ini memastikan ejen menggunakan DESIGN.md dan bukannya memintasnya.

Token yang tepat ialah kod heks, saiz fon dalam pt dan unit jarak dalam DESIGN.md. Bahasa semula jadi bermaksud “moden”, “premium”, “kemas” atau “seperti Apple”. Token yang tepat berkesan; kata-kata bebas tidak.

Apakah Langkah Seterusnya?#

Kini anda mempunyai aliran kerja asas: Claude Code + DESIGN.md daripada Refero + 4 langkah = laman web tanpa templat. Ini memenuhi 70% keperluan. Baki 30% ialah keadaan yang memerlukan ketepatan lebih tinggi, kelajuan lebih pantas atau pengesahan.

Tiga arah untuk diteruskan selepas menguasai asas:

1. Frontend Design Skill. Ini ialah skill rasmi untuk Claude Code yang menambah maklum balas visual. Ejen mengambil tangkap layar halaman yang dibina menggunakan Puppeteer, melihatnya dengan “matanya” (model penglihatan), membandingkannya dengan DESIGN.md dan mencadangkan pembetulan sendiri. Ini ialah kitaran automatik “arahan → kod → tangkap layar → kritikan → arahan”. Berguna apabila halaman itu rumit dan anda tidak dapat menyiapkannya dengan betul dalam satu iterasi.

2. Refero MCP dalam mod produksi. Apabila anda mengurus 3–5 projek serentak, menambah DESIGN.md secara manual untuk setiap projek menjadi leceh. Refero MCP boleh mencari 3 gaya sesuai berdasarkan huraian projek dan menawarkan pilihan. Ini mempercepatkan permulaan projek baharu daripada 30 minit kepada 3.

3. Gabungan dengan Context Engineering. DESIGN.md ialah salah satu artifak konteks. Bersamanya, anda biasanya akan menemui ARCHITECTURE.md (struktur projek), BRAND.md (nada suara) dan business/audience.md (khalayak sasaran). Semuanya diimport dalam CLAUDE.md. Apabila Claude membina halaman, Claude menggunakan maklumat visual, khalayak dan struktur produk. Pada asasnya, inilah Context Engineering — kerja sistematik tentang perkara yang anda berikan kepada ejen sebelum sesuatu permintaan.

Bahan praktikal: dokumentasi Ailoot.

Bahan praktikal: dokumentasi Ailoot.

Lebih banyak bahan dan alat: Ailoot.