למה אתרי בינה מלאכותית נראים אותו דבר

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

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

למה כולם נראים אותו דבר

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

לכן מודל חכם יותר לא פותר את זה. מה שפותר הוא מודל שאומרים לו לאן לכוון.

אותו דף אחרי

ניקח משרד הנהלת חשבונות לעצמאים. זה הדף שמקבלים בלי שום כיוון.

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

וזה אותו דף אחרי מעבר עיצוב.

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

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

ארגז הכלים

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

Taste Skill, לכיוון אמנותי

הוא נותן לדף כיוון לפני שנכתבה שורת קוד. הוא בוחר אחד מ-20 כיוונים שנחקרו, משתמש בצילומים אמיתיים ברישיון פתוח עם קרדיט, ואז פותח את הדף בדפדפן אמיתי בשלושה רוחבים, מסתכל על צילומי המסך של עצמו ומתקן את שלוש הבעיות הבולטות. את זה הוא חוזר עד שלושה סבבים. שווה להתחיל איתו כשבונים דף מאפס. הוא דורש Node 22 ומעלה ו-Chrome, Edge או Chromium, ולא צריך מפתחות API.

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

Impeccable, לביקורת נגד סלופ

סקיל אחד, 24 פקודות, עבודה חיה בדפדפן ו-62 כללי זיהוי דטרמיניסטיים שמכוונים לדפוסים שגורמים לפרונטאנד של בינה מלאכותית להיראות גנרי. שווה להפעיל אותו כשכבר יש דף והוא מרגיש לא נכון ואי אפשר להסביר למה. /impeccable audit מוצא את הבעיות, /impeccable critique נותן חוות דעת עיצובית, /impeccable polish עושה את המעבר האחרון.

npx impeccable install

אפשר גם מתוך Claude Code: מוסיפים עם /plugin marketplace add pbakaus/impeccable ומתקינים דרך /plugin. בשני המקרים מריצים אחר כך פעם אחת /impeccable init.

ספריות רכיבים מונפשים, לאופי

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

סקילי תנועה על בסיס GSAP, לליטוש

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

Playwright, לבדיקה כמו מבקר אמיתי

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

החלק שבאמת מזיז איכות

תסתכלו שוב ברשימה ושימו לב לאילו כלים העיניים פתוחות. Taste Skill סוקר את צילומי המסך של עצמו. Impeccable עובד באיטרציות חיות בדפדפן. Playwright לוחץ דרך התוצאה. חבילות האנימציה, כמה שהן שימושיות, בעיקר נותנות ל-Claude הוראות טובות יותר וסומכות עליו שיפעל לפיהן.

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

מה הם לא יעשו בשבילכם

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

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

מה לנסות השבוע

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