اجعل Claude يراجع الـ design الخاص به

ما هذا

قالب مجاني خطوة بخطوة من ريلز طه — الأدوات والـ prompts والروابط بالضبط، مرتّبة لتتابع معها وتُطلق تطبيقك. علّق بالكلمة المفتاحية على الريل ويصلك أيضًا في رسائلك الخاصة.

مرحبًا! 👋 إليك ما وعدتك به:

Claude يبني لك الـ front-end ويقول "انتهيت" — لكنه لم ينظر فعليًا إلى ما بناه. هذه الأدوات تجعل Claude يراجع ويفحص الـ design قبل أن تراه أنت:

1. Web Design Guidelines (Vercel) — skill يفحص الـ UI code الخاص بك وفق الـ Web Interface Guidelines من Vercel (أكثر من 100 قاعدة في الـ accessibility والـ performance والـ UX) ويخبرك أين يضعف الـ design.

🔗الـ Skillhttps://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines 🔗skills.shhttps://skills.sh/vercel-labs/agent-skills/web-design-guidelines 🔗القواعد التي يفحصهاhttps://vercel.com/design/guidelines

npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines

⚠️ إنه يكتب تقريرًا بالمشاكل (قائمة بصيغة file:line) — ولا يغيّر الـ code وحده. اقرأ القائمة، ثم اطلب من Claude إصلاح ما تتفق معه.

2. Image to Code (screenshot-to-code) — أعطه design أعجبك (screenshot لموقع، أو mockup، أو design من Figma) فيحوّله إلى code (HTML/Tailwind، React، Vue…) مع الحفاظ على التفاصيل.

🔗GitHubhttps://github.com/abi/screenshot-to-code 🔗النسخة الـ hostedhttps://screenshottocode.com

إنه app مستقل ومفتوح المصدر، وليس skill لـ Claude Code. تشغيله بنفسك يحتاج API key خاصًا بك (OpenAI أو Anthropic أو Gemini) — خطوات الـ setup في الـ README.

3. Playwright CLI — يسمح لـ Claude بفتح browser حقيقي وأخذ screenshots لما بناه، فيرى الصفحة ويفحص الـ components ونسخة الهاتف، ويكتشف الأخطاء بنفسه.

🔗GitHubhttps://github.com/microsoft/playwright-cli 🔗Playwrighthttps://playwright.dev

npm install -g @playwright/cli@latest
playwright-cli install --skills

بعد ذلك اطلب من Claude: "Open my site with playwright-cli, take screenshots on desktop and mobile, and fix what looks broken."

ليست عندك هذه بعد؟ تحدثت عنها من قبل

4. Taste Skill — يعطي Claude ذوقًا حقيقيًا في الـ design بدل صفحات الـ AI العادية.

🔗GitHubhttps://github.com/Leonxlnx/taste-skill 🔗الموقعhttps://tasteskill.dev

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

5. Awesome DESIGN.md — ملفات DESIGN.md جاهزة (design systems) من brands مشهورة: ضع واحدًا في مشروعك فيبني Claude واجهة تطابقه.

🔗GitHubhttps://github.com/VoltAgent/awesome-design-md 🔗الموقعhttps://getdesign.md

ابنِ ← خذ screenshots بـ Playwright ← افحص بـ Web Design Guidelines ← أصلح. هذه هي الحلقة. 👀

تريد المزيد؟ تقدّم أكثر في فصل Atlas Room على Skool

هذه الصفحة تعطيك الأدوات. أما فصل Skool فيأخذك خطوة بخطوة — دورات وأدلة كاملة لتبني وتبيع تطبيق AI أو SaaS خاصًا بك، بالدارجة، مع درس جديد كل أسبوع.

انضم إلى فصل Skool ←

جديد في vibe coding؟ شاهد ما ستتعلمه ←

🔑NVIDIA

MINIMAX🎥

قوالب مجانية أخرى

تصفّح كل القوالب ←

📜RECIPE

#59

الـ system prompt هو سرّ الـ model

🔥FIREBASE

#60

تطبيق كامل بأدوات Google المجانية

🔑NVIDIA

#61

API keys مجانية لأكبر الـ AI models (build.nvidia.com)

🎥MINIMAX

#63

MiniMax H3: فيديو بالـ AI مع الصوت، على حاسوبك

🔋TRICKS

#64

3 tricks حتى لا يصل Claude Code إلى الـ limit

🎨CANVAS

#65

Open Design: بديل مجاني ومفتوح المصدر لـ Claude Design