من الفيديو
3 إضافات بتخلّي الـ AI يصمّم متل ديزاينر حقيقي
قبل ما تبني أي موقع أو تطبيق، نزّل هول التلاتة. هون طريقة تثبيت كل وحدة، ومعها prompt جاهز بتلصقه لوكيلك (Claude Code أو Cursor أو Codex) وهو بيكمّل الباقي.
Design skill
Emil Kowalski · MIT
عادةً بالـ vibe coding بتطلع المسافات غلط، والتصميم generic، والألوان بشعة. هيدا الـ skill بيعطي Claude قواعد تصميم متل Apple، فبيصير الـ AI يبني كأنه ديزاينر حقيقي.
التثبيت
npx skills@latest add emilkowalski/skills
أو ألصق هذا لوكيلك
Install Emil Kowalski's design skills with this command:
npx skills@latest add emilkowalski/skills
Then use the emil-design-eng and apple-design skills to review my project's UI: spacing, colors and motion. Propose the fixes and apply them.
Playwright CLI
Microsoft · Apache-2.0
بيعطي Claude Code عيون: بيفتح الـ browser، بياخد screenshots للصفحة اللي عملها، وبيصلّح الغلط قبل ما تشوفه إنت.
التثبيت
npm install -g @playwright/cli@latest
playwright-cli install --skills
أو ألصق هذا لوكيلك
Run my project locally, then use playwright-cli to open the home page and take a desktop and a mobile screenshot. Compare them to what you built, fix anything broken or overlapping, then take new screenshots to confirm.
Transitions.dev
Jakub Antalik · MIT (skill)
المفضّل عندي. مكتبة UI animations جاهزة: menus، buttons، وأكتر بكتير. هالحركات الزغيرة بتخلّي موقعك مختلف عن 99% من المشاريع.
التثبيت
npx skills add Jakubantalik/transitions.dev
أو ألصق هذا لوكيلك
Install the transitions.dev skill with this command:
npx skills add Jakubantalik/transitions.dev
Then find the menus, buttons and modals in my project's UI and add transitions from the library. Keep the motion light and fast, and respect reduced motion.
الـ skill الأساسي ببلاش. في كم حركة بالمكتبة بس للي مشتركين بالـ Pro.
تريد أدوات أكثر؟
كل أداة جديدة تُنشر على قناة تيليجرام أولًا، والدليل كله على الموقع.