הפסיקו לתקן ידנית ממשקי AI שבורים
כלי הקוד מבוססי ה-AI שלכם נוטים לעיתים קרובות להיכשל בעיצוב.
אתם מבקשים כפתור. ה-AI נותן לכם גוון אחד של כחול. אתם מבקשים רכיב אחר. ה-AI נותן לכם גוון אחר של כחול. זה קורה כי ל-AI חסרה מערכת עיצוב (design system) קשיחה.
Google Labs שחררה את design.md כדי לפתור את זה.
זהו מפרט (specification) המאפשר לכלים כמו Cursor, Claude Code, ו-GitHub Copilot לקרוא את כללי העיצוב שלכם. זה מונע ריווחים לא עקביים, פונטים שגויים וסטייה בצבעים (drifting colors).
איך זה עובד:
design.md הוא קובץ Markdown בעל שני חלקים.
- YAML Front Matter: חלק זה מכיל design tokens מדויקים. כאן אתם מגדירים צבעים, טיפוגרפיה, ריווחים ורדיוס פינות (corner radii).
- Markdown Body: חלק זה מכיל את הרציונל העיצובי (design rationale). הוא מסביר מדוע אתם משתמשים בצבע מסוים ומתי כדאי להימנע ממנו.
המבנה הזה עוזר ל-AI להבין גם את הנתונים וגם את הלוגיקה. הוא לא רואה רק קוד hex. הוא מבין שצבע מסוים מיועד לכותרות ולא צריך לשמש לטקסט גוף (body text).
תכונות עיקריות של ה-CLI של design.md:
- Linting: הוא בודק אם ה-tokens שלכם נכונים. הוא אפילו בודק ניגודיות נגישות לפי תקן WCAG AA.
- Diffing: הוא מראה לכם בדיוק אילו tokens השתנו כשאתם מעדכנים את העיצוב שלכם.
- Exporting: הוא ממיר את קובץ העיצוב שלכם ל-Tailwind CSS, JSON, או W3C Design Tokens.
- Spec: הוא מייצר מדריך שתוכלו לתת ל-AI שלכם כדי ללמד אותו איך לקרוא את הקובץ שלכם.
למה זה חשוב:
רוב המפתחים משתמשים ב-CLAUDE.md או ב-AGENTS.md עבור כללים כלליים. למרות שהם מועילים, הקבצים הללו הם בעיקר בשפה טבעית. ה-AI עדיין נאלץ לנחש ערכים ספציפיים.
design.md הופך את מערכת העיצוב שלכם לנתונים שניתנים לקריאה על ידי מכונה.
כדי להשתמש בו:
- הניחו את DESIGN.md בשורש הפרויקט (project root) שלכם.
- בתוך ה-CLAUDE.md או חוקי ה-Cursor שלכם, הוסיפו את השורה הזו: "For UI tasks, read DESIGN.md first and strictly follow the tokens and rationale."
הפסיקו לחזור על "wrong color" מול ה-AI שלכם. תנו לו מקור אמת יחיד (single source of truth).
קהילת למידה אופציונלית: https://t.me/GyaanSetuAi