מדריך HyperFrames: יוצרים סרטונים מקוד עם Claude Code, Codex וכל סוכן קוד

כל הסרטונים במדריך נבנו ב-HyperFrames

HyperFrames הוא כלי קוד פתוח של HeyGen שהופך דף HTML לסרטון MP4. סוכן הקוד שלכם כותב את הדף, בין אם זה Claude Code, Codex או סוכן אחר. אתם רואים אותו בדפדפן, מבקשים תיקונים ובסוף יוצא קובץ וידאו.

• Claude Code, Codex וכל סוכן קוד עם סקילים
• חינמי וקוד פתוח (Apache 2.0)
• MP4, וידאו שקוף, GIF ועוד
• עברית מימין לשמאל

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

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

את הקובץ לא כותבים לבד. מתקינים את הסקילים של HyperFrames אצל סוכן הקוד, מתארים בעברית מה רוצים לראות. הסוכן בונה, בודק ומייצא קובץ. זה עובד באותה צורה ב-Claude Code, ב-Codex, ב-Cursor, ב-Gemini CLI וב-Copilot.

שלוש דרכים להתחיל

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

npx skills add heygen-com/hyperframes

npx hyperframes init my-video
cd my-video
npx hyperframes preview

בכל אחת מהדרכים צריך Node.js בגרסה 22 ומעלה ו-FFmpeg במחשב. הפרטים בפרק ההתקנה.

01איך HyperFrames הופך דף לסרטון

סרטון ב-HyperFrames הוא דף HTML רגיל עם כמה תכונות של זמן. data-start אומר מתי רכיב עולה למסך, data-duration כמה זמן הוא נשאר. אנימציה של GSAP או CSS מזיזה אותו בדרך. את כל זה הסוכן כותב.

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

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

מתי HyperFrames ומתי מחולל וידאו

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

02התקנה ב-Claude Code, ב-Codex או בכל סוכן אחר

צריך שני דברים במחשב: Node.js בגרסה 22 ומעלה ו-FFmpeg, שמחבר את הפריימים לקובץ. בודקים אם הם כבר מותקנים:

node --version
ffmpeg -version

אם Node.js חסר או ישן, מורידים את גרסת ה-LTS מהאתר של Node.js. אם FFmpeg חסר:

winget install --id Gyan.FFmpeg -e

brew install ffmpeg

sudo apt update && sudo apt install -y ffmpeg

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

Claude Code: התוסף הרשמי

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

פותחים שיחה חדשה (או מריצים /reload-plugins) ומתחילים את הבקשה ב-/hyperframes:hyperframes. כדי שהתוסף יתעדכן לבד: /plugin, לשונית Marketplaces, בוחרים hyperframes ו-Enable auto-update. גרסאות חדשות של HyperFrames יוצאות כמעט כל יום, כך שזה שווה את הדקה.

Codex, Cursor, Gemini CLI וכל השאר: סקילים

npx skills add heygen-com/hyperframes

מריצים את הפקודה בתיקיית העבודה. ברשימה שנפתחת בוחרים Core Skills ואת הסוכן שלכם. את שאר הסקילים הסוכן מתקין לבד כשבקשה צריכה אותם. פותחים שיחה חדשה. ב-Codex מתחילים את הבקשה ב-$hyperframes. בסוכנים אחרים מבקשים להשתמש ב-/hyperframes.

03הבקשה הראשונה

/hyperframes הוא לא תבנית אלא נתב. הוא שואל מה חסר לו כדי להבין את הסרטון ובוחר תהליך עבודה לפי מה שנתתם לו:

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

כרטיס כותרת, 7 שניות

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

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

04גרף, אתר וריל

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

גרף מנתונים אמיתיים

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

לגרפים, למעברים ולכתוביות יש בלוקים מוכנים בקטלוג של HyperFrames. npx hyperframes catalog מציג אותם. npx hyperframes add data-chart, למשל, מוסיף לפרויקט בלוק של גרף שהסוכן מתאים לנתונים שלכם.

מאתר לסרטון פרומו

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

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

ריל אנכי בתוך האזור הבטוח

סרטון 9:16 מתחיל ב-init עם --resolution=portrait. הסוכן השאיר את כל הטקסט רחוק מהקצוות, במקום שהכפתורים והכיתוב של אינסטגרם וטיקטוק לא מכסים.

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

פרומפט לשחזורהעתקה

תבנה ריל אנכי 9:16 של 8 שניות: "3 פקודות לפני שמפרסמים סרטון", עם preview, check ו-render. כל פקודה בכרטיס משלה. כל הטקסט נשאר בתוך האזור הבטוח של אינסטגרם.

