Nothing Design Skill

لماذا تستخدمه

الميزات الأساسية

لوح ألوان أحادي اللون الصارم (أبيض/أسود/لكنة حمراء فقط)
خلفيات شبكة نقطية وأرقام زخرفية
توليف خطوط صناعية (mono + sans grotesk)
مكونات شفافة / مُطبَّقة كالزجاج
وصفات مكونات: hero وfeature grid وCTA وجدول بيانات
ناتج جاهز لـ Tailwind

عرض مباشر

كيف يبدو في الممارسة

جاهز

التثبيت

مستودع المؤلف · وثائق Claude Skills الرسمية

حالات الاستخدام

استخدامات عملية: Nothing Design Skill

بناء صفحة هبوط بأسلوب Nothing

👤 مطورو الواجهة الأمامية / المطور-مصمم ⏱ ~45 min intermediate

متى تستخدمه: ملخص العلامة التجارية يقول 'صناعي / أدنى'؛ تريد صفحة هبوط بنكهة Nothing دون اختراع نظام من الصفر.

الخطوات

تأسيس الـ tokens

Nothing-design: emit the design tokens (colors, type scale, spacing) for my Tailwind config.✓ تم النسخ

→ مقتطف امتداد Tailwind مع لوح ألوان أحادي + خطوط mono/grotesk
تأليف البطولة

Generate a hero section: oversized numeral '01.', headline, subhead, dot-matrix grid background. Tailwind only, no images.✓ تم النسخ

→ JSX للبطولة يطابق اللغة
التحسين

The headline should be more confident — Nothing uses high contrast and grotesk. Adjust.✓ تم النسخ

→ تغيير وزن الخط والتتبع ليطابق العلامة التجارية

النتيجة: صفحة هبوط تبدو كما لو أنها تنتمي لمنتج مجاور لـ Nothing.

المزالق

إضافة ألوان دافئة تكسر اللغة — المهارة ترفض الاقتراحات خارج لوح الألوان إذا طُلِب؛ اتكِئ عليها

اجمعها مع: filesystem · shadcn-ui-mcp

إعادة تصميم dashboard موجود بأسلوب Nothing

👤 المطورون الذين يصونون الأدوات الداخلية ⏱ ~60 min advanced

متى تستخدمه: المشرف الداخلي يبدو كـ Bootstrap 4؛ تريده يبدو متعمَّداً.

الخطوات

الجرد

Nothing-design: scan src/components/. List components and propose a Nothing-language counterpart for each.✓ تم النسخ

→ مقترح لكل مكوِّن
إعادة هيكلة واحد

Refactor DataTable.tsx to the Nothing style. Mono font for numerics, dot-matrix dividers, accent only on row hover.✓ تم النسخ

→ المكوِّن المحدَّث يطابق اللغة

النتيجة: dashboard أحادي اللون متماسك.

المزالق

صعوبة القراءة للوهلة الأولى — أَزِد التباين؛ Nothing عالي التباين، لا منخفض

توليد عرض تسويقي بجماليات Nothing

👤 مطورو التسويق ⏱ ~30 min intermediate

متى تستخدمه: تريد عرض شرائح لا يبدو كقالب عام.

الخطوات

التأليف

Nothing-design: generate a 12-slide HTML deck for product launch. Use oversized numerals as section markers.✓ تم النسخ

→ عرض HTML واحد يطابق اللغة

النتيجة: عرض يُعزِّز العلامة التجارية دون جهد.

المزالق

داكن جداً لغرفة بروجيكتور مضيئة — المهارة تُشحن بانعكاس 'فاتح' — اطلبه

اجمعها مع: guizang-ppt-skill

التركيبات

اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10

nothing-design-skill + shadcn-ui-mcp

استخدام مكونات shadcn مع سمة Nothing

shadcn: get Form. Nothing-design: restyle it to the brand language.✓ تم النسخ

nothing-design-skill + filesystem

التطبيق عبر مشروع

Nothing-design: scan components/, propose restyles, then apply one by one.✓ تم النسخ

الأدوات

ما يوفره هذا الـ MCP

الأداة	المدخلات	متى تستدعيها
emit_tokens	(none)	إعداد المشروع
generate_component	kind: hero\|cta\|table\|card, content	إضافة قسم
restyle_existing	path, target_kind	دمج المكونات القديمة في اللغة

التكلفة والحدود

تكلفة التشغيل

حصة API: لا ينطبق
الرموز لكل استدعاء: 500–3000
التكلفة المالية: مجاني
نصيحة: أنشئ tokens مرة واحدة، ثم صمِّم المكونات تدريجياً — لا تُعيد إصدار tokens في كل استدعاء

الأمان

الصلاحيات والأسرار ونطاق الأثر

الحد الأدنى من الصلاحيات: filesystem-read filesystem-write

تخزين بيانات الاعتماد: لا شيء

نقل البيانات الخارجي: لا شيء

هذا تفسير من المعجبين؛ غير مُنتسَب لشركة Nothing

استكشاف الأخطاء

الأخطاء الشائعة وحلولها

الناتج يستخدم ألواناً أخرى

أعِد الـ prompt: 'monochrome only, accent-red allowed at <10% surface'

توليف الخطوط لا يبدو مناسباً

حدِّد خطوط mono + grotesk بالضبط في prompt؛ الافتراضي JetBrains Mono + Inter

خلفية الشبكة النقطية تبدو كضوضاء

قلِّل كثافة النقاط؛ الافتراضي كثيف جداً لبعض الشاشات

البدائل