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

סטאקי (Stacki) הוא הדוגמה הנקייה ביותר לתזה של המאמר הזה: לא פותחים “פרויקט Stacki”, אלא פותחים פרויקט אסטרו (Astro) רגיל על המחשב. הכלי מפעיל את שרת הפיתוח של הפרויקט, מציג את העמוד החי ומאפשר לערוך עמודים, תבניות, רכיבים, סגנונות, נכסים ואוספי תוכן (Content Collections). הקבצים שהוא פותח הם בדיוק הקבצים שמערכת הבנייה קוראת ושאתם שולחים למאגר הקוד.

בעבודה בפועל אפשר לבקש מקודקס (Codex), קלוד קוד (Claude Code) או קורסור (Cursor) להקים דף, רכיב או שכבת נתונים; ואז לעבור ל-Stacki כדי לבחור כותרת, לשנות את הריווח, לטפל במצב רספונסיבי (Responsive) ולהחזיק קצב עם העין. המעניין הוא הגבול שהמוצר מציב: סימון שאינו יכול להיות מיוצג ביושר בקנבס לא נכתב מחדש. במקום זאת הוא נפתח בעורך קוד לצד תצוגה חיה. זה פרט עיצובי חשוב, כי הוא מעדיף אמת על פני אשליה של שליטה מלאה.

מחסנית הטכנולוגיה (Tech Stack) כאן היא אסטרו (Astro), קבצי הסגנון שכבר בפרויקט וטייפסקריפט (TypeScript) עבור הגדרות המאפיינים של רכיבים. משתני CSS הופכים לשדות חזותיים, ו-Stacki יודע גם לקרוא את סוגי המאפיינים כדי להציע את השדות המתאימים. הוא תומך בבחירת נקודות שבירה (Breakpoints) מתוך שאילתות המדיה שכבר קיימות, במקום להלביש סט מכשירים דמיוני על פרויקט אחר.

למי זה מתאים? למעצב או מפתח שעובד עם אסטרו (Astro), רוצה שהמאגר והפריסה הקיימים יישארו הסיפור הראשי, ומוכן לקבל שהעורך עדיין לא מבין כל תחביר אפשרי. הוא פחות מתאים למי שצריך סביבת מערכת מלאה עם אימות, תהליכי שרת ודאטה מורכב. גם כרגע זה כלי שולחני מוקדם יחסית, אך דווקא המבנה שלו מפחית נעילה לפלטפורמה: אין חשבון, אין ענן ואין פורמט פרויקט פרטי. הקוד הוא מקור האמת (Source of Truth), ולכן גם סוכן וגם אדם עובדים מולו.

אינסטטיק (Instatic) הוא הכלי שהכי השתנה מאז הטיוטה הראשונה של המאמר, ולכן היה חשוב לבדוק אותו מחדש. זהו עורך חזותי ומערכת ניהול תוכן (CMS) בקוד פתוח (Open Source) שמיועדים לרוץ אצלכם. הטענה המרכזית שלו אינה “תישארו אצלנו”, אלא “אתם מחזיקים את האתר”: מעצבים על קנבס, לוחצים פרסום, וקובצי HTML פשוטים נכתבים לשרת שלכם. אפשר לקרוא אותם ב-View Source, להעתיק לכל אירוח ולשמור אותם גם אם מפסיקים להשתמש בכלי.

זה משנה את ה-workflow. במקום שכל עריכה תהפוך לשורת קוד ידנית, העורך מחזיק שכבה של עמודים, מחלקות, רכיבים חזותיים, מדיה ותוכן. הייבוא החכם שלו יכול לקחת תיקייה, קובץ ZIP או יצוא סטטי, להפוך CSS למחלקות שניתנות לעריכה ומשתני :root לאסימוני עיצוב (Design Tokens). לפני כתיבה הוא מציג התנגשות שמות ומאפשר להחליט אם לשנות שם, לדלג או לדרוס — החלטה חשובה הרבה יותר מ”יבא והצלח”.