05Studio, בדיקה וייצוא

npx hyperframes preview פותח את Studio בדפדפן: הסרטון באמצע, ציר זמן עם כל סצנה בשורה משלה ולוח מאפיינים בצד. Studio עורך את אותו קוד שהסוכן עורך. תיקון קטן, כמו להזיז אלמנט או לקצר סצנה, עושים בו ידנית. שינוי גדול יותר מחזירים לסוכן, גם דרך הכפתור Describe a change to the agent.

check: הבדיקה שחוסכת ייצוא מיותר

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

אצלי הבדיקה תפסה דברים שקשה לראות בתמונה אחת. בריל תגית סטטוס כיסתה חלק מהטקסט מהשנייה החמישית ואילך. בכרטיס הכותרת המילה HTML חרגה מהקופסה שלה. Claude Code תיקן את שתיהן לפני הייצוא. npx hyperframes snapshot מצלם כמה פריימים לגיליון אחד. זו הדרך המהירה לעבור על כל הסרטון בלי לנגן אותו.

ייצוא לקובץ

npx hyperframes render -o final.mp4

ברירת המחדל היא MP4 באיכות גבוהה. --format webm או --format mov מוציאים סרטון עם רקע שקוף שאפשר להניח מעל צילום בעורך וידאו, --format gif מתאים למצגת או לתיעוד. -q draft מוציא טיוטה מהירה. npx hyperframes publish מעלה את הפרויקט לכתובת פרטית לשיתוף, בלי לשלוח קובץ.

גם סאונד נכנס לסרטון כמו כל רכיב אחר, עם תגית audio וזמנים משלה. לטריילר שבראש המדריך Claude Code יצר מוזיקה ב-ElevenLabs בקצב של 120 פעמות לדקה. npx hyperframes beats מדד איפה בדיוק נופלת כל פעמה. אחרי הזזה של 65 אלפיות שנייה כל חיתוך בטריילר נופל על פעמה.

על הלפטופ שלי (Intel Core Ultra 7 עם 16GB) כרטיס הכותרת של 7 שניות יצא ב-43 שניות והטריילר של 17 שניות בכ-2.5 דקות. ייצוא במחשב לא עולה כסף ולא צורך קרדיטים של HeyGen.

063 גרסאות מקובץ אחד

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

[
  { "name": "codex",  "title": "Codex",         "line": "סוכן הקוד של OpenAI, צעד אחר צעד", "accent": "#3f71cc" },
  { "name": "skills", "title": "Claude Skills", "line": "בונים, מורידים ומתקינים סקילים",   "accent": "#d97757" },
  { "name": "video",  "title": "וידאו ב-AI",    "line": "איך יוצרים סרטון לעסק משלושה שוטים", "accent": "#e46b2e" }
]

npx hyperframes render --batch rows.json -o "renders/{name}.mp4"

כל שורה ב-rows.json היא סרטון אחד. {name} בשם הקובץ מקבל את הערך name מהשורה, כך שכל גרסה יוצאת עם שם משלה. אצלי 3 הגרסאות יצאו בכ-2 דקות. אותו דבר עובד עם 20 שורות: מודעה לכל סניף, כרטיס לכל לקוח או דוח לכל חודש.

07עברית בסרטון

כל הסרטונים במדריך בעברית. מה שעשה את ההבדל:

• פונט עברי כקובץ בתוך הפרויקט. הבדיקה של HyperFrames מתריעה על פונט שאין לו קובץ. הסרטון יוצא זהה בכל מחשב רק כשהפונט מגיע איתו. Heebo, Rubik ו-Assistant זמינים בחינם ב-Google Fonts.
• מבקשים מימין לשמאל. מספיק לכתוב בבקשה "עברית, מימין לשמאל". הסוכן מגדיר כיוון ויישור לכל טקסט.
• כותרות באנגלית בתוך עיצוב בעברית. אצלי הכותרת Claude Skills נדחפה לצד שמאל של הכרטיס עד שהסוכן קבע לה יישור לימין. כדאי לעבור ב-Studio על כל כותרת באנגלית.
• ניגודיות. check בודק אותה בכל פריים. זה חשוב במיוחד כשהטקסט יושב על רקע צבעוני או על צילום.

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

08שאלות נפוצות

המקורות הרשמיים

צילמתי את Studio והרצתי את כל הפקודות במדריך ב-2 באוקטובר 2026, עם HyperFrames בגרסה 0.8.112.