الواجهات والتصميم مميز

Web Artifacts Builder

بواسطة Anthropic 161k نجوم GitHub

بناء artifacts HTML معقدة ومتعددة الكومبوننتس لـ Claude.ai باستخدام React وTailwind.

#artifacts#react#tailwind#official

Claude Code Codex

نظرة عامة

Web Artifacts Builder بيساعدك تجمّع artifacts HTML معقدة ومتعددة الكومبوننتس باستخدام React وTailwind، موجّهة لبيئة الـ artifacts في Claude.ai. بيتعامل مع هيكل وقيود الصفحات التفاعلية المكتفية بذاتها علشان النتيجة ترندر بشكل موثوق.

بتنفع في إيه

بناء artifact تفاعلي متعدد الكومبوننتس
هيكلة artifact بـ React + Tailwind
عمل أدوات ويب مكتفية بذاتها
إنتاج ديموهات تفاعلية قابلة للمشاركة

التثبيت

التثبيت في Claude Code

# ضيف الـ marketplace وبعدين ثبّت المهارة في Claude Code:
/plugin marketplace add anthropics/skills
/plugin install web-artifacts-builder

# أو ثبّتها يدويًا في ~/.claude/skills:
git clone https://github.com/anthropics/skills.git
cp -r skills/web-artifacts-builder ~/.claude/skills/web-artifacts-builder

التثبيت في Codex

# Codex بيقرأ مهارات SKILL.md من ~/.codex/skills (اكتشاف تلقائي):
git clone https://github.com/anthropics/skills.git
cp -r skills/web-artifacts-builder ~/.codex/skills/web-artifacts-builder

# وبعدين استخدم المهارة في Codex — بتتحمّل وقت الحاجة.

زيارة المصدر (GitHub)

استكشف أدوات AI

أدوات AI تكمل شغلك — للمصممين والمطورين

اقرأ مقالات عن AI

نصايح عملية في التصميم والذكاء الاصطناعي

أدوات مشابهة

الواجهات والتصميم

Frontend Design

عمل واجهات frontend مميزة بمستوى إنتاجي بعيداً عن جمالية الـ AI العامة — صفحات وكومبوننتس وartifacts وبوسترات.

Claude Code Codex

الواجهات والتصميم

Animation Systems

حركة ويب بمستوى المنتجات زي Stripe وLinear وApple وVercel — إعدادات الـ easing والمدة والتناسق والأداء ووضع تقليل الحركة.

Claude Code Codex

الواجهات والتصميم

Apple Design

أسلوب Apple في الحركة السلسة والفيزيائية مترجم للويب — الـ springs والإيماءات والسحب والسحب والـ sheets والخامات الشفافة.

Claude Code Codex