تصور کنید یک اسکرین‌شات ساده از یک صفحه وب را به هوش مصنوعی بدهید و در عرض چند ساعت، یک اپلیکیشن کامل با انیمیشن‌های پیچیده و تایپوگرافی دقیق تحویل بگیرید. این دقیقاً همان اتفاقی است که تیم Spraycash برای ساخت رابط کاربری مالی خود رقم زد.
طبق گزارش منتشر شده در ۱۴ اکتبر ۲۰۲۶، این تیم یک تحلیل دقیق از نحوه تبدیل یک اسکرین‌شات تک‌صفحه‌ای از یک لندینگ پیج به یک وب‌اپلیکیشن کاملاً کاربردی و متحرک منتشر کرد. آن‌ها برای این کار از مدل Kimi K3 در بستر عامل Devin استفاده کردند. طراحی رابط کاربری (UI) حرفه‌ای با هوش مصنوعی معمولاً به قالب‌های کلی و تکراری ختم می‌شود. همان‌طور که در تحلیل قبلی ما درباره‌ی «Vibe Coding» اشاره کردیم، بسیاری از توسعه‌دهندگان در عبور از طرح‌های ابتدایی و لایوت‌های ساده به سمت یک «هویت برند» مشخص شکست می‌خورند. Spraycash این مشکل را با ترکیب یک تصویر مرجع، مجموعه‌ای سخت‌گیرانه از توکن‌های طراحی و یک فرآیند پیاده‌سازی تحت هدایت عامل (Agent-led) حل کرد.
عامل (Agent) — شبیه به کارمندی است که نه تنها دستورات را می‌فهمد، بلکه می‌تواند ابزارها را اجرا کرده و اشتباهاتش را اصلاح کند — در اینجا نقش مجری اصلی را داشت. فرآیند با یک اسکرین‌شات شروع شد که شامل آسمانی آبی نرم، تپه‌های سبز، پروانه‌ها و یک دایره دست‌نویس دور یکی از کلمات تیتر بود. تیم با پرامپت «از این تصویر برای صفحه من الهام بگیر و انیمیشن ابرها را هم اضافه کن»، بخش Hero را ایجاد کرد که در آن کارت‌های فیش حقوقی روی یک تصویر تولید شده از آسمان و تپه (sky-hill.webp) قرار گرفته‌اند.
برای ایجاد عمق بصری، انیمیشن‌های لایه‌بندی شده اضافه شد. پنج تصویر از ابرها با سرعت‌ها و تأخیرهای شروع متفاوت در یک خط مستقیم در آسمان حرکت می‌کنند تا از حرکت همزمان و مکانیکی جلوگیری شود. پروانه‌ها نیز با استفاده از یک انیمیشن scaleX افقی (از ۱ به ۰.۴۵) شبیه‌سازی شدند تا بال زدن آن‌ها هنگام حرکت در مسیرهای آرام و تصادفی، واقعی به نظر برسد.
به نقل از مستندات فنی Spraycash، آن‌ها به‌جای استفاده از اشکال هندسی ساده، از تصاویر تولید شده برای اشیای خاص استفاده کردند تا نور و سایه کاملاً طبیعی باشد. این موارد شامل موارد زیر است:
- سکه‌ها
- گیره‌های کاغذ
- یادداشت‌های چسبان (Sticky notes)
- مهر «PAID» روی رسید
یک جزئیات کلیدی، حلقه سبز دور عبارت "us all" است. این المان در واقع یک مسیر SVG واحد است که هنگام بارگذاری صفحه، یک بار به‌صورت پویا رسم می‌شود؛ به این صورت که طول مسیر به ۱ نرمال شده و آفست خط‌چین (dash offset) به سمت ۰ متحرک می‌شود.
در بخش تایپوگرافی، یک سیستم سه-فونتی برای ایجاد سلسله‌مراتب بصری دقیق به کار رفت:
- Instrument Serif: برای تیترها و تمام مبالغ پولی. در اینجا از اعداد جدولی (Tabular numbers) استفاده شد تا هنگام تغییر سریع موجودی در هر ثانیه، عرض متن ثابت بماند و ارقام نپرند.
- Geist: برای المان‌های رابط کاربری مثل برچسب‌ها، دکمه‌ها و ردیف‌های جدول.
- Geist Mono: مخصوص کدها و شماره رسیدها.
قرار دادن مبالغ بزرگ با فونت Serif در کنار برچسب‌های کوچک و بی‌صدا با فونت Sans، تضمین می‌کند که هر صفحه یک نقطه کانونی واضح داشته باشد. پالت رنگی بر اساس زیبایی‌شناسی «کاغذ گرم» (warm paper) انتخاب شد:
- پس‌زمینه: #faf8f4
- کارت‌ها: #ffffff
- متن: #16130f
- متن ثانویه: #6b655c
- خطوط: #e7e2d9
یک رنگ سبز تاکیدی (#0f6b4f) به‌طور منسجم برای دکمه‌های اصلی، حلقه SVG، مراحل شماره‌دار و سکه‌های متحرک روی نقشه استفاده شده است. رنگ‌های کهربایی و قرمز صرفاً برای هشدارها و خطاها رزرو شده‌اند.
برای حفظ یکپارچگی در تمام صفحات، تیم از یک راهنمای عامل به نام Untitled UI (در فایل CLAUDE.md) استفاده کرد. این کار باعث شد سطوح متنی، حاشیه‌ها، سایه‌های ورودی و حلقه‌های فوکوس، فارغ از اینکه هوش مصنوعی در حال تولید کدام صفحه است، کاملاً یکسان بمانند.
فاصله‌ها از یک مقیاس سخت‌گیرانه ۸ پیکسلی (۸، ۱۶، ۲۴، ۴۰، ۶۴) پیروی می‌کنند و عرض محتوا روی ۱۰۸۰ پیکسل محدود شده است. کارت‌ها دارای شعاع ۱۴ پیکسلی و دو سطح سایه نرم هستند: یک سایه تخت برای حالت استراحت و یک سایه عمیق‌تر برای کارت‌هایی که بلند می‌شوند (Lift).
توسعه این پروژه شامل چندین حلقه اصلاحی بود. در ابتدا نوار ناوبری (Nav bar) از لبه تا لبه کشیده شده بود و یک دکمه صدا داشت. تیم با پرامپت «نوار ناوبری خیلی بلند است. باید آن را اصلاح کنی. و همچنین، چرا آیکون صدا را اینجا گذاشتی؟ باید همه این‌ها را درست کنی»، آن را تغییر داد. در نهایت، نوار ناوبری به یک کپسول سفید شناور در مرکز صفحه تبدیل شد که عرض آن فقط به اندازه لوگو، دو لینک و یک دکمه سیاه «Send pay» بود. دکمه تغییر صدا نیز به فوتر منتقل شد.
تیتر اصلی نیز تغییرات داشت. نسخه اول «پرداخت برای بقیه جهان» (Payroll for the rest of the world) بود، اما به «پرداخت برای همه ما» (Payroll for the rest of us all) تغییر یافت و زیر-تیتر آن به «پرداخت به هر کسی، در هر کجا، در هر ثانیه» تبدیل شد.
بهینه‌سازی برای موبایل نیازمند اصلاحات خاصی برای المان‌های ارزی بود. سکه‌هایی که از صفحه بیرون می‌رفتند، مجدداً در گوشه‌ها جایگذاری شدند. تیم دستور داد: «سکه‌ها در نمای موبایل در گوشه‌ها پنهان می‌شوند، این را درست کن و واحد پول نایرا (Naira) را به انیمیشن اضافه کن».
در نمایشگرهای کوچک، یک سکه طلایی نایرا در کنار دلار، روپیه و پزو قرار گرفت. همچنین اندازه ابرها به ۶۰٪ کاهش یافت و تعداد پروانه‌ها به سه عدد رسید.
برای ایجاد اسکرول نرم، از کتابخانه Lenis با مقدار lerp 0.1 استفاده شد. تیم یک مجموعه توکن حرکتی مشخص تعریف کرد:
- تغییرات ریز (Micro changes): ۸۰ میلی‌ثانیه
- هاور/فشار (Hovers/Presses): ۱۵۰ میلی‌ثانیه
- ورود المان‌ها (Entrances): ۲۵۰ تا ۵۰۰ میلی‌ثانیه
تمام انیمیشن‌ها از منحنی cubic-bezier(0.22, 1, 0.36, 1) استفاده می‌کنند تا حس «شروع سریع و استقرار نرم» را منتقل کنند. انیمیشن‌های ورود شامل یک صعود ۸ پیکسلی و یک محو شدن با تاری (blur fade) ۲ پیکسلی است. برای دسترسی‌پذیری، تنظیمات «کاهش حرکت» (Reduced-motion) تعبیه شده که در صورت فعال بودن، ابرها و پروانه‌ها را متوقف کرده و اسکرول را به حالت عادی برمی‌گرداند.
در نقشه، مسیرها به‌صورت منحنی‌های خط‌چین هستند که به سمت شهرها پیش می‌روند و سکه‌های سبز کوچک در یک حلقه روی آن‌ها حرکت می‌کنند. شهر لاگوس به‌صورت پیش‌فرض هایلایت شده و با هاور کردن سایر شهرها، مسیرهای خاص آن‌ها فعال می‌شود.
این اپلیکیشن شامل یک تور آموزشی تعاملی است که صفحه را تیره کرده و بخش‌ها را با رنگ سبز و توضیحات تک‌خطی معرفی می‌کند. این تور دارای دکمه‌های «بعدی»، «قبلی» و «رد کردن» است. یک کپسول «Show me how» در پایین سمت راست (که در موبایل به یک علامت «؟» تبدیل می‌شود) به کاربران اجازه می‌دهد تور را دوباره اجرا کنند.
در کارت نرخ ارز، به‌جای نام، از لوگوی Chainlink استفاده شده است. نرخ تبدیل با فونت Serif بزرگ نمایش داده می‌شود و یک نشان سبز کوچک «Verified by» شامل لوگو، زمان آخرین به‌روزرسانی و یک حلقه شمارش معکوس نازک دارد که با هر بار رفرش شدن قیمت، دوباره رسم می‌شود.
فرم‌ها به بخش‌های شماره‌دار (چه کسی، چه مبلغی، چه زمانی) با استفاده از اعداد Serif سبز تقسیم شده‌اند. فیلد مبلغ از فونت ۲۸ پیکسلی Serif استفاده می‌کند تا ظاهر یک فیش حقوقی فیزیکی را بازسازی کند.
صفحات مربوط به فریلنسرها از همان المان‌های پایه استفاده می‌کنند: کارت سفید، مبلغ بزرگ، یک جدول ساده و یک دکمه سبز. رسیدها به‌گونه‌ای طراحی شده‌اند که شبیه تکه‌های کاغذ با لبه‌های دندانه‌دار در پایین و مهر «PAID» باشند. هر یک از این صفحات بر اساس یک اجرای واقعی از سایت زنده است و بخش اکسپلورر، تراکنش برداشت پشت رسید را نشان می‌دهد.
این گردش‌کار ثابت می‌کند که گلوگاه توسعه UI با هوش مصنوعی دیگر توانایی کدنویسی نیست، بلکه توانایی تعریف و اجرای یک سیستم طراحی سخت‌گیرانه است. با ارائه فایل CLAUDE.md و کدهای رنگی دقیق، تیم توانست «انحراف هوش مصنوعی» (AI drift) را که معمولاً در صفحات مختلف رخ می‌دهد، حذف کند. این رویکرد در مدیریت محدودیت‌های فنی مشابه است با آنچه در تجربیات اتوماسیون پیام‌های اینستاگرام دیدیم، جایی که درک دقیق محدودیت‌های API برای رسیدن به نتیجه مطلوب ضروری بود.
برای توسعه‌دهندگان، این یعنی نقش طراح UI در حال تبدیل شدن به یک «معمار توکن» (Token Architect) است. موفقیت اکنون به تعریف محدودیت‌ها — از فاصله‌ها و منحنی‌های حرکتی گرفته تا نقش فونت‌ها — پیش از ارسال اولین پرامپت بستگی دارد.
برای بررسی کامل پیاده‌سازی، می‌توانید از سایت زنده در spraycash.onrender.com بازدید کنید یا کد منبع را در گیت‌هاب بررسی نمایید.
گام بعدی شما
- اگر از عامل‌های کدنویسی استفاده می‌کنید، یک فایل
CLAUDE.mdشامل استانداردهای فاصله (Spacing) و رنگ‌های Hex ایجاد کنید تا خروجی‌ها یکپارچه شوند. - برای المان‌های متحرک، به‌جای توصیفات کلی، از مقادیر دقیق میلی‌ثانیه و منحنی‌های Bezier در پرامپت‌ها استفاده کنید.
- سیستم تایپوگرافی خود را به سه سطح (تیتر، رابط کاربری، تک‌نویس) تقسیم کنید و هر کدام را با یک فونت مشخص به مدل معرفی کنید.
اما داستان سخت‌افزاری این تحول حتی شگفت‌انگیزتر است — به تحلیل ما درباره‌ی تراشه‌های Blackwell مراجعه کنید.
گفتگو