Token desain
Ganti warna dan jarak tersebar dengan token desain bernama.
:root { --focus-ring: #2458b8; }
button:focus-visible, a:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 4px;
}- Model
- Atur endpoint kompatibel OpenAI atau Anthropic dengan URL dasar dan kunci API jika diperlukan. Uji koneksi. Server model lokal harus berjalan; alat jarak jauh dapat mengirim data secara terpisah.
- Proyek
- Periksa tema gelap serta fokus papan ketik agar penyatuan tidak menyembunyikan masalah kontras.
- Tinjau sebelum menerapkan
- Bandingkan perilaku sebenarnya dengan hasil yang diharapkan. Jika pemeriksaan gagal, cari penyebabnya sebelum membuat perubahan lain.
:root { --focus-ring: #2458b8; }
button:focus-visible, a:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 4px;
}Wujudkan keputusan desain dalam kode antarmuka yang berfungsi
Masukan desain dapat ditindaklanjuti jika menyebut interaksi sekaligus penampilan. Mith DesignLab adalah ruang kerja pemrograman Windows untuk mengubah masukan itu menjadi perubahan yang dapat diperiksa dalam proyek antarmuka. Jelaskan elemen, tata letak sekitarnya, dan apa yang harus terjadi saat seseorang mencapainya. Percakapan kemudian dapat membahas gaya serta perilaku yang menghasilkan pengalaman tersebut.
Token cincin fokus yang ditampilkan di sini adalah salah satu contoh proyek. Anda dapat meminta asisten memeriksa tombol dan tautan penggunanya, mengusulkan penyesuaian terarah, dan menjelaskan selektor terdampak. Tinjau CSS sebenarnya sebelum memeriksa antarmuka hasil render dengan navigasi papan ketik. Nilai warna dalam contoh tidak membuktikan setiap latar, komponen, atau interaksi aksesibel, dan tidak menyiratkan sertifikasi desain otomatis.
Hubungkan model pilihan melalui endpoint kompatibel OpenAI atau Anthropic yang didukung, dengan kredensial bila diperlukan. Pilihan AI tanpa sensor merujuk model yang tersedia di endpoint itu; pembatasan, alat, dan kapasitas konteks bergantung pada model serta server. Setelah meninjau usulan edit, jalankan pemeriksaan proyek terkait dan periksa keadaan terdampak di peramban. Kaitkan penerimaan visual dengan antarmuka yang benar-benar akan digunakan orang.
Bekerja dari masukan desain
Masukan apa yang lebih berguna daripada meminta tampilan lebih bagus?
Sebutkan komponen, keadaan, dan masalah teramati. Misalnya, jelaskan bahwa fokus papan ketik tidak terlihat pada panel tertentu. Sertakan gaya terkait dan perilaku target agar edit usulan memiliki syarat penerimaan konkret.
Apakah contoh cincin fokus memverifikasi aksesibilitas?
Tidak. Contoh itu menggambarkan CSS yang dapat diperiksa atau disesuaikan. Periksa hasil render terhadap warna sekitar, perilaku papan ketik, dan persyaratan proyek. Satu token tidak dapat membuktikan aksesibilitas seluruh antarmuka atau sistem komponen.
Bagaimana meninjau perubahan token gaya bersama?
Temukan komponen penggunanya dan periksa keadaan yang terdampak. Uji lebih dari komponen yang disebut dalam permintaan awal. Gaya bersama dapat mengubah layar yang tidak terkait meski berkas yang diedit kecil.
Bisakah berkas desain pribadi tetap di koneksi model lokal?
Model lokal memerlukan server berjalan terpisah dan hanya menentukan tujuan endpoint tersebut. Alat lain dapat mengirim data ke tempat lain. Periksa koneksi itu dan bagikan hanya konteks desain yang diperlukan untuk menjelaskan perubahan kode yang diminta.
Mith DesignLab · Diperbarui 2026-10-25