مقدمة

ما هو النيوبروتاليزم؟#

النيوبروتاليزم هو أسلوب لتصميم المواقع الإلكترونية ظهر في أواخر عقد 2010 كرد فعل على التماثل الذي اتسم به التصميم المسطح والبسيط. ويستمد هذا الأسلوب طابعه الخام من العمارة البروتاليزية — المواد البسيطة، والهيكل الظاهر — ويترجمه إلى الشاشة باستخدام ألوان جريئة وأشكال هندسية مرحة.

يمكنك التعرف عليه من خلال خمس سمات:

• حدود سميكة — كل عنصر محاط بخط، وعادةً ما يكون باللون الأسود الخالص.
• الظلال الحادة — إزاحات مسطحة خالية من التمويه، بحيث تبدو العناصر وكأنها مكدسة فعليًّا على الصفحة.
• ألوان صارخة — تلوينات مشبعة وعالية التباين. لا تدرجات لونية، ولا تأثير «جلاسمورفيزم».
• زوايا مربعة وخطوط سميكة — هندسة تستغل المساحة بدلاً من التنازل عنها.
• التفاعل اللمسي — تظهر الأزرار وهي تنخفض إلى داخل الظلال المحيطة بها عند النقر عليها.

لا شيء يطفو، ولا شيء يتلاشى، ولا شيء يختفي. لقد ساهمت عملية إعادة التصميم التي أجرتها Gumroad في عام 2021 في جعل هذا النمط سائدًا؛ وأصبح اليوم الخيار المفضل للمنتجات التي تسعى إلى إظهار مظهر مدروس بدلاً من المظهر الافتراضي.

ما هو موقع Neobrutalism.com؟#

Neobrutalism.com هو نظام تصميم يضفي طابعًا مميزًا على React — وهو مبني على نفس نموذج السجل المستخدم في موقع shadcn/ui. لا تحتاج إلى تثبيت حزمة: فالأداة shadcn CLI تنسخ شفرة المصدر لكل مكون إلى مشروعك، ومنذ تلك اللحظة تصبح هذه الشفرة جزءًا من كودك.

ماذا يوجد بالداخل:

• المكونات — المجموعة الكاملة، المصممة وفقًا لنمط واحد بحيث تتناسق الحدود والظلال والخطوط مع بعضها البعض.
• الكتل — الأقسام الجاهزة: الأبطال، وجداول الأسعار، وشاشات تسجيل الدخول، ولوحات التحكم.
• القوالب — مواقع كاملة ولوحات إدارة.
• السمات — أداة إنشاء السمات مع إعدادات مسبقة قابلة للمشاركة.
• Figma kit — النظام نفسه المخصص للمصممين.
• MCP الخادم — يمكن لمحررات الذكاء الاصطناعي مثل Claude Code وCursor إضافة المكونات بالاسم.

عنصران أساسيان، أسلوب واحد#

يتم توفير كل مكون في نسختين. اختر إحدى النسختين لكل مكون عند التثبيت — حيث يحدد عنوان URL الخاص بالتثبيت النسخة التي ستحصل عليها:

• Radix UI — العناصر الأولية التي تعمل عليها بالفعل معظم مشاريع shadcn.
• Base UI — العناصر الأولية الأحدث من فريق Radix + MUI.

نفس الشكل، نفس الصادرات، نفس واجهة برمجة التطبيقات (API). وتأتي ميزات إمكانية الوصول — مثل التركيز، ولوحة المفاتيح، وقارئات الشاشة — من العناصر الأساسية الكامنة وراءها.

جربه#

أمر واحد، بدون إعدادات:

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/button.json
npx shadcn@latest add https://neobrutalism.com/r/base/button.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/button.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/button.json
نسخ

ثم انتقل إلى قسم «التثبيت» للحصول على الخطوط ورموز السمات، أو تصفح المكونات أولاً.