یه اتفاق تکراری افتاده بود
هر بار که میخواستم یه لندینگپیج بنویسم، یه صفحه رو فارسی کنم، یا از یه انیمیشن HTML ویدیو بسازم، داشتم یکسری کارها رو ذهنی انجام میدادم. دانش توی سرم پراکنده بود. باید میاومد توی یه سیستم.
سه ماه پیش چکلیست کیفیت ترجمه رو سه بار نوشتم. یه بار برای لندینگپیج انتظار، یه بار برای داستان فاندر، یه بار برای صفحه امکانات. هر بار داشتم از صفر شروع میکردم. هر بار یه چیزی رو فراموش میکردم.
سئو — hreflang رو هر بار از نو چک میکردم. محتوا — عبارات ممنوع هر هفته برمیگشتن و من یادم میرفت کدوما بودن. آنالیتیکس — معماری رضایت رو هر بار از صفر میساختم. مشکل توانایی نبود. مشکل این بود که داشتم بدون سیستم کار میکردم.
پس یه سیستم ساختم. ۱۰ اسکیل. هر کدوم یه گردشکار کامل: مأموریت، دامنه، قوانین، دستورالعمل گامبهگام، دروازههای اعتبارسنجی و قالب خروجی. هر قانون از یه اشتباهی که کردم اومده. هر دروازه از یه شکستی که دیدم.
پرامپت یه دستور یکبارهست. اسکیل یه گردشکار تکرارپذیره که هر بار بهتر میشه.
از HTML ویدیو بساز، با API روش نریشن بذار
یه فایل HTML با انیمیشنهای CSS بنویس. Puppeteer هر فریم رو ضبط میکنه. FFmpeg اونا رو MP4 میکنه. چهار نسبت تصویر. یه دستور.
این اسکیله که بیشتر از همه استفاده میکنم. دیگه از Figma خروجی نمیگیرم و Premiere نمیبرم. انیمیشنها قبلاً توی HTML و CSS سایت هستن. چرا مرورگر رو ضبط نکنم؟
این ویدیوی لانچ هست که با همین ابزار ساختم. هر فریم از HTML رندر شده. هر انیمیشن با CSS کنترل میشه:
بهترین ابزار ویدیو همونیه که قبلاً داری: یه مرورگر.
توی ۳ مرحله نصبش کن
Node.js, Puppeteer, FFmpeg. کل استک همینه. بدون After Effects. بدون Premiere. بدون خروجی Figma.
ریپو رو کلون کن
git clone https://github.com/ShayanSpiel/Skills.git
ریپو ۱۰ اسکیل، اسکریپتهای رندر، قالبهای HTML و canvasهای پرکردنی داره.
وابستگیها رو نصب کن
npm install puppeteer && brew install ffmpeg
Puppeteer Chrome بیسر دانلود میکنه. FFmpeg رمزگذاری رو انجام میده. هر دو رایگانن.
اولین ویدیوت رو بساز
bash scripts/render-all.sh b 30
یه فایل HTML. چهار نسبت تصویر. خروجی توی output/ ذخیره میشه.
هر اسکیل از یه الگو پیروی میکنه: SKILL.md رو بخون، قالبها رو برای محصولت پر کن، گردشکار رو اجرا کن. راهنمای کامل شخصیسازی هر اسکیل رو توضیح میده.
MiMo 2.5 کد نوشت. من کارگردانی کردم.
کل پایپلاین ویدیو با MiMo 2.5 ساخته شده — همون مدلی که انیمیشن صفحه 404 این سایت رو طراحی کرده.
گردشکار این نیست که به AI بگی «ویدیو بساز». گردشکار اینه: من صحنهها و زمانبندی رو تعریف میکنم، MiMo 2.5 کد HTML/CSS رو مینویسه، من خروجی رو بررسی میکنم، Puppeteer فریمها رو رندر میکنه. AI حدس نمیزنه ویدیو چه شکلی باشه. من میگم. اون کد مینویسه. من تأیید میکنم.
این الگوی دروازهها روی تولید ویدیو پیاده شده. جهت خلاقانه مال من هست. اجرا کار MiMo 2.5 هست. دروازههای کیفیت همون ۳۰ بررسیای هستن که روی همه چیز استفاده میکنم: هوک میخوره، متن خواناست، CTA به صفحه درست وصله، رنگها از سیستم طراحی هستن.
MiMo 2.5 کد مینویسه. من کارگردانی میکنم. دروازهها تصمیم میگیرن چی بره روی سایت.
این همون چیزیه که MiMo 2.5 میتونه طراحی کنه
/404/ رو باز کن. هر انیمیشن — مدارها، رادار، ذرات، گلیچ — با یه پرامپت توسط MiMo 2.5 نوشته شده با استفاده از توکنهای طراحی و قراردادهای حرکتی این سایت.
صفحه 404 بهترین نمایش توانایی طراحی MiMo 2.5 هست. از همون متغیرهای CSS بقیه سایت استفاده میکنه. همون فونت Outfit. همون پالت Gruvbox Dark. همون توکنهای border-radius. تنها تفاوت حرکته: CSS keyframes که سرعت مدارها، چرخش رادار، شنای ذرات و افکتهای گلیچ رو کنترل میکنن.
به MiMo 2.5 توکنهای سیستم طراحی، کلیدهای انیمیشن و یه دستور دادم: صفحه 404 رو طوری طراحی کن که حس یه مرکز فرمان AI رو داشته باشه که اتصالش قطع شده. ۴۰۰ خط HTML/CSS/JS نوشت. من بررسی کردم. رفت روی سایت. همون پایپلاین روی هر صفحه دیگه سایت هم کار میکنه.
کل استک. یه ریپو.
هر اسکیل یه گردشکار کامله: مأموریت، دامنه، قوانین اصلی، دستورالعمل گامبهگام، دروازههای اعتبارسنجی و قوانین خروجی. همه شخصیسازیشدنی.
این اسکیلها رو با ایجنت AI استفاده کن
یه SKILL.md رو توی context LLMت بذار. اسکیل تبدیل میشه به گردشکار ایجنت. بدون فریمورک اختصاصی.
اسکیل رو انتخاب کن SKILL.md رو بخون. هر اسکیل با «این اسکیل رو شخصیسازی کن» شروع میشه — چی رو برای محصولت عوض کن. همه ۱۰ تا رو ببین.
قالبها رو پر کن Canvas ICP، قالب واژهنامه، مرجع توکنهای طراحی، قالب صحنه ویدیو. چارچوبهای ساختاریافته با مثال، نه داک خالی.
توی ایجنتت لود کن SKILL.md رو توی context window LLMت بذار. ایجنت حالا کل گردشکار رو داره: مأموریت، قوانین، مراحل اعتبارسنجی. SpielOS همینجوری کار میکنه — همه عملیات ایجنت از یه اسکیل رد میشه.
اینا دمو نیستن. اینا سیستمهای پشت SpielOS هستن. هر قانون از یه اشتباه اومده. هر دروازه از یه شکست. حالا عمومی شدن.
ریپو رو کلون کن، جزئیات محصولت رو پر کن و شروع کن بفرست.
ریپوی Skills رو کلون کن