מ-Claude Design ל-WordPress: איך ממירים עיצוב לתבנית

איזה פלט Claude Design נתן לכם?

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

מה Claude נתן לכם	מה זה	דרך
ארטיפקט HTML	קובץ .html עצמאי: הקוד, הסגנונות והסקריפטים נמצאים כולם בתוכו.	המאמר הזה. זה כבר HTML שטוח, בדיוק הקלט שהממיר צריך.
ארטיפקט React	רכיב. העמוד מופיע רק אחרי ש-JavaScript רץ, וה-HTML שמסביבו הוא רכיב ריק שהאפליקציה נטענת לתוכו.	המדריך ל-Lovable: אותו סוג קלט, אותו שלב נוסף.

אם אתם לא בטוחים, פתחו את הקובץ והסתכלו בתוך ה-<body>. אם אתם רואים שם את הכותרות והפסקאות שלכם, יש לכם ארטיפקט HTML ואתם במקום הנכון. כשה-body הוא <div> ריק אחד ותגית script, יש לכם את הסוג השני.

ייצוא מ-Claude Design לתיקייה, כולל תמונות

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

לכן ייצאו את העיצוב מ-Claude (הורידו את הארטיפקט), צרו תיקייה ושמרו בה את הקובץ בשם index.html. אם העיצוב מקשר לתמונות שלא נמצאות בתוך הקובץ, שימו אותן לידו, באותם מיקומים יחסיים שהקוד מצפה להם.

mkdir my-site && cd my-site
mv ~/Downloads/artifact.html index.html
mkdir -p images        # if the design uses any images

עמוד אחד, או יותר?

ארטיפקט אחד הוא עמוד אחד, ואתר של עמוד אחד מומר בלי שום בעיה. הוא הופך לעמוד הבית של התבנית. אם אתם רוצים אתר עם עמודי "אודות" ו"צור קשר", בקשו גם אותם מ-Claude ושמרו כל אחד כקובץ .html נפרד באותה תיקייה. שמות הקבצים חשובים: הניתוח קורא אותם ומבין קובץ בשם blog.html או about.html לפי השם שלו.

אם תישארו בחמישה קבצים או פחות, כל ההמרה נכנסת בגרסה החינמית.

מה המחשב שלכם צריך כדי להמיר Claude Design ל-WordPress

גם הדרך הקצרה רצה במחשב שלכם, והדרישות לא מצטמצמות. הדפדפן וה-WordPress הזמני נמצאים שם כדי לבדוק את התוצאה, לא כדי לייצר אותה:

• Node 20 ומעלה ו-Python 3 עם החבילות Playwright ו-Pillow.
• Docker עם הפקודה docker compose. הוא מפעיל WordPress זמני במחשב שלכם, והממיר מתקין שם את התבנית לפני שאתם רואים אותה.
• php-cli, כי כל קובץ PHP עובר בדיקת תחביר לפני שהוא נכנס ל-ZIP.
• jq, curl, bash ו-tar. ה-WordPress שאליו ממירים צריך להיות בגרסה 6.6 ומעלה.

השלב הראשון בודק את כל זה. הוא מפריד בין מה שהוא יכול להתקין בעצמו בתוך התיקיות שלכם לבין מה שאתם צריכים להחליט. הוא לא יתקין לכם Docker אלא אם תבקשו.

הרצת ההמרה מ-Claude Design ל-WordPress

Claude Code

/plugin marketplace add iOSDevSK/html2wp-cc-plugin
/plugin install html2wp@html2wp

python3 -m playwright install chromium

Codex

codex plugin marketplace add iOSDevSK/html2wp-codex-plugin
codex plugin add html2wp@html2wp

אחר כך, מכל מקום, הקלידו:

/html2wp:html2wp

convert ./my-site

נתיב התיקייה הוא כל ההוראה. לא כותבים קובץ הגדרות ולא בוחרים פקודת בנייה. ב-Codex הקלידו convert ./my-site with html2wp. אם אתם מעדיפים לא לעבוד בטרמינל, אפשר לפתוח את אותה תיקייה באפליקציית הדסקטופ html2wp (מדריך עם צילומי מסך).

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

