איך גורמים לאתר שנבנה עם AI לא להיראות כמו AI

מה זה בעצם „המראה של AI”

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

• גרדיאנט מכחול לסגול מאחורי כותרת ממורכזת.
• כרטיסי זכוכית חלבית עם צל רך ומטושטש (Glassmorphism).
• זוהר ניאון, במיוחד על רקע כהה.
• שלושה כרטיסי יתרונות עם אייקוני קו גנריים.
• אותו רדיוס לכל פינה, אותו ריווח לכל מקטע.
• גופן Sans ניטרלי במשקל אחד, בכל מקום.
• כל בלוק נכנס ב־fade בזמן הגלילה.
• טקסט שמתאים לכל חברה: „להזניק את העסק לשלב הבא”.

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

1. בוחרים דימוי מהעולם האמיתי

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

It should feel like a printed protest poster that also works as a website.
It should read like a museum wall label: quiet, exact, a lot of white space.
It should feel like an evening: dark, expensive, unhurried.
It should look like a risograph-printed zine, slightly misregistered.

אפשר להשוות בין Loudmouth Agency לNocturne Hotel: שניהם התחילו ממשפט אחד כזה.

2. פלטה חמה או מחויבת, בקודי hex

לבן טהור וכחול רווי הם מה שמתקבל כשאף אחד לא בוחר. אז בוחרים. לבן שבור וחם (‎#FAF9F6), שחור דיו (‎#121212) וצבע הדגשה אחד כבר נראים מחושבים יותר מכל גרדיאנט. או מתחייבים עד הסוף לפלטה של סגנון: צהוב חומצי ושחור לברוטליזם, נייר וואשי ואדום ורמיליון למינימליזם יפני.

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

3. אוסרים במפורש את ברירות המחדל

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

AVOID:
- Gradients (except soft vignettes on image placeholders).
- Glassmorphism, backdrop blur, frosted cards.
- Neon glow, colored drop shadows, cyberpunk styling.
- Generic three-card feature rows with line icons.
- Fade-in-on-scroll for every section.
- Stock phrases like "elevate", "unlock", "seamless", "next-level".

4. הטיפוגרפיה עושה את העבודה

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

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

TYPE (Hebrew):
- Display: IBM Plex Sans Hebrew 600, line-height 1.1, headline at clamp(2.6rem, 7vw, 6rem).
- Accent: one word per headline in weight 300 of the same font.
- Labels: 12.5px, weight 500, tabular numbers. No letter-spacing, no uppercase, no italics.
- Body: 17px, line-height 1.65, max width 65ch.

5. צל קשיח וקווים דקים במקום טשטוש

צל רך ומטושטש הוא טביעת האצבע של ערכות UI. בדפוס אין טשטוש. משתמשים בקווים דקים של פיקסל אחד כדי להפריד בין מקטעים, ובצל קשיח (העתק מלא של הצורה, מוזז ב־3 עד 8 פיקסלים) לכל מה שאפשר ללחוץ עליו. זה מיד נקרא כעיצוב גרפי ולא כתוכנה.

DETAILS:
- Section dividers: 1px solid #121212 hairlines, full width.
- Buttons and cards: 1px border, hard offset shadow 3px 3px 0 #121212, no blur.
- Corner radius: square, or one radius used everywhere (no mix).

6. שוברים את הגריד פעם אחת, בכוונה

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

7. תנועה עם פיזיקה, במשורה

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

8. כותבים טקסט אמיתי לפני שמעצבים

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

9. פרט אחד שאף אחד לא ביקש

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

לפני ואחרי: אותה בקשה, בכתיבה אחרת

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

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

Build a one-page website for "Ashtanga Lab", a small yoga studio in a converted print shop in Jaffa.

LANGUAGE: All copy in Hebrew, dir="rtl", lang="he". Gender-neutral Hebrew (plural present tense).

CONCEPT: It should feel like a printed class timetable pinned to a cork board: calm, exact, a little analog.

SECTIONS: hero with the headline "מתרגלים, לא מופיעים." and this week's timetable beside it; three class types with level and length; prices (single class 70₪, 10-class card 600₪); a short note from the teacher; address and hours.

DESIGN: paper #F6F2EA, ink #1A1A1A, one terracotta accent #C4502F only on buttons and today's column. IBM Plex Sans Hebrew 600 for headings, no letter-spacing, no uppercase, no italics. 1px hairlines, hard 3px 3px 0 shadows, square corners.

MOTION: today's column slides in with a spring; buttons press into their shadow. Nothing else moves.

AVOID: gradients, glassmorphism, neon, icon cards, fade-in on every section, stock phrases.

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

לחבר את הכול

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

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