מכינים את הדף בשבילך
פריימוורק מצגות מבוסס React שסוכן ה-AI שלך כותב עבורך. כל שקופית היא קומפוננטת React על קנבס 1920×1080, ניתנת לעריכה, גרסאות וייצוא ל-HTML/PDF.
open-slide צבר מעל 5,000 כוכבים ב-GitHub, מופץ ברישיון קוד פתוח (MIT), ועובד עם Claude Code, Cursor, Gemini CLI, Windsurf, Zed ועוד.
מצגות הן בעצם קוד ויזואלי, וסוכני AI מצטיינים בכתיבת קוד. open-slide הוא ה-runtime שהיה חסר כדי להפוך את הבקשה "תכין לי מצגת על X" למצגת מלוטשת ומוכנה להצגה, בלי לצאת מהצ'אט עם הסוכן.
במאמר הזה נסביר מה זה 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 פיקסלים. ה-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%').
שלושה צעדים מתיקייה ריקה לשקופית חיה וניתנת לעריכה, הכול מתחיל בפקודה אחת ללא הגדרות:
npx @open-slide/cli init my-deck. זה יוצר את סביבת העבודה שכל הדקים העתידיים יחיו בתוכה./create-slide for Q2 roadmap). הסוכן מנסח את העמודים כקומפוננטות React./apply-comments.Skills הם פקודות מובנות שכל סשן של סוכן AI יכול להפעיל כדי לבצע משימות מצגת מוגדרות. סביבת העבודה שנוצרת מגיעה עם הסקילז מוגדרים מראש עבור Claude Code.
| Skill | מה הוא עושה |
|---|---|
/create-slide | יוצר שקופית או דק חדש מתיאור בשפה טבעית |
/slide-authoring | כללי הכתיבה והעיצוב שהסוכן מיישם בעת בניית שקופיות |
/apply-comments | קורא את ההערות שהשארת על הקנבס ומיישם אותן בקוד |
/create-theme | יוצר ערכת עיצוב (theme) חדשה לדק |
/current-slide | נותן לסוכן הקשר על השקופית הפעילה כרגע |
האינספקטור הוא העורך הוויזואלי שרץ בתוך שרת הפיתוח בדפדפן, ומאפשר שתי דרכי עבודה:
@slide-comment בקוד המקור. הרצה של /apply-comments גורמת לסוכן לערוך בדיוק את מה שסימנת.open-slide כולל מנהל אסטים מובנה לניהול תמונות וקבצים בתוך הדק, גוררים תמונות ישירות לתוך המצגת, ומשנים שם או מחליפים מאותו חלון. בנוסף משולב מאגר svgl עם יותר מ-1,500 לוגואים של מותגים: מחפשים לוגו מתוך העורך, וקובץ ה-SVG נוחת בתיקיית האסטים מוכן ל-import.
open-slide כולל מצב הצגה מקצועי: השמעה במסך מלא, תצוגת מציג (presenter view), הערות דובר וטיימר.
לשיתוף, הפקודה open-slide build מייצרת אתר סטטי תחת dist/. הפלט הוא zero-runtime, הכול מרונדר בצד הלקוח, ללא שרת, וניתן להעלאה לכל מארח (Vercel, Cloudflare Pages, Netlify, GitHub Pages). לייצוא PDF בוחרים Export → PDF מסרגל הכלים; ה-runtime מגדיר גודל נייר 1920×1080 לרוחב, כך שכל שקופית היא בדיוק עמוד אחד.
ההבדל המהותי הוא חופש מוחלט בעיצוב ועבודה ראשונה-לסוכן. בכלים מבוססי Markdown או DSL מוגבל אתה נלחם בפריסה; ב-open-slide כל שקופית היא קוד React חופשי, ואין מבנה שמגביל אותך.
| היבט | open-slide | כלים מסורתיים |
|---|---|---|
| יחידת השקופית | קומפוננטת React (קוד חופשי) | Markdown / DSL / גרירה |
| מי כותב | סוכן AI לפי הנחיה בשפה טבעית | המשתמש ידנית |
| גרסאות וביקורת | קבצי קוד ב-Git, ניתנים לסקירה | קובץ בינארי / סגור |
| ייצוא | HTML סטטי או PDF, ללא שרת | תלוי בכלי |
open-slide מציע גישה חדשה למצגות: במקום להיאבק בתבניות, אתה מתאר מה אתה רוצה וסוכן ה-AI בונה קוד React שאתה יכול לערוך, לתת עליו גרסאות ולייצא בלחיצה. למי שכבר עובד עם Claude Code או סוכן קוד אחר, זו דרך טבעית להפיק מצגות מקצועיות מבלי לצאת מהצ'אט, עוד דוגמה לאיך סוכני AI הופכים משימות שלמות לאוטומטיות.
מרצה AI מוביל בישראל, מטמיע בינה מלאכותית בארגונים מ-2021. מייסד LazySEO AI ומכללת צדק אקדמי, מוביל קהילות עם מעל 100,000 חברים. שותף רשמי של Meta, Google, Canva ו-TikTok.
עוד עליי ←