הכלים שהופכים את Claude למעצב אתרים.

1. Impeccable

מאת Paul Bakaus · לעמוד הרשמי

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

npx impeccable install

2. Taste Skill

מאת Leonxlnx · לעמוד הרשמי

נותן ל-Claude טעם בעיצוב, עם כללים ברורים, כדי שהאתר לא ייראה כמו כל עמוד AI אחר.

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

לפי העמוד של הכלי, צריך Node 22 ומעלה.

3. הכישורים של Emil Kowalski

מאת Emil Kowalski · לעמוד הרשמי

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

npx skills@latest add emilkowalski/skills

הפקודה מתקינה את כל האוסף שלו. זה שאני משתמש בו הוא emil-design-eng.

4. Frontend Design

התוסף הרשמי של Anthropic · לעמוד הרשמי

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

1. פותחים את Claude Code וכותבים /plugin
2. עוברים ללשונית Discover ומחפשים frontend-design
3. בוחרים ומתקינים. זהו.

5. Playwright MCP

מאת Microsoft · לעמוד הרשמי

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

claude mcp add playwright npx @playwright/mcp@latest

הפקודה שבונה את האתר: מעתיקים ומדביקים

אחרי שהכלים מותקנים, פותחים תיקייה ריקה ב-Claude Code, ממלאים את מה שמסומן בירוק ומדביקים.

תבנה לי אתר של עמוד אחד לעסק.

העסק: [שם העסק, ומה הוא עושה במשפט אחד]
הקהל: [מי הלקוחות, ומה מטריד אותם לפני שהם פונים]
ההבטחה: [דבר אחד שהלקוח מקבל, במשפט אחד]
הפעולה שאני רוצה מהמבקר: [למשל: לשלוח הודעה בוואטסאפ, לקבוע תור]

החלקים בעמוד:
1. פתיחה עם ההבטחה וכפתור לפעולה.
2. מה מקבלים, ב-3 נקודות.
3. איך זה עובד, ב-3 צעדים.
4. [המלצות של לקוחות, אם יש]
5. שאלות נפוצות.
6. סיום עם הכפתור לפעולה.

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

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

בסוף:
1. תפתח את האתר עם Playwright ותצלם מסך במובייל (390 פיקסלים) ובמחשב.
2. תסתכל על הצילומים כמו מעצב קפדן, ותתקן כל מה שנראה לא במקום.
3. תחזור על זה עד שהאתר יעבור ביקורת עיצוב, ורק אז תגיד לי שסיימת.

3 טיפים שעושים את ההבדל

• 1תנו לו תמונות אמיתיות וטקסט אמיתי. תמונה של העסק שלכם ומשפטים שלקוחות באמת אומרים שווים יותר מכל עיצוב.
• 2בקשו 3 כיוונים ובחרו אחד. "תציע לי 3 רעיונות חזותיים שונים לפני שאתה בונה." קל יותר לבחור מאשר לתאר מה רוצים.
• 3תמיד תבדקו בטלפון. רוב הלקוחות שלכם יראו את האתר במסך קטן. מה שיפה במחשב לא תמיד יפה בנייד.

רוצים לראות את האתר מהסרטון?

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