בניתי את האתר הזה - vadim.co.il - עם שלושה כלי AI שמשנים את הדרך שבה אני מפתח: Antigravity IDE (הגרסה הבאה של VS Code עם agents), Claude Design (פרוטוטייפ UI שקורא את הקוד שלך), ו-Stitch (text-to-UI של Google). הפרויקט כולל תבנית וורדפרס (WordPress) מותאמת אישית, מערכת ניהול תפריט, Contact Form 7, עמודי שירותים ובלוג. מתחילים.
שלושת הכלים שבניתי איתם
ANTIGRAVITY IDE
IDE חדש של Google מבוסס VS Code, מופעל על ידי Gemini 3 ותומך ב-Claude Sonnet 4.5 ו-GPT. מריץ כמה AI agents במקביל - agent אחד כותב קוד, שני בודק, שלישי מחפש תיעוד.
חינמי · Public Preview
CLAUDE DESIGN
כלי פרוטוטייפ של Anthropic המבוסס Claude Opus 4.7. קורא את ה-codebase שלך, מבין את ה-design tokens, ומייצר UI תואם. מייצא HTML, PDF, Canva.
Claude Pro/Max נדרש
STITCH BY GOOGLE
Canvas עיצוב AI של Google (Gemini 3). מתאר ממשק במשפט → מקבל design system מלא + קוד מוכן לייצוא. Voice interaction לעריכה בזמן אמת.
חינמי · stitch.withgoogle.com
CLAUDE CODE CLI
כלי שורת הפקודה של Anthropic לפיתוח עם Claude. קורא קבצים, עורך, מריץ פקודות, ומנהל git. הכלי שבו בניתי את כל הקוד בפועל.
npm install -g
ה-Workflow מרעיון לקוד עובד
שלב 1 - התקנת Antigravity IDE
Antigravity הוא IDE מבוסס VS Code - אם אתם משתמשים ב-VS Code, ההגדרות והתוספים שלכם עוברים אוטומטית.
היכנסו ל-antigravity-ide.com והורידו לפי המערכת - macOS, Windows או Linux. הקובץ הוא installer סטנדרטי.
בהפעלה הראשונה Antigravity שואל אם לייבא מ-VS Code. לחצו Yes - התוספים, ה-keybindings וה-settings שלכם עוברים מיידית.
ב-Agent Manager (Ctrl+Shift+A) בחרו Claude Sonnet 4.5 כ-LLM. הזינו את ה-Anthropic API key שלכם:
Model Provider: Anthropic
Model: claude-sonnet-4-5
API Key: sk-ant-api03-...
Max Agents: 4
פתחו את תיקיית הפרויקט - במקרה שלי /Applications/MAMP/htdocs/vadim.co.il. Antigravity קורא את CLAUDE.md אוטומטית כהקשר לכל agent.
שלב 2 - התקנת Claude Code CLI
Claude Code הוא כלי שורת הפקודה של Anthropic - הוא מה שמריץ Claude ישירות מה-terminal ויכול לעבוד על קבצים, לבצע פקודות ולנהל את הפרויקט.
# דרישה מוקדמת: Node.js 18+
node --version
# התקנה גלובלית
npm install -g @anthropic-ai/claude-code
# אימות
claude auth login
# → פותח דפדפן לאישור Anthropic account
# בדיקה
claude --version
שלב 3 - התקנת WP-CLI
WP-CLI מאפשר לנהל WordPress מה-terminal. עם Claude Code + WP-CLI אפשר לבצע כל פעולת WordPress - יצירת תפריטים, עדכון תוכן, התקנת תוספים - ללא כניסה לממשק האדמין.
# הורדה
curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
# בדיקה
php wp-cli.phar --info
# הפיכה לפקודה גלובלית
chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp
# בדיקה
wp --version
# מציאת ה-socket של MAMP
ls /Applications/MAMP/tmp/mysql/
# → mysql.sock mysqlx.sock
# שימוש ב-MAMP PHP + socket בכל פקודת WP-CLI
MAMP_PHP=/Applications/MAMP/bin/php/php8.3.28/bin/php
$MAMP_PHP
-d mysqli.default_socket=/Applications/MAMP/tmp/mysql/mysql.sock
/usr/local/bin/wp
--path=/Applications/MAMP/htdocs/vadim.co.il
option get siteurl
# → https://vadim.co.il
שלב 4 - קובץ CLAUDE.md לפרויקט
זהו אחד הדברים החשובים ביותר. CLAUDE.md הוא קובץ שמסביר ל-Claude (ו-Antigravity) מה הפרויקט, מה ה-stack, ומה החוקים. כל agent שמתחיל עבודה קורא אותו ראשון.
# CLAUDE.md
## Environment
- Stack: WordPress 6.x on MAMP, PHP 8.x, MySQL
- Local URL: http://localhost:8888/myproject/
- DB: MySQL, database: mydb, user: root
## Active Theme
- Theme: my-theme (custom)
- Entry: front-page.php
- Styles: assets/css/theme.css
- JS: assets/js/main.js
## Architecture
- All text via get_theme_mod() - never hardcoded
- Nav menus: registered + managed via WP-CLI
## SEO Rules
- Every page/post needs post_excerpt (meta description)
- JSON-LD schema required on all service pages
- H1→H2→H3 hierarchy - never skip levels
שלב 5 - עיצוב עם Stitch ו-Claude Design
Stitch - מרעיון ויזואלי ראשוני
Stitch של Google הוא נקודת הפתיחה לעיצוב. פותחים stitch.withgoogle.com, מתארים את הדף, ומקבלים design system + קוד.
Create a professional portfolio site for a senior software engineer.
Style: editorial, warm cream palette, serif typography.
RTL Hebrew layout. Dark/light mode toggle.
Sections: hero with typing animation, services grid,
projects portfolio, testimonials, contact form.
Design system: Frank Ruhl Libre serif, JetBrains Mono,
accent color #c75d3d terracotta.
Stitch מייצר design tokens, component library ו-HTML/CSS. מייצאים → שומרים כ-reference screenshots בתיקיית _check/ בפרויקט.
Claude Design - יישום על ה-Codebase
עם ה-screenshots מ-Stitch, נכנסים ל-claude.ai/design:
Claude Design מאפשר להעלות קבצי CSS - מעלים את theme.css עם ה-design tokens הקיימים. Claude מבין את הצבעים, הפונטים, והרכיבים.
מעלים את ה-reference screenshot ואומרים: "implement this section using our existing CSS variables". Claude Design מייצר HTML תואם לחלוטין לעיצוב.
מייצאים את הקוד → מעבירים ל-Antigravity → agent מתרגם ל-PHP template WordPress.
Take this HTML from Claude Design export and
convert it to a WordPress PHP template section.
Use get_theme_mod() for all text content.
Follow the patterns in front-page.php.
RTL Hebrew, use existing CSS classes.
שלב 6 - פיתוח בפועל: מה Claude Code עשה
אלה הדוגמאות הספציפיות מהפרויקט הזה שבהן הכלים חסכו שעות:
תפריט ניווט דינמי
במקום לכתוב ידנית ב-header.php - Claude Code יצר Walker class מותאם ושלח WP-CLI commands ליצירת התפריט עם כל הפריטים:
Register a nav menu in functions.php, create a custom
Walker class that renders:
<li><a><span>Hebrew title</span>
<span class="slug">/english</span></a></li>
Use item description for the slug text.
Then use WP-CLI to create the menu and add all items.
Contact Form 7 אינטגרציה
Contact Form 7 לא עיבד תגים עם autocomplete: attribute - Claude Code זיהה את הבעיה, הסיר את ה-attributes הבעייתיים, ועדכן את הטופס ב-DB דרך wp eval-file:
wp eval-file setup-cf7.php
--path=/Applications/MAMP/htdocs/vadim.co.il
# → CF7 form created. ID: 24
# → Shortcode:
עמודי שירותים עם SEO
כל עמוד שירות נבנה עם: cards grid, JSON-LD schema, post_excerpt כ-meta description, FAQ accordion - הכל בפקודה אחת ל-Claude Code.
שלב 7 - אבטחת אתר וורדפרס (WordPress): 10 כללים שלא לדלג עליהם
WordPress היא מטרה מספר 1 לתוקפים ברשת. הנה הצעדים שאני נוקט בכל פרויקט לפני העלייה לאוויר:
wp-config.php מחוץ ל-web root
העבירו את
wp-config.php תיקייה אחת מעל public_html. WordPress מוצא אותו אוטומטית.
Disable XML-RPC
XML-RPC משמש לברוט-פורס ו-DDoS amplification. השביתו ב-
.htaccess אם לא צריכים אותו.
הרשאות קבצים נכונות
wp-config.php → 400. תיקיות → 755. קבצים → 644. uploads/ → 755 בלבד, ללא PHP execution.
שנו את ה-username מ-"admin"
99% מניסיונות הברוט-פורס מנסים username "admin". צרו משתמש חדש עם שם אחר ומחקו את admin.
פלאגינים לא מעודכנים
70% מהפריצות ל-WordPress הן דרך פלאגינים עם CVE ידועים. עדכנו שבועית, מחקו פלאגינים שלא בשימוש.
debug mode ב-production
WP_DEBUG = true ב-production חושף paths, database names ו-credentials ב-error messages לכל גולש.
// Disable file editing from admin panel
define( 'DISALLOW_FILE_EDIT', true );
// Limit login attempts (or use plugin)
define( 'WP_AUTO_UPDATE_CORE', true );
// Force HTTPS
define( 'FORCE_SSL_ADMIN', true );
// Disable debug in production
define( 'WP_DEBUG', false );
define( 'WP_DEBUG_LOG', false );
define( 'WP_DEBUG_DISPLAY', false );
# Disable XML-RPC
<Files xmlrpc.php>
Order Deny,Allow
Deny from all
</Files>
# Block wp-config.php access
<Files wp-config.php>
Order Allow,Deny
Deny from All
</Files>
# Prevent PHP execution in uploads
<Directory /wp-content/uploads>
<Files *.php>
Deny from All
</Files>
</Directory>
# Hide WordPress version
<IfModule mod_headers.c>
Header unset X-Powered-By
</IfModule>
מה השגנו
חיסכון בזמן
פרויקט שהיה לוקח 3-4 שבועות של כתיבה ידנית - הושלם ב-ימים ספורים עם AI agents.
פוקוס על ארכיטקטורה
במקום לכתוב boilerplate - ביליתי את הזמן בהחלטות ארכיטקטוניות שחשובות לטווח הארוך.
Iteration מהיר
שינוי עיצוב שהיה לוקח שעה - עם Claude Design + Antigravity נעשה בדקות.
שאלות נפוצות
מה זה Antigravity IDE?
סביבת פיתוח (IDE) של Google מבוססת AI, שמשלבת סוכני קוד אוטונומיים ישירות בעורך. היא מאפשרת לתאר משימה בשפה טבעית והסוכן מתכנן, כותב ומריץ את הקוד - מתאימה במיוחד לפיתוח מהיר של אתרים ומערכות.
האם אפשר באמת לבנות אתר וורדפרס (WordPress) שלם עם AI?
כן - אבל עם הסתייגות. כלי AI כמו Claude Code בונים את רוב הקוד מהר מאוד, אך נדרשת מומחיות אנושית כדי לוודא שהתוצאה מאובטחת, מהירה ו-production-ready. AI מאיץ את העבודה, לא מחליף את שיקול הדעת.
מה ההבדל בין Claude Code ל-GitHub Copilot?
Copilot משלים שורות קוד תוך כדי הקלדה. Claude Code הוא סוכן CLI שמבצע משימות שלמות מקצה לקצה - קורא קבצים, מריץ פקודות WP-CLI, יוצר ועורך קבצים ומתקן באגים - לא רק השלמה אלא ביצוע.
האם אתר שנבנה עם AI מאובטח?
לא אוטומטית. AI יכול לייצר קוד עם פרצות אם לא מנחים אותו נכון. לכן המדריך כולל 10 כללי אבטחת WordPress - הקשחה, הרשאות, ועדכונים - שמיישמים מעל הקוד שה-AI יצר.
האם צריך לדעת לתכנת כדי להשתמש בכלים האלה?
כדי להתנסות - לא. כדי לבנות אתר עסקי שמחזיק בעומס ומאובטח - כן. הכלים מורידים את רף הכניסה, אבל ההבדל בין אתר חובבני לאתר מקצועי הוא עדיין הניסיון של מי שמפעיל אותם.
ודים בנה לנו אתר WordPress בעזרת כלי ה-AI האלה - מהיר להפליא, ובעיקר מאובטח ויציב. הוא ידע בדיוק איפה ה-AI טועה ומה צריך לתקן ידנית. התוצאה מקצועית לגמרי.
מאמרים קשורים: בניית אתר וורדפרס, מתכנת PHP וייעוץ טכנולוגי.
יש לכם פרויקט?
בואו נבנה אותו נכון.
בניית אתרים עם AI צריכה ניסיון כדי שהתוצאה תהיה production-ready.