כיצד בינה מלאכותית יוצרת אתר וורדפרס שלם ב-2 דקות

בכל פעם שמישהו מקליד תיאור עסק ב-PAGEnza ולוחץ על 'צור', משהו מורכב למדי קורה ברקע — תוך כ-90 שניות. פוסט זה מסביר בדיוק מה זה.

הבעיה עם תבניות

רוב בוני האתרים מבוססי בינה מלאכותית עובדים כך: הם בוחרים תבנית, מחליפים את הטקסט שלכם וקוראים לזה "נוצר על ידי בינה מלאכותית". התוצאה נראית כמו כל אתר אחר שנבנה בפלטפורמה הזו.

PAGEnza עובד אחרת. אין תבניות. כל אתר מתחיל מבד ריק של Gutenberg ונבנה אלגוריתמית מתוך סט של כללי עיצוב שאנו מכנים מנדט העיצוב.

מהו מנדט העיצוב?

מנדט העיצוב הוא הנחיה מובנית — כ-8,000 טוקנים בערך — המתארת כל החלטה ויזואלית ומבנית עבור אתר ספציפי. הוא נבנה בפייתון לפני כל קריאת בינה מלאכותית, בהתבסס על הקלט שלכם.

הוא מכיל שישה חלקים:

חלק א' — זהות מותג: תעשייה, שם עסק, טון (למשל "מקצועי" לעומת "שובב"), קהל יעד.

חלק ב' — מערכת צבעים: פלטת 4 צבעים (דיו, רקע1, רקע2, הדגשה) שנוצרה אלגוריתמית ואומתה מול כללי ניגודיות WCAG AA. כל פלטה נבדקת עם מתמטיקה אמיתית של בהירות — לא ניחושים.

חלק ג' — טיפוגרפיה: שלישיית גופנים (כותרת / גוף / הדגשה) שנבחרה מתוך 80+ גופנים של Google, מסוננת לפי ארכיטיפ תעשייתי ומאומתת ככוללת תמיכה בתווים latin-ext.

חלק ד' — תוכנית פריסה: מבנה העמוד — אילו חלקים מופיעים, באיזה סדר, ובאיזו גרסה (למשל גיבור עם תמונה לכל הרוחב לעומת גיבור עם פריסה מפוצלת).

חלק ה' — מגבלות עיצוב: סגנון רדיוס פינות (חד / רך / מעוגל), צורות מפרידי חלקים, טיפול בתמונות, מערכת רווחים.

חלק ו' — כללי תוכן: איזה טקסט מגיע לאן, כיצד כותרות בנויות, אילו קריאות לפעולה מופיעות.

כיצד נוצרות פלטות צבעים

צבע הוא המקום שבו רוב כלי הבינה המלאכותית נכשלים. בקשה מ-LLM לבחור צבעים נותנת לכם קודי הקס אקראיים שאולי נראים בסדר בנפרד אך נכשלים במבחני נגישות — או פשוט נראים גנריים.

אנו נוקטים בגישה שונה. מערכת הפלטות שלנו עובדת כך:

1. בהתבסס על התעשייה והארכיטיפ שלכם (למשל "יוקרתי", "נועז", "ארצי"), אנו בוחרים מתוך 20 קבוצות פלטות שעברו ביקורת מוקדמת
2. בתוך כל קבוצה, אנו בוחרים פלטה שבה לדיו יש ניגודיות של ≥4.5:1 מול כל הרקעים
3. אנו מאמתים שלהדגשה יש ניגודיות של ≥3.0:1 מול רקע1 ו-רקע2
4. אנו מבטיחים שלשני צבעי הרקע יש טמפרטורות צבע מנוגדות (אחד חם, אחד קר) כך שחלקים ירגישו מובחנים

אם פלטה נכשלת בכל בדיקה, היא מוחלפת אוטומטית. אין מעורבות של LLM בשלב זה — זה מתמטיקה טהורה.

כיצד מרכיבים בלוקים של Gutenberg

לאחר שמנדט העיצוב מוכן, הוא מועבר ל-Gemini Flash עם הנחיה קפדנית המציינת:

• אילו בלוקים מותרים (רשימת היתרים של כ-40 סוגי בלוקים של Gutenberg)
• תכונות נדרשות עבור כל סוג בלוק
• פורמט JSON מדויק עבור הפלט

הבינה המלאכותית מחזירה JSON גולמי של בלוקי Gutenberg — לא HTML, לא React, אלא סימון בלוקים אמיתי של WP. ה-JSON הזה עובר לאחר מכן מספר מעברי אימות:

1. אימות סכימה — תכונות נדרשות קיימות, אין סוגי בלוקים לא ידועים
2. ניקוי מחלקות CSS — שמות מחלקות שהומצאו מוסרים, מוחלפים במחלקות מערכת העיצוב שלנו
3. מעברי ריפוי — תכונות רווחים מסונכרנות, גרדיאנטים של בלוק כיסוי מנורמלים, מפרידי צורה מוזרקים

התוצאה מועלית ישירות לוורדפרס דרך WP REST API ומופעלת כדף הבית של האתר.

מה הופך כל אתר לייחודי

מספר דברים משתנים בין כל יצירה, אפילו עבור אותה תעשייה:

• פלטת צבעים: 20+ קבוצות, כל אחת עם מספר פלטות
• שלישיית גופנים: 6+ שילובים לארכיטיפ
• סדר וריאציות של חלקים: פריסת גיבור, סגנון סטטיסטיקות, סידור כרטיסי תכונות
• מפרידי צורה: אורגני לעומת גיאומטרי, שינויי אמפליטודה/תדירות
• צורות בועה: עבור תעשיות אורגניות, בועות תמונות וכרטיסים מוקצות באופן אקראי מתוך 12 וריאציות

התוצאה היא ששתי מסעדות פיצה שנוצרו באותו יום יהיו בעלות צבעים שונים, גופנים שונים, פריסות שונות — ושתיהן יהיו תואמות WCAG AA.

מה הלאה

כרגע אנו עובדים על:

• יצירת מספר עמודים — יצירת עמודי /about, /services, ו-/contact מאותו מנדט
• תצוגה מקדימה חיה — לראות את האתר לפני שהוא נפרס לוורדפרס
• העברת סגנון — העלאת צילום מסך של אתר שאתם אוהבים וחילוץ ה-DNA העיצובי שלו

אם תרצו לראות את המערכת בפעולה, המחולל חופשי לנסות — אין צורך בחשבון עבור האתר הראשון.