من الفيديو
5 إضافات بتخلّي Claude وحش بالـ web design
الإضافات الخمسة من الفيديو، كلهن ببلاش. هون طريقة تثبيت كل وحدة، ومعها prompt جاهز بتلصقه لوكيلك (Claude Code أو Cursor أو Codex) وهو بيكمّل الباقي.
Taste
Leon Lin · MIT
بيمنع Claude عن الـ UI الـ generic اللي بيطلع كله بيشبه بعضه، وبيعطيه rules أقوى للـ front end design.
التثبيت
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill
أو ألصق هذا لوكيلك
Use the design-taste-frontend skill to redesign the home page of my project. Pick a clear art direction first, avoid the generic AI look (default gradients, same cards everywhere), then build it and check the result in the browser on desktop and mobile.
بدّه Node 22 أو أحدث، ويكون عندك Chrome أو Edge أو Chromium.
Impeccable
Paul Bakaus · Apache-2.0
بيروح أبعد من هيك بكتير: بيعطي Claude design system حقيقي يشتغل عليه، مع live editor، فبتقدر تزبّط كل شي من خلال الـ browser.
التثبيت
npx impeccable install
/plugin marketplace add pbakaus/impeccable
أو ألصق هذا لوكيلك
Use Impeccable on my project: run /impeccable critique on the main pages, then fix the biggest issues with polish and audit. After that start /impeccable live so I can pick elements in the browser and steer the design myself.
Playwright CLI
Microsoft · Apache-2.0
بدل ما تفتح إنت كل صفحة وتشوف إذا كل شي شغّال ومزبوط، Claude بيفتح أكتر من browser وبيعمل test كامل عالـ website.
التثبيت
npm install -g @playwright/cli@latest
playwright-cli install --skills
أو ألصق هذا لوكيلك
Run my project locally, then use playwright-cli to open every page in a desktop and a mobile browser. Click the main buttons and links, take screenshots, and list anything broken, overlapping or off. Fix it, then test again to confirm.
Awesome DESIGN.md
VoltAgent · MIT
بيعطي Claude الـ design system تبع أهم شركات بالعالم، متل Stripe وApple وLinear، فبيبني بنفس الستايل.
التثبيت
npx getdesign@latest add stripe
أو ألصق هذا لوكيلك
Read the DESIGN.md in my project root and rebuild my landing page so it follows it exactly: colors, type, spacing and components. Keep my content, change only the look.
تصفّح كل الشركات على getdesign.md وحطّ اسم الشركة اللي بتعجبك مطرح stripe.
img2threejs
img2threejs · Apache-2.0
بتعطيه صورة عادية، وبيعمل منها 3D model interactive، كله من خلال الكود، وشكله رح يطلع كتير حلو عالـ website تبعك.
التثبيت
npx --yes img2threejs@latest install
npx --yes img2threejs@latest doctor
أو ألصق هذا لوكيلك
Use the img2threejs skill to rebuild the object in this image as a procedural Three.js model: <attach the image>. Then add it to the hero of my website as an interactive 3D scene that the visitor can rotate, and keep it light enough for mobile.
بدّه Node 18 أو أحدث، وGit، وPython 3.10 أو أحدث.
تريد أدوات أكثر؟
كل أداة جديدة تُنشر على قناة تيليجرام أولًا، والدليل كله على الموقع.