MotionSites Web Builder؛ مهارت رایگان Claude برای طراحی سایت سینمایی

MotionSites مهارت رایگان و متن‌باز MotionSites Web Builder را منتشر کرده است؛ ابزاری برای اینکه Claude به‌جای چیدمان‌های معمول و تکراری هوش مصنوعی، لندینگ‌پیج‌هایی با طراحی دقیق‌تر، رسانه‌های واقعی و جلوه‌های حرکتی سینمایی بسازد. نکته مهم برای شما این است که این مهارت فقط مجموعه‌ای از نمونه‌های بصری نیست و فرایند برنامه‌ریزی، ساخت، تصویربرداری و اصلاح صفحه را هم پوشش می‌دهد.

#نکات کلیدی

• MotionSites Web Builder یک مهارت رایگان برای ساخت لندینگ‌پیج با Claude است.
• این مجموعه ۴۰ پرامپت نمونه، بیش از ۵۰ ویدئوی سینمایی و ۵۵ دستور فنی دارد.
• Claude پیش از کدنویسی، مشخصات دقیق صفحه را آماده می‌کند.
• ابزار پس از ساخت صفحه از نتیجه اسکرین‌شات می‌گیرد و ایرادها را بررسی می‌کند.
• کد و دستورالعمل‌های مهارت با مجوز MIT عرضه شده‌اند.

#داخل این مهارت چه چیزهایی قرار دارد؟

در مخزن MotionSites Web Builder در GitHub، ۴۰ پرامپت نمونه از طراحی‌های رایگان و محبوب MotionSites گنجانده شده است. Claude برای هر درخواست، نزدیک‌ترین دو یا سه نمونه را می‌خواند تا سطح جزئیات و سبک طراحی موردنظر را بهتر تشخیص دهد.

یک قفسه رسانه‌ای نیز در اختیار ایجنت قرار می‌گیرد که شامل بیش از ۵۰ ویدئوی سینمایی برای بخش اصلی صفحه، ۳۰ تصویر سه‌بعدی با پس‌زمینه شفاف و ۲۹ تصویر دیگر است. این موارد روی برگه‌های تماس شماره‌گذاری‌شده نمایش داده می‌شوند تا Claude بتواند رسانه مناسب را به‌صورت بصری انتخاب کند.

بخش فنی مجموعه بیش از ۵۵ دستور اجرایی همراه با کد دارد. این دستورها قابلیت‌هایی مانند حلقه ویدئویی یکپارچه، شیشه مایع، تیترهای محوشونده کلمه‌به‌کلمه، کنترل ویدئو با حرکت ماوس، نمایش نورافکنی، کاروسل عمقی، روایت مبتنی بر اسکرول و استفاده از مدل‌های سه‌بعدی واقعی با Three.js را پوشش می‌دهند.

#از ایده اولیه تا بررسی نتیجه

سازندگان این مهارت سه علت را برای شباهت زیاد سایت‌های ساخته‌شده با هوش مصنوعی مطرح می‌کنند: برنامه مبهم، نبود رسانه واقعی و بررسی‌نشدن نتیجه نهایی. MotionSites Web Builder تلاش می‌کند هر سه بخش را در یک روند مشخص مدیریت کند.

Claude ابتدا نمونه‌های نزدیک به درخواست شما را مطالعه و رسانه مناسب را انتخاب می‌کند. سپس با تکیه بر قواعد طراحی مربوط به مقیاس نوشته‌ها، فاصله‌گذاری، رنگ، زمان‌بندی حرکت و متن صفحه، یک مشخصات اجرایی دقیق می‌نویسد و بعد از آن وارد مرحله کدنویسی می‌شود.

فرایند با تحویل اولین نسخه تمام نمی‌شود. مهارت از صفحه ساخته‌شده اسکرین‌شات می‌گیرد و با یک اسکریپت کنترل کیفیت، مواردی مانند منابع خراب، بیرون‌زدگی محتوا در موبایل، فونت‌ها و پخش ویدئو را بررسی می‌کند. نتیجه براساس یک الگوی امتیازدهی ارزیابی و در صورت نیاز اصلاح می‌شود. برای اجرای بهتر این چرخه، استفاده از Playwright پیشنهاد شده است.

#برای کاربران ابزارهای کدنویسی هوش مصنوعی چه معنایی دارد؟

این پروژه مستقیماً برای Claude عرضه شده و امکان نصب آن در Claude.ai، نسخه دسکتاپ Claude و Claude Code وجود دارد. در Claude Code می‌توانید آن را به‌صورت افزونه از مخزن پروژه نصب کنید یا پوشه مهارت را در مسیر مهارت‌های Claude قرار دهید.

حالت دیگری نیز برای تولید پرامپت در نظر گرفته شده است. در این حالت، به‌جای دریافت مستقیم کد، پرامپتی متناسب با ابزارهایی مانند Lovable، Bolt، v0، Cursor، Manus، Google AI Studio یا Kimi دریافت می‌کنید. بنابراین محتوای طراحی این مجموعه می‌تواند در گردش‌های کاری متنوع‌تری هم استفاده شود.

این رویکرد از نظر هدف به ابزارهایی مانند کتابخانه طراحی رابط کاربری Uberdesigner نزدیک است: فراهم‌کردن مواد اولیه و دستورهای دقیق‌تر برای اینکه خروجی هوش مصنوعی از قالب‌های عمومی فاصله بگیرد. معرفی MotionSites Web Builder در شبکه اجتماعی ایکس نیز بر همین امکان ساخت تجربه‌های بصری حرفه‌ای‌تر تأکید دارد.

#مجوز و محدودیت محتوای رایگان

دستورالعمل‌ها و کد این مهارت با مجوز MIT منتشر شده‌اند؛ بااین‌حال، پرامپت‌های نمونه و رسانه‌ها همچنان تحت حق نشر MotionSites قرار دارند و طبق توضیح پروژه می‌توان از آن‌ها در سایت‌هایی که با این مهارت می‌سازید استفاده کرد. محتوای موجود در مخزن یک نمونه رایگان است و مجموعه MotionSites Unlimited منابع بیشتری را در اختیار کاربران قرار می‌دهد.

#جمع‌بندی

MotionSites Web Builder می‌خواهد طراحی سایت با Claude را از یک درخواست ساده و خروجی اولیه، به فرایندی شامل انتخاب نمونه، برنامه‌ریزی، ساخت و کنترل کیفیت تبدیل کند. اگر با Claude لندینگ‌پیج می‌سازید، این پروژه رایگان می‌تواند راهی برای تجربه طراحی‌های متنوع‌تر و بررسی منظم‌تر نتیجه نهایی باشد.