مهارة مجانية

واجهات شكلها متصمم، مش متولّد

الـAI مش بيقول «خلّي التصميم أحسن» وخلاص. Hallmark بيفرض عليه عملية تصميم كاملة: يقرأ مشروعك، يختار اتجاه بصري، يبني الصفحة حوالين اللي الزائر جاي يعمله، وبعدين يرندرها في متصفح حقيقي ويرفض اللي شكله متولّد.

بقلم Together AIصانعة Hallmark · github.com/Nutlope · usehallmark.com
  • 50 ثيم
  • Claude Code · Codex · Cursor · OpenCode
  • Audit + Redesign
  • مفتوحة المصدر
ثبّتها دلوقتي افتح على GitHub github.com/Nutlope/hallmark
XPR | خِبِرHallmark v2.0.0
مهارة مجانية

واجهات شكلها متصمم، مش متولّد

Hallmark من Together AI: 50 ثيم، فحص في المتصفح، وaudit وredesign لتصميمك الموجود

Together AI — صانعة Hallmark · github.com/Nutlopexprcommunity.comمجاني · Claude Code وأدوات الـAI

«الـAI مشكلته مش إنه مش بيعرف يعمل UI… المشكلة إنه اتعلم يعمل UI شبه كل الـAI.»

أحمد فارس
إزاي بيبني صفحة

يبني، يرندر، يفحص، وبعدين يسلّم

  1. 01Pre-flightيقرأ الخطوط والألوان والـframework وأي design.md في مشروعك، ويطلب منك مرة واحدة المادة الحقيقية: صور، سكرينشوتس، أرقام. مبيخترعش حاجة.
  2. 02Dealيعرض عليك 3 ثيمات تناسب طلبك من 50، ويوزّع أجزاء الصفحة حسب وظيفتها.
  3. 03Hero أولًايبني أول شاشة لوحدها، يرندرها ويراجعها قبل ما باقي الصفحة يتكتب.
  4. 04Sloplintيفحص الصفحة في متصفح حقيقي على 8 مقاسات، وبعدين Agent بعين جديدة يراجعها.
  5. 05التسليمصفحة HTML وCSS مستقلة، وأول تعليق في الـCSS مكتوب فيه القرارات اللي أخدها.

الأوامر

  • /hallmark <prompt>يبني صفحة جديدة. أو اوصف اللي عايزه وهو يشتغل لوحده.
  • customقولها في الطلب عشان يصمم من غير ثيم.
  • /hallmark audit <path>يفحص تصميم موجود ويطلع تقرير، من غير ما يغيّر حاجة.
  • /hallmark redesign <path>يعيد بناء الصفحة ويحافظ على المحتوى والـlinks والفورمز. قول keep the layout لتغيير الستايل بس، أو polish لإزالة الأنماط المكررة بس.
  • sloplint.mjs <file> --renderيفحص أي صفحة في المتصفح، حتى لو مش معمولة بـHallmark.
المهارة

جواها إيه

مهارة تصميم وبناء صفحات

Hallmark

$hallmark

مناسبة لـ مصمم أو صاحب منتج بيبني صفحات بالـAI ومش عايزها تطلع شبه كل صفحات الـAI.

هتطلع بـ صفحة مبنية حوالين هدفها، بثيم مختار ومن غير الأنماط المكررة، اتفحصت في المتصفح على مقاسات مختلفة قبل ما توصلك.

اللي بيفرق

  • 3 مستويات فحصFloor عمره ما يتنشر: تباين، focus، reduced motion، أرقام أو آراء عملاء متألفة، موبايل مكسور. Reflex: العادات اللي الموديل بيقع فيها، وممكن تتجاوز بسبب مكتوب. Finish: تفاصيل صنعة مبتوقفش النشر.
  • الأنماط اللي بيمنعهاEyebrow فوق كل عنوان، labels بحروف كابيتال متباعدة، كلمة واحدة ملونة أو مايلة في العنوان، كروت جوه كروت، Hero مش مظبوط على الشاشة، فورم بيقول «شكرًا» من غير ما يبعت حاجة.
  • 50 ثيم، مش 50 قالبكل ثيم خامة: ورق، خط، ألوان، أسطح ومكونات. مبيقولش الصفحة فيها إيه ولا بترتيب إيه، فطلبين بنفس الثيم بيطلعوا صفحتين مختلفتين.
  • Customقول custom وهو يسيب الثيمات ويصمم من طلبك بس، بنفس القواعد والفحوصات.
  • منتجك الحقيقي وصور حقيقيةاديله URL أو dev server أو تطبيق وهو ياخد السكرينشوتس بنفسه. ولو مفيش صور، عنده 755 صورة مفتوحة الترخيص من Wikimedia Commons، بيختارها حسب الموضوع وبيكتب مصدرها على الصفحة.

ثبّتها بأمر واحد

شغّل الأمر ده في الـterminal. ‎-g بتثبتها لكل مشاريعك؛ شيلها لو عايزها للمشروع الحالي بس.

محتاج إيه: Node 18 أو أحدث.للفحص في المتصفح: npm i -g puppeteer-core وChrome. من غيرهم الفحوصات الثابتة بتشتغل برضه.

أمر التثبيت (من README المشروع)
npx skills add nutlope/hallmark -g

في Claude Code وCursor وOpenCode شغّلها بـ/hallmark، وفي Codex بـ$hallmark. لو مبتشتغلش لوحدها، اطلبها بالاسم: use hallmark to build …

أو ثبّتها بإيدك

