مهارت متن‌باز Stageshow؛ آموزش طراحی رابط کاربری و انیمیشن‌های نمایشی به ایجنت‌های هوش مصنوعی

معرفی

پروژه Stageshow یک مهارت ایجنت (Agent Skill) رایگان و متن‌باز است که به ایجنت‌های هوش مصنوعی کدنویس آموزش می‌دهد رابط‌های کاربری نمایشی (Faux UI) بسیار چشم‌نواز و حرفه‌ای خلق کنند؛ از تصاویر ثابت بازاریابی و انیمیشن‌های دمو با حرکت نشانگر ماوس گرفته تا بنتو گریدها (Bento Grids)، موکاپ‌های گوشی همراه و نماهای داشبورد مدیریتی. این پروژه در ۳۱ اکتبر ۲۰۲۶ توسط بنجی تیلور (Benji Taylor)، مدیر طراحی پلتفرم X، منتشر شد و پست معرفی آن تنها در عرض چند ساعت از مرز ۴٬۷۰۰ لایک گذشت و به‌سرعت میان جوامع برنامه‌نویسی انگلیسی، چینی، ژاپنی و فارسی دست‌به‌دست شد.

دیدگاه تیلور این است که امروزه اکثر مدل‌های پیشرفته زبانی می‌توانند یک رابط کاربری ساختگی ایجاد کنند، اما نتیجه کار آن‌ها معمولاً شلخته، ناموزون و بیش‌ازحد سنگین از آب درمی‌آید. مهارت Stageshow صدها تصمیم ظریف طراحی را که طراحان به‌صورت دستی اتخاذ می‌کنند مکتوب کرده است تا ایجنت‌های هوش مصنوعی نیز بتوانند همان اصول را به کار ببندند. این مهارت تنها با اجرای یک دستور ساده، یعنی npx skills add benjitaylor/skills --skill stageshow، نصب می‌شود و با تمام ایجنت‌هایی که از سیستم مهارت‌ها (Skills) پشتیبانی می‌کنند، از جمله Claude Code، Codex، Gemini و Grok Build، سازگاری کامل دارد. این ابزار تحت مجوز متن‌باز MIT عرضه شده است.

توضیحات و اجزای داخلی

محتویات بسته

• فایل SKILL.md: ایده محوری ابزار در قالب یک جمله («این رابط باید شبیه به محصولی واقعی به نظر برسد که متناسب با نیاز کاربر ساده‌سازی شده، با هدفی مشخص کادربندی شده است و هر حرکتی در آن علتی دارد»)، پنج الگوی رایج شکست در طراحی، یک گردش کار هفت‌مرحله‌ای و جدولی از نمونه‌های طلایی و استاندارد.
• پوشه references/: قوانین و استانداردهای طراحی فنی (پرهیز از شلوغی، تایپوگرافی، فاصله‌گذاری و رنگ‌بندی)، اصول پویانمایی و حرکت (داستان‌سرایی بصری، ریتم و سرعت حرکت نشانگر ماوس)، کادربندی، چیدمان شبکه‌ای، پس‌زمینه‌ها، نشانه‌گذاری‌ها، علائم تجاری و فیلم‌برداری از دمو که هرکدام همراه با دلایل مشخص و نمونه‌های مقایسه‌ای خوب و بد ارائه شده‌اند.
• پوشه examples/: ده‌ها نمونه طلایی و استاندارد که ایجنت کار خود را با الگوبرداری از آن‌ها آغاز می‌کند؛ از جمله دموهای بخش هیرو (Hero) در صفحه اصلی، بنتو گریدها، سوایپ گوشی موبایل، داشبورد در کنار صفحه قفل و موارد دیگر.
• پوشه kit/: مجموعه‌ای جمع‌وجور از کامپوننت‌های ساده React (شامل صحنه نمایش، پنجره‌ها، قاب گوشی‌های هوشمند طراحی‌شده بر اساس هندسه واقعی و انیمیشن‌های بهینه‌سازی‌شده برای فریم‌ریت ثابت) که در پایگاه کد پروژه شما قرار می‌گیرند و به‌سادگی با متغیرهای طراحی (Design Tokens) اختصاصی شما هماهنگ می‌شوند.
• اسکریپت‌های کاربردی: اسکریپت film.mjs که از دمو فیلم‌برداری کرده و فریم‌های آن را روی یک شیت بازبینی قرار می‌دهد؛ اسکریپت jumps.mjs که پرش‌های ناگهانی تک‌فریم را رصد و شناسایی می‌کند؛ و اسکریپت layout.mjs که تناسب اندازه متن‌ها با کادرهای مربوطه را بررسی می‌نماید.

