Pernahkah anda berharap agar CSS anda berhenti melawan anda?
Saya pernah menghabiskan satu malam bergulat dengan butang. Bukan secara metafora. Butang sebenar, yang tidak bersalah, di laman web yang enggan berbaris dengan jiran-jirannya. Saya cuba margin. Saya cuba flexbox. Saya membisikkan kata-kata manis kepada Chrome DevTools. Butang itu bertindak balas dengan berganjak dua piksel ke kiri dan tersenyum sinis.
Jika anda membina bahagian hadapan (), anda pernah mengalami malam seperti ini. Dan itulah janji ciri-ciri Gemini 3.0 Pro Google untuk pembangunan bahagian hadapan: kurang rompakan piksel larut malam, lebih banyak momen "wah, itu betul-betul berjaya". Ia bukan telepati. Tetapi Gemini 3.0 Pro, kemasukan baharu dalam kotak alat AI, sangat baik dalam mengubah niat reka bentuk yang kabur menjadi kod permulaan yang baik—dan kemudian berulang bersama anda, seperti rakan pengaturcara berpasangan yang sabar yang tidak mengeluh apabila anda bertanya, “Kenapa grid saya jadi begitu?”
Dalam panduan ini, saya akan membimbing anda tentang cara Gemini 3.0 Pro membantu dalam pembangunan bahagian hadapan, di mana ia menyerlah, di mana ia tersandung, dan cara untuk menyediakannya supaya ia benar-benar menjimatkan masa anda. Saya akan menunjukkan contoh dunia sebenar, gaya demo, dan memasukkan beberapa petua penyelesaian masalah untuk apabila AI menjadi kreatif dengan cara yang tidak membantu.
Spoiler: Ciri-ciri Gemini 3.0 Pro tidak akan menyampaikan aplikasi yang sempurna secara ajaib. Tetapi untuk perancah UI, pemfaktoran semula komponen, peningkatan kebolehaksesan, dan logik keadaan yang rumit, suasana "model pembangunan bahagian hadapan" adalah sah—dan kadangkala tepat pada sasaran.
Apakah Gemini 3.0 Pro—Dan Mengapa Orang Bahagian Hadapan Patut Peduli?
Anda mungkin pernah mendengar penerangan ringkas: Gemini 3.0 Pro ialah model AI multimodal yang besar. Terjemahan: ia boleh membaca kod, menulis kod, melihat tangkapan skrin, mentafsir rajah, dan mengikuti perbualan yang lebih panjang. Untuk pembangunan bahagian hadapan, ciri-ciri Gemini 3.0 Pro diterjemahkan kepada beberapa kuasa besar:
- Ia memahami corak UI. Minta pengepala melekit dengan grid responsif dan togol mod gelap, dan anda biasanya akan mendapat HTML/CSS yang waras dengan pilihan susun atur moden.
- Ia mengendalikan logik komponen. Anda boleh meminta komponen React dengan prop, atribut kebolehaksesan, dan ujian unit—dan ia akan menyediakan semua itu.
- Ia membuat penaakulan merentasi fail. Tampal CSS, React, dan tangkapan skrin serahan Figma anda, dan Gemini 3.0 Pro boleh mengesan ketidakkonsistenan (dan membetulkannya) tanpa berbalas-balas.
- Ia menerangkan. Ingin tahu mengapa aria-label anda salah atau mengapa konfigurasi Tailwind anda melawan tema anda? Ia akan bercerita seperti penyemak kod kegemaran anda, tanpa kegelisahan espresso.
“OK, Pogue,” anda berkata, “bunyinya bagus. Tetapi bolehkah ia membantu apabila saya benar-benar membina bahagian hadapan?” Lucu anda bertanya.
Model Pembangunan Bahagian Hadapan, Dalam Amalan
Katakan anda sedang membina kad produk ringkas untuk laman e-dagang. Anda mempunyai keperluan: susun atur responsif, disiplin pemangkasan imej (tiada kasut yang penyek), kesan tuding, butang tambah cepat yang mesra papan kekunci, dan lencana harga yang enggan bertindih dengan apa-apa yang penting.
Berikut ialah cara ciri-ciri Gemini 3.0 Pro menjadikan ini kurang… menjengkelkan.
Langkah 1: Terangkan UI seperti manusia
Anda: “Saya memerlukan kad produk responsif dalam React. Susun atur grid pada desktop, satu lajur pada mudah alih. Imej hendaklah mengekalkan nisbah aspek. Tambah teks alt, fokus papan kekunci, dan pendedahan tuding untuk butang tambah cepat. Kekalkan dalam CSS biasa (tiada kelas utiliti). Sertakan liputan ujian.”
Gemini 3.0 Pro: Menghasilkan komponen berfungsi yang kemas, modul CSS dengan penamaan logik, beberapa kehalusan aria-*, dan suite ujian minimal dengan React Testing Library.
Adakah ia sedia untuk pengeluaran? Tidak selalu. Tetapi ia merupakan titik permulaan yang kukuh—seperti mendapatkan perancah, tangga, dan kebanyakan skru yang dihantar ke rumah anda sebelum anda mula membina dek.
Langkah 2: Berulang dengan tangkapan skrin dan perbezaan
Anda: Muat naik tangkapan skrin reka bentuk dari Figma dan berkata, “Ketat jarak untuk sepadan dengan ini, dan buat lencana harga mengabaikan tajuk yang panjang.”
Gemini 3.0 Pro: Melaraskan token jarak, mengemas kini lencana dengan pengendalian limpahan, dan menerangkan mengapa ia menetapkan lebar minimum pada tajuk. Di sinilah perasaan model pembangunan bahagian hadapan muncul—model itu mengiktiraf niat susun atur daripada isyarat visual.
Langkah 3: Gesaan kebolehaksesan yang anda tidak minta
Anda: “Pastikan pengguna papan kekunci boleh mencapai segala-galanya.”
Gemini 3.0 Pro: Menambah garis luar fokus, memfaktorkan semula tambah cepat yang hanya tuding ke dalam butang yang juga muncul apabila kad difokuskan, dan mencadangkan aria-live untuk pengesahan tambah ke troli. Ia biasanya akan memetik garis panduan WCAG secara sambil lalu, yang merupakan isyarat anda untuk mengesahkan—tetapi ia merupakan kompas yang bagus.
Langkah 4: Ujian, tetapi jadikan ia bermakna
Anda: “Baiklah, tetapi uji perkara penting: susunan fokus, nama kebolehaksesan, dan pengaktifan papan kekunci bagi tambah cepat.”
Gemini 3.0 Pro: Menulis ujian yang mensimulasikan navigasi Tab dan pengaktifan ruang/masuk. Adakah ia kalis bodoh? Tidak. Tetapi ia merupakan permulaan yang serius.
Di Mana Ciri-ciri Gemini 3.0 Pro Benar-Benar Membantu (Dan Di Mana Ia Tidak)
Anggap Gemini 3.0 Pro sebagai pelatih anda yang tidak henti-henti yang telah membaca seluruh internet dan sangat berminat untuk membantu—tetapi kadangkala berhalusinasi-yakin. Berikut ialah helaian ringkas.
Bintang emas: Titik manis
- Perancah UI: Komponen React/Vue/Svelte dengan reka bentuk keadaan dan prop yang koheren.
- Pembetulan susun atur CSS: Menukar keanehan era apungan kepada grid/flex dengan corak moden.
- Lulus kebolehaksesan: Menambah peranan, label, kemampuan papan kekunci, dan pengurusan fokus.
- Dokumentasi dan komen: Menerangkan mengapa pengapit CSS berfungsi atau mengapa aria-expanded berada pada butang, bukan panel.
- Rangka ujian: Ujian unit dan penyepaduan asas untuk mengelakkan regresi daripada menyelinap masuk.
Pita amaran: Zon "semak semula saya"
- Pengoptimuman mikro prestasi: Ia mungkin mengesyorkan pememoan pramatang atau kebergantungan yang berkilat tetapi berat.
- Token reka bentuk: Jika anda tidak memberikan token anda, ia menciptanya. Yang cantik, kadangkala—tetapi khayalan.
- Keanehan rangka kerja: Penghalaan Next.js, konfigurasi Vite, atau tetapan pembundel esoterik mungkin memerlukan semakan kewarasan manusia.
- Kerumitan keadaan: Keadaan berbilang hirisan dengan pemuatan API, kemas kini optimistik, dan pengembalian ralat boleh menjadi terlalu ringkas.
Petua pro: Berikan Gemini 3.0 Pro konteks anda—token reka bentuk, piawaian utiliti, komponen contoh, konfigurasi ESLint anda—dan ia akan menyesuaikan diri. Jangan, dan anda akan mendapat kod generik yang menyenangkan. Seperti karya seni hotel.
Tunjuk Ajar Praktikal: Daripada Figma kepada Berfungsi
Mari kita ambil senario yang agak nyata: Pereka anda menjatuhkan Figma untuk susun atur blog dengan tiga titik putus, jadual kandungan melekit, dan blok kod dengan salin ke papan keratan. Anda mempunyai tarikh akhir, latte, dan sedikit rasa malapetaka.
Berikut ialah permainan demi permainan dengan Gemini 3.0 Pro:
- Gesaan: “Hasilkan HTML semantik untuk susun atur blog ini: pengepala, nav, main (dua lajur pada desktop), selain untuk jadual kandungan, kawasan artikel, dan pengaki. Sertakan pautan langkau dan peranan mercu tanda. Kekalkan CSS berasingan.”
- Hasil: HTML bersih dengan mercu tanda nav dan langkau ke kandungan. Ia malah akan memasukkan kelas yang tersembunyi secara visual.
- Gesaan: “Gunakan grid CSS dengan lajur minmax. TOC hendaklah menjadi melekit pada 80px dari atas, tetapi jangan bertindih dengan pengaki. Padankan titik putus ini: 480, 768, 1200.”
- Hasil: Grid yang baik, pengapit untuk saiz fon, dan pertanyaan bekas jika anda bertanya. Ia sering mengingati prefers-reduced-motion, yang membolehkannya mendapat kuki.
- Gesaan: “Laksanakan butang salin ke papan keratan untuk blok kod. Tunjukkan tooltip apabila berjaya. Hormati reduced-motion.”
- Hasil: Vanilla JS atau coretan React dengan panggilan papan keratan async dan tooltip kecil yang sopan. Jika anda berkata “tiada perpustakaan,” ia mematuhi.
- Sambungkan dalam mod gelap
- Gesaan: “Tambah mod gelap sedar sistem dengan togol yang berterusan dalam localStorage. Gunakan sifat tersuai CSS.”
- Hasil: Sistem tema yang tidak melawan anda. Jika anda menyerahkan token reka bentuk anda, ia akan memasukkannya.
- Semakan kewarasan kebolehaksesan
- Gesaan: “Audit untuk papan kekunci, kontras warna, dan tajuk. Cadangkan pembetulan.”
- Hasil: Ia menyerlahkan tempat kontras rendah, menambah aria-current pada pautan TOC aktif, dan memberi amaran kepada anda tentang elemen melekit yang memakan fokus. Ia tidak akan menggantikan ujian pembaca skrin, tetapi ia merupakan linter dengan sikap yang kukuh.
- Gesaan: “Buat ujian dengan Playwright untuk mengesahkan gelagat melekit TOC, salin ke papan keratan, dan ketekunan mod gelap.”
- Hasil: Bukan bahan Pulitzer, tetapi ujian boleh dijalankan yang menangkap regresi.
Dan ya, anda masih mengubah suai. Tetapi anda mengubah suai daripada 80% selesai dan bukannya 8% selesai. Itu adalah pertukaran yang bagus.
Gemini 3.0 Pro vs. Kanak-kanak Lain: Pertembungan Mesra
- Alat gaya Copilot: Hebat pada pelengkapan sebaris, kurang hebat pada penaakulan merentas fail atau menjajarkan dengan tangkapan skrin reka bentuk. Ciri-ciri Gemini 3.0 Pro menyerlah apabila anda memerlukan bantuan pembangunan bahagian hadapan holistik.
- Pakar imej ke kod: Hebat pada lambakan piksel sempurna, lebih lemah pada kebolehaksesan atau struktur kod. Gemini 3.0 Pro mencapai keseimbangan: bukan piksel yang sempurna, semantik yang lebih baik.
- LLM dengan pemalam kod: Setanding, tetapi sudut multimodal Gemini ditambah tetingkap konteks panjang membantunya menjejaki komponen, ujian dan kekangan reka bentuk anda.
Keputusan: Jika aliran kerja anda didorong oleh reka bentuk dan berasaskan komponen, Gemini 3.0 Pro berbaloi untuk dicuba. Jika anda kebanyakannya memfaktorkan semula API bahagian belakang, anda akan mendapat kurang wow setiap minit.
Persediaan Yang Menjimatkan Masa Anda
Gemini 3.0 Pro hanya berguna seperti konteks yang anda berikan kepadanya. Anggap ia sebagai mengorientasikan ahli pasukan baharu—berikan buku permainan anda.
- Kongsi sistem reka bentuk anda: Token, skala jarak, warna, jejari, gerakan. Tampal JSON atau dokumen.
- Berikan komponen kanonik: “Beginilah cara kami menamakan prop, memecahkan fail, dan menguji.”
- Tambah peraturan lint & format: ESLint, Prettier, ketegasan TypeScript. Gemini 3.0 Pro akan mengikutinya seperti pengawas dewan.
- Sertakan penghalaan dan corak data: Konvensyen Next.js, pemuat, strategi suspens. Elakkan tekaan.
- Berikan contoh “buruk” dan “baik”: Tunjukkan perkara yang perlu dielakkan, kemudian tunjukkan corak yang diluluskan.
Lakukan itu, dan model itu berhenti meneka dan mula meniru gaya rumah yang anda benar-benar mahukan.
Sudut Penyelesaian Masalah: Apabila Gemini Menjadi Jazz
- AI mencipta API. Minta ia memetik dokumen atau mengehadkan dirinya kepada perpustakaan yang diketahui: “Gunakan hanya DOM standard dan API React 18. Jika tidak pasti, tanya.”
- Perang kekhususan CSS bermula. Minta tetapan semula: “Faktorkan semula kepada modul BEM atau CSS; elakkan !important; dokumentasikan pemilih.”
- Keadaan spiral. Pisahkan keadaan: “Ekstrak panggilan async ke dalam cangkuk; tambah pemuatan, ralat, cuba semula; kekalkan komponen bodoh.”
- Keserpihan ujian. Sematkan versi dan tambah tunggu dengan niat: “Tunggu peranan=amaran; elakkan tamat masa arbitrari; gunakan user-event.”
- Hanyutan reka bentuk. Sauh semula kepada token: “Gantikan nilai piksel dengan token; padankan skala jarak; sahkan kontras ≥ 4.5:1.”
Prestasi: Bit Membosankan Yang Membuat Pengguna Mencintai Anda
Ciri-ciri Gemini 3.0 Pro boleh mencadangkan pengoptimuman tanpa menjadikan aplikasi anda sebagai projek sains.
- Hantar kurang JavaScript: Laluan berpecah kod, muat malas komponen tidak kritikal, dan lebih suka CSS jika boleh.
- Pengendalian imej: Gunakan nisbah aspek, format moden (AVIF/WebP), dan atribut saiz. Biarkan HTML melakukan kerja berat.
- Gerakan dengan adab: Kurangkan animasi pada prefers-reduced-motion; gunakan transform/opacity untuk bingkai yang lebih lancar.
- Kebaikan rangkaian: Pramuat fon kritikal, pra-sambung ke CDN anda, dan gunakan stale-while-revalidate untuk kandungan.
Tanya secara terus: “Cadangkan peningkatan prestasi dalam Next.js 14, tiada deps tambahan, boleh diukur melalui Lighthouse.” Ia akan memberi tumpuan kepada spesifik, bukan poster inspirasi.
Keselamatan dan Privasi: Sementara Itu, Kembali ke Realiti
- Kekalkan rahsia daripada gesaan. Kekunci ENV, token, atau URL peribadi tidak sesuai dalam sembang anda. Gunakan pemegang tempat.
- Sanitasi input pengguna. Minta Gemini menunjukkan contoh melarikan diri HTML dan mencegah XSS dalam komponen dinamik.
- Audit kod pihak ketiga. Jika model menambah kebergantungan, sahkan saiz, lesen dan penyelenggaraannya.
Model ini membantu, tetapi anda adalah orang dewasa di dalam bilik.
Di Mana Sider.AI Sesuai (Kejutan Yang Menyenangkan)
Berikut ialah kejutan: Sider.AI bermain dengan sangat baik dengan aliran kerja ini. Ia dibina untuk berada di samping pengekodan anda, mengambil tangkapan skrin, mengesan langkah, dan mengekalkan konteks merentasi tab anda. Dalam amalan, itu bermakna anda boleh: - Tampal token reka bentuk anda dan beberapa komponen sekali, dan kemudian berulang dalam satu perbualan yang berterusan semasa anda mengekod.
- Jatuhkan tangkapan skrin ujian yang gagal dan berkata, “Mengapa ujian Playwright ini serpihan?” Sider.AI akan menerangkan isu masa dan mencadangkan pembetulan yang menghormati tindanan anda.
- Gunakan sebagai buku nota kod hidup: “Berikut ialah butang kami, berikut ialah konfigurasi lint, berikut ialah mod gelap—bantu saya membina modal dalam gaya yang sama.”
Ia tidak sempurna—tetapi jika anda mengarahkannya ke tugas bahagian hadapan, Sider.AI terasa seperti pembantu juruterbang yang tenang yang mengingati apa yang anda katakan sepuluh minit yang lalu. Cuba buat ia menjalankan gaji anda, walaupun… jangan. Buku Masakan Mini: Gesaan Yang Betul-Betul Berfungsi
- “Faktorkan semula CSS ini untuk menggunakan grid. Kekalkan output visual yang sama, alih keluar peraturan yang berlebihan, dan terangkan sebarang perubahan.”
- “Buat komponen React Accordion dengan panduan corak ARIA, prop TypeScript, dan ujian unit. Padankan token ini: [tampal token].”
- “Memandangkan tangkapan skrin Figma ini, tulis HTML/CSS responsif yang sepadan dengan jarak dan tipografi. Gunakan pertanyaan bekas jika membantu.”
- “Audit halaman ini untuk kebolehaksesan: tajuk, mercu tanda, keadaan fokus, kontras warna. Keluarkan pembetulan dengan kod.”
- “Optimumkan untuk Core Web Vitals: cadangkan perubahan yang mengurangkan JS, menangguhkan kerja bukan kritikal, dan meningkatkan CLS. Tiada kebergantungan baharu.”
Anda akan melihat tema: kekangan, contoh, konteks. Model ini berkembang maju pada rel.
Semakan Realiti: Perkara Yang Tidak Akan Dilakukan oleh Gemini 3.0 Pro
- Ia tidak akan menggantikan pertimbangan reka bentuk. Ia boleh menyalin corak; ia tidak boleh mencipta yang menarik atas arahan.
- Ia tidak akan menyahpepijat konfigurasi binaan berhantu tanpa log. Berikan ralat dan versi.
- Ia tidak akan membaca fikiran anda tentang peraturan perniagaan. Eja negeri: kosong, memuat, ralat, berjaya.
- Ia tidak akan menghantar produk. Anda masih menyemak, menguji dengan pengguna sebenar, dan menggilap.
Tetapi ia akan memotong bahagian yang membosankan dan membantu anda mengelakkan kesilapan bodoh. Dan itu adalah pertukaran yang baik untuk mana-mana pembangun bahagian hadapan.
Demo Satu Ambil: Membina Panel Tetapan
Mari kita lakukan lakaran pantas panel tetapan dengan tema, makluman e-mel, dan pemadaman akaun. Keperluan: tab mesra papan kekunci, UI optimistik untuk togol, dialog pengesahan, dan a11y yang dibakar.
- Persediaan gesaan: “Buat komponen SettingsPanel dalam React dengan tiga tab: Profil, Pemberitahuan, Zon Bahaya. Laksanakan tab setiap Amalan Pengarangan WAI-ARIA. Gunakan TypeScript, modul CSS, dan sertakan ujian Jest dengan React Testing Library.”
- Ulangan: “Tambah kemas kini optimistik untuk togol pemberitahuan. Jika pelayan mengembalikan 500, gulung balik dan tunjukkan roti bakar tidak menyekat dengan mesej sopan aria-live.”
- Gilap: “Integrasikan token reka bentuk: [tampal]. Jadikan garis luar fokus kelihatan dalam mod gelap dan elakkan isyarat berasaskan warna sahaja. Tambah dialog pengesahan untuk pemadaman akaun, boleh dilepaskan melalui kekunci Escape, dengan perangkap fokus.”
Gemini 3.0 Pro menghasilkan tab yang boleh anda navigasi dengan kekunci anak panah, togol dengan keadaan optimistik, dan dialog yang benar-benar memerangkap fokus. Adakah anda selesai? Belum lagi. Anda menyambungkan API sebenar, mengubah suai masa, dan menjalankan ujian. Tetapi anda sangat dekat selepas 15 minit.
Keputusan Akhir: Patutkah Anda Menggunakan Gemini 3.0 Pro untuk Bahagian Hadapan?
Jika anda berada di tengah-tengah komponen, tangkapan skrin, dan “mengapa pengepala melekit saya tidak melekit?” maka ya—berikan Gemini 3.0 Pro tempat duduk di meja anda. Ciri-ciri Gemini 3.0 Pro yang ditujukan kepada pembangunan bahagian hadapan membantu anda membina perancah dengan lebih pantas, mengelakkan kesilapan kebolehaksesan, dan memastikan ujian anda tidak basi. Ia bukan tongkat sakti. Tetapi ia merupakan pembantu yang sangat berkebolehan yang mengubah gunung tugas bahagian hadapan menjadi timbunan tugas yang boleh dilakukan dengan kemas.
Dan butang yang tidak sejajar yang malang itu? Dengan gesaan yang betul—dan sedikit rasa manusia—anda mungkin juga mendapatkannya berpusat dengan sempurna pada percubaan pertama. Jangan risau; Saya tidak akan memberitahu sesiapa ia bukan idea anda.
Perkara Utama (dan Satu Perkara Terakhir)
- Suapkan Gemini 3.0 Pro konteks anda: token, contoh, peraturan. Ia menjadi lebih bijak (dan kurang generik).
- Gunakan untuk perancah, kebolehaksesan, ujian, dan pemfaktoran semula susun atur. Semak semula prestasi dan keanehan khusus rangka kerja.
- Ulang secara visual. Tangkapan skrin dan perbezaan membantu model itu mencapai niat reka bentuk.
- Kekalkan tangan anda pada roda. Semak untuk ketepatan, ukur prestasi, dan uji dengan pengguna sebenar.
Satu perkara terakhir: Jika ragu-ragu, minta ia menjelaskan pilihannya. Separuh daripada nilai 3.0 Pro dalam pembangunan bukanlah kodnya—tetapi komennya. Walaupun anda tidak bersetuju, anda tidak bersetuju dengan yang sangat pantas.
Soalan Lazim (FAQ)
S1: Apakah ciri-ciri 3.0 Pro yang paling berguna untuk pembangunan ?
Untuk pembangunan , 3.0 Pro cemerlang dalam menyediakan komponen, membersihkan CSS dengan , menambahkan kebolehaksesan, dan menjana ujian asas. Ia juga berfikir merentasi fail dan tangkapan skrin, yang membantu menyelaraskan kod dengan reka bentuk dengan lebih cepat.
S2: Bolehkah 3.0 Pro menukar reka bentuk kepada kod yang sedia untuk pengeluaran?
Ia boleh membawa anda 70–80% ke sana dengan HTML/CSS responsif dan semantik yang munasabah. Anda masih perlu memperhalusi jarak, token dan kes-kes pinggir—tetapi 3.0 Pro memendekkan laluan daripada reka bentuk kepada komponen yang berfungsi secara dramatik.
S3: Bagaimana saya menghalang 3.0 Pro daripada mereka-reka API atau pustaka?
Tetapkan kekangan dalam gesaan anda: nyatakan versi , jangan benarkan pergantungan baharu dan minta ia mengesahkan perkara yang tidak pasti. Sediakan konfigurasi dan anda supaya 3.0 Pro mengikut tindanan () sebenar anda.
S4: Adakah 3.0 Pro bagus untuk kerja-kerja kebolehaksesan () pada ?
Ya—minta ia mengaudit tajuk, fokus, atribut dan kontras warna, dan mengeluarkan pembetulan kod. Ia bukanlah pengganti untuk ujian pembaca skrin, tetapi 3.0 Pro ialah cara yang cepat untuk menangkap isu a11y yang biasa.
S5: Bagaimanakah 3.0 Pro dibandingkan dengan untuk pembangunan ?
cemerlang dalam pelengkapan sebaris (); 3.0 Pro lebih baik dalam penaakulan multimodal—menyelaraskan kod dengan tangkapan skrin, ujian dan token reka bentuk. Untuk tugas pembangunan yang merangkumi reka letak, komponen dan a11y, sering terasa lebih holistik.
