Claude Code خرافي بالكود، بس بالتصميم لل front-end ضعيف. هذي اربع Skills بتعطي Claude ذوق تصميم حقيقي وبتخليه يبني UI نظيف ويراجع شغله بنفسه قبل ما يوصلك.
Skill UI
تعطيها اي موقع وهي بترجع design system كامل بملف markdown (الوان، fonts، spacing، مكونات) عشان Claude يبني مشروعك بنفس الستايل بالضبط.
أول prompt: خذ اي موقع ستايله يعجبك، اعمل reverse-engineer لل design system كامل وحطه بملف markdown، بعدين ابني صفحتي بنفس الستايل.
Impeccable
تعطي Claude ذوق تصميم مسحوب من references احترافية عشان ال UI يبطل يطلع vibe-coded رخيص.
أول prompt: راجع ال UI اللي عندي وطبق عليه ذوق تصميم احترافي عشان يبطل يبين مصمم بسرعة.
UI/UX Pro Max
تقولها بس ايش تبني، mobile app او SaaS، وهي بتجيب لك احسن palette واحسن fonts واحسن قواعد تصميم تناسب المشروع.
التثبيت:
python3 ~/.codex/skills/.system/skill-installer/scripts/install-skill-from-github.py --repo HYYH-code/ui-ux-pro-max-codex --path skills/ui-ux-pro-max
أول prompt: انا ببني SaaS dashboard، استعمل ui-ux-pro-max وطلع لي افضل color palette وfonts وقواعد تصميم تناسبه.
Playwright CLI
تعطي Claude قدرة يفتح browser وياخذ screenshot للي بناه ويمسك اي خطأ او مخرج مبعثر قبل ما يوصلك انت.
أول prompt: افتح الصفحة اللي بنيتها بال browser، خذ screenshot، وراجعها وامسك اي خطأ او تصميم مكسور قبل ما ترجعه لي. ركبها كلها وبيصير تصميمك بمستوى ثاني بدون ما تفتح Figma.