/ الدليل / الملعب / Huashu Design
← كل الخوادم ↗ GitHub
● مجتمع alchaincyf ⚡ فوري

Huashu Design

بواسطة alchaincyf · alchaincyf/huashu-design

مهارة تصميم أصيلة لـ HTML مع Claude — نماذج أولية عالية الجودة، شرائح، رسوم متحركة، تصدير MP4، و20 مبدأ تصميمي.

Huashu Design (华术) مهارة Claude Code تتخذ من HTML/CSS لوحة تصميم. أنجز نماذج أولية وعروض شرائح ومقاطع تعريفية متحركة دون الحاجة لـ Figma. تشمل 20 مبدأ تصميميًا راسخًا، ومراجعة بخمسة أبعاد، وتصدير MP4. مستقلة عن الأطر؛ تعمل من مجرد وصف مختصر.

▶ شاهد العرض 📦 التثبيت 💡 حالات الاستخدام

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

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

عرض مباشر

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

جاهز

التثبيت

اختر العميل

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "huashu-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ],
      "_inferred": true
    }
  }
}

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

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "huashu-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ],
      "_inferred": true
    }
  }
}

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

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "huashu-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ],
      "_inferred": true
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "huashu-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ],
      "_inferred": true
    }
  }
}

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

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "huashu-design-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ]
    }
  ]
}

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

~/.config/zed/settings.json
{
  "context_servers": {
    "huashu-design-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/alchaincyf/huashu-design",
          "~/.claude/skills/huashu-design"
        ]
      }
    }
  }
}

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

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

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

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

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

بناء نموذج أولي سريع لصفحة هبوط منتج بـ HTML

👤 المؤسسون والمصممون الذين يفضلون الكود على Figma ⏱ ~60 min intermediate

متى تستخدمه: لديك ملخص وتريد نموذجًا قابلًا للنقر والقياس، لا محاكاة ثابتة.

المتطلبات الأساسية
  • المهارة مثبَّتة — git clone https://github.com/alchaincyf/huashu-design ~/.claude/skills/huashu-design
الخطوات
  1. تثبيت الأسلوب
    استخدم huashu-design. الملخص: صفحة هبوط B2B SaaS بسيطة، مستوحاة من المدرسة السويسرية، عناوين serif، لون تمييز واحد. ولّد خطة تخطيط وفق مبادئك الـ 20.✓ تم النسخ
    → خطة تخطيط تستشهد بمبادئ محددة طُبِّقت
  2. البناء
    Produce HTML/CSS. Single file. Responsive. No JS frameworks.✓ تم النسخ
    → مخرج ملف واحد يجتاز اختبار a11y الأساسي
  3. مراجعة الأبعاد الخمسة
    شغّل مراجعة الأبعاد الخمسة على ما أنتجته للتو. أين يقصر؟✓ تم النسخ
    → مراجعة ذاتية نقدية، لا مديح

النتيجة: نموذج أولي يمكنك اختباره بـ A/B أو التكرار عليه دون مغادرة الكود.

المزالق
  • المهارة تعود لقالب «بطل + مزايا + CTA» العام — ثبّت مرجع الأسلوب (سويسري، باوهاوس، تحريري) في كل prompt
اجمعها مع: filesystem

بناء مقطع تعريفي متحرك وتصديره إلى MP4

👤 المطورون والمبدعون الذين يطرحون مقاطع منتجات ⏱ ~120 min advanced

متى تستخدمه: تريد مقطع تعريفيًا مدته 30 ثانية لمنتجك دون الحاجة لـ After Effects.

الخطوات
  1. القصة المصورة
    استخدم huashu-design. رسم قصة مصورة لمقطع تعريفي مدته 30 ثانية لمنتجي: المشكلة (8 ث) / الحل (14 ث) / CTA (8 ث).✓ تم النسخ
    → خطة إطارًا بإطار
  2. التحريك بـ HTML
    Implement each scene as a CSS keyframe animation. Render as a single HTML with a timeline.✓ تم النسخ
    → HTML يعمل بسلاسة في المتصفح
  3. التصدير
    Render to 1080p MP4.✓ تم النسخ
    → MP4 مكتوب على القرص؛ المدة مطابقة

النتيجة: مقطع MP4 جاهز للنشر من prompt، دون برامج مونتاج.

المزالق
  • الخطوط تظهر بشكل مختلف في Chrome غير المرئي — ضمّن خطوط الويب؛ لا تعتمد على خطوط النظام
اجمعها مع: filesystem · after-effects

التركيبات

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

huashu-design-skill + after-effects

رسم القصة في HTML، وإنهاؤها في AE لجودة البث

Draft in huashu-design; export frames for AE compositing.✓ تم النسخ
huashu-design-skill + filesystem

حفظ الإصدارات بجانب الملخص

Create /designs/landing-v1/ through v3/ and keep both.✓ تم النسخ

الأدوات

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

الأداةالمدخلاتمتى تستدعيهاالتكلفة
plan_layout brief, style_ref لكل تصميم جديد 0
generate_html plan البناء من الخطة 0
review_5d html مراجعة ذاتية بعد البناء 0
render_mp4 html, duration مخرج متحرك 0

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

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

حصة API
N/A
الرموز لكل استدعاء
التصاميم عالية الجودة تُنتج كثيرًا من HTML — حدّد النطاق بإحكام
التكلفة المالية
مجاني
نصيحة
ولّد على مراحل صغيرة: الهيكل أولًا، ثم التنسيق، ثم الصقل

الأمان

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

الحد الأدنى من الصلاحيات: filesystem-write
تخزين بيانات الاعتماد: لا شيء
نقل البيانات الخارجي: لا شيء

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

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

تصدير MP4 يفشل (ffmpeg مفقود)

brew install ffmpeg — المهارة تستخدمه لدمج الإطارات

تحقق: `ffmpeg -version`
التصميم يبدو مألوفًا وعاديًا

لم تثبّت مرجع أسلوب — اذكر دائمًا أحدها (سويسري، باوهاوس، Pentagram…)

المراجعة تُعطي تغذية راجعة إيجابية على تصميم رديء

وجّه صراحةً: «كن ناقدًا؛ اذكر الأخطاء أولًا»

البدائل

Huashu Design مقابل البدائل

البديلمتى تستخدمهاالمقايضة
cc-frontend-skillتريد صوتًا رأسيًا لا منهجية منظمةعملية مراجعة أقل انتظامًا
Figmaسير عمل الفريق يتطلب Figmaليس كودًا؛ لا يمكن تحريكه بنفس الطريقة

المزيد

الموارد

📖 اقرأ ملف README الرسمي على GitHub

🐙 تصفح القضايا المفتوحة

🔍 تصفح أكثر من 400 خادم MCP و Skills