Timeful: ادیتور بصری که مستقیم کد Vue می‌نویسه
ویو جیاس
فرانتاندخلاصهٔ کامل‌تر
Timeful یه ابزار طراحی بصری با رابطی شبیه Figma هست، با این فرق که خروجیش عکس یا لایه نیست، بلکه کد واقعیه. طبق معرفی خود سازنده‌ها، هر تغییری که روی canvas بدی مستقیم توی فایل‌های Vue با کلاس‌های Tailwind نوشته میشه. این کار با الگوریتم‌های قابل پیش‌بینی انجام میشه، نه با هوش مصنوعی؛ یعنی نه credit مصرف می‌کنی و نه نتیجه تصادفی می‌گیری.
همگام‌سازی دوطرفه‌ست. اگه طراح چیزی رو روی canvas عوض کنه کد به‌روز میشه، و اگه برنامه‌نویس کد رو عوض کنه طراحی آپدیت میشه. پروژه یه مخزن Git معمولی روی دستگاه خودته و هیچ‌چیز روی سرور Timeful ذخیره نمی‌شه. یعنی می‌تونی آخرین تغییرات production رو pull کنی و طراحی بلافاصله به‌روز بشه، یا با commit و push همکاری کنی و هر وقت خواستی به نسخه قبل برگردی.
سازنده‌ها روی diffهای تمیز تأکید دارن: اگه یه استایل رو عوض کنی فقط یه خط کد تغییر می‌کنه و فرمت‌بندی موجود حفظ میشه. Timeful فقط بلوک template رو تغییر می‌ده و به script و منطق برنامه دست نمی‌زنه. ابزارهای طراحی هم کامله: auto-layout (یعنی فریم‌هایی که محتوا رو خودکار می‌چینن)، شکل‌های آزاد، توکن‌های طراحی Tailwind و دیدن breakpointها و stateها کنار هم.
چون همه‌چیز کد استاندارد Vue و Tailwind هست، هر ایجنت هوش مصنوعی رو میشه به پوشه پروژه وصل کرد و Timeful بعد از تغییرات اون، طراحی رو خودکار آپدیت می‌کنه. محدودیت‌ها هم مشخصه: فقط Vue 3 با Composition API در Single-File Component و Tailwind نسخه ۳ پشتیبانی میشه. React هنوز پشتیبانی نمی‌شه، تنظیمات و پلاگین‌های سفارشی Tailwind هم نه، و import مستقیم از Figma وجود نداره. در عوض با Vite و Nuxt کار می‌کنه.
نکات کلیدی:
- تغییرات بصری بدون هوش مصنوعی و با الگوریتم‌های قطعی به کد Vue و Tailwind تبدیل می‌شن
- همگام‌سازی دوطرفه بین canvas و کد، روی یه مخزن Git محلی
- فقط Vue 3 (Composition API، SFC) و Tailwind 3 پشتیبانی میشه
- React، تنظیمات سفارشی Tailwind و import از Figma فعلاً پشتیبانی نمی‌شن
- فقط بلوک template تغییر می‌کنه و هر تغییر استایل معمولاً یه خط diff داره
- با Vite و Nuxt سازگاره
