Design md: אתר בשפה העיצובית של מותג גדול

מה זה DESIGN.md?

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

DESIGN.md הוא הפתרון לזה. זה קובץ טקסט רגיל, בפורמט Markdown, שמתאר את השפה העיצובית של אתר: צבעים, פונטים, מרווחים, איך נראים כפתורים וכרטיסים, ומה אסור לעשות. את הרעיון הציגו ב-Google Stitch, והיום הוא עובד עם קלוד קוד, Cursor, Codex וכל סוכן קוד אחר.

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

מה יש בתוך קובץ DESIGN.md?

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

• צבעים: כחול אחד בלבד, #3E6AE1, ורק לכפתורי הפעולה הראשיים. השאר לבן ושלושה גוונים של אפור כהה לטקסט.
• טיפוגרפיה: משפחת הפונט Universal Sans, כותרות ראשיות בגודל 40 פיקסלים ומשקל 500, וטקסט רגיל ב-14 פיקסלים.
• רכיבים: פינות מעוגלות של 4 פיקסלים בכל כפתור ושדה, ומעברים של 0.33 שניות.
• מה לעשות: לתת לתמונות לשלוט בכל מסך.
• מה לא לעשות: לא להוסיף צל לשום רכיב, ולא להשתמש ביותר מצבע אחד חוץ מהכחול.

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

איפה מוצאים קבצי DESIGN.md של מותגים?

הספרייה החינמית בגיטהאב

awesome-design-md של VoltAgent היא ספרייה פתוחה ברישיון MIT, עם 122,517 כוכבים בגיטהאב נכון ל-21 באוקטובר 2026. יש בה 84 קבצי DESIGN.md של אתרים מוכרים, מחולקים לקטגוריות: פלטפורמות AI כמו Claude ו-ElevenLabs, כלי פיתוח כמו Vercel ו-Cursor, כלי עבודה כמו Notion ו-Linear, ועוד הרבה.

הקטלוג באתר getdesign.md

אותו צוות מחזיק גם את getdesign.md, עם קטלוג של יותר מ-550 ניתוחים של אתרים. לכל מותג יש שם עמוד עם תצוגה מקדימה, כפתור להורדת הקובץ ופקודה שמוסיפה אותו לפרויקט. חלק מהקטלוג מסומן לבקשה בלבד, ויש באתר גם מוצרים בתשלום, כמו Catalog Pass וקובץ פרטי שמכינים בשבילכם. כדי להתחיל, הספרייה החינמית מספיקה לגמרי.

איך מוסיפים DESIGN.md לפרויקט בקלוד קוד?

דרך 1: פקודה אחת מהטרמינל

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

npx getdesign@latest add tesla

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

דרך 2: להוריד ולגרור

לא רוצים טרמינל? נכנסים לעמוד של המותג ולוחצים על Download DESIGN.md, או פותחים את התיקייה design-md בספרייה בגיטהאב ומורידים את הקובץ. אחר כך מעבירים אותו לתיקייה הראשית של הפרויקט, ליד קובץ ה-CLAUDE.md אם יש לכם.

דרך 3: לתת לקלוד לעשות את זה

איך מבקשים מקלוד קוד לבנות לפי DESIGN.md?

אחרי שהקובץ בפרויקט, מזכירים אותו בבקשה. הנה כמה פרומפטים שעובדים טוב:

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

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

DESIGN.md לעסק שלכם

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

מתי DESIGN.md שווה לכם?

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

חשוב לדעת לפני שמתחילים

• זאת השראה, לא העתקה. בעמודים של getdesign.md כתוב שמדובר בניתוח עצמאי של מה שרואים באתר, בלי קשר למותג עצמו. אל תשתמשו בלוגו או בשם של מותג אחר, ואל תבנו אתר שאפשר להתבלבל בינו לבין המקור.
• פונטים של מותגים לא תמיד זמינים. Universal Sans של טסלה הוא פונט פרטי. קלוד יבחר פונט דומה, ושווה לבדוק מה הוא בחר.
• עברית דורשת התאמה. הקבצים כתובים לאתרים באנגלית. תבקשו במפורש כיוון מימין לשמאל ופונט עברי, אחרת תקבלו טקסט עברי בפונט שלא תומך בו.
• מספר הקבצים משתנה. 84 בספרייה החינמית ויותר מ-550 בקטלוג, נכון ל-21 באוקטובר 2026. המספרים גדלים כל הזמן.
• חלק מהאתר בתשלום. הספרייה בגיטהאב חינמית לגמרי. ב-getdesign.md יש גם מוצרים בתשלום, אז תבדקו לפני שאתם נרשמים למשהו.