# Laman Web Tanpa Templat dengan Claude Code dan Refero DESIGN.md
> Konteks reka bentuk Refero Styles: struktur DESIGN.md, pemilihan sistem visual, mengimportnya ke dalam CLAUDE.md, empat langkah untuk mencipta halaman dan kesilapan lazim.
Source: https://ailoot.ai/blog/ms/claude-code-refero-design-md/
Canonical: https://ailoot.ai/blog/ms/claude-code-refero-design-md/
Language: ms
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-205
Revision: sha256-35be5f8f736ec87d6ea857af583da600fa787520d1ef75dd984d326a4afcf6d7
Intipati utama
Laman web yang ditulis Claude Code “secara terus” semuanya kelihatan sama: latar belakang gelap, gradien ungu, fon sans serif, kad shadcn lalai. Di bawah, kami tunjukkan cara mendapatkan DESIGN.md sedia guna daripada Apple, Linear, Stripe atau ElevenLabs (terdapat lebih daripada 2,000 sistem dalam pustaka), meletakkannya dalam projek anda dan meminta Claude menulis dalam gaya tersebut. Laman web yang siap tidak lagi kelihatan seperti templat AI.
Bahan praktikal tentang bekerja dengan projek dan model: [dokumentasi Ailoot](https://ailoot.ai/docs/).
## Mengapa Laman Web Claude Code Kelihatan Seperti Templat Tailwind?
Intipati utama
Tanpa sistem reka bentuk, Claude Code menghasilkan antara muka purata daripada data latihannya. Data latihan itu merangkumi seluruh internet dengan Tailwind, shadcn/ui dan ribuan halaman pendaratan yang serupa. Tanpa konteks yang jelas tentang warna, fon dan jarak, ejen menghasilkan “purata aritmetik semua templat”.
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?
Intipati utama
Refero Styles ialah pustaka lebih daripada 2,000 sistem reka bentuk yang diekstrak daripada laman web sebenar dan dibungkus dalam fail `DESIGN.md`. Setiap sistem mewakili sebuah jenama: Apple, Stripe, Linear, Notion, Vercel, Airbnb, ElevenLabs, Cursor. Buka styles.refero.design, pilih jenama, salin fail Markdownnya dan tambahkannya ke projek sebagai konteks untuk Claude Code, Cursor, Codex, v0 atau Lovable.
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?
Intipati utama
Satu fail mengandungi semua lapisan asas sistem reka bentuk: palet warna dalam format heks (dengan mod gelap dan cerah), tipografi (fon, skala saiz, ketebalan, ketinggian baris), peraturan jarak (grid 8px atau rentak lain), huraian komponen (butang, kad, borang), peraturan gerakan (animasi, easing) dan “suara jenama” (nada mesej). Fail itu mengandungi 100 hingga 400 baris Markdown.
Pasukan Refero menerangkan struktur fail pada halaman design-md-template seperti berikut:
Mulakan dengan nada produk dan prinsip reka bentuk, kemudian tentukan warna, tipografi, jarak, komponen, susun atur, gerakan, kebolehcapaian dan peraturan tentang perkara yang tidak boleh digunakan.
— Pasukan Refero Styles, https://styles.refero.design/design-md/design-md-template
Struktur fail biasanya kelihatan seperti ini:
| Bahagian | Kandungan | Sebab ejen memerlukannya |
|----|----|----|
| **Nada produk** | 2–3 ayat tentang gaya komunikasi antara muka | menentukan arah untuk teks mikro |
| **Prinsip reka bentuk** | 4–6 peraturan seperti “minimalisme tanpa mengorbankan kebolehbacaan” | membimbing ejen apabila memilih antara pilihan yang sama baik |
| **Warna** | palet heks dengan nama (primary, secondary, accent, surface, text) + mod gelap/cerah | ejen menggunakan kod tepat dan bukannya mereka-rekanya |
| **Tipografi** | fon (nama dan set fon sandaran), skala saiz (10–12 tahap), ketebalan (regular, medium, bold), ketinggian baris | mengelakkan seluruh laman menjadi satu Inter 16px |
| **Jarak** | unit asas (4px, 8px, 16px) dan skala gandaan | padding dan margin tidak lagi “berubah-ubah” |
| **Komponen** | peraturan untuk butang, kad, borang, navigasi — saiz, keadaan, variasi | ejen tidak mencipta variasi baharu |
| **Susun atur** | grid, breakpoint, lebar maksimum bekas | semua halaman laman dibina berasaskan satu grid |
| **Gerakan** | tempoh, easing, peralihan yang dibenarkan | animasi kekal sederhana, bukannya seperti Bootstrap-2010 |
| **Suara dan nada** | contoh ayat untuk butang, tajuk dan ralat | teks laman mencerminkan jenama |
| **Jangan gunakan** | senarai larangan (“jangan gunakan `box-shadow: 0 10px 30px`”) | ejen tidak kembali kepada penyelesaian templat |
Para pencipta turut menekankan satu prinsip yang menyelesaikan 80% masalah reka bentuk AI:
Konteks khusus lebih berkesan daripada kata sifat tentang cita rasa.
— Pasukan Refero Styles, https://styles.refero.design/ai-agents/design-md-examples
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
Intipati utama
Aliran kerjanya ringkas: pasang Claude Code, buka styles.refero.design, pilih jenama (contohnya Linear), salin DESIGN.md ke `docs/DESIGN.md` atau `.claude/DESIGN.md`, tambah satu baris tentang fail itu dalam `CLAUDE.md` dan minta Claude membina halaman. Dalam praktiknya, masa dari projek kosong hingga halaman utama berfungsi ialah 30 minit.
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 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](https://ailoot.ai/blog/ms/agents-md-claude-md-one-instruction-file/).
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:
Pilih tugas, buka sumber yang berkaitan, berikan konteks kepada ejen: letakkan DESIGN.md dalam konteks ejen, terangkan produk dan minta skrin khusus.
— Pasukan Refero Styles, https://styles.refero.design/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?
Intipati utama
Pilih berdasarkan kepadatan dan nada, bukan jenama. Alat SaaS pasukan (UI padat, banyak data) — Linear atau Vercel. Produk kewangan (kepercayaan, ketepatan) — Stripe, Mercury, Column. Produk pengguna (kemesraan, emosi) — Duolingo, Notion untuk pasukan, Airbnb. Alat AI/pembangun (minimalisme, tema gelap) — ElevenLabs, xAI, Modal. Produk untuk ahli (kebolehcapaian, kebolehbacaan) — Duolingo. Jika ragu-ragu, pilih Linear sebagai pilihan serba guna yang selamat.
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:
| Jenis produk | Gaya Refero yang sesuai | Persamaan antara gaya tersebut |
|----|----|----|
| Papan pemuka SaaS pasukan | Linear, Vercel, Notion, PostHog; token berasaskan Apple dengan susun atur padat disesuaikan | UI padat mudah dibaca, hierarki jelas, tipografi ringkas |
| Produk kewangan | Stripe, Mercury, Column | palet yang membina kepercayaan, tipografi jelas, fon monospace untuk nombor |
| Alat AI/pembangun | ElevenLabs, xAI, Modal, Anthropic | tema gelap, aksen sederhana, monokrom dengan satu warna terang |
| Produk pengguna | Duolingo, Airbnb, Notion | palet hangat, ilustrasi ekspresif, suara mesra |
| Laman pemasaran | Linear, Vercel, Stripe (halaman utama) | tajuk besar, hierarki jelas, latar belakang tenang |
| Portfolio minimalis | Apple, Mercury, Modal | ruang kosong maksimum, fon sans serif, aksen sederhana |
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?
Intipati utama
DESIGN.md bukan artifak sekali guna. Ia sebahagian daripada konteks kekal projek, seperti `CLAUDE.md` dan folder `business/`. Apabila fail itu berada dalam repositori, setiap sesi Claude, setiap ahli pasukan dan setiap ejen AI baharu (Codex, Cursor, Gemini CLI) mendapat akses kepada kanun visual yang sama. Pengetahuan distrukturkan sekali, kemudian digunakan selama-lamanya.
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?
Intipati utama
Refero MCP ialah pelayan di api.refero.design/mcp yang memberikan Claude Code akses kepada lebih daripada 150,000 skrin daripada aplikasi sebenar dan lebih daripada 6,000 aliran pengguna terus melalui sembang. Refero_skill ialah skill rasmi untuk Claude Code (`npx skills add`) yang membalut MCP dan menjadikan “penyelidikan reka bentuk” langkah pertama yang wajib sebelum menulis kod.
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:
```bash
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?
Intipati utama
Pertama, menggunakan arahan “jadikannya kelihatan moden” tanpa menyertakan DESIGN.md (ejen kembali kepada purata data latihan). Kedua, menampal DESIGN.md dalam sembang sebagai mesej dan bukannya meletakkannya dalam repositori (konteks tidak kekal merentas sesi). Ketiga, memilih berdasarkan jenama dan bukannya skrin serta kepadatan khusus (contohnya, menyalin susun atur pemasaran luas ke papan pemuka perakaunan). Keempat, tidak menyebut DESIGN.md secara jelas dalam arahan (ejen mengabaikannya walaupun fail itu berada dalam konteks).
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](https://ailoot.ai/blog/ms/claude-memory-claude-md-auto-memory/).
**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?
Intipati utama
DESIGN.md ialah blok binaan pertama bagi kanun visual, bukan satu-satunya. Terdapat tiga arah untuk mengembangkannya: Frontend Design Skill dalam Claude Code untuk mendapatkan maklum balas visual melalui tangkap layar, Refero MCP untuk bekerja secara berkala dengan gaya berbeza, dan menggabungkan DESIGN.md dengan Context Engineering anda — supaya ejen membaca kanun visual terlebih dahulu, membina halaman, kemudian menyemak sendiri hasilnya menggunakan tangkap layar.
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](https://ailoot.ai/blog/ms/context-engineering/) — kerja sistematik tentang perkara yang anda berikan kepada ejen sebelum sesuatu permintaan.
Bahan praktikal: [dokumentasi Ailoot](https://ailoot.ai/docs/).
### Sumber
- [Refero Styles - laman utama](https://styles.refero.design/)
- [Refero Styles - contoh DESIGN.md](https://styles.refero.design/ai-agents/design-md-examples)
- [Refero Styles - design-resources](https://styles.refero.design/ai-agents/design-resources)
- [Refero Skill di GitHub](https://github.com/referodesign/refero_skill)
- [Dokumentasi Claude Code - dokumentasi rasmi](https://code.claude.com/docs/en/overview)
- [Panduan mula cepat Claude Code - arahan pemasangan rasmi](https://code.claude.com/docs/en/quickstart)
Bahan praktikal: [dokumentasi Ailoot](https://ailoot.ai/docs/).
Lebih banyak bahan dan alat: [Ailoot](https://ailoot.ai/).
## Soalan lazim: Laman Web Tanpa Templat dengan Claude Code dan Refero DESIGN.md | Ailoot
### Bolehkah rujukan Apple sesuai untuk papan pemuka SaaS padat?
Ya, jika disesuaikan dengan tugasan. Gunakan palet, tipografi, hierarki dan gerakan terkawal yang sesuai, tetapi tetapkan tinggi baris, jarak serta kepadatan maklumat secara jelas daripada menyalin susun atur pemasaran luas.
### Mengapakah DESIGN.md tersimpan masih tidak mempengaruhi halaman baharu?
Pastikan fail berada dalam repositori, diimport daripada CLAUDE.md dan dinamakan secara jelas dalam permintaan reka bentuk. Minta nilai warna, fon serta jarak sebenarnya, kemudian bandingkan halaman dirender dengan rujukan dikehendaki.
## Ailoot · Syarikat dan portfolio projeknya
Ailoot berteraskan pengalaman operasi yang mantap, pangkalan pelanggan yang besar, perkhidmatan yang stabil dan pemantauan KPI berterusan.
Syarikat dan portfolio projeknya: jutaan pelanggan; jualan bernilai berbilion setiap bulan.
Ailoot menggunakan pengalaman operasi ini untuk akses API kepada ciri AI dalam produk pelanggan, ejen, aplikasi dan automasi.