arielshemesh1999@gmail.com · ישראל
← כל הפרויקטים

Sculio

Sculio הוא עורך HTML ויזואלי שרץ כולו בדפדפן, בלי שלב build. בניתי אותו כדי לקחת עמוד קיים — לשכפל אתר, להעלות קובץ או להתחיל מאחד מ-70 טמפלייטים של מותגים — לערוך אותו ישירות על הקנבס ולהוריד HTML נקי בסוף.

70
טמפלייטים של מותגים
142
קולות מותג ל-AI
626
בדיקות יחידה

מה זה

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 ב-url-proxy, גישור rate-limit על ה-hop הימני של XFF במקום הימני-שמאלי הניתן לזיוף, escaping בטוח להקשר של script, וסבב hardening על ה-auth וה-entitlements.

הסוויטה עומדת על 626 בדיקות יחידה, וכל pack מאומת גם live מול ה-deploy האמיתי. יש גם תשתית billing לא-פעילה (טוקן entitlement חתום ב-HMAC) שמחכה לשלב ה-backend כדי להידלק.

התוצאה

המערכת live ב-editor-beta-ruby.vercel.app: נוחתים בעמוד, נכנסים לעורך, ובכמה קליקים משכפלים אתר או מנתחים מתחרה ומורידים HTML נקי. תת-מערכת המייל פעילה, וההחלטה הנוכחית היא שהעורך הוא desktop-only דרך שער מרכזי אחד.

הפכתי את חוויית הכניסה ל-prompt-first בסגנון Base44/Lovable: מסך פתיחה עם 'תאר את האתר שלך' ו'נתח מתחרה', gating על פעולת הערך עצמה במקום על הפתיחה, ורמזי next-step אחרי התוצאה הראשונה.