Nothing Design Skill

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

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

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

عرض مباشر

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

جاهز

التثبيت

اختر العميل

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "nothing-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ],
      "_inferred": true
    }
  }
}

افتح Claude Desktop → Settings → Developer → Edit Config. أعد التشغيل بعد الحفظ.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "nothing-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ],
      "_inferred": true
    }
  }
}

يستخدم Cursor نفس مخطط mcpServers مثل Claude Desktop. إعدادات المشروع أولى من الإعدادات العامة.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "nothing-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ],
      "_inferred": true
    }
  }
}

انقر على أيقونة MCP Servers في شريط Cline الجانبي، ثم "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "nothing-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ],
      "_inferred": true
    }
  }
}

نفس الصيغة مثل Claude Desktop. أعد تشغيل Windsurf لتطبيق التغييرات.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "nothing-design-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ]
    }
  ]
}

يستخدم Continue مصفوفة من كائنات الخادم بدلاً من خريطة.

~/.config/zed/settings.json

{
  "context_servers": {
    "nothing-design-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/dominikmartn/nothing-design-skill",
          "~/.claude/skills/nothing-design"
        ]
      }
    }
  }
}

أضف إلى context_servers. يعيد Zed التحميل تلقائيًا عند الحفظ.

claude mcp add nothing-design-skill -- git clone https://github.com/dominikmartn/nothing-design-skill ~/.claude/skills/nothing-design

أمر من سطر واحد. تحقق باستخدام claude mcp list. احذف باستخدام claude mcp remove.

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

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

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

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

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

المتطلبات الأساسية

المهارة مُثبَّتة — git clone https://github.com/dominikmartn/nothing-design-skill ~/.claude/skills/nothing-design
مشروع Tailwind — إعداد Next.js أو Vite + Tailwind موجود

الخطوات

تأسيس الـ 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

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

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

البدائل