Ui
خطة سريرية على ورق غير لامع
shadcn/ui هي ورشة عمل لإنشاء نظام تصميم أحادي اللون: لوحة بيضاء نقية، وأسطح رمادية دافئة ناعمة، وبطاقات ذات نصف قطر كبير موضوعة على حدود دقيقة. الواجهة أحادية اللون بالكامل تقريبًا - نص أسود، أسطح بيضاء، درجات رمادية ثانوية - مع لون أحمر واحد بارز مخصص لحالات الخطأ فقط. تعتمد الطباعة على حيادية جيست الهندسية مع ارتفاع أحرف ضيق على الشاشات، مما يخلق إحساسًا هادئًا يشبه البرمجة، ويبدو أقرب إلى بنية المطورين منه إلى منتج استهلاكي.
صور قليلة - يتألف النظام بالكامل تقريبًا من واجهة المستخدم. لا توجد صور رئيسية أو رسومات توضيحية أو رسومات زخرفية. تُعرض عروض المنتج التوضيحية على شكل نماذج أولية للمكونات (بطاقات، حقول إدخال، أزرار) في شبكة، لتكون بمثابة توثيق ومحتوى مرئي في آن واحد. الأيقونات عبارة عن خطوط هندسية رفيعة (مستوحاة على الأرجح من Lucide) بسماكة 1.5-2 بكسل باللونين #0a0a0a أو #737373، وتُستخدم باعتدال كإشارات وظيفية. اللغة البصرية هي مكونات واجهة المستخدم نفسها - تعمل الصفحة كدليل تصميم حي، حيث يمثل كل عنصر مرئي عنصر تصميم مرئي.
لوحة الألوان
حيادي
- Canvas
#f5f5f5— خلفية الصفحة، تعبئة سطحية هادئة، أزرار إضافية. - Paper
#ffffff— أسطح البطاقات، والخلفيات المنبثقة، وتعبئة الأزرار الرئيسية - Surface Alt
#fafafa— خلفية الشريط الجانبي، خيار البطاقة غير المزعجة، حالة الخمول لحقل الإدخال. - Ink
#0a0a0a— النص الرئيسي، والعناوين، وتسميات الأزرار، ومخططات الأيقونات. - Ink Soft
#171717— صور خلفية للأزرار مع تعبئة، ونص إضافي على الأسطح الفاتحة. - Mid Gray
#737373— يتم كتم النص الرئيسي، والنص البديل، والتسميات المساعدة، وتعبئة الأيقونات في حالة السكون.
الطباعة
من 12 إلى 48 بكسل · 8 خطوات
- Geist — الاستبدال: Inter · الخطوط العريضة 400, 500, 600 · جميع نصوص واجهة المستخدم - نص أساسي بوزن سطر 14 بكسل/400، وعناوين بوزن سطر 24-48 بكسل/600، وأزرار بوزن سطر 13-14 بكسل/500. تُضفي أشكال حروف خط Geist الهندسية ووزن الخط الموحد طابعًا محايدًا على أدوات المطورين؛ ويضمن وزن السطر 600 مع تباعد أحرف 48 بكسل وتباعد أحرف -0.05em عناوين واضحة وواثقة تبدو مدروسة بعناية وليست مُعدّلة بشكل عشوائي.
الفترات والشكل
| غاية | معنى |
|---|---|
| كثافة | كثيف |
| الخطوة الأساسية | 8px |
| نصف قطر الزر | 18px |
| نصف قطر البطاقة | 24px |
| الظلال | لا - حدود بدلاً من الظلال |
| بين الأقسام | 48-80px |
| عرض الصفحة | 1280px |
سيقوم الذكاء الاصطناعي ببناء موقعك الإلكتروني بأسلوب Ui وتعبئته.
- املأ حسابك بالمنتجات والمنشورات عبر الرابط - Instagram ، TikTok ، Facebook.
- انقل المحتوى من موقعك القديم - ما عليك سوى تحديد العنوان.
- تصميم عصري على أفضل محرك: React ( Next.js) مع عرض الخادم وتحسين محركات البحث بشكل جاهز للاستخدام.
- تحسين محركات البحث المؤتمت بالكامل لنتائج البحث وتوصيات الشبكة العصبية.
أنماط مشابهة
- Ventriloc — مرصد تحريري للبيانات على ورق دافئ - جمرة برتقالية وحيدة تسلط الضوء على دقة اللون الأحادي
- Geniestudio — دفتر ملاحظات ناعم مناسب لضوء النهار - من النوع ذي الهوامش الواسعة وخط قلم سميك واحد
- xAI — لابرادور كريمي دافئ مع حبة سوداء
- Cal — عملية أحادية اللون، ونهج إنساني. نظام يعطي الأولوية للوضوح والوظائف من خلال لوحة ألوان صارمة بالأبيض والأسود، ولكنه يلطفها بخطوط ودية وأشكال دائرية.
- Scale — مختبر تصوير عالي الجودة بمستوى المتاحف، بالإضافة إلى مشروع تقني
- Contractbook — عقود من ورق كريمي اللون تحت سماء زرقاء داكنة
- AutoSend — استوديو حجري مريح بإضاءة أرجوانية واحدة - حيث تتعايش عناوين ذات حروف مزخرفة ودعوات عمل زرقاء زاهية في مساحة هادئة بيضاء تقريبًا.
- Air — منحوتة "سماء منتصف الليل من خلال الزجاج"
- SpatialChat — نبض أرجواني على ورق أبيض
- Squarespace — معرض الصور السينمائية بالأبيض والأسود
- Giga — أفق منتصف الليل فوق حجر الأوبسيديان المتجمد
- Supabase — محرر أكواد في منتصف الليل بنقطة خضراء فسفورية - نبضة لونية واحدة على بحر من غبار الفحم