Alat gratis, tanpa daftar

Validator DESIGN.md

Tempel atau unggah DESIGN.md untuk mengeceknya terhadap format DESIGN.md: frontmatter, warna, referensi token, urutan bagian, dan kontras teks, dengan pratinjau langsung dari token-nya. Validasi berjalan di browser Anda dan file tidak diunggah. Butuh titik awal? Lihat contoh DESIGN.md asli yang diekstrak dari situs live.

FAQ

Pertanyaan tentang validator DESIGN.md

Jawaban singkat tentang Validator DESIGN.md gratis.

Frontmatter YAML, warna primary yang wajib ada, apakah warna ditulis dalam format warna (hex, rgb, hsl, oklch, nama warna, dan sejenisnya), ukuran font dan radius dalam px, em, atau rem, properti tipografi, properti komponen beserta referensi token-nya (termasuk referensi tanpa tanda kutip, yang tidak dibaca YAML sebagai teks), daftar yang dihilangkan (omitted), bagian yang duplikat atau tidak berurutan, serta kontras antara warna teks dan latar setiap komponen terhadap batas minimum WCAG AA 4.5:1. Error membuat file tidak valid; warning menandai hal yang sebaiknya diperbaiki.

Tidak. Validasi berjalan sepenuhnya di browser Anda: teks yang Anda tempel atau file yang Anda pilih tidak pernah dikirim ke server kami. Satu-satunya permintaan yang dibuat pratinjau adalah untuk stylesheet font: server kami mengambilnya dari Google Fonts, dan permintaan itu hanya membawa nama font family dari token tipografi Anda.

Format DESIGN.md dari Google seperti yang dipakai Stitch dan dipublikasikan di repository google-labs-code/design.md. Validator menerapkan aturan yang sama dengan yang dipakai Design Extractor untuk mengecek setiap DESIGN.md yang dihasilkannya, ditambah pengecekan kontras pada warna komponen.

Referensi seperti "{colors.brand}" harus menyebut token yang ada di frontmatter, dalam hal ini entri brand di bawah colors. Tambahkan token yang hilang atau arahkan referensi ke token yang ada. Tulis referensi di dalam tanda kutip: YAML membaca {colors.brand} tanpa tanda kutip sebagai mapping, bukan sebagai teks.

Bisa. Alat command-line open source dari Google mengecek file di pipeline Anda: jalankan npx @google/design.md lint DESIGN.md. Alat ini mencetak laporan JSON dan keluar dengan kode 1 jika menemukan error, sehingga job gagal untuk file yang rusak. Aturannya beririsan dengan halaman ini, tetapi beberapa tingkat keparahannya berbeda.

Lihat semua alat gratis

Belum punya DESIGN.md?

Ekstrak dari URL website apa pun dan dapatkan warna, tipografi, spacing, dan komponennya dalam satu DESIGN.md.