החיבור לסוכני תכנות כאן מפורש: Instatic מציג שרת פרוטוקול הקשר מודל (MCP) עם כלים מוגבלים לפי יכולת, כולל יצירת תוכן, החלת CSS, שינוי אסימוני צבע וצילום מצב של העמוד. כלומר, סוכן יכול לעבוד על המערכת שבה גם העורך החזותי עובד, ולא רק להדביק HTML מבחוץ. בצד ההפעלה, הפרויקט מתועד כשרת אחד של באן (Bun) עם SQLite או Postgres, והרישיון הוא MIT. זה נותן נתיב ברור לאירוח עצמי, אך גם מטיל על הצוות אחריות על גיבויים, עדכונים ואבטחה.

כדאי לדייק: HTML שפורסם הוא נייד, אבל זה לא אומר שכל תיקיית קוד שרירותית היא בסיס קוד חי שאפשר לערוך הלוך ושוב ללא אובדן. Instatic מתרגם את האתר למבני העורך שלו. הוא מתאים במיוחד לסטודיו או לצוות תוכן שרוצים שליטה חזותית, פרסום סטטי ואתר בבעלותם; פחות למי שמחפש דרך להשאיר אפליקציית ריאקט (React) מורכבת בקבצים קיימים ולערוך כל שורה ממנה בחופשיות.

טלפורטHQ (TeleportHQ) אינו מבטיח לעבוד על כל בסיס קוד קיים כאילו נכתב בשבילו. הוא הרבה יותר מעניין כשמבינים את המסלול המדויק: מייבאים HTML, CSS וג׳אווהסקריפט (JavaScript) רגילים, עורכים את התוצאה חזותית, ואז מייצאים את הפרויקט בפורמט הרצוי. זו יכולה להיות דרך שימושית לקחת עמוד סטטי שסוכן יצר, לתת למעצב להמשיך לעבוד עליו, ולבסוף למסור קוד לצוות הפיתוח.

ההגבלה כאן אינה הערת שוליים: התיעוד הרשמי מציין במפורש שאין להדביק ריאקט (React), נקסט (Next.js) או מסגרות עבודה אחרות לתוך הייבוא. הייבוא מקבל HTML, CSS וג׳אווהסקריפט (JavaScript) ונילה (Vanilla). לאחר מכן אפשר לעשות שינויים דקים בקנבס, לנהל רכיבים, מחלקות CSS והגדרות עמוד. קוד מותאם אישית שנוסף ברמת הפרויקט או כהטמעה עשוי לרוץ רק באתר שפורסם, ולא בתוך הקנבס — נקודת בדיקה חשובה לפני שמכריזים שהכול עובד.

בכיוון ההפוך, ל-TeleportHQ יש לוח קוד שמבוסס על שפת תיאור ממשק משתמש (UIDL). הוא מסוגל לייצר גרסאות לריאקט (React), ויו (Vue), אנגולר (Angular), נקסט (Next.js), נוקסט (Nuxt) או HTML ו-CSS, ובמבני CSS שונים. אפשר גם להוריד קובץ ZIP או לשלוח למאגר גיטהאב (GitHub). זה עושה אותו שימושי במיוחד לפרוטוטייפ, לדפי שיווק, לשדרוג של אתר סטטי או לנקודת מעבר מסודרת בין עיצוב לפיתוח.

המחיר של הגמישות הזו הוא שאין כאן הבטחה ל-round-trip מלא. אחרי שמייצאים את הפרויקט ומפתחים את קוד הריאקט (React) באופן עצמאי, אי אפשר להחזיר אותו לעורך באותה צורה. לכן אני לא מציג את TeleportHQ כבית לפרויקט ארוך טווח עם סוכן חיצוני שעורך קוד מורכב. הוא כן כלי מצוין כשצריך מעבר מבוקר בין קוד סטטי, עריכה חזותית ויצוא — ותיעוד ברור של מה בדיוק נכנס ומה יוצא.

וובסטודיו (Webstudio) הוא כנראה הכלי הקרוב ביותר לרעיון “אדם וסוכן עובדים על אותו אתר דרך ממשקים שונים”. הוא עורך חזותי פתוח (Open Source) שמכוון להיות שכבת החזית של אתר: אפשר לחבר מערכת ניהול תוכן (CMS), מסד נתונים או ממשק תכנות יישומים (API) חיצוני, לעבוד עם כל מאפייני CSS, ולפרסם בענן שלו או לייצא ולארח עצמאית.

