אנונימי #6: מערכת AI ליצירת מיילי HTML מקצועיים בלחיצה
מנהל שיווק ביקש כלי שיצור עבורו מיילי HTML מקצועיים בלחיצת כפתור, על בסיס הסטייל של החברה ובהתאם לקריאייטיב שהוא מספק. בנינו לו מערכת ש"לומדת" את המותג מתוך אתר הלקוח, מייצרת מייל מעוצב לפי פרומפט, ושולחת אותו ישירות לחשבון Klaviyo כתבנית או כקמפיין.
הסיפור: ממיילים שיווקיים גנריים למייל שמרגיש כמו המותג
מנהל שיווק של חברת איקומרס פנה אלינו אחרי שהוא הבין שהוא מבזבז שעות על עיצוב מיילים. הוא רצה כלי שמבין את הסטייל של החברה, מקבל ממנו פרומפט קצר ("מייל מבצע סוף שנה, דגש על קולקציית החורף, CTA לקוד הקופון"), ומחזיר מייל HTML מוכן לשליחה.
בנינו לו מערכת ב-Flask שעובדת בשני שלבים. שלב ראשון הוא חילוץ מותג: המערכת קוראת את אתר החברה, שולפת את הצבעים הראשיים, את הפונט, את הלוגו, ואת הטון של הקופי. כל המידע הזה נשמר כפרופיל מותג. שלב שני הוא יצירה: לפי הפרומפט והפרופיל, ה-AI מייצר HTML מובנה עם header, hero, גוף הודעה, CTA ופוטר.
אחרי היצירה, המייל ניתן לעריכה ויזואלית בעורך פנימי, או נדחף ישירות ל-Klaviyo דרך ה-API שלהם. הלקוח בוחר אם לשמור כתבנית קבועה (לשימוש חוזר) או לפתוח קמפיין מיידי. אחרי חודש שימוש, זמן יצירת מייל ממוצע ירד מ-90 דקות לחמש.
תהליך העבודה המלא, משבעה שלבים
איך ההזמנה של הלקוח הפכה למערכת חיה. כל שלב יושב על השלב שלפניו, ובכל שלב הלקוח אישר את הפלט לפני שעברנו הלאה.
אפיון של זרימת העבודה הקיימת
ראינו עם הלקוח איך הוא מייצר מייל היום: בריף קופי, עיצוב ב-Figma, התקנה ב-Klaviyo, QA. כל זה לוקח 90 דקות בממוצע. זיהינו ש-70% מהזמן הולך על דברים חוזרים: התאמת צבעים, התאמת פונטים, סידור בלוקים.
בניית מנגנון חילוץ מותג
מימשנו שירות שמקבל URL של חברה, מבקר באתר, ושולף ממנו את ה-CSS הרלוונטי, את הצבעים השכיחים בהירארכיה, את הלוגו, ואת הטון של הקופי בעמוד הבית. כל זה נשמר כפרופיל JSON שמשמש כל מייל מהחברה הזו.
מנוע יצירה עם בלוקי תוכן
הגדרנו 12 בלוקי תוכן (header, hero image, two-column, CTA button, divider, social, footer וכו'), כל אחד עם HTML responsive ו-inline styles. ה-AI מקבל את הפרומפט, בוחר את הבלוקים המתאימים ומסדר אותם בסדר הנכון.
התאמת סגנון אוטומטית פר מותג
אחרי ש-AI יצר את ה-HTML הגנרי, שכבת רנדור מחליפה צבעים, פונטים, ולוגו לפי פרופיל המותג. כך אותו פרומפט אצל שני לקוחות שונים מייצר מיילים שנראים שונים לחלוטין.
עורך ויזואלי לעדכונים אחרונים
הלקוח לא תמיד רוצה מייל מושלם בלחיצה אחת. הוספנו עורך ויזואלי מבוסס דפדפן שמאפשר לו להחליף תמונה, לערוך טקסט CTA, או לשנות סדר בלוקים, בלי לגעת ב-HTML.
אינטגרציה עם Klaviyo API
אחרי שהמייל מוכן, לחיצה אחת דוחפת אותו ל-Klaviyo. הלקוח בוחר אם לשמור כ-template או ליצור campaign מיידי. אם בחר campaign, אפשר לבחור גם את הרשימה ולתזמן.
ספריית תבניות לשימוש חוזר
מיילים ששמורים ב-Klaviyo מוצגים בספרייה ברירת המחדל של המערכת, וניתנים לשכפול ולעריכה. כך הלקוח בונה לעצמו ספריית בלוקים שעובדים, ומשפר אותה עם הזמן.
מה בוצע לבקשת הלקוח, פיצ'ר אחרי פיצ'ר
כל שורה ברשימה עלתה בפגישת אפיון ספציפית עם הלקוח, נכנסה ל-roadmap, נבנתה ועברה QA לפני שעלתה לפרודקשן.
חילוץ מותג מ-URL
הלקוח מזין URL של אתר החברה. המערכת שולפת את הצבעים, הפונט, הלוגו, והטון. הכל נשמר כפרופיל מותג שמיושם על כל המיילים מאותה חברה.
יצירת HTML על פי פרומפט
פרומפט בעברית או באנגלית ("מייל פתיחת קולקציה לסוף השבוע") מייצר מייל מלא עם header, hero, body, CTA, footer.
12 בלוקי תוכן responsive
header עם לוגו, hero עם תמונה, two-column, CTA button, divider, social icons, product grid, footer וכו'. כל אחד מתאים את עצמו למסכי מובייל.
עריכה ויזואלית בדפדפן
אחרי היצירה אפשר לשנות תמונה, להחליף טקסט, להזיז בלוק, או למחוק בלוק. הכל בלי לגעת ב-HTML.
דחיפה ישירה ל-Klaviyo
לחיצה אחת שומרת את המייל כ-template או יוצרת campaign חדש ב-Klaviyo. החיבור ב-API key שמוצפן ב-.env.
ספריית תבניות סנכרונית
המיילים השמורים ב-Klaviyo נטענים בספרייה הפנימית של הכלי, וניתנים לפתיחה לעריכה ולשכפול.
קוד נקי, inline styles
ה-HTML שנוצר מותאם לתאימות מקסימלית עם לקוחות מייל (Outlook, Gmail, Apple Mail). inline styles, table-based, נבדק ב-Litmus.
תמיכה במספר לקוחות בכלי אחד
אפשר להחזיק פרופילי מותג של מספר חברות, להחליף ביניהם בלחיצה, ולשמור היסטוריית מיילים פר חברה.
תמונות שנשלפות מהאתר
בעת חילוץ המותג, גם תמונות מוצרים מהאתר נשמרות. ה-AI יכול להציע אותן בעת יצירת מייל מבצעים.
עברית RTL מלאה
אם הפרומפט בעברית, המייל מתפק עם direction=rtl ו-text-align=right אוטומטית, כולל תמיכה בפונטים עבריים.
A/B testing variants
הכלי יכול לייצר שתי גרסאות של אותו מייל (כותרת אחרת, CTA אחר) ולדחוף אותן כקמפיין A/B ב-Klaviyo.
preview במייל אמיתי
לפני שליחה אפשר לשלוח למייל בדיקה. שילוב עם Litmus לבדיקת תאימות בכל לקוח מייל פופולרי.
איך נראית המערכת
אילוסטרציות שמציגות את העקרונות המרכזיים של בונה המיילים, ללא חשיפת ממשק לקוח אמיתי.
התחברות לקלאביו
בלחיצה אחת מחברים את חשבון Klaviyo של החברה. המערכת מושכת את התבניות הקיימות וטוענת אותן כבסיס לעריכה ויצירה.
ממשק היצירה
אחרי החיבור, ממשק נקי שבו הלקוח כותב פרומפט בעברית והמערכת מייצרת מייל מובנה עם header, hero, body, CTA, footer.
שלוש יכולות שעושות את ההבדל
מותג קיים, מייל חדש
במקום להעתיק קופי משקלוטה, הכלי לומד את המותג של הלקוח מהאתר שלו, ובכך כל מייל מרגיש כמו אותו עסק, לא תבנית גנרית.
5 דקות במקום 90
זמן יצירת מייל ממוצע ירד פי 18. זה לא הקטנה של איכות, זה הקטנה של חיכוך: הצבעים והפונטים כבר נכונים, השליחה ל-Klaviyo כבר אוטומטית.
אינטגרציה דו-כיוונית
מיילים שנשמרו ב-Klaviyo נטענים בספרייה הפנימית. כך הלקוח בונה לעצמו ספריית בלוקים שעובדים ויכול לחזור אליהם בעתיד.
בנייה בשיתוף Claude Code
לאורך כל הפרויקט עבדנו ב-Claude Code עם סקילים ייעודיים שמסדרים את שיטת העבודה: brainstorming לאפיון, writing-plans לתוכנית, TDD לפיתוח, debugging שיטתי לאיתור בעיות, ו-verification לפני סיום משימות.
סקילים פעילים בפרויקט
שישה סקילים מסדרים את התהליך: brainstorming להפרדת שכבות, writing-plans לתכנון ממשקים, TDD על תאימות לקוחות דואר, debugging שיטתי למיפוי דמיון מותגי, audit ל-RTL ונגישות, ו-verification אוטומטי לפני שליחה ל-Klaviyo.
מבנה הפרויקט, חלוקת אחריות נקייה
שכבת חילוץ מותג מהאתר של הלקוח, שכבת יצירה עם LLM router שמתחלף בלי לגעת בלוגיקה, ושכבת שילוח ל-Klaviyo דרך REST. frontend על React לבחירת prompt ותצוגה מקדימה. כל שכבה service עצמאי, ניתן להחלפה.
סיכום הקייס סטאדי
מנהל שיווק שעיר על העצים שלו תהליך עיצוב מיילים שאוכל לו שעות ביום, ביקש כלי שיתרגם את הסטייל של החברה ואת הקריאייטיב שלו למיילים שמייצרים מכירות. בנינו לו מערכת שלומדת מותג מהאתר, מייצרת לפי פרומפט, ודוחפת ישירות ל-Klaviyo.
היום הוא מייצר ארבעה עד ששה מיילים בשבוע במקום אחד-שניים, וכמעט לא נדרש למתחזק מיילים חיצוני. הצוות שלו מתמקד באסטרטגיה ובתוכן, לא בהתאמת צבעים בכל מייל מחדש. הזמן שחזר אליו השתלם תוך פחות מחודש.
הלקח: בכל פעם שצוות שיווק מבזבז זמן על אותם פרטים טכניים בכל קמפיין, יש כאן הזדמנות לאוטומציה. הפיתוח לא מחליף את הקריאייטיב, הוא מסיר את החיכוך כדי שתהיה מסביבו זמן יצירה אמיתי.
שאלות ותשובות
האם המערכת מחליפה את העיצוב האנושי?
לא. היא משחררת אותו מעבודה חוזרת. עיצוב מורכב או קונספט יצירתי עדיין דורש אדם, אבל מיילים שיווקיים שגרתיים שעולים פעם בשבוע יכולים להיות אוטומטיים.
מה קורה אם המותג שלי לא נסרק נכון?
אפשר לערוך ידנית את פרופיל המותג: לעדכן צבעים, להחליף לוגו, לכתוב הוראות סטייל מותאמות. ה-AI יכבד את ההגדרות הידניות בכל מייל הבא.
האם אפשר לשלב חברה אחרת באותה מערכת?
כן. כל מותג נשמר כפרופיל נפרד. החלפת מותג היא בחירה בתפריט נפתח. ההיסטוריה שלך פר מותג נשמרת בנפרד.
מה ההבדל בין הכלי הזה לבין Klaviyo Editor?
ה-editor של Klaviyo הוא drag-and-drop ידני. הכלי שלנו מתחיל ממייל מוכן על בסיס פרומפט, ושולח אותו ל-Klaviyo כבסיס. אפשר עדיין לערוך ב-Klaviyo אחרי, אבל מתחילים גבוה יותר.
איך נשמרים נתונים רגישים?
API key של Klaviyo מוצפן ב-.env מקומי, לא נשמר בענן. תכני המיילים נשארים על השרת של הלקוח אם הוא עובד מקומי.
האם אפשר לחבר ל-Mailchimp או Sendgrid?
הארכיטקטורה תומכת בהוספת ספקים נוספים. כרגע מוטמע רק Klaviyo כי זה מה שהלקוח ביקש, אבל ה-gateway מוכן לעוד.
מה הזמן ההתחלתי להגדרה?
התקנה ראשונית כעשרים דקות: הזנת URL של אתר החברה, אישור פרופיל מותג, חיבור Klaviyo API. אחרי זה כל מייל הוא חמש דקות.
איך מתמודדים עם מובייל?
כל בלוק תוכן responsive. בודקים אוטומטית 320px, 480px, 768px. אפשר לראות preview מובייל לפני שליחה.
האם הכלי תומך באוטומציות, לא רק קמפיינים?
הוא יוצר את המיילים. שילוב באוטומציה (welcome flow, abandoned cart) נעשה בצד של Klaviyo עם המיילים שהכלי שמר כ-templates.
רוצים בונה מיילים חכם לעסק שלכם?
השאירו פרטים ונחזור אליכם לפגישת אפיון. נסביר איך לבנות מערכת שלומדת את המותג שלכם, מייצרת מיילים בלחיצה, ומסתנכרנת עם ספק הדיוור שאתם משתמשים בו.
