הצינור: מכתובת אתר ל-HTML נקי
נכנסים עם URL, קובץ או טמפלייט, עורכים על הקנבס עם מנוע ניתוח מתחרים ובונה AI, ומורידים HTML עצמאי.
הליבה כתובה ב-Vanilla JS ללא שלב build: העריכה על הקנבס נשענת על undo/redo מבוסס snapshots, ותצוגת המובייל מריצה את העמוד בתוך iframe ברוחב מכשיר אמיתי כדי שה-media queries שלו באמת יירו במקום סימולציה שטחית. המהלך הלא-מובן-מאליו הוא שבונה ה-AI מודע לקול המותג: 142 קולות מותג מוזרקים ל-system prompt בזמן ריצה כך שהם משפיעים על ה-copy בלבד ולא נוגעים בעיצוב עצמו, ו'בנה כדי לנצח את השדה' מזין אותו בתקציר פערים מדוח ה-BI של המתחרה. כל מסלולי ההוצאה מוגנים ב-token חד-פעמי של Turnstile שמאומת בצד השרת ב-fail-closed, וה-ai-builder Worker חתום ב-HMAC כדי שרק בקשות לגיטימיות מהחזית יריצו את מסלול היקר. סבבי audit אדוורסריים סגרו SSRF דרך redirect במסלול הסריקה — כל hop מאומת מחדש מול allowlist — ומיפו את ה-rate-limit ל-hop הימני של XFF במקום השמאלי הניתן לזיוף.
מנוע הניתוח לא נעצר בדוח: כל דוח מתחרה מתפצל לשלושה גשרים שמחזירים אותו לתוך הקנבס - זה מה שהופך את Sculio מעורך HTML לכלי בנייה תחרותי.
מה זה
Sculio הוא studio לעריכת אתרים שעובד לגמרי בצד הלקוח, ללא שרת בנייה וללא framework. נקודת הכניסה היא קנבס אחד: מזינים כתובת של אתר לשכפול, מעלים קובץ HTML, או בוחרים אחד מ-70 הטמפלייטים המובנים, ומשם עורכים ישירות על העמוד.
העריכה כוללת גרירה, שינוי גודל, סיבוב, טיפוגרפיה, צבעים ואייקונים על כל אלמנט. בסוף אפשר להוריד HTML נקי, וגם קובץ DESIGN.md שמסכם את מערכת העיצוב של העמוד — פלטת צבעים, כללי טיפוגרפיה, מרווחים, רדיוסים וצללים.
הבעיה
רוב עורכי האתרים הוויזואליים דורשים שלב build או כובלים את התוצר לפלטפורמה שלהם. רציתי כלי שבו לוקחים עמוד אמיתי שכבר קיים ברשת, נכנסים אליו, משנים בו מה שצריך, ויוצאים עם HTML עצמאי שאפשר לארח בכל מקום.
האתגר השני היה לחבר בין 'להבין מתחרה' לבין 'לבנות משהו טוב יותר' באותו מקום, בלי לקפוץ בין כלים נפרדים.
מה בניתי
את הליבה כתבתי ב-Vanilla JS — הקבצים הגדולים הם editor.js ו-inspector-tabs.js — עם עריכה על הקנבס, undo/redo מבוסס snapshots, ומעבר תצוגה למובייל וטאבלט שמריץ את העמוד בתוך iframe ברוחב מכשיר אמיתי כדי שה-media queries שלו באמת יירו.
בהמשך מיזגתי לתוך Sculio מנוע ניתוח מתחרים: סורקים אתר של מתחרה, מקבלים דוח BI מלא, ואז יש שלושה גשרים חזרה לעורך — שכפול המתחרה לתוך הקנבס, לוח השראה שמאגד את האותות מהשדה, ו'בנה כדי לנצח את השדה' שמזין את בונה ה-AI עם תקציר פערים.
בונה ה-AI מודע לקול המותג: 142 קולות מותג (מהוולט הפנימי ומ-open-design.ai תחת Apache-2.0) מוזרקים ל-system prompt בזמן ריצה, כך שהם משפיעים על ה-copy בלבד ולא נוגעים בעיצוב עצמו.
איך זה עובד
ה-frontend הוא static נטו על Vercel. מאחוריו יושבים ארבעה Cloudflare Workers: url-proxy לשכפול וסריקה עם rate-limits מבוססי KV, Worker לאימות Turnstile, email-send שמדבר עם Resend ומשתמש ב-R2 לאידמפוטנטיות, ו-ai-builder שחתום ב-HMAC.
מסלולי ההוצאה — בניית AI, מחקר וניתוח — מוגנים ב-token חד-פעמי של Turnstile שמאומת בצד השרת ב-fail-closed. כל המפתחות יושבים ב-env של Vercel וב-secrets של Workers, אף פעם לא ב-repo.
אבטחה ואיכות
בניתי כמה סבבי audit אדוורסריים על כל המערכת. ביניהם תוקן SSRF דרך redirect במסלול הסריקה — כל hop מאומת מחדש מול allowlist — מיפוי ה-rate-limit ל-hop הימני של XFF במקום השמאלי הניתן לזיוף, escaping בטוח להקשר של script, וסבב hardening על ה-auth וה-entitlements.
הסוויטה עומדת על 635 בדיקות יחידה, וכל pack מאומת גם live מול ה-deploy האמיתי.
התוצאה
המערכת live ב-editor-beta-ruby.vercel.app: נוחתים בעמוד, נכנסים לעורך, ובכמה קליקים משכפלים אתר או מנתחים מתחרה ומורידים HTML נקי. תת-מערכת המייל פעילה, וההחלטה הנוכחית היא שהעורך הוא desktop-only דרך שער מרכזי אחד.
הפכתי את חוויית הכניסה ל-prompt-first בסגנון Base44/Lovable: מסך פתיחה עם 'תאר את האתר שלך' ו'נתח מתחרה', gating על פעולת הערך עצמה במקום על הפתיחה, ורמזי next-step אחרי התוצאה הראשונה.