🏠 Kembali ke Portal Utama (tawau.netlify.app) Bengkel AI Agentic TVET 2026
Lembaran Ekstra Rujukan Standard Reka Bentuk UI/UX 76+ Templat DESIGN.md

Panduan Sistem Reka Bentuk UI (DESIGN.md)

Spesifikasi Token Rekabentuk, Tipografi, Palet HSL & Sumber Muat Turun Antarabangsa
Tujuan Lembaran Menghapuskan "AI Slop" dalam Hasil Web
Format Dokumen Markdown (.md) / Token HSL
Sasaran Peserta Pensyarah TVET & Pembangun Sistem
Pustaka Utama Apple • Stripe • Linear • Vercel

1. Apakah Itu Fail `DESIGN.md` & Mengapa AI Memerlukannya?

Apabila anda mengarahkan AI seperti Google Gemini Pro atau Claude 3.7 untuk membina sistem (contohnya Sistem CRUD EcoMart PHP & MySQL), AI secara lalai akan menggunakan gaya antaramuka generik — warna butang biru asas (*bootstrap* lama), fon lalai pelayar, dan susun atur petak yang membosankan (dikenali sebagai AI Slop).

💡 Konsep "Ground Truth" Reka Bentuk:
Fail DESIGN.md bertindak sebagai Manual Garis Panduan Arkitek rasmi. Ia mengandungi spesifikasi tepat mengenai warna tema (Hex/HSL), nisbah tipografi, jejari sudut (border-radius), grid bento, dan sistem tema Gelap/Cerah yang wajib dipatuhi oleh ejen AI sepanjang proses pengekodan.

2. Cara Menggunakan `DESIGN.md` dalam Antigravity IDE (3 Langkah)

1
Pilih & Muat Turun
Pilih templat reka bentuk yang sesuai (cth: apple.md atau stripe.md) dan namakannya sebagai DESIGN.md.
2
Letak di Root Projek
Simpan fail DESIGN.md tersebut terus ke dalam folder utama projek anda di Antigravity IDE.
3
Rujuk dalam Prompt
Sebutkan @DESIGN.md semasa meminta AI membina antaramuka web atau sistem CRUD anda.
Perintah Pantas Terminal Antigravity (Muat Turun Automatik)
# Muat turun spesifikasi reka bentuk Apple terus ke folder projek:
npx -y getdesign apple

# Atau pilih jenama lain seperti Stripe, Linear, Vercel, Supabase:
npx -y getdesign stripe
npx -y getdesign linear
npx -y getdesign vercel

3. Galeri Templat `DESIGN.md` Siap Guna (Klik untuk Muat Turun)

Berikut adalah senarai spesifikasi reka bentuk premium yang telah disediakan. Klik butang "Muat Turun .md" untuk simpan ke komputer anda, atau klik "Salin Perintah".

🍏 Apple Obsidian & Pro SF Pro / Inter

Gaya kaca berkabus (glassmorphism), sempadan 1px hairline, warna hitam pekat onyx dan aksen biru langit.

Download .MD
💳 Stripe Clean Indigo Plus Jakarta Sans

Pilihan terbaik untuk sistem perniagaan, e-dagang, dan CRUD. Warna indigo mewah dengan bayang lembut berlapis.

Download .MD
⚡ Linear Dark Engine Inter / Monospace

Gaya papan pemuka moden pemaju perisian. Kontras ultra tajam dengan aksen ungu neon dan tipografi padat.

Download .MD
▲ Vercel Monokrom Geist / JetBrains Mono

Gaya monokromatik hitam putih tulen. Sangat kemas, pantas dibaca, dan fokus kepada data angka serta kod.

Download .MD
⚡ Supabase Emerald Custom Dark

Kombinasi warna hijau zamrud (emerald green) dengan latar belakang gelap. Amat popular untuk dashboard pangkalan data.

Download .MD
📝 Notion Paper & Docs Editorial Serifs

Sesuai untuk modul pembelajaran, nota kuliah TVET, dan portal dokumen ilmu. Nyaman pada mata untuk pembacaan lama.

Download .MD
🤖 Claude Warm Ivory Terracotta & Cream

Warna tanah liat (terracotta), krim gading, dan kontras lembut yang elegan untuk portal chatbot dan AI Assistant.

Download .MD
🏠 Airbnb Coral Modern Cereal / Sans

Pilihan terbaik untuk portal pengguna, hospitaliti, dan sistem tempahan fasiliti kolej komuniti.

Download .MD

4. Sumber & Repositori Global Yang Boleh Diakses Terus

Pensyarah dan peserta boleh meneroka serta memuat turun lebih banyak fail spesifikasi dan komponen UI bertaraf industri melalui pautan berikut:

5. Formula Prompt RTCF Emas: Menjana UI Berspesifikasi DESIGN.md

Gunakan templat prompt ini apabila anda meminta Antigravity IDE atau Google AI Studio membina antaramuka sistem anda:

PROMPT RTCF: ARKITEK UI/UX BERKUASA TINGGI
[ROLE] Anda ialah Arkitek Frontend Utama (Senior UI/UX Engineer) yang pakar dalam reka bentuk antaramuka moden bertaraf antarabangsa (Apple Pro & Stripe Aesthetics). [TASK] Bina fail antaramuka HTML/CSS/PHP untuk [MASUKKAN NAMA SISTEM ANDA, CTH: Dashboard Pengurusan Sistem CRUD EcoMart]. [CONTEXT] Sistem ini dibangunkan untuk kegunaan bengkel TVET. Anda WAJIB merujuk dan menguatkuasakan token reka bentuk yang terkandung di dalam fail @DESIGN.md yang berada di root folder projek. Elakkan reka bentuk lapuk (AI Slop/generic Bootstrap). [FORMAT] 1. Struktur layout Bento Grid yang responsif. 2. Gunakan pembolehubah CSS (:root tokens) untuk warna background, card-bg, sempadan 1px hairline, dan radius yang konsisten mengikut DESIGN.md. 3. Sertakan sistem togol tema (Dark Mode / Light Mode) yang lancar dengan JavaScript tulen. 4. Pastikan micro-interactions (hover effect, butang glow lembut, transition 0.2s) berfungsi sempurna.
Teks berjaya disalin!