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

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

Claude בחר סינתסייזר. בדיוני. ה-ONDES-1, פוליסינת’ אנלוגי עם ארבעה קולות מסטודיו של ארבעה אנשים בליון: דפנות מעץ אגוז, 37 קלידים ורצועה שמנגנים עליה עם טבעת על האצבע. ‎€2,890, ‏400 יחידות, משלוחים באביב 2027. שום דבר מזה לא קיים.

עשרים ומשהו דקות אחר כך פתחתי את האתר הראשון, לחצתי A במקלדת, והוא ניגן תו. לחצתי S,‏ D,‏ F וניגנתי מנגינה ממש גרועה, וקו שעובר דרך הלוגו הענק רטט יחד עם הצליל. ישבתי וחייכתי לדף מוצר מזויף כמו אידיוט.

הפוסט הזה הוא על למה זה עבד. כי זה לא היה מזל.

שלושה סוכנים, בריף אחד, שלושה אתרים שונים לגמרי

כל הסוכנים קיבלו את אותו בריף: העובדות על המוצר, רשימת חלקים שחייבים להופיע, ודרישה אחת קשיחה — סינתסייזר שאפשר לנגן עליו בתוך הדף, עם Web Audio, שמתחיל להשמיע צליל רק אחרי שהמבקר לוחץ על משהו. ‏HTML,‏ CSS ו-JS סטטיים. בלי שלב בנייה, בלי תמונות חיצוניות, בלי lorem ipsum, בלי שגיאות בקונסול.

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

• Swiss Signal — “‏Experimental Jetset פוגש מדריך של Braun”. טיפוגרפיה ענקית וצרה, גריד גלוי, שחור על אוף-וויט, וכחול אחד.
• Nocturne — “השקת מוצר של Apple שהוכלאה עם אולפן הקלטות באמצע הלילה”. סינתסייזר תלת-ממדי ב-Three.js, אור חם, והמצלמה עפה לכל פיצ’ר תוך כדי גלילה.
• Hi-Fi Catalogue, 1974 — חוברת של מערכות סטריאו יפניות משנות ה-70. נייר שמנת, חרדל ואגוז, כפתורים שמסובבים בגרירה.

Liveלצפייה באתר החינפתח בלשונית חדשה

Liveלצפייה באתר החינפתח בלשונית חדשה

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

אל תאמינו לי, הם באוויר. תדליקו סאונד, תפתחו אחד ותלחצו מ-A עד K: Swiss Signal · Nocturne · Hi-Fi Catalogue. הם בדיוק מה שהסוכנים בנו, בלי נגיעות. המוצר, המחיר וטופס ההזמנה המוקדמת מזויפים לגמרי, אז בבקשה אל תנסו לקנות.

Liveלצפייה באתר החינפתח בלשונית חדשה

אז מה בעצם הפך את זה לטוב?

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

1. כיוון אמנותי נפרד לכל סוכן. בלעדיו, שלושתם היו נסחפים לאותו גרדיאנט כהה עם Inter מעל. רפרנסים עם שם (“מדריך של Braun”), חוק לטיפוגרפיה, חוק לצבע, חוק לתנועה (“חד, מכני, בלי בועות שמרחפות”) — זה מה שגורם להם להתפצל.
2. וואו שמגיע מהנושא עצמו. על סינתסייזר מנגנים. האינטראקציה היא לא קישוט מעל דף המוצר, היא עצמה המוצר.
3. בריף ספציפי. מספרים אמיתיים, מקום, מחיר. קלט מעורפל נותן טקסט מעורפל.
4. סטאק משעמם. בלי פריימוורק, בלי בנייה, בלי קונפיג שיכול להישבר. כל המאמץ הולך למה שרואים.
5. זמן לבדוק את העבודה של עצמם. כל סוכן רץ 20–30 דקות, צילם מסך של האתר שלו בגדלי מסך שונים ותיקן את מה שנראה עקום.

הנקודה השנייה היא זו שנתקעה לי בראש. חשבתי עליה כל היום שאחרי, ואני חושב שזה כל הטריק:

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

אפקט פרלקסה בדף של סינתסייזר הוא אפקט פרלקסה. סינתסייזר שאפשר לנגן עליו בדף של סינתסייזר הוא סיבה להישאר.

