Zero Code, Real Website || בחודשים האחרונים אני בונה עם Claude יותר ויותר דברים שפעם הייתי צריכה בשבילם מעצב, מפתח ושלושה סבבי תיקונים. אחד הדברים שהכי מרגשים אותי הוא היכולת לבנות מיני סייט מקצה לקצה, מהרעיון ועד אתר עובד, בלי לכתוב שורת קוד אחת בעצמי!
החלטתי לפרק לכם את התהליך שאני עובדת בו לחמישה שלבים ברורים, כך שתוכלו לקחת אותו וליישם אותו כבר היום. הסוד? כל שלב מזין את השלב הבא, וכל כלי עושה בדיוק את מה שהוא הכי טוב בו.
שלב ראשון, כתיבת הבריף בצ׳אט של Claude 🧠
הכל מתחיל מהבריף! בריף לא מדויק יוביל לאתר לא מדויק, וזה בכלל לא משנה כמה הכלי חכם. אני פותחת את Claude בווב, בצ׳אט הרגיל, ומבקשת ממנו לראיין אותי לפני שהוא כותב מילה. השאלות שלו מכריחות אותי לחדד את מה שאני באמת רוצה. בסוף התהליך אני מבקשת קובץ MD מסודר, שהופך לחומר הגלם של שלב העיצוב.
אני רוצה לבנות מיני סייט. תראיין אותי שאלה אחרי שאלה על מטרת האתר, קהל היעד, המסר המרכזי, מבנה העמודים, הטון והשפה, הצבעים וההשראות. בסוף תייצר קובץ brief.md מסודר שאוכל להעלות למערכת של Claude Design ולהתחיל ממנו את העיצוב.
שלב שני, יצירת Design System ב-Claude Design 🧠
מעלים את קובץ ה-MD ל-Claude Design ומבקשים קודם כל מערכת עיצוב, עוד לפני שבונים עמוד אחד. למה זה כל כך חשוב? כי מערכת עיצוב שומרת על עקביות לאורך כל האתר, וחוסכת את הרגע המתסכל שבו כל עמוד נראה כאילו עוצב על ידי מישהו אחר.
אפשר להעלות נכסי מותג, צילומי מסך של מדריך סגנון או אפילו תמונות השראה, ו-Claude יחלץ מהם צבעים, טיפוגרפיה, ריווחים ורכיבים.
מי שרוצה להכיר את הפלטפורמה לעומק, כתבתי כאן מדריך מעשי ומלא על Claude Design, כולל כל מה שהשתנה בה לאחרונה.
על בסיס הבריף המצורף, בנה Design System מלא הכולל פלטת צבעים, טיפוגרפיה, כפתורים, כרטיסים, ריווחים ורכיבי ניווט. האתר בעברית ומיושר לימין.
שלב שלישי, בניית הפרוטוטייפ עם ה-Design System 🧠
עכשיו, ורק עכשיו, בונים את הפרוטוטייפ. אני מבקשת מ-Claude Design להשתמש אך ורק במערכת העיצוב שנוצרה, ואז מתחיל החלק הכיפי. משחקים, מתקנים, מבקשים וריאציות לחלקים שלא עובדים, עד שהכיוון נסגר. חשוב להשקיע פה זמן, כי כל תיקון שעושים בשלב הזה חוסך הרבה עבודה בהמשך.
שלב רביעי, הורדת הקובץ ל-Claude Code 🧠
כשהפרוטוטייפ מוכן, לוחצים על Export ובוחרים ב-Handoff to Claude Code. מה שיוצא משם הוא חבילה שכוללת את קבצי העיצוב, את השיחה וקובץ README שמסביר למודל איך לפרש את העיצוב, יחד עם פרומפט מוכן להדבקה בתוך Claude Code בטרמינל.
במילים פשוטות, כל ההחלטות שקיבלתם בדרך עוברות הלאה, ואף אחת מהן לא הולכת לאיבוד. מי שרוצה להעמיק, המדריך המלא של Claude נמצא כאן.
שלב חמישי, בניית האתר בתוך Claude Code בטרמינל 🧠
פותחים תיקייה חדשה לפרויקט, נכנסים אליה בטרמינל ומפעילים שם את Claude Code בשלוש פקודות.
אחרי שהוא עולה, מדביקים את הפרומפט מה-Handoff ומוסיפים הנחיה משלכם.
תבנה את המיני סייט לפי חבילת העיצוב המצורפת. שמור על ה-Design System במדויק, יישור מלא לימין ותצוגה מותאמת למובייל. לפני שאתה מתחיל, תציג לי תוכנית עבודה.
הטיפ הכי חשוב שלי? תבקשו תוכנית עבודה לפני שהוא מתחיל לבנות. ככה אתם רואים לאן הוא הולך, מתקנים כיוון בזמן, והאתר שיוצא בסוף באמת שלכם.
מה שהכי מעניין אותי בתהליך הזה הוא החלוקה החכמה בין הכלים. הצ׳אט חושב איתכם, Claude Design נותן לרעיון צורה, ו-Claude Code הופך אותו למציאות.
נסו את זה על רעיון קטן, ותגלו כמה מהר אפשר להגיע לאתר עובד!
