Penggayaan dan Tema
Warna, jarak dan mod gelap melalui arahan.
Penggayaan dan Tema ialah pelajaran Pengekodan Vibe percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pengekodan Vibe, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pengekodan Vibe merangkumi sejumlah 4 pelajaran.
Daripada 'Berfungsi' kepada 'Wah'
Anda boleh menjana UI yang berfungsi dalam beberapa saat — tetapi perbezaan antara aplikasi amatur dengan aplikasi yang diperhalus ialah penggayaan: warna, jarak, tipografi dan tema yang selaras.
Dalam pelajaran ini, anda akan belajar mengawal semuanya melalui gesaan, menyediakan tema yang boleh digunakan semula, dan menambah mod gelap yang menarik — tanpa menyentuh pemilih warna jika anda tidak mahu.
Tema ialah Resipi Dikongsi
Tema ialah sekumpulan kecil keputusan reka bentuk — warna, fon dan jarak anda — yang ditakrifkan sekali dan digunakan semula di mana-mana. Ubah tema, dan seluruh aplikasi akan dikemas kini.
Minta AI menyediakan token reka bentuk: nilai bernama seperti 'warna utama' atau 'jarak-besar' yang dirujuk oleh komponen dan bukannya ditetapkan secara terus.
"Set up a theme with design tokens: a primary color, a secondary
color, a neutral grey scale, a base font, and consistent spacing
steps (4, 8, 16, 24, 32px). Make all my components use these tokens
instead of hard-coded values."Memilih Palet Warna melalui Gesaan
Anda tidak memerlukan teori warna. Huraikan perasaan yang diingini dan biarkan AI mencadangkan palet, kemudian ubah suai.
Minta warna utama (jenama anda), aksen (untuk sorotan) dan warna neutral (latar belakang dan teks). Minta kod heks sebenar supaya anda boleh menetapkannya.
"Suggest a color palette for a healthy-eating app: fresh, calm,
and trustworthy. Give me a primary, an accent, and 5 neutral greys,
as hex codes. Then apply them across all my components."Jarak: Rahsia kepada Reka Bentuk 'Kemas'
Kebanyakan UI amatur kelihatan sesak. Penyelesaiannya ialah jarak yang konsisten dan ruang kosong. Pereka bentuk menggunakan skala jarak (gandaan 4 atau 8px) supaya ruang terasa disengajakan.
Jika sesuatu terasa 'janggal', biasanya puncanya ialah jarak. Katakan sahaja "lebih banyak ruang bernafas" dan AI akan tahu perkara yang perlu dilakukan.
"Increase the whitespace throughout the page. Use a consistent
8px spacing scale. Add more padding inside cards and more gap
between sections so it feels calm and uncluttered."Tipografi yang Terasa Direka
Jenis tulisan membawa personaliti yang sangat besar. Minta skala jenis (saiz yang jelas untuk h1, h2, isi teks dan kapsyen) serta ketinggian baris yang baik untuk kebolehbacaan.
Memadankan fon pengepala yang tersendiri dengan fon isi teks yang kemas terus meningkatkan mutu reka bentuk.
"Set up typography: use 'Inter' for body text and a slightly bolder
geometric font for headings. Define a clear scale (h1 48px, h2 32px,
h3 24px, body 16px) with comfortable line height. Apply it everywhere."Kenali Tailwind (Secara Ringkas)
Kebanyakan alat UI AI menggunakan gaya Tailwind CSS — kelas utiliti seperti p-4 (padding) atau text-lg (teks besar) yang ditulis terus dalam penanda.
Anda jarang menulisnya secara manual, tetapi mengenalinya membantu anda memberikan maklum balas yang tepat seperti "gunakan saiz teks yang lebih besar di sini."
<button class="px-4 py-2 rounded-lg bg-blue-600
text-white text-sm font-semibold hover:bg-blue-700">
Save
</button>Menambah Mod Gelap
Mod gelap dijangka tersedia dalam aplikasi moden. Cara yang betul ialah mentakrifkan versi terang dan gelap bagi token tema anda, kemudian membiarkan togol bertukar antara kedua-duanya.
Minta AI menjadikan warna peka terhadap tema dan bukannya menetapkannya secara terus, supaya mod gelap 'terus berfungsi' di mana-mana.
"Add dark mode. Create a dark version of my color tokens: dark
backgrounds, light text, and slightly muted accents. Add a toggle
in the navbar that switches themes, and remember the user's choice."Mensimulasikan Togol Tema
Di sebalik tabir, menukar tema hanyalah memilih set nilai warna yang berbeza. Berikut ialah model kecil JavaScript tentang idea itu — jalankannya untuk melihat cara togol memilih warna daripada objek tema.
const themes = {
light: { bg: '#ffffff', text: '#111111' },
dark: { bg: '#111111', text: '#f5f5f5' }
};
let current = 'light';
function toggle() {
current = current === 'light' ? 'dark' : 'light';
const t = themes[current];
console.log(current + ' -> bg ' + t.bg + ', text ' + t.text);
}
toggle();
toggle();Konsistensi Mengatasi Kepintaran
Aplikasi yang cantik bukanlah aplikasi dengan butang paling canggih — tetapi aplikasi yang semuanya sepadan. Jejari bucu yang sama, gaya bayang yang sama, warna aksen yang sama dan rentak jarak yang sama.
Apabila anda menemui ketidakselarasan, minta AI menyelaraskannya merentas seluruh aplikasi dalam satu langkah.
"Audit my app for visual inconsistencies. Make all corner radii,
shadows, button styles, and spacing consistent. Use my theme tokens
everywhere and remove any one-off hard-coded colors."Kemasan Butiran: Gerakan dan Keadaan
Sentuhan kecil menandakan kualiti: kesan tuding yang halus, peralihan yang lancar dan keadaan fokus yang jelas untuk kebolehcapaian. Minta animasi yang lembut — jangan keterlaluan.
Langkah kemasan ini menjadikan UI yang dijana terasa seperti hasil kerja tangan.
"Add subtle polish: smooth 150ms transitions on hover, a gentle
lift on cards, and clear keyboard focus rings on buttons and inputs.
Keep animations tasteful and quick, not flashy."Latihan: Ubah Gaya dalam Dua Gesaan
Ambil mana-mana UI yang telah anda jana dan berikan identiti baharu sepenuhnya hanya dengan menukar palet dan fon. Lihat cara reka bentuk berasaskan tema berubah serta-merta. Inilah kuasa penggayaan menggunakan token dan bukannya secara manual.
Prompt 1: "Switch the theme to a warm sunset palette:
deep orange primary, soft pink accent, cream backgrounds."
Prompt 2: "Change headings to a bold rounded font and add
dark mode with a matching warm-dark variant."Semakan Pantas
Mengapakah menyediakan tema dengan token reka bentuk lebih baik daripada menggayakan setiap komponen dengan warna yang ditetapkan secara terus?
Imbas Kembali: Cantik melalui Gesaan
Anda telah mempelajari cara mengawal penampilan apl dengan kata-kata: tentukan tema dengan token reka bentuk, pilih palet berdasarkan suasana, atasi masalah 'sempit' dengan jarak yang konsisten, tetapkan skala tipografi, dan tambahkan mod gelap dengan menjadikan warna peka terhadap tema.
Perkemaskan dengan gerakan halus dan, yang paling penting, usahakan kekonsistenan. Pelajaran seterusnya: menjadikan reka bentuk anda yang cantik kelihatan hebat pada telefon dan desktop — reka bentuk responsif melalui arahan.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 25
- Pelajaran
- 100
Soalan Lazim
Adakah pelajaran “Penggayaan dan Tema” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Pengekodan Vibe, termasuk “Penggayaan dan Tema”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Pengekodan Vibe merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Penggayaan dan Tema”?
Warna, jarak dan mod gelap melalui arahan. Anda berlatih Pengekodan Vibe menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Pengekodan Vibe?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Pengekodan Vibe di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Penggayaan dan Tema” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pengekodan Vibe ini?
Ya. Setiap pelajaran Pengekodan Vibe menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Menerangkan Antara Muka Pengguna dengan Kata-kata
- Menjana Komponen
- Penggayaan dan Tema
- Menjadikannya Responsif