איך להשתמש ב-DESIGN.md

מה זה DESIGN.md?

DESIGN.md זה קובץ אחד שיושב בתיקייה הראשית של הפרויקט ומרכז את כל החלטות העיצוב שלכם: צבעים, טיפוגרפיה, רווחים, פינות מעוגלות, מצבי כהה ובהיר, ודפוסים של רכיבים. פיתחו אותו ב-Google Labs (Stitch) בתור פורמט שכל סוכן קוד יודע לקרוא, בלי MCP, בלי SDK ובלי תוספים. בסוף זה Markdown עם YAML frontmatter, ולכן Claude Code, Cursor, GitHub Copilot, Windsurf, Codex ו-Gemini CLI עובדים איתו ישר מהקופסה. המפרט המלא נמצא בריפו google-labs-code/design.md ב-GitHub.

הרעיון פשוט: במקום שכל סוכן ינחש איך אמור להיראות הממשק שלכם, הוא קורא את DESIGN.md ומיישר אליו כל רכיב חדש שהוא בונה. אם הפונט שלכם הוא Heebo, הצבע הראשי כחול ישראלי והכפתורים מעוגלים, כל UI שייצא מהסוכן ייצמד להחלטות האלה לבד.

ב-Skills IL הקמנו ספריית מערכות עיצוב שמותאמות מראש לטיפוגרפיה בעברית ול-RTL שעובד כמו שצריך, כדי שלא תצטרכו לתחזק את זה לבד.

למה זה חשוב?

עקביות בין מסכים. בלי DESIGN.md, כל פיצ'ר חדש שהסוכן בונה יוצא קצת אחרת: גוון שונה, רווח שונה, פונט שונה. המשתמש מרגיש את זה גם אם הוא לא יודע להסביר למה.

עברית ו-RTL מהיום הראשון. מערכות עיצוב גנריות מהאינטרנט בנויות לאנגלית. הן שוברות ניקוד, חותכות אותיות סופיות, ומיישרות לשמאל גם איפה שצריך לימין. המערכות אצלנו בספרייה כבר עברו לינטר ל-WCAG AA ובדיקה של טיפוגרפיה בעברית.

זמן. במקום לבנות מערכת עיצוב מאפס, אתם מעתיקים מערכת מוכנה ותוך דקה הסוכן כבר עובד לפי הסטנדרט שלכם.

מה צריך כדי להתחיל?

שני דברים בלבד:

1. סוכן קוד כמו Claude Code, Cursor, GitHub Copilot, Windsurf, OpenCode, Codex, Antigravity או Gemini CLI
2. פרויקט שאתם רוצים לעצב, חדש או קיים

אם אתם עובדים ב-Claude.ai, Claude Desktop או ChatGPT (פלטפורמות בלי גישה לקבצים בפרויקט), עדיין אפשר. פשוט מורידים את DESIGN.md מעמוד המערכת ומדביקים את התוכן בשיחה לפני שמבקשים מה-AI לבנות משהו.

שלב 1: בוחרים מערכת עיצוב

נכנסים לספריית העיצוב ומחפשים מערכת שמתאימה למוצר שלכם. בכל כרטיס רואים את הפונטים שבשימוש, אם יש מצב כהה/בהיר, תווית WCAG AA וכמה פעמים התקינו אותה עד היום. בעמוד הפרטים יש תצוגה חיה כדי לראות איך זה נראה באמת לפני שמתקינים.

טיפים לבחירה:

• אם המוצר שלכם פונה לקהל ישראלי, חפשו תווית "Heebo" או מערכת שמסומנת כתומכת ב-RTL
• מערכות עם תווית "WCAG AA" כבר עברו בדיקת ניגודיות צבעים, אז לא תצטרכו לתקן ידנית
• צריכים מצב כהה? ודאו שיש סימון ✓ dark capable

שלב 2: התקנה

יש שתי דרכים. תבחרו את זו שמתאימה לסביבה ולסוכן שלכם.

אפשרות א׳: התקנה דרך ה-CLI (מומלץ)