בינה מלאכותית נהייתה ממש, ממש טובה באנימציות

לא מזמן, כשביקשת מבינה מלאכותית “אנימציה”, קיבלת fade-in וכפתור שקופץ כאילו שתה יותר מדי קפה. הפעם קיבלתי פיזיקה של חבלים.

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

וגם החלקים המשעממים היו שם, וזה האמת החלק המרשים יותר: שליטה במקלדת, תמיכה ב-prefers-reduced-motion, חלופה כשאין WebGL, מצב כהה. דברים שאני הייתי מדלג עליהם ביום שישי בערב.

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

סיעור מוחות לוואו בדף שכבר קיים

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

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

• אני מתקן שרתים ואתרי WordPress.
• אני מדפיס בתלת-ממד.
• אני אופה לחם.
• כתבתי על COBOL ומיינפריימים.
• אני מבטיח לפרסם פוסט כל יום שישי.

כל שורה היא זרע. ואז שואלים: איך המבקר יכול לחוות את זה במקום לקרוא על זה? הנה מה שיצא:

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

נסולתקן את הארון

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

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

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

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

זה עובד גם על דברים משעממים: מיילים של אבטחה

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

נכון טכנית. בלתי קריא לחלוטין בשמונה בבוקר.

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

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

אז אחת משלוש הגרסאות מציגה כל תיקון כ-diff. שורה אדומה יוצאת, שורה ירוקה נכנסת. - < 7.1.2,‏ + 7.1.2. קוראים את זה כמו pull request, שזה בדיוק מה שאני עומד לעשות בכל מקרה.

שתי האחרות הלכו למקום אחר לגמרי. אחת היא דייג’סט עיתונאי, מדורג כמו עיתון, עם פס חומרה למעלה. השנייה רועשת וברוטליסטית, עם בלוקים צבעוניים גדולים ל-exploited,‏ PoC ו-alert.

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

הסקיל

אחרי כל זה ביקשתי מ-Claude להפוך את כל התהליך לסקיל, כדי שלא אצטרך להסביר אותו מחדש כל פעם. קוראים לו wow-page, והוא עובד ככה:

1. מסתכל על הדף או הנושא. מה האדם או המוצר עושים? מה הסטאק?
2. מוצא את הפועל. מה הנושא עושה, ממה הוא עשוי, מה המקצבים שלו? זה השלב שבאמת חשוב. כל השאר זה לוגיסטיקה.
3. עושה סיעור מוחות איתכם, לכל רעיון מיקום וווליום. ועוד המלצה אמיתית, לא סתם תפריט. תביאו גם רעיונות משלכם; הארון היה שלי.
4. כותב בריף ופרומפט לכל סוכן: כיוון אמנותי שונה לעיצוב מחדש, או פיצ’ר אחד לכל סוכן בדף קיים.
5. משכפל את הדף הקיים פעם אחת, כדי שכל הסוכנים יתחילו מאותו עותק ולא מניחוש משלהם.
6. מריץ את הסוכנים במקביל, כל אחד בתיקייה משלו, וכל אחד מצלם מסך של העבודה שלו.
7. סוקר הכל עם צילומי מסך, חסרונות כנים ודירוג. מישהו צריך להגיד לכם איזה מהם גרוע יותר.
8. מאחד את מה שנבחר לאב-טיפוס אחד.
9. מעביר לקוד האמיתי שלכם עם מפרט, וחוק נוקשה לא לעשות דיפלוי לשום דבר. להעלות לאוויר זה עדיין התפקיד שלכם.

להורדת הסקיל wow-page (zip)

כדי להתקין אותו ל-Claude Code, חלצו אותו לתיקיית הסקילים:

unzip wow-page-skill.zip -d ~/.claude/skills/

ואז בקשו משהו כמו “improve my homepage” או “what wow thing can I add to my site”, או קראו לו ישירות עם /wow-page. הוא מריץ כמה סוכנים במקביל, כל אחד ל-10–30 דקות, אז זה לא זול. תתחילו עם שלושה.

סיכום

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

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

ואם הגעתם עד לכאן, לכו לתקן לי את הארון.