frontend-design-pro إضافة لـ Claude Code تؤخّر كتابة الكود حتى تُحسم قرارات التصميم: تسألك عن مشروعك وجمهوره، وتجمع مراجع بصرية من مواقع تحددها أو من Dribbble، وتثبّت الاتجاه في لوحة إلهام (moodboard) توافق عليها، ثم تختار معك الألوان والخطوط، وبعدها تكتب الصفحة وتراجعها بحثًا عن علامات التصميم المولّد آليًا، كالشارة الصغيرة فوق العنوان، والتدرّج البنفسجي إلى الأزرق.
الأوامر الثلاثة
/frontend-design-pro:design: معالج من ثماني مراحل يبدأ بخمسة أسئلة: ماذا تبني، وسياق المشروع، والجمهور، ولون الخلفية، ومصدر الإلهام، ويكتفي بثلاث جولات تعديل للوحة الإلهام./frontend-design-pro:analyze-site: يفتح الرابط في المتصفح، ويلتقط الصفحة لسطح المكتب ثم بمقاس 375×812، ويكتب تقريرًا بالألوان وقيم hex تقريبية، والخطوط، والتخطيط، وما يستحق النقل وما يُترك./frontend-design-pro:review: يفحص ملف HTML في ثلاثة جداول: ستة أنماط مكررة، ومبادئ التصميم، والإتاحة من رابط التخطي إلى حالات التركيز وprefers-reduced-motion، ثم يعطي درجة ويعرض أربعة خيارات للإصلاح.
المهارات الست
- design-wizard: ينسّق المراحل، ومعه أربعة مراجع: ثلاثة عشر مبدأً للتصميم، وأحد عشر أسلوبًا بصريًا بالكود منها Neobrutalism وBento Grid، وعشرة أنماط مكررة مع بدائلها، ودليل إتاحة وفق WCAG.
- trend-researcher: يتصفح الرائج في Dribbble، أو Awwwards وBehance إن تعذّر، ويكتب تقرير اتجاهات.
- inspiration-analyzer: يحلل كل رابط على حدة ويلخّص ما تشترك فيه المواقع.
- moodboard-creator: يكتب اللوحة بالألوان والخطوط وكلمات المزاج، ويعدّلها بملاحظاتك حتى تعتمدها.
- color-curator: يعرض لوحات Coolors الرائجة أو ثماني عشرة لوحة محفوظة، ويوزّع الألوان بقاعدة 60-30-10، ويكتبها إعدادًا لـ Tailwind ومتغيرات CSS.
- typography-selector: يختار من Google Fonts أو من ثنائيات جاهزة مثل Fraunces مع Outfit، ويولّد رابط الاستيراد.
مثال: البدء من موقع يعجبك
يضرب README الأصلي مثلًا بالأمر /frontend-design-pro:analyze-site https://linear.app: يزور Claude الموقع ويلتقط لقطات شاشته، ويسلّمك تقريرًا بأقسام ثابتة منها Color Palette وKey Takeaways. وإن شغّلت المعالج بعده واخترت «Provide URLs to analyze»، فملف design.md يوجّهه إلى بناء لوحة الإلهام مما استخرجه من روابطك.
التثبيت وما يلزمك
- فك الضغط في مجلد ثابت، وشغّل
claude --plugin-dir "PATH/TO/EXTRACTED/plugin"بمسارك الفعلي، فتُحمَّل الإضافة للجلسة الحالية فقط. - للتثبيت الدائم من المستودع مباشرة:
/plugin marketplace add davepoon/buildwithclaudeثم/plugin install frontend-design-pro@buildwithclaude. - التصفح يحتاج إضافة Claude in Chrome، ومن دونها يطلب لقطات شاشة أو وصفًا، ويعتمد اللوحات والثنائيات المحفوظة.
- أرفقتُ دليلًا عربيًا لخطوة التحميل، وفهرسًا بمسار كل أمر ومهارة.
حدود يحسن أن تعرفها
- الملفات مكتوبة للواجهات اللاتينية: القالب يبدأ بـ lang=”en” ولا يذكر RTL أو خطًا عربيًا. لصفحة عربية اطلب dir=”rtl” وخطًا عربيًا صراحةً، ثم افحصها بمهارتَي تدقيق الخطوط العربية ومدقّق واجهات RTL.
- الصفحة تحمّل Tailwind من cdn.tailwindcss.com، وهو بحسب توثيق Tailwind خيار للتطوير؛ لموقع منشور ابنِ ملف CSS.
- ألوان analyze-site تقديرية من لقطات الشاشة، وreview يقدّر التباين من قيم الألوان دون عرض الصفحة، وtrend-researcher دون متصفح يسرد قائمة محفوظة في ملفه، لا نتائج بحث حديث.
- جدول الخطوط البديلة يقترح Inter لأسلوبَي Editorial وCorporate، مع أن الإضافة تعدّه أول خط يُتجنب، فقد يرصده أمر المراجعة.
- الملفات بالإنجليزية كما كتبها أصحابها، ولم أجهّز منها نسخة لـ claude.ai أو Codex، ووصفي هنا مأخوذ من تعليماتها. ولمهارة واحدة تضبط قرارات التصميم دون معالج ولا متصفح، انظر Frontend Design بالعربي.
الترخيص
كتبها مجتمع BuildWithClaude في مستودع buildwithclaude لصاحبه davepoon، بترخيص MIT المرفق نصه، وملفاتها في الحزمة دون تعديل.
