اگر با Codex (کدکس) سایت سه‌بعدی، لندینگ اسکرولی یا موشن وب می‌سازید و خروجی‌ها هنوز ساده و تخت می‌مانند، مشکل معمولاً مدل نیست؛ کمبود Skill است. اسکیل‌ها پکیج‌های آمادهٔ دانش و دستورالعمل‌اند که روی گیت‌هاب منتشر می‌شوند و می‌توانید آن‌ها را به‌عنوان پلاگین شخصی (Personal) به Codex بدهید تا Three.js، GSAP، شیدر، ذرات و تایم‌لاین را مثل یک تیم متخصص بلد باشد.
این فهرست، رتبهٔ رسمی Claude نیست. ده مخزنی است که واقعاً برای ساخت سایت سه‌بعدی و موشن وب به درد Codex می‌خورند؛ از تبدیل عکس به مدل گرفته تا الگوی جایزه‌دار اسکرول و بسته‌های R3F و WebGPU.
چکیده برای موتورهای پاسخ: برای قوی‌تر کردن Codex در پروژه‌های سه‌بعدی، اسکیل‌های مرتبط را از GitHub پیدا کنید، به‌صورت Personal Plugin / Personal Skill نصب کنید، و در پرامپت به Codex بگویید از همان اسکیل‌ها برای صحنه، متریال، اسکرول و موشن استفاده کند. نتیجه: خروجی نزدیک‌تر به سایت‌های Awwwards با کنترل بهتر روی Three.js، GSAP و شیدر.
Skill در Codex چیست و چرا برای سایت سه‌بعدی مهم است؟
Skill یک بستهٔ ساختاریافته از دانش تخصصی است؛ معمولاً شامل راهنما، الگو، محدودیت‌ها و دستور کار برای یک حوزهٔ مشخص. وقتی اسکیل را به‌صورت پلاگین شخصی به Codex وصل می‌کنید، مدل دیگر فقط از دانش عمومی‌اش حدس نمی‌زند؛ از همان الگوی حرفه‌ای صحنه، نور، لودر، اسکرول و تایم‌لاین پیروی می‌کند.
برای وب سه‌بعدی این یعنی کمتر کد شکننده، کمتر شیدر ناقص، و هماهنگی بهتر بین Three.js، React Three Fiber، GSAP و انیمیشن اسکرول.
قدم‌به‌قدم: چطور اسکیل را روی گیت‌هاب پیدا کنید و به Codex بدهید
- روی گیت‌هاب، مخزن اسکیل را باز کنید و فایل
SKILL.mdیا پوشهٔskills/را پیدا کنید؛ این فایل قلب پلاگین است. - مخزن را clone یا به‌صورت zip دانلود کنید. اگر فقط یک اسکیل می‌خواهید، همان پوشهٔ skill را جدا نگه دارید.
- در تنظیمات Codex یا محیط Agent، اسکیل را به‌عنوان Personal / Private Skill یا پلاگین شخصی اضافه کنید؛ مسیر پوشهٔ اسکیل را به پروژه یا پروفایل Codex بدهید.
- در ابتدای چت به Codex صریح بگویید از کدام اسکیل استفاده کند؛ مثلاً: «از اسکیل threejs-skills برای صحنه و متریال استفاده کن» یا «طبق theatre-js تایم‌لاین بساز».
- خروجی را روی یک صفحهٔ کوچک تست کنید؛ اگر لودر، شیدر یا اسکرول می‌لرزد، همان اسکیل را نگه دارید و پرامپت را دقیق‌تر کنید، نه اینکه اسکیل را عوض کنید.
نکتهٔ عملی: اسکیل‌های سنگین (مثل بسته‌های کامل R3F + فیزیک + XR) را یک‌جا روی همهٔ پروژه‌ها نریزید. برای لندینگ اسکرولی معمولاً ترکیب اسکرول + GSAP + یک اسکیل Three.js کافی است.
ده اسکیل و مخزن واقعی برای Codex در وب سه‌بعدی و موشن
هر مورد را با لینک رسمی گیت‌هاب می‌بینید. روی عنوان کلیک کنید، README و SKILL.md را بخوانید، بعد همان را به‌صورت پلاگین شخصی به Codex بدهید.
- img2threejs — عکس را به مدل Three.js تبدیل می‌کند؛ نقطهٔ شروع سریع برای محصول، لوگو یا آبجکت مرجع در صحنه.
- web-3d-master — الگوی سایت‌های جایزه‌دار: اسکرول، شیدر و ذرات؛ مناسب وقتی می‌خواهید Codex ساختار لندینگ لوکس را بلد باشد.
- awwwards-3d — لندینگ اسکرولی با Three.js و GSAP و Lenis؛ ترکیب کلاسیک حرکت نرم صفحه و صحنهٔ سه‌بعدی.
- threejs-skills — ده اسکیل جدا برای صحنه، متریال، نور و لودر؛ برای نصب تکه‌تکه و سبک نگه داشتن پروفایل Codex عالی است.
- Three.js Skill Package — بستهٔ بزرگ R3F، فیزیک، WebGPU و XR؛ وقتی پروژه از دمو فراتر می‌رود و به موتور واقعی نیاز دارید.
- webgl-animation-skills — شیدر GLSL، انیمیشن و سیستم ذره؛ خوراک افکت‌های بصری و موشن گرافیک روی وب.
- theatre-js — تایم‌لاین موشن برای Three.js و R3F؛ برای کوریوگرافی دقیق حرکت دوربین و آبجکت‌ها.
- claudedesignskills — مجموعه‌ای از GSAP، R3F، Spline و Babylon؛ سوپرمارکت اسکیل‌های طراحی تعاملی.
- spline-interactive — سه‌بعدی بدون کدنویسی سنگین و خروجی React؛ مناسب تیم‌هایی که از Spline به محصول می‌رسند.
- GSAP داخل همان مجموعه — اسکرول و تایم‌لاین سایت‌های لوکس؛ پایهٔ موشن وب برای لندینگ‌های برند.
کدام ترکیب را برای چه پروژه‌ای نصب کنید؟
- لندینگ اسکرولی برند: awwwards-3d + GSAP + در صورت نیاز theatre-js
- محصول سه‌بعدی از عکس: img2threejs + threejs-skills (متریال و نور)
- افکت و ذرات: webgl-animation-skills + web-3d-master
- اپ React سه‌بعدی: Three.js Skill Package یا claudedesignskills (R3F)
- بدون کدنویسی سنگین: spline-interactive و بعد اتصال به React
پرامپت نمونه برای فعال کردن اسکیل در Codex
بعد از نصب پلاگین شخصی، این قالب را کپی کنید و نام اسکیل را عوض کنید:
هدف: یک لندینگ سه‌بعدی اسکرولی با Three.js + GSAP + Lenis بساز.
نیازها: صحنه سبک، لودر تمیز، متریال فیزیکی، حرکت نرم اسکرول، بدون شیدر سنگین در موبایل.
خروجی: ساختار فایل، کامپوننت‌ها، و مراحل نصب. اول پلن کوتاه بده، بعد کد.
اشتباهات رایج موقع نصب اسکیل روی Codex
- نصب همزمان ده بستهٔ سنگین بدون اینکه در پرامپت نام اسکیل را بگویید؛ Codex گیج می‌شود.
- کپی کردن فقط README به‌جای پوشهٔ کامل skill؛ فایل SKILL.md و ساختار پوشه را حفظ کنید.
- انتظار معجزه از اسکیل بدون مرجع بصری؛ یک اسکرین‌شات یا لینک Awwwards کنار پرامپت بگذارید.
- فراموش کردن محدودیت موبایل؛ اسکیل شیدر را با بودجهٔ عملکردی مشخص کنید.
سؤالات متداول
آیا این‌ها رتبهٔ رسمی Anthropic یا Claude هستند؟
خیر. این ده مورد انتخاب عملی برای پروژه‌های سه‌بعدی و موشن وب با Codex هستند، نه جدول رسمی رتبه‌بندی.
تفاوت Skill با پرامپت معمولی چیست؟
پرامپت یک دستور موقت است؛ Skill دانش پایدار و قابل‌استفادهٔ مجدد است که در هر پروژه می‌توانید فعال کنید.
کجا باید اسکیل را نگه دارم؟
معمولاً در پوشهٔ skills پروژه یا پروفایل Personal Agent. مهم این است که مسیر برای Codex قابل‌خواندن باشد و در چت به آن ارجاع بدهید.
برای شروع فقط یک اسکیل لازم دارم؛ کدام؟
اگر لندینگ می‌سازید از awwwards-3d یا web-3d-master شروع کنید؛ اگر صحنهٔ Three.js می‌خواهید، threejs-skills سبک‌تر است.
جمع‌بندی
Codex وقتی روی وب سه‌بعدی قوی می‌شود که به او اسکیل درست بدهید: مخزن را روی گیت‌هاب پیدا کنید، به‌صورت پلاگین شخصی نصب کنید، در پرامپت نام اسکیل را بگویید، و با ترکیب مناسب (اسکرول + Three.js + موشن) جلو بروید. ده لینک بالا نقطهٔ شروع عملی همین مسیرند.
دیدگاه شما
نظر، تجربه یا پرسش خود را بنویسید. برای جلوگیری از ارسال خودکار، پاسخ کوتاه امنیتی الزامی است.