از اصلاح دستی رابط کاربری (UI) خراب شده توسط هوش مصنوعی دست بردارید

ابزارهای کدنویسی هوش مصنوعی شما اغلب در طراحی شکست می‌خورند.

شما یک دکمه می‌خواهید. هوش مصنوعی یک طیف از رنگ آبی را به شما می‌دهد. یک کامپوننت دیگر می‌خواهید. هوش مصنوعی طیف دیگری از رنگ آبی را به شما می‌دهد. این اتفاق به این دلیل می‌افتد که هوش مصنوعی فاقد یک سیستم طراحی (design system) دقیق است.

Google Labs برای حل این مشکل، design.md را منتشر کرده است.

این یک مشخصات فنی (specification) است که به ابزارهایی مانند Cursor، Claude Code و GitHub Copilot اجازه می‌دهد قوانین طراحی شما را بخوانند. این کار از فاصله‌گذاری‌های ناهماهنگ، فونت‌های اشتباه و تغییر رنگ‌های نامنسجم جلوگیری می‌کند.

نحوه عملکرد:

design.md یک فایل Markdown با دو بخش است.

  • YAML Front Matter: این بخش شامل توکن‌های طراحی (design tokens) دقیق است. شما رنگ‌ها، تایپوگرافی، فاصله‌گذاری و شعاع گوشه‌ها (corner radii) را در اینجا تعریف می‌کنید.
  • Markdown Body: این بخش شامل منطق طراحی (design rationale) است. توضیح می‌دهد که چرا از یک رنگ استفاده می‌کنید و چه زمانی باید از آن اجتناب کنید.

این ساختار به هوش مصنوعی کمک می‌کند تا هم داده‌ها و هم منطق را درک کند. هوش مصنوعی فقط یک کد هگز (hex code) را نمی‌بیند، بلکه درک می‌کند که یک رنگ خاص برای تیترهاست و نباید برای متن بدنه استفاده شود.

ویژگی‌های کلیدی CLI مربوط به design.md:

  • Linting: بررسی می‌کند که آیا توکن‌های شما صحیح هستند یا خیر. حتی کنتراست دسترسی‌پذیری WCAG AA را نیز بررسی می‌کند.
  • Diffing: دقیقاً نشان می‌دهد که هنگام به‌روزرسانی طراحی، کدام توکن‌ها تغییر کرده‌اند.
  • Exporting: فایل طراحی شما را به Tailwind CSS، JSON یا W3C Design Tokens تبدیل می‌کند.
  • Spec: راهنمایی تولید می‌کند که می‌توانید به هوش مصنوعی خود بدهید تا به او یاد دهید چگونه فایل شما را بخواند.

چرا این موضوع اهمیت دارد:

اکثر توسعه‌دهندگان از CLAUDE.md یا AGENTS.md برای قوانین عمومی استفاده می‌کنند. اگرچه این فایل‌ها مفید هستند، اما عمدتاً از زبان طبیعی تشکیل شده‌اند و هوش مصنوعی همچنان مجبور است مقادیر دقیق را حدس بزند.

design.md سیستم طراحی شما را به داده‌های قابل خواندن توسط ماشین تبدیل می‌کند.

برای استفاده از آن:

  1. فایل DESIGN.md را در ریشه (root) پروژه خود قرار دهید.
  2. در CLAUDE.md یا قوانین Cursor خود، این خط را اضافه کنید: "For UI tasks, read DESIGN.md first and strictly follow the tokens and rationale."

از تکرار عبارت "رنگ اشتباه" به هوش مصنوعی خود دست بردارید. به آن یک "منبع واحد حقیقت" (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