open-slide: פריימוורק המצגות שנבנה לסוכני AI, מדריך מלא

מצגות הן בעצם קוד ויזואלי, וסוכני AI מצטיינים בכתיבת קוד. open-slide הוא ה-runtime שהיה חסר כדי להפוך את הבקשה "תכין לי מצגת על X" למצגת מלוטשת ומוכנה להצגה, בלי לצאת מהצ'אט עם הסוכן.

במאמר הזה נסביר מה זה open-slide, איך הוא עובד, במה הוא שונה מכלי מצגות אחרים, ואיך מתחילים להשתמש בו צעד-אחר-צעד.

מה זה open-slide?

open-slide הוא פריימוורק מצגות מבוסס React שנכתב על-ידי סוכני AI. אתה מתאר מצגת בשפה טבעית, וסוכן הקוד שלך כותב את ה-React. הפריימוורק מטפל בקנבס, בקנה המידה, בניווט, בטעינה חמה (hot reload), במצב ההצגה ובייצוא, כך שהסוכן יכול להתרכז בתוכן.

הרעיון המרכזי פשוט: שקופית היא קובץ. במקום שפה ייעודית מוגבלת (DSL) או שרשרת Markdown, כל שקופית היא קומפוננטת React רגילה. אם אפשר לבנות את זה ב-React, זו שקופית.

הפרויקט פותח על-ידי Yiwei (1weiho), בעל רישיון MIT, וצבר מעל 5,000 כוכבים ב-GitHub. הוא זמין כשתי חבילות npm: @open-slide/core (ה-runtime) ו-@open-slide/cli (כלי ההתקנה).

איך עובד הקנבס של 1920×1080?

כל שקופית מרונדרת לתוך קופסה קבועה בגודל 1920×1080 פיקסלים. ה-runtime מותח את הקופסה הזו באופן אחיד כדי להתאים למסך, כך אותה שקופית נראית זהה בטלפון, במסך 4K ובמקרן.

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

import { CANVAS_WIDTH, CANVAS_HEIGHT } from '@open-slide/core';
// 1920 × 1080

בתוך שקופית עובדות היטב שתי גישות פריסה: קואורדינטות מוחלטות (position: absolute עם ערכי פיקסל, צפוי וקל לסוכן לכתוב) ומרכוז flex/grid לתוכן זורם. מומלץ להימנע מ-breakpoints רספונסיביים, כי הקנבס קבוע.

איך נראית שקופית בקוד?

שקופית היא קומפוננטת React שממלאת את הקנבס. דק (deck) שלם חי תחת slides/<id>/index.tsx, והאסטים יושבים לצדו ב-slides/<id>/assets/. הנה דוגמה מינימלית:

import type { Page, SlideMeta } from '@open-slide/core';

const Cover: Page = () => (
  <div style={{ width: '100%', height: '100%', background: '#08090a', color: '#f7f8f8' }}>
    <h1 style={{ fontSize: 188, letterSpacing: '-0.04em' }}>
      Hello, <em style={{ color: '#7170ff' }}>open-slide</em>.
    </h1>
  </div>
);

export const meta: SlideMeta = { title: 'Getting started', theme: 'corporate' };
export default [Cover] satisfies Page[];

שני כללים בלבד: ה-default export הוא מערך של קומפוננטות (אחת לכל עמוד), וכל קומפוננטה ממלאת את המכל שלה (width: '100%' / height: '100%').

איך מתחילים? (התקנה בשלושה צעדים)

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

1. scaffold, הקמת סביבה. מריצים npx @open-slide/cli init my-deck. זה יוצר את סביבת העבודה שכל הדקים העתידיים יחיו בתוכה.
2. author, מבקשים מהסוכן. מריצים את שרת הפיתוח, ומבקשים מהסוכן (למשל /create-slide for Q2 roadmap). הסוכן מנסח את העמודים כקומפוננטות React.
3. iterate, עריכה, הערות, יישום. לוחצים על כל אלמנט כדי לכוונן אותו ויזואלית, או משאירים הערה שהסוכן מיישם דרך /apply-comments.

מהם ה-Skills של open-slide?

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

מהו האינספקטור (Inspector)?

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

• הערה שהסוכן מיישם: לוחצים על בלוק, משאירים הערה, והאינספקטור מצמיד אותה כסמן @slide-comment בקוד המקור. הרצה של /apply-comments גורמת לסוכן לערוך בדיוק את מה שסימנת.
• עריכה ויזואלית ישירה: מפעילים מצב inspect, לוחצים על אלמנט, ומשנים טקסט, גופן, צבע או מחליפים תמונה, ישירות על הקנבס. השינויים נצברים עד לחיצה על Save.

מנהל האסטים ומאגר הלוגואים

open-slide כולל מנהל אסטים מובנה לניהול תמונות וקבצים בתוך הדק, גוררים תמונות ישירות לתוך המצגת, ומשנים שם או מחליפים מאותו חלון. בנוסף משולב מאגר svgl עם יותר מ-1,500 לוגואים של מותגים: מחפשים לוגו מתוך העורך, וקובץ ה-SVG נוחת בתיקיית האסטים מוכן ל-import.

מצב הצגה וייצוא ל-HTML/PDF

open-slide כולל מצב הצגה מקצועי: השמעה במסך מלא, תצוגת מציג (presenter view), הערות דובר וטיימר.

לשיתוף, הפקודה open-slide build מייצרת אתר סטטי תחת dist/. הפלט הוא zero-runtime, הכול מרונדר בצד הלקוח, ללא שרת, וניתן להעלאה לכל מארח (Vercel, Cloudflare Pages, Netlify, GitHub Pages). לייצוא PDF בוחרים Export → PDF מסרגל הכלים; ה-runtime מגדיר גודל נייר 1920×1080 לרוחב, כך שכל שקופית היא בדיוק עמוד אחד.

במה open-slide שונה מ-Reveal.js, Slidev או PowerPoint?

ההבדל המהותי הוא חופש מוחלט בעיצוב ועבודה ראשונה-לסוכן. בכלים מבוססי Markdown או DSL מוגבל אתה נלחם בפריסה; ב-open-slide כל שקופית היא קוד React חופשי, ואין מבנה שמגביל אותך.

שורה תחתונה

open-slide מציע גישה חדשה למצגות: במקום להיאבק בתבניות, אתה מתאר מה אתה רוצה וסוכן ה-AI בונה קוד React שאתה יכול לערוך, לתת עליו גרסאות ולייצא בלחיצה. למי שכבר עובד עם Claude Code או סוכן קוד אחר, זו דרך טבעית להפיק מצגות מקצועיות מבלי לצאת מהצ'אט, עוד דוגמה לאיך סוכני AI הופכים משימות שלמות לאוטומטיות.