מה הוא מחליט בשבילכם, ועל מה הוא שואל

לפני שהוא מייצר משהו, הוא מודד את הקבצים שלכם. הוא מפרט את העמודים ומזהה אילו חלקים בקוד משותפים ואילו ייחודיים. הוא גם מוצא את ה-design tokens, כל מה שנראה כמו בלוג ואילו עמודים עומדים בפני עצמם. אחר כך הוא רושם מה הוא מתכנן לעשות וממיר לפי התוכנית הזו.

עיצוב שנוצר ב-AI נתקל לעיתים קרובות בשני דברים:

• כל גרסת עיצוב נשמרת. אם לעמודים שלכם אין אותה כותרת עליונה, הוא לא בוחר מנצחת ומשטיח את השאר. במקום זה הוא יוצר חלק תבנית (template part) לכל גרסה ומחבר כל עמוד לזו שהוא באמת השתמש בה. ארטיפקטים מצ'אטים שונים של Claude שונים זה מזה לעיתים קרובות יותר ממה שאתם זוכרים.
• סוגריים מסולסלים בטקסט שלכם שורדים. שלב הביניים משתמש בפורמט דמוי JSX. בלי טיפול, דוגמת JSON או CSS בטקסט שלכם הייתה שוברת את הבנייה או מופיעה בעמוד כ-{. הממיר מטפל בהם, כך שהסוגריים נשארים סוגריים בעמוד.

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

הבדיקה שאי אפשר לדלג עליה

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

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

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

עריכה אחרי ההמרה מ-Claude Design ל-WordPress: תבנית, Visual Edit או בונה עמודים

שני קבצים נוחתים בתיקייה שלכם: קובץ ה-ZIP של התבנית ולידו CONVERSION-REPORT.md. הדוח מפרט מה ההמרה כיסתה, מה הבדיקה מצאה ומה עוד פתוח. מתקינים אותה כמו כל תבנית WordPress (עיצוב ← ערכות עיצוב ← הוספת ערכת עיצוב ← העלאת ערכת עיצוב, Appearance → Themes → Add New → Upload Theme).

התבנית עומדת בפני עצמה. עמודים, בלוג, טפסים, תפריטים, SEO והפניות הם כולם הקוד שלה. היא לא צריכה תוסף כדי לרוץ ואף פעם לא פונה לשרת שלנו. פוסטים בבלוג כותבים בעורך הבלוקים, והטקסט של העמודים נשאר ב-HTML. כדי לערוך עמודים בלי קוד יש שתי אפשרויות: Visual Edit ובונה עמודים.

בונה עמודים הוא בחירה טובה כשהעיצוב הוא רק נקודת התחלה. הוא בחירה גרועה כשהעיצוב הוא מה שאתם מוסרים. אם אתם ממירים כדי שהעיצוב שנוצר ישרוד ב-WordPress, בנייה מחדש שלו כווידג'טים מבטלת את הסיבה שבגללה התחלתם. אבל אם מישהו אחר יעצב מחדש את הפריסה ברבעון הבא, הניסיון שלו עם Elementor עשוי להיות שווה יותר מעיצוב נאמן.

Lite או Pro, אם בוחרים ב-Visual Edit

צ'אט ה-AI רץ על מפתח API משלכם. אנחנו לא מוכרים לכם טוקנים, ואת העלות שלהם אתם מסדירים מול הספק שלכם.

מחיר, ומה ההמרה מסרבת לעשות

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

רישיון Pro מסיר את מגבלת העמודים והופך את ההמרות וההרצות החוזרות לבלתי מוגבלות. הוא גם פותח את השלב שהופך חנות ל-WooCommerce. השלב הזה אף פעם לא חינמי: האפליקציה דוחה לגמרי המרה חינמית של אתר עם חנות, במקום לבצע חצי ממנה. את Pro קונים בחיוב חודשי או שנתי בעמוד המחירים, ובזמן הבטא התשלום הראשון זול ב-30%.

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

מדריך שלב אחר שלב לכל התהליך נמצא בתיעוד של אפליקציית html2wp. אם הארטיפקט שלכם הוא React, המדריך להמרה מ-Lovable ל-WordPress מתאר את הדרך הזו.