Claude Code plugin
  1. ضيف الـmarketplace: ⁦/plugin marketplace add nutlope/hallmark⁩
  2. ثبّت الـplugin: ⁦/plugin install hallmark@hallmark⁩
  3. وشغّلها بـ⁦/hallmark:hallmark⁩
README المشروع
لأداة واحدة بس
  1. شغّل: ⁦npx skills add nutlope/hallmark -g --agent claude-code⁩
  2. بدّل claude-code بـcodex أو cursor أو opencode أو github-copilot.
README المشروع
جرّبها

اكتب كده بعد التثبيت

جرّب: صفحة لمنتجك
استخدم Hallmark عشان تبني صفحة هبوط لـ[اسم المنتج]: [بيعمل إيه في جملة]. الزائر المفروض [الفعل المطلوب: يحجز / يشترك / يجرّب]. الصفحة عربي RTL بخط [اسم الخط]. استخدم السكرينشوتس اللي في [المسار] ومتخترعش أرقام.

النتيجة المتوقعة: أسئلة قليلة عن المادة والجمهور والهدف والـtone، وبعدها 3 ثيمات تختار منهم، ثم صفحة مستقلة اتفحصت في المتصفح. راجع الـRTL بنفسك (تحت في الملاحظات ليه).

قبل ما تستخدمها

ملاحظات بصراحة

Hallmark قوية، بس اتعملت لصفحات إنجليزي. دي الحاجات اللي هتفرق معاك لو بتشتغل عربي أو عندك هوية بصرية جاهزة.

  1. مفيش أي ذكر للـRTL أو العربي في مراجعها.

    اللي الملف بيعمله فعلًا: بتقرأ خطوط مشروعك وألوانه، وبتفحص الـoverflow والموبايل على كل المقاسات.

    اللي تعمله إنت: قول في الطلب إن الصفحة عربي RTL، واديها خطك العربي، وراجع الاتجاه والأرقام والأيقونات بنفسك.

  2. بتسلّم HTML وCSS مستقلين، مش components.

    اللي الملف بيعمله فعلًا: بتكتب الـtokens والـbase في ملفات منفصلة، وبتسجّل قراراتها في الـCSS.

    اللي تعمله إنت: في مشروع Next أو React، اطلب منها تنقل النتيجة لـcomponents بتاعتك، أو استخدم audit بس.

  3. ذوقها بيغلب ذوقك لو معندكش نظام مكتوب.

    اللي الملف بيعمله فعلًا: أي design.md في المشروع بيغلب كل حاجة، بس قواعد الـFloor زي «مفيش eyebrow» مبتتلغيش. موقعنا نفسه فيه eyebrows و«·» وفورم إيميل في الآخر، وكلها ممنوعة عندها.

    اللي تعمله إنت: اكتب design.md لهويتك الأول، أو ابدأ بـaudit وقرّر في كل ملاحظة بنفسك.

  4. مش هتلمس تصميم موجود إلا لو طلبتها بالاسم.

    اللي الملف بيعمله فعلًا: ده مقصود: أي تعديل تاني بيتعمل بنظام مشروعك.

    اللي تعمله إنت: استخدم /hallmark audit أو /hallmark redesign صراحة.

أحمد فارس

ابعتلي المهارات الجديدة أول بأول

بنبني مهارات تانية للمصممين وأصحاب المنتجات. سيب إيميلك ويوصلك كل جديد.

مجاني. رقم الموبايل اختياري، وتقدر تلغي التواصل في أي وقت.

الخطوة الجاية

جهّزت أدواتك.دلوقتي ابنِ منتجك وسط ناس بتبني.

الكتاب بيدّيك الطريقة. اللي بيفرق بعد كده إنك تطبّقها على مشروعك إنت، وحد بيراجع معاك كل أسبوع لحد ما يبقى فيه لينك تبعته للناس.

AI for Product Designers

من مصمم بيجرّب أدوات متفرقة، لمصمم عنده AI-assisted workflow واضح ومسؤول.

4 أسابيع، وكل أسبوع بيخلص بحاجة في إيدك

  1. 01AI mindset، تأطير المشكلة، والاستخدام المسؤولخريطة workflow ومشكلة مختارة
  2. 02Research synthesis، الـideation، وUX writingInsights + directions + مسودة محتوى
  3. 03استكشاف الـUI، الـprototyping، والـcritiquePrototype أو redesign قابل للنقد
  4. 04التحقق، الحكي، وإثبات الشغل في الـportfolioCase study أو عرض before-after

معاك في البرنامج

  • 4 أسابيع لايف مع أحمد فارس
  • كورسات في مكتبة XPR
  • تمرين أسبوعي مع critique
  • case study أو تحسين ملموس
  • 3 شهور عضوية في مجتمع XPR
  • تسجيلات كل الجلسات
  • مكتبة Skills وprompts للمصممين
  • Template للـcase study
  • Template لخريطة الـworkflow
  • كتب XPR الأربعة
الدفعة التأسيسية لسه بتتجهز

سجّل في قائمة الانتظار وهتعرف أول واحد لما الحجز يفتح، بسعر الدفعة التأسيسية.

سجّل في قائمة الانتظار ←
امسح الكود أو اضغط على اللينكxprcommunity.com/programs/ai-for-designers

استرداد كامل خلال 14 يوم من الدفع، من غير أسئلة.

مستنيك تبني معانا،أحمد فارسمؤسس XPR | خِبِر

ولو عايز تبدأ مع المجتمع الأول: brainsmingle.com/spaces/xpr

كمّل من هنا