איך להעתיק עיצוב של אתר לקלוד קוד עם skillui

מה זה skillui ומה הוא מוציא מאתר?

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

skillui סוגר את הפער הזה. זה כלי שורת פקודה בקוד פתוח, שנכנס לאתר, קורא את ה-HTML וה-CSS שלו, ושומר את מה שמצא כקבצים שקלוד קוד יודע לקרוא. לפי ה-README, הוא עובד בניתוח סטטי בלבד: בלי AI, בלי מפתחות API ובלי ענן. כלומר הריצה עצמה לא עולה כסף.

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

• DESIGN.md: הצבעים, הטיפוגרפיה, המרווחים, הרדיוסים והרכיבים של האתר.
• ANIMATIONS.md: אנימציות CSS, אנימציות שקורות בגלילה, וזיהוי של ספריות כמו GSAP, Lottie ו-Three.js.
• INTERACTIONS.md: מה משתנה כשמעבירים עכבר או לוחצים על רכיב, עם המצב שלפני ואחרי.
• LAYOUT.md ו-COMPONENTS.md: איך העמוד בנוי: גריד, עמודות, ודפוסים שחוזרים.
• screens/scroll: שבעה צילומי מסך לאורך הגלילה, מהחלק העליון ועד הפוטר.
• SKILL.md ו-CLAUDE.md: הקבצים שקלוד קוד קורא כשפותחים אותו בתיקייה, וגם קובץ .skill ארוז שמכיל הכל.

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

איך מתקינים את skillui?

צריך Node.js בגרסה 18 ומעלה. אם אין לכם, מורידים מ-nodejs.org ומתקינים כמו כל תוכנה. אחר כך, בטרמינל:

npm install -g skillui

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

npm install playwright
npx playwright install chromium

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

תבדוק אם מותקן אצלי Node.js בגרסה 18 ומעלה.
אם כן, תתקין את החבילה skillui מ-npm, ואת Playwright עם הדפדפן chromium, לפי ההוראות ב-README של github.com/amaancoderx/skillui.
אחרי כל פקודה תגיד לי במילים פשוטות מה היא עשתה.

איך שולפים את העיצוב של אתר שאתם אוהבים?

פקודה אחת, עם הלינק לאתר. ככה זה נראה על Linear, הדוגמה מה-README:

skillui --url https://linear.app --mode ultra

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

בסרטון ההדגמה הרשמי, הריצה על notion.com במצב ultra החזירה 20 צבעים, 3 משפחות פונטים, גריד בסיס של 4 פיקסלים, 74 אנימציות, 36 keyframes ו-7 צילומי גלילה. המספרים ישתנו מאתר לאתר, אבל זה נותן מושג כמה מידע קלוד קוד מקבל לעבוד איתו.

איך קלוד קוד בונה עמוד מהעיצוב ששלפתם?

נכנסים לתיקייה שנוצרה ופותחים בה את קלוד קוד. לפי ה-README, הוא קורא לבד את CLAUDE.md ו-SKILL.md, ומשם מגיע לכל השאר:

cd linear-design && claude

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

תקרא את SKILL.md, את DESIGN.md ואת כל הקבצים בתיקייה references, ותסתכל על הצילומים ב-screens/scroll.
תבנה לי דף נחיתה אחד בקובץ index.html באותה שפה עיצובית: אותם צבעים, פונטים, מרווחים, כפתורים, מצבי ריחוף ואנימציות גלילה.
התוכן הוא של העסק שלי, לא של האתר המקורי: [שם העסק, מה הוא מוכר, למי, ומה הפעולה שאני רוצה שהגולש יעשה].
האתר בעברית, אז dir="rtl", ובמקום פונט שאין לו עברית תבחר פונט עברי חינמי מגוגל פונטים שהכי קרוב אליו.
בלי לוגו, תמונות או טקסטים מהאתר המקורי.
בסוף תפתח את העמוד בדפדפן ותבדוק שהוא נראה טוב גם ברוחב של טלפון.

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

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

איך שומרים שכל עמוד חדש יישאר במותג שלכם?

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

