עיצוב מחדש לאתר קיים עם DESIGN.md וקלוד קוד

מה זה DESIGN.md ולמה זה מתאים לאתר קיים?

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

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

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

איפה מוצאים קובץ DESIGN.md מוכן?

המקור הכי מוכר הוא המאגר awesome-design-md בגיטהאב, ברישיון MIT. נכון ל-31 באוקטובר 2026 יש לו כ-124,700 כוכבים, וב-README יש 84 קבצים של מותגים מוכרים, כמו Airbnb, Stripe, Notion, Linear ו-Vercel. באתר getdesign.md רשומים יותר מ-550 ניתוחים, וחלקם זמינים רק בבקשה דרך האתר.

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

מורידים קובץ לתיקייה של האתר בפקודה אחת, מהתיקייה הראשית של הפרויקט:

npx getdesign@latest add airbnb

אפשר גם ללחוץ על Download DESIGN.md בעמוד של המותג באתר ולשים את הקובץ בתיקייה הראשית.

איך מעצבים מחדש את האתר שלב אחרי שלב?

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

1. גיבוי. לפני הכל, עותק של התיקייה או ענף נפרד בגיט. ככה אפשר לחזור אחורה בלחיצה.
2. מיפוי. מבקשים מקלוד קוד לעבור על האתר ולהגיד אילו צבעים, פונטים וכפתורים יש בו היום. מהר מאוד רואים כמה גרסאות שונות של אותו כפתור הצטברו.
3. עמוד אחד קודם. מעצבים מחדש רק את דף הבית, ופותחים אותו בדפדפן, במחשב ובטלפון.
4. תיקונים. מה שלא מתאים, מתקנים בקובץ DESIGN.md ולא בעמוד. ככה התיקון עובר לכל העמודים הבאים.
5. כל השאר. רק אחרי שדף הבית נראה כמו שרציתם, עוברים על שאר העמודים.

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

פרומפטים מוכנים להעתקה

שלושה פרומפטים לפי הסדר של השלבים למעלה. מדביקים בקלוד קוד מתוך התיקייה של האתר.

1. מיפוי של מה שיש היום

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

2. עיצוב מחדש של דף הבית בלבד

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

3. כל שאר העמודים

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

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

איך כותבים DESIGN.md למותג שלכם?

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

יש בתיקייה הזאת את הלוגו שלי (logo.png) ואת האתר הנוכחי.
תכתוב לי קובץ DESIGN.md למותג שלי, באותו מבנה כמו הקבצים במאגר awesome-design-md:
בראש הקובץ רשימת ערכים (צבעים, פונטים, רדיוסים, מרווחים), ומתחת הסבר במילים על טיפוגרפיה, פריסה, כפתורים, כרטיסים, טפסים ומה קורה בטלפון.
תיקח את הצבעים מהלוגו, תבחר פונט עברי חינמי שמתאים לאופי של העסק, ותכתוב לכל החלטה שורה אחת של "למה".
העסק: [שתי שורות על העסק והקהל שלו].
אחרי שהקובץ מוכן, תבנה דף נחיתה קצר אחד לפיו כדי שאוכל לראות איך זה נראה.

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

זה עובד גם בקרסר ובגוגל סטיץ'?

כן, וזה אחד היתרונות הגדולים. DESIGN.md הוא סתם קובץ טקסט, אז הוא לא נעול לכלי אחד. לפי getdesign.md, הקבצים עובדים עם קלוד קוד, Cursor, Codex, Gemini ו-ChatGPT, והאתר מציין שהם בנויים לפי המפרט הרשמי של גוגל. בגוגל סטיץ' הקובץ הוא חלק מהכלי עצמו. כלומר, אם מחר תעברו כלי, השפה העיצובית של האתר עוברת איתכם.

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

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