מה שמייחד את וובסטודיו (Webstudio) ב-2026 הוא פרוטוקול הקשר מודל (MCP). לפי ההסבר הרשמי שלהם, המערכת תוכננה כך שהעורך החזותי וה-MCP קוראים, משנים ובונים את אותו פרויקט — והסוכן גם יכול לפתוח את התוצאה בדפדפן ולבדוק אותה חזותית. החיבור דרך שורת הפקודה (CLI) מיועד ללקוחות כמו קודקס (Codex), קלוד קוד (Claude Code), קורסור (Cursor) או סביבת פיתוח משולבת (IDE). זו הבטחה משמעותית יותר משרת MCP שעוטף רק ממשק תכנות יישומים (API).

בפועל, זה אומר שאפשר לתת לסוכן להוסיף אזור מחירים, לחבר מקור תוכן או לסדר אסימונים; ואז לפתוח את אותו פרויקט בעורך כדי לבדוק היררכיה, נקודות שבירה ונגישות. הקוד כאן אינו בהכרח תיקיית JSX שרירותית כמו בפרויקט ריאקט (React) רגיל, אלא פרויקט Webstudio שממנו אפשר לבנות אתר סטטי או יישום ג׳אווהסקריפט (JavaScript). צריך להבין את ההבדל הזה מראש: מקור האמת הוא אכן משותף לאדם ולסוכן, אך הוא חי במודל הפרויקט של Webstudio.

מבחינת בעלות, הליבה של הבונה נמצאת ברישיון AGPL-3.0 ואפשר לארח אותה בעצמכם. יש גם רכיב אנימציה אופציונלי קנייני, ולכן “קוד פתוח” אינו פטור מבדיקה של כל רכיב. Webstudio מתאים למעצבים־מפתחים ולצוותים שרוצים שליטה רצינית ב-CSS, חיבורים למקורות תוכן וסוכן שמסוגל לפעול על העורך. הוא פחות מתאים למי שרוצה יבוא של בסיס קוד קיים ללא התאמה למודל הכלי.

נורדקראפט (Nordcraft) מגיע מעולם הפיתוח החזותי (Visual Development), ולכן הוא לא עוד בונה עמודים עם צ׳אט. הוא מתאר את עצמו כבונה אתרים עם סוכן בינה מלאכותית (AI), המבוסס על HTML, CSS וג׳אווהסקריפט (JavaScript) מודרניים. בקנבס אפשר לבנות רכיבים, לגרור ולסדר אלמנטים, לעבוד עם מאפייני HTML וסגנונות, ולהמשיך לקוד מותאם אישית כשצריך יכולת שאין לה ממשק.

מודל הרכיבים הוא מרכזי: אתר יכול להכיל עמודים, רכיבים, משתנים, נוסחאות, אירועים ותהליכי עבודה; לצד זה אפשר ליצור חבילות (Packages) של רכיבים ופונקציות לשיתוף בין פרויקטים. החיבור לנתונים אינו תוספת מאוחרת: אפשר להגדיר בקשות לממשקי תכנות יישומים (APIs), אימות, טרנספורמציה של תגובות וזרימה בין רינדור שרת (SSR) לרינדור לקוח (CSR). יש גם עורך אנימציות שמפיק אנימציות CSS בלי תלות נוספת.

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

הכלי מתאים במיוחד לסטודיואים, למעצבים שמסוגלים לחשוב ב-HTML ו-CSS ולמי שמפתח ממשקים עשירים המחוברים לנתונים. הוא מציע אירוח ישיר וגם נתיב לאירוח עצמי, אך לפני התחייבות לפרויקט ארוך צריך לבדוק את גבולות היצוא, מודל התמחור, הרשאות הצוות והחיבור למקור הקוד שלכם. היתרון האמיתי אינו תווית “ללא קוד” או “עם בינה מלאכותית”; הוא האפשרות להחליט בכל רגע אם הפעולה הבאה היא עיצוב, רכיב, נוסחה, API או שיחה עם סוכן.