בעמוד של מערכת העיצוב יש פקודת התקנה שנראית ככה:

npx skills-il add-design heritage-il

מה עושים:

1. מעתיקים את הפקודה (יש כפתור העתקה בצד)
2. פותחים טרמינל בתיקייה הראשית של הפרויקט
3. מדביקים ומריצים

ה-CLI ישמור את DESIGN.md בתיקייה הראשית של הפרויקט. זה הקובץ היחיד שהסוכן באמת קורא, וזה מה שמספיק כדי שהסוכן יעצב לפי המערכת.

הפקודה לא תדרוס DESIGN.md קיים בלי לשאול. אם כבר יש לכם קובץ, ה-CLI ישאל אם אתם רוצים להחליף.

אפשרות ב׳: הורדה ישירה

אם אתם לא עובדים עם CLI, או שאי אפשר להריץ npx בסביבה שלכם (למשל ב-Claude.ai, Claude Desktop או ChatGPT), לחצו על "הורדת DESIGN.md" בעמוד מערכת העיצוב.

1. בעמוד המערכת לוחצים "הורדת DESIGN.md"
2. שמים את הקובץ בתיקייה הראשית של הפרויקט
3. ב-Claude.ai או ב-ChatGPT: מצרפים את DESIGN.md לשיחה (העלאת קובץ או הדבקה) לפני שמבקשים מה-AI לבנות UI

שלב 3: מחברים לסוכן הקוד

זה החלק הכי חשוב. לא מספיק שהקובץ יושב בתיקייה, צריך להגיד לסוכן לקרוא אותו לפני שהוא בונה ממשק. לכל סוכן יש קובץ הוראות משלו:

סוכן	קובץ ההוראות
Claude Code	CLAUDE.md
Cursor	.cursor/rules/design.mdc
GitHub Copilot	.github/copilot-instructions.md
Windsurf	.windsurfrules
Gemini CLI	GEMINI.md
OpenCode / Codex / Antigravity	AGENTS.md

לא צריך לערוך את הקובץ הזה בעצמכם. בעמוד מערכת העיצוב, מתחת ל"התקנה", יש פרומפט מוכן שמתעדכן אוטומטית לפי הסוכן שתבחרו. ככה זה עובד:

1. בעמוד המערכת בוחרים את לשונית הסוכן (Claude Code / Cursor / וכו׳)
2. מעתיקים את הפרומפט (יש כפתור העתקה בצד)
3. מדביקים אותו לסוכן בשיחה
4. הסוכן בעצמו ייצור או יערוך את קובץ ההוראות ויוסיף בו הפניה ל-DESIGN.md

מהרגע הזה, כל בקשה לבניית UI (למשל "תבנה לי טופס הרשמה" או "תוסיף עמוד פרופיל") תיצמד לצבעים, לטיפוגרפיה ולרווחים שהוגדרו ב-DESIGN.md.

שלב 4: בונים ממשק

עכשיו אפשר לעבוד עם הסוכן כרגיל:

• "תבנה דף הגדרות עם 3 סקשנים"
• "תוסיף כרטיס משתמש עם אווטאר ושם"
• "תייצר טבלת חשבוניות עם פילטרים"

הסוכן ישלוף לבד את הצבעים, הפונטים והמרווחים מ-DESIGN.md, בלי שתצטרכו להגיד לו במפורש. אם תבקשו "כפתור ראשי", הוא ילך לטוקן primary. אם תבקשו "כותרת ראשית", הוא יקח את הפונט והגודל מהסקשן של Typography.

אם נראה לכם שהסוכן מתעלם מהקובץ, פתחו שיחה חדשה. סוכנים קוראים את קובץ ההוראות פעם אחת בתחילת שיחה, אז שינויים שעשיתם תוך כדי לא ייכנסו לתוקף עד שתפתחו צ'אט חדש.

שלב 5: עדכון והחלפה

מערכות עיצוב מתפתחות עם הזמן. אם בא לכם להחליף מערכת או לעדכן לגרסה חדשה:

