Berhenti Membaiki UI AI yang Rosak Secara Manual

Alatan pengekodan AI anda sering gagal dalam aspek reka bentuk.

Anda meminta butang. AI memberikan satu tona biru. Anda meminta komponen lain. AI memberikan tona biru yang berbeza. Ini berlaku kerana AI kekurangan sistem reka bentuk yang ketat.

Google Labs telah mengeluarkan design.md untuk menyelesaikan masalah ini.

Ia adalah satu spesifikasi yang membolehkan alatan seperti Cursor, Claude Code, dan GitHub Copilot membaca peraturan reka bentuk anda. Ini menghalang jarak yang tidak konsisten, fon yang salah, dan warna yang lari daripada tema.

Cara ia berfungsi:

design.md ialah fail Markdown dengan dua bahagian.

  • YAML Front Matter: Ini mengandungi token reka bentuk yang tepat. Anda menentukan warna, tipografi, jarak, dan jejari bucu (corner radii) di sini.
  • Markdown Body: Ini mengandungi rasional reka bentuk. Ia menjelaskan mengapa anda menggunakan sesuatu warna dan bila perlu mengelakkannya.

Struktur ini membantu AI memahami data dan logik sekali gus. Ia tidak sekadar melihat kod hex. Ia memahami bahawa warna tertentu adalah untuk tajuk dan tidak sepatutnya digunakan untuk teks kandungan.

Ciri-ciri utama CLI design.md:

  • Linting: Ia menyemak sama ada token anda betul. Ia juga menyemak kontras kebolehcapaian WCAG AA.
  • Diffing: Ia menunjukkan dengan tepat token mana yang berubah apabila anda mengemas kini reka bentuk anda.
  • Exporting: Ia menukar fail reka bentuk anda kepada Tailwind CSS, JSON, atau W3C Design Tokens.
  • Spec: Ia menjana panduan yang boleh anda berikan kepada AI anda untuk mengajarnya cara membaca fail anda.

Mengapa ini penting:

Kebanyakan pembangun menggunakan CLAUDE.md atau AGENTS.md untuk peraturan umum. Walaupun membantu, fail-fail ini kebanyakannya menggunakan bahasa tabii. AI masih perlu meneka nilai-nilai tertentu.

design.md menukarkan sistem reka bentuk anda kepada data yang boleh dibaca oleh mesin.

Cara menggunakannya:

  1. Letakkan DESIGN.md di dalam akar (root) projek anda.
  2. Dalam CLAUDE.md atau peraturan Cursor anda, tambah baris ini: "For UI tasks, read DESIGN.md first and strictly follow the tokens and rationale."

Berhenti mengulang "wrong color" kepada AI anda. Berikan ia satu sumber kebenaran tunggal (single source of truth).

Sumber: https://dev.to/isray_notarray/designmd-if-your-ai-generated-ui-keeps-drifting-youre-missing-googles-designmd-4abh

Komuniti pembelajaran pilihan: https://t.me/GyaanSetuAi