Stop Fixing Broken AI UI Manually

ನಿಮ್ಮ AI ಕೋಡಿಂಗ್ ಪರಿಕರಗಳು ವಿನ್ಯಾಸದ ವಿಷಯದಲ್ಲಿ ಆಗಾಗ್ಗೆ ವಿಫಲವಾಗುತ್ತವೆ.

ನೀವು ಒಂದು ಬಟನ್ ಕೇಳುತ್ತೀರಿ. AI ನಿಮಗೆ ಒಂದು ನೀಲಿ ಬಣ್ಣದ ಶೇಡ್ ನೀಡುತ್ತದೆ. ನೀವು ಇನ್ನೊಂದು ಕಾಂಪೊನೆಂಟ್ ಕೇಳುತ್ತೀರಿ. AI ನಿಮಗೆ ಬೇರೆ ನೀಲಿ ಬಣ್ಣದ ಶೇಡ್ ನೀಡುತ್ತದೆ. AI ಬಳಿ ಕಟ್ಟುನಿಟ್ಟಾದ ಡಿಸೈನ್ ಸಿಸ್ಟಮ್ ಇಲ್ಲದ ಕಾರಣ ಹೀಗಾಗುತ್ತದೆ.

ಇದನ್ನು ಪರಿಹರಿಸಲು Google Labs design.md ಅನ್ನು ಬಿಡುಗಡೆ ಮಾಡಿದೆ.

ಇದು Cursor, Claude Code ಮತ್ತು GitHub Copilot ನಂತಹ ಪರಿಕರಗಳು ನಿಮ್ಮ ವಿನ್ಯಾಸದ ನಿಯಮಗಳನ್ನು ಓದಲು ಅನುವು ಮಾಡಿಕೊಡುವ ಒಂದು ಸ್ಪೆಸಿಫಿಕೇಶನ್ ಆಗಿದೆ. ಇದು ಅಸಮರ್ಪಕ ಸ್ಪೇಸಿಂಗ್, ತಪ್ಪು ಫಾಂಟ್‌ಗಳು ಮತ್ತು ಬದಲಾಗುತ್ತಿರುವ ಬಣ್ಣಗಳನ್ನು ತಡೆಯುತ್ತದೆ.

How it works:

design.md ಎಂಬುದು ಎರಡು ಭಾಗಗಳನ್ನು ಹೊಂದಿರುವ ಒಂದು Markdown ಫೈಲ್ ಆಗಿದೆ.

  • YAML Front Matter: ಇದು ನಿಖರವಾದ ಡಿಸೈನ್ ಟೋಕನ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿದೆ. ನೀವು ಇಲ್ಲಿ ಬಣ್ಣಗಳು, ಟೈಪೋಗ್ರಫಿ, ಸ್ಪೇಸಿಂಗ್ ಮತ್ತು ಕಾರ್ನರ್ ರೇಡಿಯಸ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು.
  • Markdown Body: ಇದು ಡಿಸೈನ್ ರೇಷನಲ್ ಅನ್ನು ಒಳಗೊಂಡಿದೆ. ನೀವು ಒಂದು ಬಣ್ಣವನ್ನು ಏಕೆ ಬಳಸುತ್ತೀರಿ ಮತ್ತು ಅದನ್ನು ಯಾವಾಗ ಬಳಸಬಾರದು ಎಂಬುದನ್ನು ಇದು ವಿವರಿಸುತ್ತದೆ.

ಈ ರಚನೆಯು AI ಗೆ ಡೇಟಾ ಮತ್ತು ಲಾಜಿಕ್ ಎರಡನ್ನೂ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಇದು ಕೇವಲ ಹೆಕ್ಸ್ ಕೋಡ್ ಅನ್ನು ನೋಡುವುದಿಲ್ಲ. ಒಂದು ನಿರ್ದಿಷ್ಟ ಬಣ್ಣವು ಹೆಡ್‌ಲೈನ್‌ಗಳಿಗಾಗಿ ಮತ್ತು ಅದನ್ನು ಬಾಡಿ ಟೆಕ್ಸ್ಟ್‌ಗಾಗಿ ಬಳಸಬಾರದು ಎಂಬುದನ್ನು ಇದು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುತ್ತದೆ.

Key features of the design.md CLI:

  • Linting: ನಿಮ್ಮ ಟೋಕನ್‌ಗಳು ಸರಿಯಾಗಿವೆಯೇ ಎಂದು ಇದು ಪರಿಶೀಲಿಸುತ್ತದೆ. ಇದು WCAG AA ಅಕ್ಸೆಸಿಬಿಲಿಟಿ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನ್ನು ಸಹ ಪರಿಶೀಲಿಸುತ್ತದೆ.
  • Diffing: ನಿಮ್ಮ ವಿನ್ಯಾಸವನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಿದಾಗ ಯಾವ ಟೋಕನ್‌ಗಳು ಬದಲಾಗಿವೆ ಎಂಬುದನ್ನು ಇದು ನಿಖರವಾಗಿ ತೋರಿಸುತ್ತದೆ.
  • Exporting: ಇದು ನಿಮ್ಮ ಡಿಸೈನ್ ಫೈಲ್ ಅನ್ನು Tailwind CSS, JSON ಅಥವಾ W3C Design Tokens ಗೆ ಪರಿವರ್ತಿಸುತ್ತದೆ.
  • Spec: ನಿಮ್ಮ ಫೈಲ್ ಅನ್ನು ಹೇಗೆ ಓದಬೇಕೆಂದು ನಿಮ್ಮ AI ಗೆ ಕಲಿಸಲು ನೀವು ನೀಡಬಹುದಾದ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ಇದು ಸಿದ್ಧಪಡಿಸುತ್ತದೆ.

Why this matters:

ಹೆಚ್ಚಿನ ડેವಲಪರ್‌ಗಳು ಸಾಮಾನ್ಯ ನಿಯಮಗಳಿಗಾಗಿ CLAUDE.md ಅಥವಾ AGENTS.md ಬಳಸುತ್ತಾರೆ. ಇವು ಸಹಕಾರಿಯಾಗಿದ್ದರೂ, ಈ ಫೈಲ್‌ಗಳು ಹೆಚ್ಚಾಗಿ ನೈಸರ್ಗಿಕ ಭಾಷೆಯಲ್ಲಿರುತ್ತವೆ. AI ಇಂದಿಗೂ ನಿರ್ದಿಷ್ಟ ಮೌಲ್ಯಗಳನ್ನು ಊಹಿಸಬೇಕಾಗುತ್ತದೆ.

design.md ನಿಮ್ಮ ಡಿಸೈನ್ ಸಿಸ್ಟಮ್ ಅನ್ನು ಮಷಿನ್-ರೀಡಬಲ್ ಡೇಟಾ ಆಗಿ ಪರಿವರ್ತಿಸುತ್ತದೆ.

To use it:

  1. DESIGN.md ಅನ್ನು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ರೂಟ್‌ನಲ್ಲಿ ಇರಿಸಿ.
  2. ನಿಮ್ಮ CLAUDE.md ಅಥವಾ Cursor ನಿಯಮಗಳಲ್ಲಿ ಈ ಸಾಲನ್ನು ಸೇರಿಸಿ: "For UI tasks, read DESIGN.md first and strictly follow the tokens and rationale."

ನಿಮ್ಮ AI ಗೆ ಪದೇ ಪದೇ "wrong color" ಎಂದು ಹೇಳುವುದನ್ನು ನಿಲ್ಲಿಸಿ. ಅದಕ್ಕೆ ಒಂದು ಏಕೈಕ ಸತ್ಯದ ಮೂಲವನ್ನು (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