إنتقل إلى المحتوى الرئيسي

أطلق موقعًا جميلًا ومتطورًا بسرعة مع Claude

متوسط

يمكنك الانتقال من فكرة من سطر واحد إلى موقع منشور وجميل المظهر فعلًا في جلسة واحدة. الحيلة ليست في عدد أكبر من الموجهات — بل في بنية الموجه الصحيحة إضافةً إلى مجموعة أدوات سريعة وحلقة صقل محكمة. هذه الصفحة هي الوصفة.

What you'll learn
  • اختر السطح المناسب: Artifacts لتطبيقات فورية مقابل Claude Code لمستودع حقيقي قابل للنشر
  • تغلّب على الإعداد الافتراضي 'لركاكة الذكاء الاصطناعي' باستخدام موجه نظام جماليات الواجهة الأمامية من Anthropic
  • نفّذ سير عمل من الفكرة إلى النشر باستخدام الخطوات أدناه
  • اقتبس موجهات بناء وصقل جاهزة للنسخ واللصق تبدو وكأن مصمم منتجات كبيرًا قد أعدّها
  • اصقل الطباعة والحركة والاستجابة — ثم انشر على Vercel أو Netlify أو GitHub Pages

اختر السطح أولًا​

مساران سريعان مختلفان تمامًا، حسب ما تريده في النهاية:

  • Claude Artifacts — صِف تطبيقًا فيعرض Claude قطعة React/HTML حية ومكتفية ذاتيًا داخل المحادثة. بلا أي إعداد، رابط قابل للمشاركة، مثالي للنماذج الأولية والأدوات الداخلية والآلات الحاسبة ونماذج صفحات الهبوط. افتراضيًا تعمل القطعة بمنطق مكتفٍ ذاتيًا؛ يمكنها الوصول إلى خدمات خارجية عبر MCP، لكنها ليست مستودعًا تملكه.
  • Claude Code + إطار عمل — يبني Claude ويحرّر قاعدة شيفرة حقيقية (Next.js / Astro / Tailwind / shadcn/ui) على جهازك، بالتوازي، تلتزم بها وتنشرها. هذا هو المسار حين تريد أن تملك الشيء وتوسّعه وتطلقه.
Pro tip
  • جرّب المظهر في Artifact خلال 60 ثانية، ثم اطلب من Claude Code إعادة بنائه كمستودع Next.js + Tailwind حقيقي. تحصل على ردّ فعل فوري ومستودع قابل للنشر معًا.
  • يضيف Claude Design (Anthropic Labs، معاينة بحثية) لوحة بصرية ونظام تصميم دائمًا، مع تسليم إلى Claude Code — مفيد إن كنت تعمل داخل أداة تصميم.

الشيء الوحيد الذي يفصل الرائع عن العادي​

إذا تُرك لإعداداته الافتراضية، يتقارب Claude نحو ما يسميه المجتمع "ركاكة الذكاء الاصطناعي": خط Inter، وتدرج بنفسجي على أبيض، وثلاث بطاقات متساوية التدوير. إن دليل جماليات الواجهة الأمامية الخاص بـ Anthropic صريح في تفسير السبب — والحل هو أن تسمّي صراحةً الأبعاد التي تهتم بها والإعدادات الافتراضية التي ينبغي تجنبها.

ورقة الغش لمكافحة الركاكة
اضغط Enter أو مفتاح المسافة لقلب البطاقة. استخدم مفتاحي السهمين الأيسر والأيمن للتنقل بين البطاقات.تم إظهار المصطلح.
1 / 4

أعلى خطوة من حيث الأثر هي لصق كتلة <frontend_aesthetics> الخاصة بـ Anthropic (أو ملف DESIGN.md الخاص بك) في بداية البناء كي يعرف النموذج ما عليه تجنّبه قبل أن يكتب سطر CSS واحدًا.

كتلة نظام مكافحة الركاكة (الصقها قبل أي بناء لواجهة)

<frontend_aesthetics>
You converge toward generic, "on-distribution" output — the "AI slop" aesthetic. Avoid it.
Typography: choose a distinctive, beautiful font (NOT Inter/Roboto/Arial). Use it decisively.
Color & theme: commit to ONE cohesive aesthetic via CSS variables; dominant colors + sharp accents, not a timid even palette. No purple-gradient-on-white.
Motion: prioritize one orchestrated page-load with staggered reveals over scattered micro-interactions. CSS-only for HTML; Motion for React.
Backgrounds: build atmosphere/depth with layered gradients or patterns — never a flat solid.
Make unexpected, context-specific choices. Think outside the box.
</frontend_aesthetics>

من الفكرة إلى موقع منشور​

Guided walkthrough1 of 6
  1. في رسالة واحدة، أعطِ Claude: ما هو الموقع، والأقسام، والجمهور، واتجاهًا جماليًا مسمّى واحدًا (مثلًا 'تحريري دافئ، كأن Notion يلتقي بمجلة مطبوعة'). الملخّصات الغامضة تنتج مواقع غامضة.

موجهات بناء تبدو وكأن مصممًا كبيرًا أعدّها​

البدء بدور مهني محدد يرفع جودة المخرجات بشكل ملموس ويقلّل التباين. كن دقيقًا بشأن الجمالية والمجموعة والحالات.

بناء بلقطة واحدة: موقع Next.js + Tailwind + shadcn حقيقي

