Ngừng việc sửa lỗi giao diện AI một cách thủ công

Các công cụ lập trình AI của bạn thường thất bại trong việc thiết kế.

Bạn yêu cầu một nút bấm. AI đưa cho bạn một sắc thái xanh dương. Bạn yêu cầu một thành phần khác. AI lại đưa cho bạn một sắc thái xanh dương khác. Điều này xảy ra vì AI thiếu một hệ thống thiết kế (design system) chặt chẽ.

Google Labs đã phát hành design.md để giải quyết vấn đề này.

Đây là một bản đặc tả cho phép các công cụ như Cursor, Claude Code và GitHub Copilot đọc các quy tắc thiết kế của bạn. Điều này giúp ngăn chặn tình trạng khoảng cách không nhất quán, sai phông chữ và màu sắc bị lệch.

Cách thức hoạt động:

design.md là một tệp Markdown gồm hai phần.

  • YAML Front Matter: Phần này chứa các design tokens chính xác. Bạn định nghĩa màu sắc, typography, khoảng cách và corner radii tại đây.
  • Markdown Body: Phần này chứa các lý giải thiết kế (design rationale). Nó giải thích tại sao bạn sử dụng một màu sắc và khi nào nên tránh sử dụng nó.

Cấu trúc này giúp AI hiểu được cả dữ liệu và logic. Nó không chỉ nhìn thấy một mã hex. Nó hiểu rằng một màu cụ thể dành cho tiêu đề và không nên được sử dụng cho văn bản thân bài (body text).

Các tính năng chính của design.md CLI:

  • Linting: Kiểm tra xem các token của bạn có chính xác không. Nó thậm chí còn kiểm tra độ tương phản khả năng truy cập theo tiêu chuẩn WCAG AA.
  • Diffing: Hiển thị chính xác những token nào đã thay đổi khi bạn cập nhật thiết kế.
  • Exporting: Chuyển đổi tệp thiết kế của bạn sang Tailwind CSS, JSON, hoặc W3C Design Tokens.
  • Spec: Tạo ra một bản hướng dẫn mà bạn có thể cung cấp cho AI để dạy nó cách đọc tệp của bạn.

Tại sao điều này lại quan trọng:

Hầu hết các nhà phát triển sử dụng CLAUDE.md hoặc AGENTS.md cho các quy tắc chung. Mặc dù hữu ích, nhưng các tệp này chủ yếu là ngôn ngữ tự nhiên. AI vẫn phải tự đoán các giá trị cụ thể.

design.md biến hệ thống thiết kế của bạn thành dữ liệu mà máy tính có thể đọc được.

Cách sử dụng:

  1. Đặt DESIGN.md vào thư mục gốc của dự án.
  2. Trong CLAUDE.md hoặc các quy tắc của Cursor, hãy thêm dòng này: "For UI tasks, read DESIGN.md first and strictly follow the tokens and rationale."

Đừng lặp lại câu "sai màu rồi" với AI của bạn nữa. Hãy cung cấp cho nó một nguồn sự thật duy nhất (single source of truth).

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

Optional learning community: https://t.me/GyaanSetuAi