איך כותבים פרומפט לבניית אתר

למה פרומפט של שורה אחת מייצר תבנית

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

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

חמשת החלקים של פרומפט לאתר

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

1. 01רעיון. משפט או שניים: למי האתר ואיך הוא צריך להרגיש. כדאי להשתמש בדימוי: „כרזה של תערוכת באוהאוס שמוכרת קפה” נותן ל-Claude הרבה יותר מ„נקי ומודרני”.
2. 02מבנה ותוכן. כל המקטעים לפי הסדר, עם הטקסטים האמיתיים: כותרות, כפתורים, מחירים, מספר הכרטיסים. טקסט דמה מייצר עיצוב דמה.
3. 03אינטראקציה ותנועה. מה זז, מתי ואיך. מגדירים את הטריגר (ריחוף, גלילה, לחיצה) ואת התחושה (קפיץ עם stiffness 260, לא „אנימציות חלקות”).
4. 04מערכת עיצוב. צבעים בקוד hex, שמות גופנים ומשקלים, עובי קווים, סוג צל, רדיוס פינות. וגם מה אסור.
5. 05כללי פלט. פריימוורק, עיצוב, ספריות, קובץ אחד או כמה, נגישות. כך הקוד שמיש כבר מהתשובה הראשונה.

תבנית מוכנה להעתקה

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

Build a "[Business name] Website" React component.

CONCEPT: [Who it is for, in one sentence]. It should feel like [a physical object or place: a printed menu, a gallery wall, a field notebook].

LAYOUT & CONTENT:
- Nav: [logo text], links [A / B / C], primary button "[label]".
- Hero: headline "[exact headline]", subline "[one sentence]", [what sits next to it].
- [Section 2]: [what it shows, how many items, the real text].
- [Section 3]: ...
- Footer: [address, hours, small print].

INTERACTIONS & MOTION:
- [Element] [does what] on [hover / click / scroll into view].
- Spring physics (stiffness 260, damping 20). Animate transform and opacity only.
- Respect prefers-reduced-motion.

DESIGN SYSTEM:
- Colors: background [#hex], text [#hex], one accent [#hex] used sparingly.
- Type: [display font + weight] for headings, [body font] for text.
- Details: [1px hairlines / 3px borders], [hard offset shadows / no shadows], [corner radius].
- Avoid: gradients, glassmorphism, neon glow, generic stock icons.

OUTPUT: one self-contained React component (Tailwind CSS, framer-motion, lucide-react), default export, no external images, semantic HTML, visible focus states, keyboard operable.

אתר בעברית: מה מוסיפים לפרומפט

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

LANGUAGE: All copy is in Hebrew. Set dir="rtl" and lang="he" on the root, use logical properties (ps/pe, ms/me, start/end).
TYPE: Hebrew fonts only for Hebrew text: IBM Plex Sans Hebrew 600 for headings, Frank Ruhl Libre for accents. No letter-spacing, no uppercase, no italics on Hebrew.
COPY: Gender-neutral Hebrew (plural present tense or infinitive), for example "מזמינים מקום", not "הזמן מקום".

דוגמה אמיתית: אתר לבית קפה

הנה גרסה מקוצרת של הפרומפט שמאחורי Café Bauhaus. רוב השורות הן תוכן ומגבלות, לא שמות תואר.

Build a "Café Bauhaus Website" React component.

CONCEPT: The website of a neighbourhood café and roastery in a 1930s white-city building. It should read like a Bauhaus exhibition poster that sells coffee.

LAYOUT & CONTENT:
- Nav: circle logo + 'CAFÉ BAUHAUS', links Menu / Beans / Visit, red 'Order ahead' square button.
- Hero: headline 'FORM / FOLLOWS / COFFEE' stacked; right a 3x3 geometric composition.
- Menu: 6 tiles (Espresso, Flat white, Cortado, Filter, Cardamom bun, Shakshuka toast), each with a shape icon, price and short note.

DESIGN SYSTEM — Bauhaus:
- Off-white #F3EEE3, black #111, red #E63322, blue #1F4E9E, yellow #F6C21B.
- Only circles, squares, half- and quarter-circles; strict grid.
- Syne 800 uppercase for display, Inter Tight for body.

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

מערכת עיצוב שנכתבת כמו מדריך סגנון

• קוד hex ולא שם של צבע. „בז' חמים” יכול להיות כל דבר. ‎#F3EEE3 הוא דבר אחד.
• להגביל את צבע ההדגשה. לכתוב כמה פעמים מותר לו להופיע: „פעמיים לכל היותר” או „רק בכפתור הראשי”. איפוק נקרא ככוונה.
• רשימת איסורים. לכתוב במפורש מה לא רוצים. Claude מקפיד על החרגות מפורשות, וברירות המחדל שמחריגים הן בדיוק אלה שגורמות לאתר להיראות כמו AI.

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

תנועה מתארים במספרים

„להוסיף אנימציות חלקות” מייצר fade על כל דבר. עדיף לבחור שניים־שלושה רגעים שחשובים ולתאר אותם בדיוק: הכותרת עולה מילה אחר מילה, כרטיסים מתרוממים ב־4 פיקסלים בריחוף עם קפיץ, פסי שעות הפתיחה גדלים כשהמקטע נכנס למסך. מבקשים להנפיש רק transform ו־opacity, כדי שהאתר יישאר מהיר, ולכבד את הגדרת הפחתת התנועה.

משפרים בצעדים קטנים

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

ההירו צפוף מדי. להוריד את שורת המשנה, להגדיל את הכותרת ב־20% ולתת לה פי שניים רווח מעליה.

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

להחליף כל rounded-2xl בפינות ישרות ולהוסיף מסגרת שחורה בעובי 3px עם צל קשיח של 6px 6px 0.

במובייל, הקומפוזיציה של ההירו תרד מתחת לכותרת ותצטמצם לגריד 2x2.

בקשות קצרות ומדויקות שומרות על מה שכבר טוב. בקשה עמומה מזמינה את Claude לבנות הכול מחדש.

טעויות נפוצות

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

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

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