You are a senior product designer + frontend engineer.
Build a Next.js (App Router) + Tailwind + shadcn/ui marketing site for <PRODUCT>.
Aesthetic: <ONE named direction, e.g. "editorial minimalism, Linear/Stripe energy">.
Typography: one distinctive display face + one mono/sans for body — NOT Inter.
Sections: hero, social proof, 3 feature blocks, pricing, FAQ, footer.
Requirements: fully responsive (mobile-first), dark mode, one orchestrated
page-load animation with staggered reveals, accessible (WCAG AA contrast).
Write DESIGN.md first with the color/type/spacing tokens, then build.
Scaffold files in parallel; show me the tree, then implement.

نموذج Artifact فوري (محادثة، بلا إعداد)

Create an interactive Artifact: a single-page landing for <IDEA>.
Make it genuinely beautiful, not generic AI slop — distinctive font (not Inter),
a committed color theme via CSS variables, layered gradient background,
and a staggered fade-in on load. Mobile-responsive. Self-contained HTML/React.

صقل: اقضِ على الإحساس العادي

Critique this UI as a senior product designer and list the 5 "AI default"
fingerprints it still has (font, spacing, color, layout cliché, motion).
Then redesign it around ONE bold aesthetic choice. Increase type contrast
(weight + size extremes), commit to a dominant color with a sharp accent,
and replace scattered hover effects with one orchestrated entrance.

صقل يجعله يبدو باهظ الثمن​

Pro tip
  • الطباعة هي أرخص ترقية: خط Google مميز + قفزة حجم بمقدار 3 أضعاف أو أكثر بين العرض والنص يُقرأ فورًا على أنه 'مُصمَّم'.
  • الحركة: استثمر في لحظة واحدة رائعة (تحميل منظّم بـ animation-delay) بدلًا من عشر لمسات تمرير صغيرة.
  • الاستجابة: اطلب صراحةً من Claude معالجة الجوال والنص الطويل والحالة الفارغة وحالات التحميل والخطأ — فهو يتخطّاها افتراضيًا.
  • العمق: تدرجات CSS المتراكمة أو حُبيبات/نمط خفيف تتفوق على خلفية مسطحة في كل مرة.
  • تذكّر أن Claude لا يستطيع رؤية مخرجاته الخاصة — الصق لقطة شاشة أو صِف ما هو خاطئ كي تتقارب حلقة الصقل.
Watch out
  • عبارة 'اجعله جميلًا' وحدها تؤدي أداءً ضعيفًا — إنها المكافئ في الموجهات للإعداد الافتراضي. سمِّ الجمالية وسياسة الخط والإعدادات الافتراضية التي يجب تجنّبها بدلًا من ذلك.
  • لا تدع موجهًا عملاقًا واحدًا يبني كل شيء بلقطة واحدة لموقع حقيقي؛ البناء قسمًا تلو الآخر مع ملف DESIGN.md أكثر قابلية للتحكم ويستخدم الرموز بشكل أفضل.
  • تعامل مع الادعاءات التسويقية والإحصاءات والنصوص الجاهزة التي يولّدها الذكاء الاصطناعي كمسوّدات — تحقّق قبل النشر.

انشر خلال دقائق​

  • Vercel — الأنسب لـ Next.js. اربط مستودع GitHub؛ كل دفعة تُبنى وتُنشر تلقائيًا مع روابط معاينة لكل فرع.
  • Netlify — محايد تجاه أطر العمل، نفس تدفق الدفع-إلى-GitHub-للنشر، استضافة ثابتة سخية.
  • GitHub Pages — استضافة ثابتة مجانية مباشرةً من المستودع؛ قرنها بتصدير ثابت (Next.js output: "export"، أو بناء Astro) لموقع حي بلا تكلفة. (هذا الموقع ذاته منشور بهذه الطريقة.)

جهّز عملية النشر

Set up this repo for deployment:
1. Add a sensible .gitignore and a README with run/build/deploy steps.
2. Configure a production build (static export if targeting GitHub Pages).
3. Give me the exact steps to connect Vercel (or Netlify) for auto-deploy on push,
 and a GitHub Actions workflow as a fallback. Don't commit any secrets.

اختبر نفسك​

اختبر نفسك

0/4
  1. تريد نموذجًا أوليًا حيًّا وقابلًا للمشاركة خلال 60 ثانية بلا أي إعداد. أي سطح؟
  2. وفق إرشادات جماليات الواجهة الأمامية من Anthropic، أي مما يلي إعداد افتراضي ينمّ عن 'ركاكة الذكاء الاصطناعي' وينبغي تجنّبه؟
  3. ما الطريقة الموصى بها للحفاظ على اتساق مظهر الموقع عبر العديد من الموجهات/الجلسات؟
  4. أين تقترح Anthropic إنفاق ميزانية حركتك لأقصى إبهاج؟
Key takeaways
  • اختر السطح: Artifacts للنماذج الأولية الفورية، وClaude Code + إطار عمل لموقع مملوك قابل للنشر.
  • تغلّب على 'ركاكة الذكاء الاصطناعي' بتسمية الجمالية وسياسة الخط والإعدادات الافتراضية التي يجب تجنّبها — الصق كتلة frontend_aesthetics الخاصة بـ Anthropic.
  • ثبّت ملف DESIGN.md كي يبقى المظهر متسقًا عبر الجلسات، تمامًا كما يفعل CLAUDE.md مع الشيفرة.
  • وجّه بدور مصمم كبير، وابنِ قسمًا تلو الآخر، واطلب الحالات المتخطّاة (الجوال، التحميل، الفارغ، الخطأ).
  • أنفق ميزانية الحركة على تحميل منظّم واحد؛ انشر عبر الدفع إلى Vercel/Netlify أو بتصدير ثابت إلى GitHub Pages.

المصادر والقراءة الإضافية​