תוכן עניינים
מאת אלעד ינאי · נובמבר 2026
הניסוי: אותו עסק, שישה פרומפטים
לקחנו עסק שלא קיים: ״נקודת איזון״, קליניקה לפיזיותרפיה ברמת גן, שלושה מטפלים, בלי המלצות, תמונות או לוגו. כל ריצה הייתה שיחה חדשה עם Claude Sonnet, בלי הגדרות מיוחדות, כמו שאתם הייתם פותחים אותה. צילמנו כל תוצאה בדפדפן אמיתי, במחשב ובנייד.
| ריצה | מה הכלי קיבל | מה יצא |
|---|---|---|
| 1 | ״תעצב דף בית, יפה, נקי ומודרני״ | נתונים מומצאים, עיצוב גנרי, אין תפריט בנייד |
| 2 | אותו דבר, עם בריף מלא על העסק | כמעט בלי המצאות, אבל אותו עיצוב גנרי |
| 3 | ריצה 1 ואחריה תיקון עברית | העברית תוקנה, ההמצאות נשארו |
| 4 | ריצה 1 ואחריה ״מה לא לעשות״ | עיצוב אחר לגמרי, וההמצאות נמחקו |
| 5 | ריצה 1 ואחריה ביקורת לפני ״מוכן״ | הכלי מצא בעצמו 11 בעיות ותיקן |
| 6 | בריף, קיט עיצוב, עיצוב עם אילוצים, ״מה לא לעשות״ ועברית | העמוד הטוב ביותר, בלי אף פרט מומצא |
למה ״תעצב לי אתר יפה ומודרני״ יוצא גנרי
כשאין לכלי החלטות, הוא בוחר את מה שהכי נפוץ. בריצה 1 קיבלנו בדיוק את זה: תגית קטנה מעל הכותרת, שישה כרטיסים זהים עם אייקון בריבוע, כותרת בנוסח ״חוזרים לתנועה בלי כאב״, ושורת מספרים שאף אחד לא נתן לו.
ריצה 2 הראתה שאלה שתי בעיות נפרדות. כשנתנו לכלי בריף מלא, כולל המשפט ״אין לנו עדיין המלצות״, הוא הפסיק להמציא, וסימן את שמות הצוות ואת השעות כחסרים. אבל העיצוב נשאר כמעט זהה: אותה תגית, אותם כרטיסים, אותן סיסמאות. הבריף עונה על ״מה נכון״. הוא לא עונה על ״איך זה ייראה״.
המבנה של פרומפט עיצוב טוב
פרומפט שעובד נותן לכלי חמישה דברים:
- למי ולמה: מי הקהל, ומה הפעולה האחת שאתם רוצים ממנו.
- מה כבר נעול: לוגו, צבעים, פונט, או אתר קיים שהעיצוב צריך להתאים לו.
- אילוצים במקום תארים: מספרים שאפשר לבדוק, לא מילים כמו ״נקי״.
- מה לא לעשות: הדפוסים שאתם לא רוצים לראות.
- מה התוצר: קובץ אחד, רוחבי מסך, ומה לעשות כשחסר מידע.
ההבדל בין תואר לאילוץ:
| תואר | אילוץ |
|---|---|
| נקי | רקע אחד, צבע הדגשה אחד, שני משקלי פונט |
| מודרני | בלי גרדיאנטים, בלי כרטיסים צפים, רדיוס אחד בכל העמוד |
| נגיש | ניגודיות של 4.5 לפחות לכל טקסט, כפתורים בגובה 44 פיקסלים לפחות |
| ממיר | כפתור ראשי אחד בכל מסך, עם הפעולה כתובה עליו |
9 פרומפטים, לפי שלבי העבודה
מעתיקים, מחליפים את מה שבסוגריים המרובעים, ומדביקים בשיחה. כדאי לעבוד בשכבות: פרומפט אחד בכל הודעה, ולא הכול במכה אחת.
1. בריף מראיון
מתי: לפני הכול, כשעוד אין לכם בריף כתוב.
אני רוצה לעצב דף בית לעסק שלי. לפני שאתה מעצב משהו, תראיין אותי.
שאל עד 8 שאלות, אחת-אחת, על: מי הלקוחות, מה הפעולה העיקרית שאני רוצה מהגולש, מה כבר קיים (לוגו, צבעים, תמונות, טקסטים), אתרים שאני אוהב ולמה, ומה אסור שיופיע.
אל תציע עיצוב ואל תכתוב קוד עד שסיימנו. בסוף, סכם את התשובות לבריף של עמוד אחד, וסמן בבירור כל דבר שחסר.מה הוא משנה: את ההבדל בין ריצה 1 לריצה 2. כשיש בריף שאומר מה קיים ומה לא, הכלי מסמן חוסר במקום להמציא. אם כבר יש לכם בריף, הדביקו אותו ישירות.
2. שפה עיצובית בקובץ DESIGN.md
מתי: אחרי הבריף, לפני המסך הראשון.
לפני שמעצבים מסך, צור קובץ DESIGN.md לאתר לפי הבריף למטה. כל ערך חייב להיות מדויק, לא תואר:
- צבעים: שם לפי תפקיד (רקע, טקסט, הדגשה, כפתור), ערך HEX, ויחס ניגודיות מחושב מול הרקע (לפחות 4.5 לטקסט רגיל).
- טיפוגרפיה: פונט שכולל עברית (מ-Google Fonts), ולכל תפקיד (כותרת ראשית, כותרת משנה, גוף, כפתור) גודל, משקל וגובה שורה.
- סולם ריווח קבוע (למשל 4, 8, 16, 24, 40, 64), רדיוס אחד וצל אחד.
- כפתור ראשי ושדה טופס בכל המצבים: רגיל, ריחוף, פוקוס, מושבת.
- קול: 5 משפטים שאומרים ו-5 שלא אומרים.
אל תשאיר ערך ריק. אם חסר לך מידע, בחר ברירת מחדל שמרנית וכתוב שבחרת.
הבריף: [הבריף שלכם]מה הוא משנה: בריצה 6 הכלי בנה קיט עם 12 צבעים לפי תפקיד, וחישב לכל צירוף את יחס הניגודיות. בדקנו את שבעת היחסים שכתב, וכולם היו נכונים. מכאן והלאה כל מסך נבנה מאותן החלטות, ולא מהחלטות חדשות בכל פעם.
3. שניים-שלושה כיוונים לפני שבוחרים
מתי: כשהקיט מוכן ועוד לא החלטתם על המבנה.
לפי DESIGN.md, הצע 3 כיוונים שונים לדף הבית. לכל כיוון: משפט אחד על הרעיון, איך נראה המסך הראשון, ואיך מסודרים הסקשנים.
כיוון אחד צריך להיות שונה באמת מהשניים האחרים, בקומפוזיציה ולא רק בצבע.
הצבעים והפונטים זהים בכל הכיוונים. אל תבנה עד שאבחר.מה הוא משנה: בלי הפרומפט הזה, הכיוון הראשון שהכלי בוחר הוא הכיוון היחיד שתראו. את הפרומפט הזה לא הרצנו בבדיקה, כי הוא לא מייצר עמוד אחד להשוואה.
4. הירו ופריסת עמוד
מתי: כשבחרתם כיוון.
עצב את דף הבית לפי DESIGN.md שלמעלה בלבד. אל תוסיף צבע, פונט או צל שלא מופיעים בו.
- הירו: כותרת שאומרת מה העסק עושה ולמי, במשפט אחד. משפט משנה אחד. כפתור פעולה ראשי אחד בלבד ("[הפעולה]"), וקישור משני.
- אחרי ההירו, לפי הסדר: [הסקשנים שלכם].
- היררכיה: בכל מסך גלילה יש דבר אחד שהעין רואה ראשון.
- אל תמציא המלצות, מספרים, שנות ניסיון או תעודות. איפה שחסר תוכן, כתוב [חסר: ...].
- קובץ HTML אחד, CSS בתוך הקובץ, עובד ברוחב 390 ועד 1440.מה הוא משנה: בריצה 6 הכותרת יצאה ״פיזיותרפיה ברמת גן לכאבי גב וצוואר, לשיקום אחרי ניתוח ולפציעות ספורט״, במקום סיסמה. היה רק כפתור ראשי אחד, ו-18 מקומות סומנו כחסרים במקום שימולאו בהמצאה.
5. רכיב מוכן מ-21st.dev
מתי: כשאתם צריכים רכיב מורכב (תפריט, אקורדיון, טבלת מחירים) ולא רוצים שהכלי ימציא אותו מאפס.
21st.dev היא ספרייה של רכיבי ממשק שאפשר לחפש לפי תיאור מילולי. מחפשים שם לפי מה שהרכיב עושה, למשל pricing table with monthly toggle, ומעתיקים את הקוד. אחר כך:
זה קוד של רכיב שמצאתי: [הדבקת הקוד]
התאם אותו לדף שלנו לפי DESIGN.md: אותם צבעים, פונט, רדיוס וריווח. אל תוסיף אנימציות שלא היו בו.
התאם לעברית: dir="rtl", CSS לוגי, וחצים שמתהפכים.
אם הוא דורש ספרייה שאין לנו, אמור לי לפני שאתה מוסיף אותה.מה הוא משנה: רכיב שנבנה ונבדק על ידי אחרים, במקום רכיב שהכלי ממציא. את הפרומפט הזה לא הרצנו בבדיקה.
6. סגנון תמונות
מתי: כשאתם מייצרים תמונות לאתר ב-AI.
כתוב הנחיה לסגנון התמונות של האתר, לפי DESIGN.md: תאורה, צבעוניות, מה מופיע בתמונה ומה לא, יחס גובה-רוחב לכל מקום בעמוד, ו-3 דוגמאות לתיאור תמונה.
בלי אנשים מחייכים למצלמה, בלי טקסט בתוך התמונה, ובלי סגנון של צילום סטוק.מה הוא משנה: כל התמונות נראות כאילו צולמו לאותו אתר. על המודלים עצמם, ועל מי מהם כותב עברית בתוך תמונה, כתבנו במבחן 8 המודלים לתמונות AI.
7. תיקון עברית ו-RTL
מתי: אחרי כל עמוד שנבנה, גם אם הוא נראה בסדר.
עבור על העמוד ותקן אותו לעברית:
- lang="he" dir="rtl" על html, ו-CSS לוגי (margin-inline-start, text-align: start) במקום left ו-right.
- פונט שכולל עברית בכל המשקלים שבשימוש. אם הפונט לא כולל עברית, החלף אותו.
- בלי אותיות גדולות (uppercase), ריווח אותיות רחב או איטליק בעברית.
- טלפון, מייל וכתובת אתר בתוך dir="ltr". טווחים כתובים במילים ("09:00 עד 18:00"), לא עם מקף.
- חצים של "הבא" ו"הקודם" מתהפכים. לוגו, אייקון טלפון ואייקון וואטסאפ לא מתהפכים.
- לשון פנייה אחת לאורך כל העמוד, וקופי שנשמע עברית ולא תרגום.
החזר את הקובץ המתוקן ורשימה קצרה של מה ששינית.מה הוא משנה: פחות ממה שציפינו, וזה ממצא בפני עצמו. כיוון הטקסט יצא תקין כבר בריצה 1, כי הכלים של היום מטפלים בזה לבד. הערך של הפרומפט הוא בפרטים: טלפונים שלא מתהפכים, טווחי שעות, לשון אחידה. גם אחריו, בריצה 6, נשארה בנייד מירכאה שקפצה לצד הלא נכון. בודקים בעיניים.
8. מה לא לעשות
מתי: בהודעה שבה מבקשים את העיצוב, או מיד אחריה.
העיצוב לא צריך להיראות כאילו AI עשה אותו. בלי:
- פס צבעוני בצד של כרטיס
- טקסט בגרדיאנט, ורקע בגרדיאנט סגול-כחול
- כרטיס בתוך כרטיס
- תגית קטנה מעל כל כותרת
- אייקון בעיגול צבעוני מעל כל כרטיס
- אותו ריווח בדיוק בין כל הסקשנים
- שלושה כרטיסים זהים בשורה כפתרון לכל סקשן
- אימוג'י בכותרות
- קופי שנשמע כמו סיסמה
- המלצות, מספרים או לוגואים של לקוחות שלא קיבלת ממני
במקום זה: היררכיה לפי חשיבות, סקשנים שנראים שונים כי התפקיד שלהם שונה, וריווח שמפריד בין נושאים.מה הוא משנה: זה השינוי הוויזואלי הגדול ביותר שקיבלנו מהודעה אחת. בריצה 4 הכרטיסים הפכו לרשימות, הכותרת עברה לפונט עם אופי, וכל המספרים וההמלצות המומצאים נמחקו, כי השורה האחרונה ברשימה ביקשה את זה במפורש.
9. ביקורת לפני ״מוכן״
מתי: בסוף, לפני שאתם מאשרים.
לפני שאתה אומר שהעמוד מוכן, תבקר אותו כאילו עיצב אותו מישהו אחר:
1. ברוחב 390, 600, 900 ו-1440: האם יש גלילה אופקית, טקסט שנחתך או כפתור שקטן מ-44 פיקסלים?
2. ניגודיות: חשב את היחס של כל צירוף טקסט ורקע. מה מתחת ל-4.5?
3. היררכיה: מה הדבר הראשון שהעין רואה בכל מסך גלילה? האם זה מה שצריך?
4. תוכן: האם יש משהו שהמצאת (המלצה, מספר, תעודה)?
5. סימנים של עיצוב AI גנרי: גרדיאנטים, כרטיס בתוך כרטיס, תגיות מעל כותרות, אייקונים בעיגולים.
כתוב רשימה של הבעיות לפי חומרה, תקן אותן, ובסוף כתוב מה לא יכולת לבדוק בלי דפדפן אמיתי.מה הוא משנה: בריצה 5 הכלי מצא 11 בעיות בעמוד שהוא עצמו בנה. בין השאר: כל הנתונים שהמציא, תפריט שנעלם בנייד בלי כפתור חלופי, ומספרים לבנים על כתום ביחס ניגודיות של 2.1. בדקנו את שתי האחרונות מול הקוד, ושתיהן נכונות. הוא גם כתב במפורש שלא פתח דפדפן ושהמספרים חושבו מהקוד. על השורה האחרונה בפרומפט לא כדאי לוותר.
טעויות נפוצות בפרומפטים לעיצוב
- פרומפט אחד ענק. הכלי מאזן בין הכול ומפספס חלק. בריצה 6 עבדנו בשלוש הודעות, והתוצאה הייתה הטובה ביותר.
- רפרנס בלי ״למה״. ״כמו האתר של אפל״ לא אומר אם אהבתם את הריווח, את התמונות או את הטיפוגרפיה.
- לסמוך על פרומפט תיקון. הוא מתקן רק את מה שביקשתם. את התוכן צריך לבדוק בנפרד.
- שיחה ארוכה מדי. אחרי הרבה תיקונים הכלי מתחיל לשכוח החלטות קודמות. פותחים שיחה חדשה עם הבריף וה-DESIGN.md המעודכנים.
- ״מוכן״ על סמך צילום מסך. צילום לא מראה תפריט שלא נפתח או טופס שלא שולח.
שאלות נפוצות
באיזה כלי להשתמש?
הרצנו את הבדיקה ב-Claude, אבל הפרומפטים לא תלויים בכלי, ועובדים גם ב-ChatGPT, ב-Gemini וב-Lovable. על ההבדלים בין הכלים כתבנו במדריך כלי העיצוב בעידן ה-AI.
לכתוב את הפרומפט בעברית או באנגלית?
בבדיקה כתבנו בעברית, והכלי הבין הכול, כולל המונחים הטכניים. מונחי CSS כמו dir="rtl" נשארים באנגלית.
למה התוצאה שונה בכל פעם?
הכלים לא נותנים את אותה תשובה פעמיים. ככל שהפרומפט מכיל יותר החלטות, נשאר פחות מקום להפתעות. בגלל זה הקיט בשלב 2 חשוב כל כך.
פרומפטים טובים מחליפים מעצב?
הם מחליפים חלק מהעבודה, לא את ההחלטות. מישהו צריך לדעת מה לכתוב בבריף, לבחור כיוון, ולבדוק שהתפריט באמת נפתח בטלפון.
סיכום
ההבדל בין עמוד גנרי עם נתונים מומצאים לבין עמוד כן ומעוצב לא היה בכלי. הוא היה במה שנתנו לו: בריף שאומר מה קיים ומה לא, קיט עם ערכים מדויקים, רשימה של מה לא לעשות, וביקורת לפני ״מוכן״.
רוצים את התהליך המלא, לא רק את הפרומפטים? המדריך ״לפני שמבקשים מ-AI לבנות לכם אתר״ הוא מסמך שנותנים לכלי לקרוא בתחילת השיחה, עם שבעה שלבים ונקודות עצירה.
רוצים אתר שלא נראה כמו עוד אתר AI? בואו נדבר.
