Claude Design — Design one-off HTML artifacts (landing, deck, prototype)

الفكرة في دقيقة

ابدأ بالمعنى، ثم انتقل إلى التفاصيل.

هذا الدرس يشرح Claude Design — Design one-off HTML artifacts (landing, deck, prototype) ضمن موضوع توسيع Hermes وربطه بأدوات أخرى. ستعرف ما الذي يفعله هذا الجزء، متى تحتاجه، وما أصغر خطوة آمنة للتأكد أنه يعمل.

إن كنت مبتدئًا

إن كنت جديدًا: لا تحفظ الأسماء. ركّز على ثلاثة أسئلة: ما المشكلة التي يحلها هذا الجزء؟ ما البيانات أو الصلاحيات التي يحتاجها؟ وكيف أعرف أن النتيجة صحيحة؟

للتطبيق العملي

للتطبيق: اقرأ المثال الأول، حدّد ما سيغيّره، نفّذه على بيانات تجريبية، ثم قارن الناتج بما وعد به المصدر.

للمتخصص

للمتخصص: راجع Skill metadata، Reference: full SKILL.md، When To Use This Skill vs popular-web-designs vs design-md، ثم افحص حالات الفشل والتوافق مع إصدارك.

ما الذي تحتاجه قبل البدء؟

أكمل التثبيت وأول مهمة قبل إضافة قدرات جديدة.

ماذا ستعرف؟

نتيجة واضحة قبل أن تقرأ.

تفهم Claude Design — Design one-off HTML artifacts (landing, deck, prototype) من دون افتراض معرفة سابقة.
تفرّق بين الوصف والمعلومة التي تحتاج إلى اختبار في بيئتك.
اقرأ الأمر الأول وحدد المدخلات والمخرجات قبل نسخه.

مصطلحات هذا الدرس

تعريفات قصيرة قبل التفاصيل.

Skill: حزمة تعليمات تعلّم Hermes طريقة عمل متكررة من دون إضافة خدمة خارجية بالضرورة.

وصف الصفحة الرسمي

Design one-off HTML artifacts (landing, deck, prototype)

خريطة الموضوع

ما الذي يقوله المصدر، وبأي ترتيب؟

01
Skill metadata
ابدأ بهذا القسم لتفهم الفكرة أو البنية الأساسية.
02
Reference: full SKILL.md
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
03
When To Use This Skill vs popular-web-designs vs design-md
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
04
Runtime Mode
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
05
Core Identity
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
06
When To Use
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
07
Design Principle: Start From Context, Not Vibes
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
08
Asking Questions
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
09
Surface-First: Commit to a Composition Before Touching Tokens
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
10
Workflow
اختم بهذا القسم لتفحص النتيجة والحالات الخاصة.

أمثلة من الصفحة الرسمية

انسخ بعد أن تفهم الأثر.

Created: /path/to/Prototype.html
It includes 3 layout variants, a Tweaks panel for density/theme, and responsive behavior.
Verified: file exists and opened cleanly in browser, no console errors.
Next: pick the strongest direction and I’ll tighten copy + motion.

You are running in CLI/API mode, not hosted Claude Design. Ignore references to hosted-only tools or preview panes. Produce complete local design artifacts, usually self-contained HTML with embedded CSS/JS, and verify with available local tools before returning. Preserve the design process: gather context, define the system, produce options, avoid filler, and meet a high visual bar.

تطبيق الآن

اقرأ الأمر الأول وحدد المدخلات والمخرجات قبل نسخه.

طابق أي أمر مع إصدار Hermes المثبّت، وراجع الملفات والحسابات التي قد يصل إليها، واستخدم بيانات غير حساسة في أول اختبار. إذا اختلف الشرح عن المصدر، فالمصدر الرسمي هو المرجع النهائي.

اختبار الفهم

ثلاثة قرارات قبل علامة الاكتمال.

1. ما المرجع النهائي عند تغيّر معلومات «شرح Claude Design — Design one-off HTML artifacts (landing, deck, prototype)»؟منشور غير مؤرخالتوثيق الرسمي ومستودع Hermesنتيجة بحث بلا مصدر

2. ما أفضل طريقة لتطبيق هذا الدرس؟نسخ كل أمر مباشرةتنفيذ خطوة صغيرة ثم التحقق من نتيجتهامنح كل الصلاحيات لتوفير الوقت

3. ماذا تفعل قبل خطوة قد تعدّل ملفات أو حسابًا خارجيًا؟تراجع النطاق والصلاحيات ومسار التراجعتلغي العزلتشارك المفتاح في المحادثة