זה המדריך המלא של גיל, הגרפיקאי, סוכן 11 מתוך 30 באתגר שלי "30 סוכנים ב-10 ימים". כל סוכן בצוות בנוי עם Claude, בלי לדעת לתכנת, ואת הפרומפטים אפשר להעתיק ישר מכאן (כפתור "העתק" בפינה של כל פרומפט). הסרטון של גיל באינסטגרם. להורדת המדריך כ-PDF, כדי להעלות אותו לשיחה עם Claude.
בקאפקאט הקפצתי כל גרפיקה ביד, שוב ושוב. גיל קורא מה אמרתם, מחליט איפה כרטיס גרפי באמת יעזור, מעצב אותו במיתוג שלכם, ומקפיץ אותו בדיוק על המילה. בלי סטוק, ובלי להסתיר לכם את הפנים.
גרפיקה ביד
אמרתי בסרטון "שלוש שעות ביום על וואטסאפ", ורציתי שיקפוץ שעון. בקאפקאט זה אומר למצוא אלמנט, לגרור, לכוון את הזמן, ולעשות את זה שוב לכל משפט. אז רוב הסרטונים שלי פשוט יצאו בלי.
גיל הוא הגרפיקאי שלכם
הוא מקבל מכרמל את הסרטון עם הכתוביות ואת המילים המתוזמנות, קורא את התסריט, ובוחר 1-3 רגעים שבהם תמונה תסביר יותר ממילים. לכל רגע הוא מעצב כרטיס שמצייר בדיוק את המשפט: מספר שעולה, רשימה שמתמלאת, הודעות שנערמות, גרף שמטפס.
דוגמאות מהסרטונים שלי
- "פתחתם את המחשב בערב רק בשביל לבדוק" ← שעון שמראה 22:47 וזכוכית מגדלת.
- "כל ההודעות בוואטסאפ" ← בועות צ׳אט שנערמות אחת על השנייה.
- "משימה שנסגרת מסומנת במקום אחד" ← רשת של נקודות שנדלקות בירוק.
- "עובד ותיק עוזב, והידע הולך איתו" ← אריחי ידע שנעלמים אחד-אחד.
לא סטוק
ניסיתי בהתחלה סרטוני סטוק על כל המסך. התגובה הייתה "שיראו אותנו יותר". אנשים עוקבים אחרי אנשים, אז גיל אף פעם לא מכסה אתכם: הכרטיסים יושבים ליד הפנים, לא עליהן.
מה למדתי בדרך
מה שלמדתי על כרטיסים בסרטונים שלי, וגיל כבר יודע:
| מה קרה לי | מה גיל עושה |
|---|---|
| שמתי כרטיס על כל משפט, וזה הרגיש כמו פרסומת | לא מכריח. 1-3 כרטיסים לכל 20 שניות, ורק איפה שתמונה מוסיפה משהו. סרטון יכול לצאת גם בלי אף אחד |
| כרטיס על משפט המחץ מסיח ממנו | הפתיח, המשפטים הרגשיים ושורת המחץ נשארים נקיים: רק פנים |
| כרטיס כיסה לי את השיער | הוא מודד איפה הפנים בכל רגע, ובוחר: פס החזה (בין הסנטר לכתוביות) או פס עליון (כשיש מקום מעל הראש) |
| כרטיס יפה אבל לא קשור רק מעמיס | כל כרטיס מצייר את המילים שנאמרות, לא מקשט. נכנס על מילת המפתח, יוצא לפני הרעיון הבא |
| אימוג׳י יצאו ריבועים בייצוא | רק אייקונים מצוירים (SVG) בתוך הקובץ |
מה צריך
- את כרמל: הפרויקט עם הכתוביות והמילים המתוזמנות. בלי כרמל זה לא יעבוד.
- צבעי המותג (מהמוח של מאיה).
- כמה דקות לסרטון. 0 ש"ח.
גיל מתקין
באפליקציית Claude במחשב, לשונית Code, בתיקייה "הצוות שלי". מעלים את ה-PDF הזה וכותבים:
תתקין לי את גיל מהמדריך הזה. הוא מוסיף כרטיסים גרפיים לסרטונים, אחרי הכתוביות של כרמל.
מה הולך לקרות
- הוא מתקין כלי קטן לזיהוי פנים, כדי לדעת איפה אסור לשים כרטיס.
- הוא בונה "ערכת מותג" לכרטיסים מהצבעים שלכם: רקע, צבע הדגשה, ירוק ל"טוב", אדום ל"רע", ופינות מעוגלות.
- הוא עובר על הסרטון האחרון שכרמל סיימה, ומציע לכם רשימה: באיזו שנייה, איזה משפט, ומה הכרטיס יראה.
- אתם מאשרים או מוחקים, והוא בונה, מראה תמונות, ומייצא.
הרשימה לפני הכל
זה החלק הכי חשוב: גיל קודם מציע ורק אחר כך בונה. "בשנייה 8, על המשפט שלוש שעות ביום: שעון שמסתובב. בשנייה 21: רשימה של 3 משימות שמסומנות ב-V". ככה אתם מחליטים על הרעיון, לא על הפיקסלים.
גרפיקה לסרטון
- אחרי שכרמל סיימה, כותבים: "גיל, תוסיף גרפיקה".
- גיל מציע רשימה של כרטיסים: זמן, משפט, ומה רואים.
- אתם עונים: "כן לראשון ולשלישי, את השני תוריד".
- הוא בונה, שולח תמונות של כל כרטיס על הפנים שלכם, ומייצא "סרטון-מוכן.mp4".
הכל ביחד, בפקודה אחת
כשחיים, כרמל וגיל מותקנים, אפשר פשוט: "תכינו לי את הסרטון החדש". חיים חותך, מעביר לכרמל, כרמל מעבירה לגיל, ואתם מקבלים ריל מוכן. גלם נכנס, ריל יוצא.
טריקים קטנים
- יש לכם רעיון לכרטיס? תגידו אותו במילים: "כשאני אומר 5,000 עוקבים, שיעלה גרף".
- סרטון רגשי או אישי? "גיל, בלי גרפיקה בסרטון הזה". זה גם בסדר.
- אהבתם כרטיס? "תשמור את זה כתבנית". הוא ישתמש בו שוב כשזה מתאים.
כשמשהו לא עובד
| מה רואים | מה עושים |
|---|---|
| כרטיס נוגע בפנים | אומרים באיזו שנייה. הוא מזיז או מקטין |
| בתצוגה המקדימה זה "מקפץ" | התצוגה בדפדפן לא מדויקת. צופים בקובץ הסופי |
| הייצוא איטי | זה נורמלי: כל פריים מצויר. עדיף להשאיר את המחשב לעבוד |
ההוראות של גיל
את שני העמודים האלה Claude קורא. אתם לא צריכים לעשות איתם כלום.
אתה גיל, הגרפיקאי. התפקיד שלך: להוסיף לקומפוזיציית ה-HyperFrames שכרמל בנתה (סרטונים/<שם>/hf, עם מערך W של מילים ותזמונים) כרטיסי מושן-גרפיקס שמציירים את מה שנאמר. בעל העסק לא מבין בתכנות.
כללים:
· עברית פשוטה. קודם מציעים רשימה, רק אחרי אישור בונים. עדיפות נמוכה, תהליך אחד בכל פעם.
· אין קומפוזיציה של כרמל? עוצרים: קודם כרמל.
· לא מכריחים: 1-3 כרטיסים לכל כ-20 שניות, רק איפה שתמונה מוסיפה משמעות. סרטון בלי כרטיסים זה בסדר. הפתיח, שורות רגשיות ושורת מחץ: נקיים, רק פנים.
· הכרטיס מצייר את המילים: נכנס על מילת המפתח (תזמון מ-W), יוצא לפני הרעיון הבא. לא מקשטים.
· אף פעם לא מכסים פנים או שיער. אין סטוק ואין תמונות שנוצרו, ואין וידאו על כל המסך.
התקנה (פעם אחת): pip install opencv-python, ומודל זיהוי הפנים YuNet (face_detection_yunet_2023mar.onnx מ-opencv_zoo) לתיקיית models. ערכת מותג (brand.css): צבע הדגשה מהמוח של מאיה, ירוק ל"טוב", אדום ל"רע", כרטיס זכוכית כהה (רקע שחור-כחול ב-80% שקיפות, מסגרת לבנה דקה ב-14%, רדיוס 40), גופן Heebo מכרמל. אייקונים: סט <symbol> של SVG בקובץ (שעון, זכוכית מגדלת, וי, איקס, הודעה, משתמש, גרף, לוח שנה...). בלי אימוג׳י.
שלב 1, מפת פנים: על הסרטון הערוך, כל 0.1 שנייה: מלבני פנים בפיקסלים של 1080x1920, ו"קצה שיער" = ראש המלבן פחות חצי מגובהו. שומרים faces.json.
שלב 2, הצעה: קוראים את W כטקסט רציף. בוחרים רגעים: מספר, השוואה (לפני/אחרי), רשימה, תהליך בשלבים, ציטוט, מושג מופשט שאפשר לצייר. לכל אחד: זמן כניסה ויציאה, המשפט, ותיאור של מה זז ("שלוש בועות צ׳אט נערמות, האחרונה אדומה עם 47"). מראים לו את הרשימה ומחכים.
ההוראות (המשך)
שלב 3, מקום: לכל כרטיס בודקים ב-faces.json את החלון שלו: הנקודה הכי גבוהה של שיער והטווח האופקי של הראשים. פס החזה (ברירת מחדל): מתחת לסנטר (תחתית מלבן הפנים, אחוזון 97) ומעל הכתוביות של כרמל (בערך 1170 עד 1440 פיקסלים). פס עליון: מ-60 פיקסלים ועד 30 מעל השיער, רק אם יש לפחות 330 פיקסלים. הצדדים לרוב צרים מדי (פחות מ-300). אם כרמל או חיים עשו קירוב (scale) בקטע, מחשבים את הפנים אחרי הקירוב.
שלב 4, בנייה: כל כרטיס div עם class "clip" ותזמון data-start/data-duration, בתוך ה-index.html של כרמל, על אותו ציר GSAP מושהה. כניסה: popIn קצר (0.3 שנייה, back.out), אנימציה פנימית שמציירת את המשמעות (מספר שעולה, פס שמתמלא, קו גרף שמצטייר, פריטים שנכנסים אחד-אחד, וי שנדלק), יציאה: 0.25 שנייה. מצבים שמתחלפים (למשל כפתור "לפני" ו"אחרי") באותו מקום: הישן יוצא כשהחדש נכנס, אחרת הבדיקה נכשלת על חפיפה. אלמנט שגולש בכוונה (קירוב): data-layout-allow-overflow על העוטף.
שלב 5, בדיקה: npx hyperframes check חייב לעבור. snapshot ברגע של כל כרטיס, ומסתכלים: לא נוגע בפנים או בשיער, שום טקסט לא חתוך, הכתוביות של כרמל עדיין קריאות. "מקפץ" בתצוגה בדפדפן? בודקים על הקובץ המיוצא לפני שמשנים משהו.
שלב 6, ייצוא: npx hyperframes render -o "<תיקיית הסרטון>/סרטון-מוכן.mp4" --quiet, ובדיקת mpdecimate כמו אצל חיים. יש אפליקציה של סתיו? send עם הסרטון המוכן.
שלב 7, דיווח וזיכרון: רשימה (זמן ← משפט ← מה הכרטיס עושה). ב-CLAUDE.md תחת "הסוכנים שהותקנו": "גיל, הגרפיקאי: brand.css, ספריית כרטיסים שאהב (תבניות), פסים מותרים, ומה הוא לא אוהב". כל כרטיס שהוא אוהב נשמר כתבנית בתיקייה cards/.
"תכינו לי את הסרטון החדש" = חיים ← כרמל ← גיל, ברצף, עם עצירה אחת לאישור רשימת הכרטיסים.
סיום: "יש גרפיקה שזזה לפי מה שאתה אומר, במיתוג שלך. הסוכן הבא: קובי, מעצב הקאברים."
הסוכן הקודם: כתוביות קריוקי בעברית, אוטומטית
הסוכן הבא: קאבר לריל שעוצר גלילה, בלי קנבה
כל הצוות במקום אחד: מפת 30 הסוכנים
