לעצב במילים: להפוך את זה ליפה
לעצב במילים: להפוך את זה ליפה
הנה הסוד שאף אחד לא מספר לכם: ב-vibe coding לא מעצבים עם קוד — מעצבים עם שמות תואר.
אתם לא צריכים לשנן CSS. אתם מתארים את המראה שאתם רוצים, בדיוק כמו שהייתם מתארים למעצב: עם תחושות, שמות תואר, ורפרנסים. "כהה, זכוכיתי, פרימיום — כמו אפליקציית מוזיקה." ה-AI מתרגם את הוויב ל-classes.
בואו נראה דוגמה אמיתית אחת.
אתם אומרים:
"תעשה את כרטיס הפרופיל שלי כהה וזכוכיתי, עם פינות מעוגלות ותחושה פרימיום — כמו מסך הנגינה של ספוטיפיי."
ה-AI מייצר:
<body class="bg-gradient-to-br from-slate-950 to-indigo-950 text-white">
<div class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-8">
כל שם תואר הפך ל-class:
- כהה →
bg-gradient-to-br from-slate-950 to-indigo-950 - זכוכיתי →
bg-white/10 backdrop-blur-md border border-white/20 - פרימיום, פינות רכות →
rounded-2xl p-8
זה כל הטריק: שמות תואר נכנסים, classes יוצאים. ככל שהרפרנסים שלכם טובים יותר ("כמו אפליקציית מוזיקה", "כמו דף נחיתה של בנק", "כמו ארקייד ניאון") — התוצאה טובה יותר.
למטה מחכה כרטיס הפרופיל שבניתם בשיעור הקודם — בלי שום עיצוב. רקע לבן, טקסט דיפולטי, אפס וויב. המשימה שלכם: להחזיר אותו לחיים, מראה מתואר אחד בכל פעם.
הוראות
תנו ל-<body> רקע gradient כהה — קודם תארו לעצמכם את הוויב: כהה, עמוק, פרימיום. ואז הוסיפו את ה-classes
רמז: נסו: `<body class="bg-gradient-to-br from-slate-950 to-indigo-950 text-white min-h-screen flex items-center justify-center p-8">`
עצבו את מיכל הכרטיס: זכוכית חלבית, פינות מעוגלות רכות, ריווח נדיב — המראה ה"זכוכיתי פרימיום" הזה
הפכו את לינק ה-CTA לכפתור gradient — בולט, צבעוני, אי אפשר לפספס
הוסיפו אפקט hover כדי שהכפתור יגיב כשהעכבר נוגע בו — הפרטים הקטנים הם מה שגורם לדברים להרגיש חיים
הקוד שלכם
תארו מה אתם רוצים לבנות בשלב הזה ואני אכתוב את הקוד — ואז לחצו על החלה כדי לשבץ אותו בעורך שלכם. השלב הזה: תנו ל-<body> רקע gradient כהה — קודם תארו לעצמכם את הוויב: כהה, עמוק, פרימיום. ואז הוסיפו את ה-classes