אם האתר שלכם באוויר, נותנים את הכתובת שלו:

skillui --url https://yoursite.com --mode ultra --name "MyBrand"

אם הקוד של האתר אצלכם במחשב, סורקים את התיקייה. הכלי עובר על קבצי ה-CSS וה-JavaScript ומוציא משתנים, הגדרות Tailwind ודפוסי רכיבים:

skillui --dir ./my-app

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

כל עמוד חדש או שינוי עיצוב באתר נעשה לפי התיקייה mybrand-design: קודם SKILL.md ו-DESIGN.md, ואנימציות לפי references/ANIMATIONS.md.
לא ממציאים צבע, פונט או כפתור שלא מופיעים שם. אם חסר משהו, שואלים אותי.

על CLAUDE.md ואיך קלוד קוד זוכר הוראות בין שיחות יש מדריך נפרד על הזיכרון של קלוד קוד.

במה skillui שונה מ-DESIGN.md ומשכפול של אתר?

יש באתר כמה מדריכים שנוגעים באותו עולם, וכל אחד פותר משהו אחר:

• קבצי DESIGN.md מוכנים מגיעים מספריה של מותגים מוכרים. מהיר, אבל רק לאתרים שמישהו כבר ניתח, ובלי אנימציות. skillui מייצר את הקובץ מכל לינק שתבחרו, כולל האתר שלכם.
• שכפול סקשן עם Playwright מעתיק חלק ספציפי מעמוד. skillui לא מעתיק עמוד, הוא שולף את השפה העיצובית כדי שתבנו בה דברים חדשים.
• Google Stitch מעצב בדפדפן מתוך תיאור או השראה. skillui עובד מקומית, ומעביר את התוצאה ישר לקלוד קוד.

אפשר גם לשלב: לשלוף עם skillui, ואז לעבור על העמוד עם Impeccable כדי ללטש פרטים שהעין עוד תופסת.

חשוב לדעת לפני שמתחילים

• השראה, לא העתק. מעולה ללמוד מאתר שאתם אוהבים, אבל עמוד שנראה אחד לאחד כמו מותג אחר, עם הלוגו, הטקסטים או התמונות שלו, יכול לבלבל לקוחות ולהסתבך בזכויות יוצרים וסימני מסחר. תשתמשו בתוכן ובלוגו שלכם. זה לא ייעוץ משפטי.
• פרויקט קטן וצעיר. נכון ל-31 באוקטובר 2026 למאגר יש 261 כוכבים בגיטהאב, הוא נפתח באפריל 2026, והעדכון האחרון לקוד בגיטהאב היה ב-14 באפריל 2026. ב-npm הגרסה האחרונה היא 1.3.4, עם כ-17,600 הורדות בחודש האחרון. אין מאחוריו חברה, אז אל תבנו עליו תהליך קריטי.
• רישיון. ה-README ועמוד החבילה ב-npm מציינים MIT, אבל אין קובץ רישיון במאגר עצמו.
• זה קוד שרץ אצלכם. כל חבילת npm מריצה קוד על המחשב שלכם. כדאי להתקין אותה במחשב עבודה ולא במחשב עם מידע רגיש, ולשים לב שמצב --repo מוריד קוד של מישהו אחר. אנחנו לא הרצנו את הכלי בעצמנו, והמדריך מבוסס על ה-README ועל ההדגמה הרשמית.
• מצב ultra צריך Playwright. זה דפדפן Chromium שלם שיורד למחשב, וזה יכול לקחת כמה דקות בהתקנה הראשונה.
• אתרים שחוסמים בוטים. אתרים מאחורי התחברות או הגנה כמו Cloudflare עלולים להחזיר תוצאה חלקית. מה שלא נטען בדפדפן, הכלי לא יראה.
• עברית. רוב האתרים שתשלפו כתובים באנגלית ומשמאל לימין, והפונטים שלהם בלי עברית. תזכירו לקלוד קוד בכל פרומפט: dir="rtl" ופונט עברי.
• עלות. skillui עצמו חינמי ולא צריך מפתח API. מה שעולה זה השימוש בקלוד קוד, לפי המנוי שלכם.