• לעדכן את אותה מערכת לגרסה האחרונה: מריצים npx skills-il update-design <slug>. ה-CLI יבדוק אם יצאה גרסה חדשה ב-DESIGN.md שבפרויקט ויעדכן אותה במקום, בלי לאבד שינויים שעשיתם ידנית.

  לדוגמה, אם התקנתם את המערכת heritage-il ורוצים למשוך את הגרסה העדכנית:

  npx skills-il update-design heritage-il

• להחליף למערכת אחרת: מריצים npx skills-il add-design <slug-חדש>. ה-CLI יזהה שיש כבר DESIGN.md בתיקייה וישאל אם להחליף.

• בהורדה ישירה (Claude.ai / ChatGPT וכו׳): מורידים את DESIGN.md העדכני מעמוד המערכת ומחליפים את הקובץ הישן בתיקיית הפרויקט.

רוצים לשנות טוקן ספציפי (למשל את הצבע הראשי)? פשוט עורכים את DESIGN.md בעצמכם, זה קובץ טקסט רגיל. הסוכן יקרא את התוכן המעודכן בשיחה הבאה.

שאלות נפוצות

זה עובד רק באתרים, או גם במובייל?

DESIGN.md לא קשור לטכנולוגיה מסוימת. הוא פשוט מתאר ערכים (צבעים, טיפוגרפיה, רווחים), והסוכן יודע לתרגם אותם ל-Tailwind, CSS, SwiftUI, Compose או כל סטאק שאתם עובדים בו. אותו DESIGN.md עובד גם ב-Next.js, גם ב-React Native וגם ב-Flutter.

זה מחליף את ה-Tailwind config או את הטוקנים שלי ב-Figma?

לא, זה משלים אותם. אם יש לכם tailwind.config.ts עם טוקנים, DESIGN.md מסביר לסוכן באיזה טוקן להשתמש איפה ולמה. אם יש לכם Figma, DESIGN.md זה אותן החלטות בפורמט שסוכן קוד יודע לקרוא. אפשר לתחזק את שלושתם במקביל בלי בעיה.

עם אילו סוכני AI זה עובד?

עם כל סוכן שיודע לקרוא קבצים מהפרויקט: Claude Code, Cursor, GitHub Copilot, Windsurf, OpenCode, Codex, Antigravity ו-Gemini CLI. ב-Claude.ai, ב-Claude Desktop וב-ChatGPT אפשר לצרף את DESIGN.md לשיחה (העלאת קובץ או הדבקה של התוכן).

זה בטוח? מה בעצם יש בקובץ?

DESIGN.md זה Markdown רגיל, רק טקסט. אין בפנים קוד שרץ, אין סקריפטים, אין פניות רשת. כל מערכת בספרייה עוברת לינטר אוטומטי שבודק WCAG AA, תקינות טוקנים ופורמט YAML. אתם תמיד יכולים לפתוח את הקובץ בעורך ולקרוא אותו לפני שאתם מתקינים. בסוף זה ספר הוראות עיצוב, לא יותר.

למה לא פשוט להעתיק DESIGN.md כלשהו מ-GitHub?

אפשר, אבל לא מומלץ אם המוצר שלכם בעברית. המערכות אצלנו עברו התאמה לעברית: בוחרים בהן פונטים שעובדים טוב בעברית (כמו Heebo, Rubik ו-Assistant), טוקני רווחים שמסתדרים עם RTL, וניגודיות צבעים שעוברת WCAG AA גם על טקסט בעברית. DESIGN.md גנרי מ-getdesign.md או מ-designdotmd.directory בנוי לאנגלית, ויכול להיות שתצטרכו לתקן הרבה דברים ידנית.

איפה אפשר ללמוד יותר על הפורמט?

המקור הרשמי של הפורמט הוא Google Labs Stitch (Overview) והריפו google-labs-code/design.md ב-GitHub. שווה גם להציץ ב-getdesign.md וב-designdotmd.directory בשביל לראות דוגמאות אמיתיות מהעולם, אבל שימו לב שאצלנו הדגש הוא על קהל ישראלי, עברית ו-RTL.