پنج الگوی رایج شکست که Stageshow آن‌ها را برطرف می‌کند

1. شلوغی بیش‌ازحد (Too much): درج متن‌های واقعی و متراکم در تمامی خانه‌ها و فشرده کردن بیش‌ازحد عناصر.
2. تهی بودن و کمبود محتوا (Too little): وایرفریم‌های خامی که هویت یک محصول کاربردی و واقعی را منتقل نمی‌کنند.
3. بسته‌بندی کارت‌مانند (Boxed): کوچک کردن کل نرم‌افزار درون یک کادر ساده که شبیه اسکرین‌شات پیست‌شده به نظر می‌رسد.
4. تخت و یکدست بودن (Flat): عدم وجود سلسله‌مراتب بصری به گونه‌ای که تمامی اجزا وزن و جلوه یکسانی دارند.
5. بی‌روح و بی‌هویت بودن (Bland): غیبت کامل هویت و لحن بصری خواسته‌شده در پروژه.

خروجی نهایی این ابزار یک کامپوننت معمولی React است؛ بنابراین دموی ساخته‌شده را می‌توان به‌سادگی در هر صفحه فرودی قرار داد و مانند سایر بخش‌های پروژه ویرایش کرد. تیلور تأکید می‌کند که ساخت اکثر دموها همچنان به چند دور اصلاح و بازخورد نیاز دارد و احتمال دارد با ارتقای سلیقه و بینش زیبایی‌شناختی مدل‌های هوش مصنوعی در آینده، نیاز به چنین مهارت‌هایی کمتر شود.

نحوه استفاده

راهنمای گام‌به‌گام پیاده‌سازی

1. نصب مهارت: با اجرای دستور npx skills add benjitaylor/skills --skill stageshow در ترمینال.
2. درخواست یک مورد کوچک و کاملاً مشخص از ایجنت: یک تعامل ویژه، در یک محصول خاص، با ابعادی معین؛ برای مثال: «یک دموی کوتاه و تکرارشونده برای هیرو صفحه اصلی بساز که در آن کاربری یک تسک را به هم‌تیمی خود واگذار می‌کند.»
3. ایجنت فایل مهارت را بررسی می‌کند، کار را از نزدیک‌ترین نمونه طلایی آغاز می‌نماید، دمو را پیاده‌سازی می‌کند، از آن فیلم می‌گیرد و ایرادهای مشاهده‌شده را برطرف می‌سازد.
4. فریم‌های خروجی را بررسی کنید، بازخورد دهید تا دمو تکمیل شود؛ سپس کامپوننت React را مستقیماً درون وب‌سایت خود قرار دهید.
5. اختیاری: محیط آزمایشی (Playground) را با دستور npm install && npm run dev در پوشه مهارت اجرا کنید تا تمامی نمونه‌ها و مقایسه‌های درست و غلط را مشاهده نمایید.

کاربردهای ایده‌آل

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

پیش‌نیازها: نسخه Node 20.19 یا بالاتر برای اجرای محیط آزمایشی و کتابخانه React 18 یا بالاتر برای پکیج قطعات. توجه داشته باشید که پنجره‌های رسم‌شده جنبه تصویرسازی دارند و ارتباطی با محصولات واقعی مشابه‌شان ندارند. با مهارت‌های متفرقه نیز درست مانند هر وابستگی نرم‌افزاری دیگری برخورد کرده و کدها را پیش از نصب بررسی کنید.

لینک‌های مرتبط

• مقاله توضیحی و یادداشت معرفی: https://benji.org/stageshow
• پست رونمایی در پلتفرم X: https://x.com/benjitaylor/status/2116593247854453244