@eran_brownstain 01 / 06
Claude
לא יודע לעצב
לבד.
3 סקילים שיתקנו את זה
קלוד · 3 סקילים לעיצוב GUIDE
@eran_brownstain 02 / 06
READ FIRST
Claude לא יודע
לעצב לבד.
תבקשו ממנו דף נחיתה, תקבלו גרדיאנט סגול על לבן, פונט Inter, וכפתור כתום באמצע. זה לא באג. זה ברירת מחדל של מודל שלמד מאלפי אתרים בינוניים.

יש 3 סקילים שמשנים את זה לחלוטין. כל אחד מטפל בהיבט אחר של עיצוב: פלט נקי, תנועה חכמה, וחשיבה לפני קוד. שלבו את שלושתם ותקבלו פלטים ברמה של מעצב בכיר.
Impeccable 01 ✦
Motion Principles 02 ✦
Frontend-Design 03 ✦
קלוד · 3 סקילים לעיצוב 02
@eran_brownstain 03 / 06
SKILL 01
Impeccable:01
CLI נגד AI-slop.
18 פקודות נקיון.
impeccable scan ./src
$ impeccable scan
▸ Scanning 24 design tells...
 • hero.tsx:14 purple gradient on white
 • button.tsx:18 Inter font detected
 • card.tsx:22 bounce easing on hover
 • footer.tsx:55 cramped padding (8px)
✦ 4 design tells caught
 ship blocked. fix or override.
✦ phakavs / impeccable
impeccable
CLI נגד AI-slop של Claude. סורק את הקוד אחרי שClaude כתב, מסמן 24 דפוסים של slop, וחוסם את ה-push.
● JavaScript    ★ 2.1k
18 פקודות שמתקנות את מה שקלוד שלח.
בלי לכתוב את הפרומפט מחדש.
איך מתקינים
$ npm i -g impeccable
$ impeccable init
$ impeccable scan ./src
טיפ פרקטי תוסיפו אותו ל-pre-commit hook. כל גרדיאנט סגול ש-Claude מנסה לדחוף נחסם אוטומטית.
קלוד · 3 סקילים לעיצוב 03
@eran_brownstain 04 / 06
SKILL 02
Motion Principles:02
תנועה של מעצב.
לא של גוגל סלידים.
motion-audit · App.tsx
// 3 PRINCIPLES · 1 AUDITOR
RAUNO cubic-bezier overshoot → smooth
EMIL duration 600ms → 240ms (snappier)
PASQUALE stagger children by 28ms ship it.
 
✦ fixes applied
✦ cartoonteens / design-motion-principles
design-motion-principles
סקיל אחד שמאחד את הגישה של Rauno, Emil ו-Pasquale. התוצאה: תנועה שמרגישה מכוונת.
● TypeScript    ★ 1.7k
אנימציות של Claude מרגישות אקראיות.
עם הסקיל הזה, כל תנועה מכוונת.
איך מתקינים
$ git clone cartoonteens/design-motion-principles
$ cp -r . ~/.claude/skills/motion-principles
$ claude "/motion-principles audit"
טיפ פרקטי תריצו לפני שדוחפים PR עם אנימציות. ברוב המקרים תגלו ש-duration שלכם כפול ממה שצריך.
קלוד · 3 סקילים לעיצוב 04
@eran_brownstain 05 / 06
SKILL 03
Frontend-Design:03
הסקיל הרשמי של Anthropic.
תתקינו אותו ראשון.
FRONTEND-DESIGN · OUTPUT
Distinct. Opinionated. Designed.
Real typography. Real palettes. Real motion.
Zero purple gradients on white. Zero Inter.
✦ anthropics / skills
skills
הסקיל הרשמי של Anthropic. מלמד את Claude לחשוב על עיצוב לפני שהוא כותב קוד.
● Markdown    ★ 14.2k
נבנה ע"י האנשים שבנו את Claude.
תתקינו אותו ראשון.
איך מתקינים
$ git clone anthropics/skills
$ cp -r skills/frontend-design ~/.claude/skills/
$ claude "/frontend-design [page]"
טיפ פרקטי אל תפעילו אותו אחרי שClaude כתב. תפעילו אותו במקום הפרומפט הראשון. ההבדל בפלט דרמטי.
קלוד · 3 סקילים לעיצוב 05
@eran_brownstain 06 / 06
Claude
רוצים ללמוד
איך באמת בונים?
הצטרפו למועדון
במועדון אני מלמד שלב-אחרי-שלב
איך לחבר את כל הסקילים האלה ל-workflow אחד.
קלוד · 3 סקילים לעיצוב END ←