توقف عن إصلاح واجهات مستخدم الذكاء الاصطناعي المعطلة يدويًا
غالبًا ما تفشل أدوات البرمجة المدعومة بالذكاء الاصطناعي في التصميم.
تطلب زرًا، فيعطيك الذكاء الاصطناعي درجة معينة من اللون الأزرق. تطلب مكونًا آخر، فيعطيك درجة مختلفة من اللون الأزرق. يحدث هذا لأن الذكاء الاصطناعي يفتقر إلى نظام تصميم صارم.
أطلقت Google Labs ملف design.md لحل هذه المشكلة.
إنه مواصفة تتيح لأدوات مثل Cursor و Claude Code و GitHub Copilot قراءة قواعد التصميم الخاصة بك. وهذا يمنع عدم اتساق المسافات، والخطوط الخاطئة، وتفاوت الألوان.
كيف يعمل:
ملف design.md هو ملف Markdown يتكون من جزأين.
- YAML Front Matter: يحتوي هذا الجزء على رموز تصميم (design tokens) دقيقة. يمكنك هنا تحديد الألوان، والخطوط (typography)، والمسافات، ونصف قطر الزوايا (corner radii).
- Markdown Body: يحتوي هذا الجزء على المنطق التصميمي (design rationale). وهو يشرح سبب استخدام لون معين ومتى يجب تجنبه.
يساعد هذا الهيكل الذكاء الاصطناعي على فهم كل من البيانات والمنطق. فهو لا يرى مجرد رمز hex، بل يفهم أن لونًا معينًا مخصص للعناوين ولا ينبغي استخدامه لنص المتن.
الميزات الرئيسية لـ design.md CLI:
- Linting: يتحقق مما إذا كانت الرموز (tokens) الخاصة بك صحيحة، بل ويتحقق أيضًا من تباين إمكانية الوصول وفقًا لمعايير WCAG AA.
- Diffing: يوضح لك بالضبط الرموز التي تغيرت عند تحديث تصميمك.
- Exporting: يقوم بتحويل ملف التصميم الخاص بك إلى Tailwind CSS أو JSON أو W3C Design Tokens.
- Spec: يقوم بإنشاء دليل يمكنك تقديمه للذكاء الاصطناعي لتعليمه كيفية قراءة ملفك.
لماذا يهم هذا:
يستخدم معظم المطورين ملفات CLAUDE.md أو AGENTS.md للقواعد العامة. ورغم أنها مفيدة، إلا أن هذه الملفات تعتمد في الغالب على اللغة الطبيعية، مما يضطر الذكاء الاصطناعي إلى تخمين القيم المحددة.
يحول design.md نظام التصميم الخاص بك إلى بيانات قابلة للقراءة آليًا.
لاستخدامه:
- ضع ملف DESIGN.md في المجلد الرئيسي لمشروعك (project root).
- في ملف CLAUDE.md أو قواعد Cursor، أضف هذا السطر: "For UI tasks, read DESIGN.md first and strictly follow the tokens and rationale."
توقف عن تكرار "اللون خاطئ" للذكاء الاصطناعي. امنحه مصدرًا واحدًا للحقيقة.
مجتمع تعليمي اختياري: https://t.me/GyaanSetuAi