اگر امروز از عامل‌های کدنویسی برای ساخت رابط‌های کاربری استفاده می‌کنید، احتمالاً متوجه شده‌اید که این ابزارها در بازتولید «روح» و حرکت نرم یک صفحه کاملاً ناتوان‌اند. آن‌ها می‌توانند رنگ‌ها و تایپوگرافی را دقیقاً اجرا کنند، اما نمی‌فهمند یک المان در لحظهٔ تعامل با کاربر چگونه باید «نفس بکشد» یا یک المان دنبال‌کننده نشانگر (cursor-tracking) در زمان واقعی چگونه مقیاس شود.
برای حل این مشکل، در ۹ جولای ۲۰۲۶ بسته‌ای به نام web-reverse-engineer منتشر شد که به این عامل‌ها قدرت می‌دهد «رفتار زمان اجرا» (Runtime Behavior) — یعنی همان حرکات ظریف و تعاملاتی که در مستندات طراحی ایستا همیشه گم می‌شوند — را مستقیماً از وب‌سایت‌ها استخراج کنند.
شکاف در پشته کدنویسی هوش مصنوعی
بیشتر پشته‌های فعلی کدنویسی هوش مصنوعی بر توکن‌های ایستا یا گردش‌های کاری تکرارپذیری به نام SKILL.md تکیه دارند. این ابزارها تضمین می‌کنند که پالت رنگی سازگار باشد، اما در درک سرعت یک نمایش محتوا که با اسکرول فعال می‌شود (scroll-triggered reveal) یا ریاضیات پشت یک انیمیشن رویه‌ای (procedural animation) شکست می‌خورند.
فایل‌های طراحی مانند DESIGN.md تنها خطوط کلی و پایه‌ای برای رنگ‌ها، توکن‌های فاصله (spacing tokens) و مقیاس‌های تایپوگرافی فراهم می‌کنند. عامل‌های کدنویسی — مانند Claude Code، Cursor، Gemini CLI و Codex — می‌توانند این دستورات را با دقت دنبال کنند تا خروجی سازگاری داشته باشند. با این حال، یک اسکرین‌شات نمی‌تواند نحوه چرخش یک چشم SVG را برای دنبال کردن نشانگر موس توضیح دهد و یک فایل CSS هم هدف یا قصد پشت یک سرعت خاص در انیمیشن را روشن نمی‌کند.
سازوکار عملکرد
طبق مستندات این پروژه در dev.to، ابزار web-reverse-engineer به عنوان یک گردش‌کار قابل حمل در قالب SKILL.md عمل می‌کند. این ابزار لایه‌ای را پر می‌کند که پیش از مرحله پیاده‌سازی قرار دارد: مطالعه رفتار زمان اجرای یک سایت مرجع — یعنی منطق تعامل و زمان‌بندی حرکات آن — و تبدیل این مشاهدات به داده‌های ساختاریافته‌ای که یک عامل بتواند از آن‌ها استفاده کند.
در مستندات صراحتاً ذکر شده است که این ابزار یک «کپی‌کننده وب‌سایت» نیست. برای جلوگیری از تکرار یا سرقت اثر، این ابزار از مجموعه‌ای سخت‌گیرانه و غیرقابل مذاکره از اصول پیروی می‌کند:
- تمرکز بر زمان اجرا: به جای بررسی کدهای منبع اختصاصی، فایل‌های فشرده (minified bundles)، رشته‌های شیدر (shader strings) یا استایل‌شیت‌ها، فقط رفتار زنده در زمان اجرا را می‌سنجد.
- استخراج اصول: به جای کپی کردن دارایی‌های خام یا رسانه‌ها، «کلاس حرکت» (class of motion)، الگوهای تعاملی و ایده‌های ساختاری را بیرون می‌کشد.
- پیاده‌سازی اصیل: عامل را هدایت می‌کند تا هر خط کد را از صفر، با استفاده از یک برند متفاوت، متون متفاوت و سرعت انیمیشن تنظیم‌شده (re-tuned) بنویسد.
- قابلیت حمل: یک مهارت بازتولیدپذیر ایجاد می‌کند که عامل بتواند در هر سایت مرجع دیگری در آینده از آن استفاده کند، نه اینکه صرفاً یک اسکریپت یک‌بار مصرف باشد.
کاربردهای عملی و دموها
برای اثبات این سازوکار، توسعه‌دهنده سه دموی عملی و ملموس را به اشتراک گذاشت که گذار از مرحله مشاهده به پیاده‌سازی را به تصویر می‌کشند:
- بوم محیطی (Ambient Canvas): ساخت یک صفحه تاریک و کامل که دارای حرکات پس‌زمینه مداوم است؛ حرکاتی که باعث می‌شود صفحه بدون نیاز به محرکی خاص، «زنده» به نظر برسد.
- تعاملات خرد (Micro-Interaction): بازسازی یک چشم SVG که نشانگر موس را دنبال می‌کند. این مورد نیازمند محاسبه ریاضیات تعامل از صفر بر اساس مختصات واقعی اشاره‌گر بود، نه اینکه صرفاً یک تغییر CSS (transform) را از روی ظاهر حدس بزند.
- حرکات رویه‌ای (Procedural Motion): ساخت یک بخش Hero روشن با استفاده از انیمیشن موج سینوسی در Canvas 2D. از آنجایی که هیچ منبعی برای کپی وجود نداشت، حرکت باید از طریق مشاهده صفحه در حال اجرا استخراج می‌شد.
این یک رویکرد «اول ببین، بعد بساز» است. در هر سه دمو، فرآیند با اندازه‌گیری صفحه در حال اجرا و مستندسازی اقدامات آن آغاز شد، پیش از آنکه حتی یک خط کد نوشته شود.
لایه تأیید انسانی
این رویکرد یک محدودیت بنیادی در توانایی فعلی هوش مصنوعی را می‌پذیرد: عامل‌ها نمی‌توانند «تأیید» کنند که آیا یک انیمیشن برای یک انسان طبیعی به نظر می‌رسد یا خیر. در واقع شکافی میان «تأیید فنی کد» (Build Passing) و «تأیید دمو» (Demo Passing) وجود دارد.
یک کد ممکن است از نظر Linter-ها تأیید شود و کاملاً درست کامپایل گردد، اما اگر یک فرد عادی در حالی که برای سه ثانیه به آن نگاه می‌کند، متوجه حرکت نشود، دمو شکست خورده است. این چالش دقیقاً با مفاهیمی که در چارچوب V-F-C برای کاهش خطاهای اصلاحی از طریق تحلیل بازخوردهای بصری بررسی شده است، هم‌سو است؛ جایی که تأیید انسانی نقش حیاتی در کیفیت نهایی دارد. چون یک عامل نمی‌تواند این حس را درک کند، این گردش‌کار شواهدی از جمله توالی فریم‌ها (frame sequences) و اسکرین‌شات‌ها را ثبت می‌کند تا دقیقاً یک انسان بتواند تصمیم زیبایی‌شناختی نهایی را بگیرد.
برای توسعه‌دهندگانی که از Claude Code، Cursor، Gemini CLI یا Codex استفاده می‌کنند، این تغییر یعنی گذار از مدل «کپی-پیست» به «مشاهده-پیاده‌سازی». این بدان معناست که عامل دیگر درباره زمان‌بندی حرکت حدس نمی‌زند، بلکه بر اساس مشاهدات ساختاریافته از یک صفحه زنده، کد را می‌سازد. همچنین این رویکرد به جای تکیه بر حافظه‌های کوتاه‌مدت، تلاش می‌کند الگوهای رفتاری را به شکلی سیستماتیک ثبت کند، مشابه آنچه در API جدید استک اورفلو برای جلوگیری از تکرار اشتباهات مدل‌ها به دنبال آن بود.
این ابزار که با دستور npm install web-reverse-engineer قابل نصب است، نیاز به نوشتن دستی مستندات طولانی و خسته‌کننده برای حرکات را از بین می‌برد. این ابزار مشکل «لایه نامرئی» در سیستم‌های طراحی را حل می‌کند؛ لایه‌ای که معمولاً تنها در مرورگر وجود دارد و در اسناد طراحی ثبت نمی‌شود.
گام بعدی شما
- اگر از عامل‌های کدنویسی استفاده می‌کنید، ابزار web-reverse-engineer را نصب کنید تا دقت پیاده‌سازی انیمیشن‌ها را بسنجید.
- به جای ارسال اسکرین‌شات‌های ایستا، سعی کنید توالی فریم‌های حرکتی سایت‌های مرجع را به عنوان داده ورودی به مدل بدهید.
- تفاوت میان «تأیید فنی کد» و «تجربه بصری کاربر» را در بررسی نهایی هر ویژگی تعریف کنید.
اما ابعاد سخت‌افزاری این پردازش‌های بصری حتی پیچیده‌تر است — به تحلیل ما درباره تأثیر توکن‌های API در مقیاس صنعتی برای عامل‌ها مراجعه کنید.
گفتگو