مرگ ماکت‌ها: چرا طراحی با کد برنده‌ی جایزه‌ی ۲۰۲۶ شد؟

ماکت دیگر مرده است. نه به عنوان یک طرح اولیه، نه به عنوان یک ابزار تفکر، نه به عنوان یک تخته خلق و خو. به عنوان یک محصول قابل تحویل. قاب مسطح Figma که طراحان پانزده سال به عنوان محصول نهایی ارائه می‌دادند، در سال ۲۰۲۶ رقابت را باخت و آن را به یک جزء در حال اجرا که یک مهندس می‌تواند همان بعد از ظهر مستقر کند، واگذار کرد.

این یک برداشت داغ نیست. هوش مصنوعی اکنون یک پاراگراف از قصد را به یک جزء React کارآمد تبدیل می‌کند، سریع‌تر از آنچه اکثر طراحان می‌توانند یک سربرگ در Figma قرار دهند. توکن‌های طراحی جایگزین تخته‌های هنری به عنوان منبع حقیقت شدند. استودیوهایی که هنوز در سال ۲۰۲۶ عرشه‌های Figma را به عنوان محصولات نهایی قابل تحویل می‌فروشند، در حال از دست دادن خلاصه‌ها به تیم‌هایی هستند که کد زنده ارسال می‌کنند و شکاف قیمت هر سه ماه در حال افزایش است.

دلیل طراحی در کد، پشته‌ای که برنده شد، بده‌بستان‌های صادقانه و نقشی که باقی می‌ماند.

ماکت از بین رفته و میز تحریر از آن پیشی گرفته است

دوران ماکت‌سازی به عنوان محصول قابل تحویل به پایان رسیده است و استودیوهایی که هنوز در سال ۲۰۲۶ دک‌های Figma را به عنوان فینال می‌فروشند، قیمت‌گذاری خود را خارج از بریف انجام می‌دهند. گردش کار ماکت‌سازی به مدت پانزده سال منطق روشنی داشت. طراح، فریم‌های مسطح را در Figma ارسال می‌کند. مهندس فریم‌ها را به کد تبدیل می‌کند. ذینفعان فریم‌ها را تأیید می‌کنند. تولید بعداً به نتیجه می‌رسد، گاهی اوقات هرگز. این منطق زمانی از بین رفت که تولید دیگر گلوگاه نبود.

در سال ۲۰۲۶، گلوگاه قضاوت است، نه خروجی. هوش مصنوعی لایه تولید را در عرض چند دقیقه ارسال می‌کند. فریم مسطح Figma اکنون کندترین بخش خط تولید است، نه سریع‌ترین، و مشتریان متوجه شده‌اند. تیمی که یک قطعه در حال اجرا را در یک بعد از ظهر تولید می‌کند، چهار چرخه را قبل از اینکه تیم تولیدکننده ماکت hi-fi یک بار ارسال کند، یاد می‌گیرد.

ماکت‌سازی به دلیل بدتر شدن طراحان از بین نرفت. به این دلیل از بین رفت که میز تحریر بهتر شد.

آنچه واقعاً در سال ۲۰۲۶ تغییر کرد

این تغییر یک ابزار نبود، بلکه یک پشته بود که به یکباره به جرم بحرانی رسید. Figma فریم‌های Figma را به فریم‌های آماده برای انتشار React تبدیل کرد. کرسر با shadcn اجزای سازگار با طراحی را ارزان و قابل تولید کرد. v0، Bolt و Lovable حلقه تبدیل به محصول را برای برنامه‌های کامل بستند. Claude Code یک عامل کدنویسی واقعی را در یک مخزن واقعی قرار داد، با انسان‌ها در تفاوت. توکن‌های طراحی، که در پیش‌نویس W3C رسمیت یافتند و توسط هر تیم جدی پذیرفته شدند، به جای صفحه طراحی، به منبع اصلی حقیقت تبدیل شدند.

هر یک از آنها به نوعی قبل از سال ۲۰۲۶ وجود داشتند. چیزی که تغییر کرد این بود که همه آنها در یک پنجره بالغ شدند. خروجی ترکیبی یک گردش کار است که در آن برنامه در حال اجرا مصنوع و صفحه طراحی پیش‌نویس است، نه برعکس.

Figma Make، Figma را به یک ساطع‌کننده کد تبدیل کرد.

Figma Make با انتشار اجزای React مستقیماً از فریم‌ها، شکاف بین صفحه طراحی و کدبیس را از بین برد. فریم‌ها از لحظه‌ای که Figma خودشان آنها را به یک پیش‌نویس تبدیل کردند، دیگر قابل تحویل نبودند. طراحانی که از Make استفاده می‌کنند، فریم را به مهندسی تحویل نمی‌دهند، آنها یک کامپوننت کارآمد را به یک اسپرینت می‌دهند که می‌تواند با کمی پاکسازی در مخزن قرار گیرد.

Make بی‌نقص نیست. کد تولید شده هنوز به یک چشم ارشد نیاز دارد، نگاشت توکن هنوز در فایل‌های قدیمی جزئی است و منطق تعاملی پیچیده هنوز به کار انسانی نیاز دارد. هیچ‌کدام از این موارد برای این سوال که آیا یک فریم مسطح قابل تحویل در سال 2026 است یا خیر، مهم نیست. اینطور نیست. Figma خودش این تصمیم را گرفت.

با ترکیب حالت توسعه (Dev Mode) و Figma MCP، کل جریان از Figma به یک برنامه در حال اجرا، از یک انتقال چند روزه به یک سفر رفت و برگشت در همان روز کاهش یافت.

کرسر و شادکن (shadcn) کد طراحی-متقاعد را ارزان کردند

کرسر با شادکن، زحمت ساخت اجزای قابل دسترس و مطابق با برند را از بین برد و این زحمت دقیقاً همان چیزی است که گردش کار ماکت‌سازی برای توجیه آن استفاده می‌کرد. طراحی که به یک جزء تولیدی "متقاعد به طراحی" نیاز داشت، یک هفته را صرف حاشیه‌نویسی فاصله، نوع، رنگ، حالت‌ها و تحویل آن به مهندسی می‌کرد. کرسر و شادکن آن جزء را بنا به تقاضا، با انواع توکن-آگاه، که به طور پیش‌فرض قابل دسترسی هستند، در پانزده دقیقه تولید می‌کنند.

این ترکیب مهم است. کرسر یک مخزن واقعی را با یک تفاوت واقعی ویرایش می‌کند. شادکن اجزا را به عنوان کدی که شما دارید ارسال می‌کند، نه به عنوان بسته‌ای که به آن وابسته هستید. توکن‌های Tailwind به طور واضح به هر دو نگاشت می‌شوند. نتیجه، کد تولیدی با وفاداری به طراحی به قیمت یک فریم Figma است که در وهله اول رایج‌ترین دلیل برای ارسال Figma را از بین برد.

v0، Bolt و Lovable حلقه تبدیل اعلان به محصول را بستند

v0 از Vercel، Bolt از StackBlitz و Lovable حلقه تبدیل اعلان به یک برنامه در حال اجرا و قابل استقرار را در عرض چند دقیقه بستند. هیچ یک از این ابزارها بی‌نقص نیستند. هر سه سریع‌تر از تولید یک ماکت hi-fi از همان سطح هستند.

v0 برنده لایه کامپوننت با وفاداری به طراحی است زیرا به صورت بومی با shadcn و Tailwind صحبت می‌کند. Bolt برنده نمونه اولیه مرورگر فول‌استک است زیرا در همان جلسه یک backend ایجاد می‌کند. Lovable برنده MVP بنیانگذار است زیرا برای ارسال محصول توسط افراد غیرمهندس بدون فروشگاه توسعه ساخته شده است. هر یک از آنها هدف را با سرعتی که مشتریان انتظار یک moodboard را دارند، به یک سطح کاری تبدیل می‌کنند.

وقتی مشتریان می‌بینند که یک برنامه‌ی در حال کار در زمانی که قبلاً یک تخته‌ی خلق و خو طول می‌کشید، وجود دارد، تخته‌ی خلق و خو دیگر نمی‌تواند خلاصه‌ی کار را ببرد.

Claude Code همکاری بلادرنگ را روی یک برنامه‌ی در حال اجرا قرار داد.

Claude Code روی یک مخزن واقعی، به طراحان و مهندسان یک سطح کاری مشترک داد که محصول زنده است، نه نمایشی از آن. الگو ساده است. طراح با Claude Code روی برنامه‌ی در حال اجرا جفت می‌شود. یک کامپوننت را ویرایش می‌کند. تغییر را در مرورگر در همان دقیقه آزمایش می‌کند. مهندس تفاوت را بررسی می‌کند. ارسال می‌شود.

آن حلقه‌ی همکاری نزدیک‌ترین چیز به طراحی روی تخته سفید است که صنعت از زمان ارسال CSS دیده است. با این تفاوت که تخته سفید برنامه‌ی تولید است، نشانگر یک تغییر کامپوننت واقعی است و پاک‌کن یک تفاوت گیت است. گردش کار ماکت نمی‌تواند با حلقه‌ای به این محکمی رقابت کند.

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

توکن‌های طراحی به منبع حقیقت تبدیل شدند

توکن‌ها، نه آرت‌بوردها، منبع اصلی حقیقت در سال ۲۰۲۶ هستند. همین تغییر، بخش عمده‌ای از گردش کار قابل تحویل نهایی Figma را کنار گذاشت. وقتی رنگ، فاصله‌گذاری، تایپوگرافی، شعاع، حرکت و ارتفاع در یک فایل توکن که ابزار طراحی آن را می‌خواند و کدبیس آن را می‌خواند، وجود داشته باشند، آرت‌بورد رندر توکن‌ها است، نه تعریفی از آنها.

مشخصات توکن‌های طراحی W3C، دیکشنری سبک، فایل‌های تم Tailwind و افزونه‌های توکن در Figma همگی به یک ایده همگرا شدند. توکن‌ها در بالادست، هر سطح در پایین‌دست. تیمی که از این طریق کار می‌کند، فایل توکن را ویرایش می‌کند، به‌روزرسانی Figma را تماشا می‌کند، به‌روزرسانی برنامه در حال اجرا را تماشا می‌کند و ارسال می‌کند. هیچ تخته هنری مسطحی که ارزش ارسال به عنوان یک محصول نهایی را داشته باشد در آن جریان وجود ندارد زیرا فایل توکن از قبل یکی است.

این بخشی است که اکثر استودیوهایی که هنوز دسته‌های Figma را می‌فروشند، درونی‌سازی نکرده‌اند و به همین دلیل است که قیمت‌های آنها کاهش می‌یابد. برای مسیر ارتقا، به انتقال طراحی از Figma به توسعه مراجعه کنید.

جایی که ماکت‌ها هنوز در سال 2026 برنده می‌شوند

ماکت‌ها هنوز جایگاه خود را برای چهار شغل به دست می‌آورند. تظاهر به خلاف این، نادرست است و نوعی ادعای گزاف است که باعث می‌شود بقیه این استدلال رد شود.

اول، ایده‌پردازی اولیه. یک فریم مسطح Figma در مرحله واگرایی سریع‌تر از راه‌اندازی یک ویرایشگر کد برای یک دور سی دقیقه‌ای "چه می‌شد اگر این شکلی بود" است. دوم، طرح‌های اولیه برند. کار لوگو، کاوش هویت، مطالعات تایپ، پیش‌اجرای سیستم‌های رنگی، این موارد هنوز به یک صفحه طراحی مسطح یا در Illustrator قبل از وجود یک فایل توکن تعلق دارند. سوم، کاوش بصری خالص بدون پشته. دسته‌بندی‌های جدید محصول، مفاهیم مبتنی بر حس و حال، چیزهایی که هنوز هیچ پایگاه کدی ندارند. چهارم، ارائه تصمیمات سطح برند به مشتری که در آن سطح، خروجی نیست، سیستم است.

هر چیز دیگری، هر صفحه‌ای که به یک کاربر واقعی ارسال می‌شود، هر کامپوننتی که در یک محصول وجود دارد، هر صفحه‌ای که ایندکس می‌شود، به کد در سال ۲۰۲۶ تعلق دارد.

نقش جدید، طراحان به عنوان ویرایشگران ترکیب زنده

طراح ۲۰۲۶ یک ویرایشگر ترکیب زنده در یک برنامه در حال اجرا است، نه یک تولیدکننده فایل مسطح. کار توسط سطح ارسال شده قضاوت می‌شود، نه صفحه طراحی. خروجی یک کامپوننت مستقر است، نه یک فریم.

این نقش بیشتر طاقت‌فرسا است، نه کمتر. یک ویرایشگر ترکیب زنده، کد را می‌خواند، توکن‌ها را ویرایش می‌کند، یک diff واقعی ارسال می‌کند و مسئول سطح اجرا است. همچنین درآمد بهتری دارد، زیرا کار با سرعت تولید پیش می‌رود و ارزش قضاوت است، نه تعداد متغیرها. افراد مسنی که این تغییر را انجام می‌دهند، نرخ‌های بالاتری دریافت می‌کنند زیرا محصول نهایی یک برنامه کاربردی است، نه یک دسته نرم‌افزاری که یک فرد جوان‌تر می‌توانست تولید کند.

اگر می‌خواهید رابط کاربری محصولی با کد روی پشته ۲۰۲۶ ارسال شود، استخدام ⟦برند ۰⟧. AppBrainy مهندسی کامل محصول را با طراحان در diff ارسال می‌کند. ClaudeBrainy بسته‌های مهارت و کتابخانه‌های سریع را ارسال می‌کند که هوش مصنوعی را به لایه تولید یک پایگاه کد واقعی تبدیل می‌کنند.

چگونه Linear، Vercel، Anthropic و Anysphere در واقع کار می‌کنند

تیم‌هایی که بهترین رابط کاربری محصول را در سال ۲۰۲۶ ارسال می‌کنند، یک شکل گردش کار را به اشتراک می‌گذارند. توکن‌ها در بالادست. کد به عنوان بوم. هوش مصنوعی به عنوان لایه تولید. طراحان در diff.

تیم طراحی Linear با کدبیس به عنوان منبع حقیقت رفتار می‌کند. توکن‌ها در مخزن ذخیره هستند، کامپوننت‌ها در مخزن ذخیره هستند، طراحان درخواست‌های pull را برای برنامه در حال اجرا ارسال می‌کنند. صفحات تغییرات و ویژگی‌های آنها خروجی‌های Figma نیستند، بلکه خود محصول هستند. Vercel همان شکل را در صفحه اصلی و سطوح v0 خود اجرا می‌کند، و طراحان مستقیماً آن را به برنامه مستقر ارسال می‌کنند و از v0 برای ایجاد انواع الگوهای جدید در عرض چند دقیقه استفاده می‌کنند. تیم محصول Anthropic سطوح محصول Claude را با طراحانی که کد واقعی برنامه را می‌خوانند و ویرایش می‌کنند، اغلب با خود Claude Code به عنوان دستیار تولید، می‌سازد. Anysphere، تیم Cursor، غذای سگ خود را می‌خورد: طراحان درون Cursor روی کدبیس Cursor کار می‌کنند، که قوی‌ترین سیگنال ممکن برای واقعی بودن گردش کار است.

شکل سازگار است. هیچ‌کدام از این تیم‌ها Figma را به عنوان یک محصول نهایی ارائه نمی‌دهند. همه آنها با صفحه طراحی به عنوان یک ابزار تفکر و با سطح اجرایی به عنوان یک محصول مصنوعی رفتار می‌کنند.

داستان هشداردهنده، استودیوهایی که هنوز در سال ۲۰۲۶ دک‌های Figma را می‌فروشند

استودیوهایی که هنوز دک‌های Figma را به عنوان محصولات نهایی ارائه می‌دهند، در حال از دست دادن خلاصه پروژه به تیم‌هایی هستند که کد زنده ارائه می‌دهند. شکاف قیمت هر سه ماه در حال افزایش است و دلیل آن زیبایی‌شناختی نیست، بلکه ساختاری است.

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

این یک پیش‌بینی نیست. همین الان در رزروهای Calendly در حال وقوع است. استودیوهایی که هنوز محصول Figma را به عنوان محصول نهایی در نظر می‌گیرند، به مشتریان خود آموزش می‌دهند تا با فروشنده بعدی تماس بگیرند.

سوالات متداول

آیا ماکت واقعاً از بین رفته است؟

ماکت به عنوان یک محصول نهایی برای رابط کاربری محصول ارسال شده در سال 2026 از بین رفته است. این محصول به عنوان یک ابزار تفکر در مراحل اولیه، یک سطح طراحی برند و یک بوم واگرایی، زنده و سرحال است. تغییر در ماهیت محصول نهایی است، نه در اینکه آیا ماکت‌ها نقشی دارند یا خیر.

طراحی با کد در واقع به چه معناست؟

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

آیا طراحان باید مهندسی یاد بگیرند؟

طراحان باید کد را بخوانند، توکن‌ها را ویرایش کنند، یک سرور توسعه را اجرا کنند و یک تفاوت را بررسی کنند. آنها نیازی به نوشتن کد React در سطح تولید از ابتدا ندارند. هوش مصنوعی بار سنگین کد تولید را بر عهده می‌گیرد. وظیفه طراح ترکیب، قضاوت، سلیقه و سطح اجرا است.

آیا Figma تمام شده است؟

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

در مورد کار برند و طراحی هویت چطور؟

طراحی برند و هویت هنوز در ابزارهای مسطح وجود دارند. لوگوها، حروف، سیستم‌های رنگی، طرح‌های هویت، اینها متعلق به Figma، Illustrator یا یک دفترچه طراحی قبل از وجود هرگونه کدی هستند. این تغییر در مورد رابط کاربری محصول است، نه طراحی برند.

سریع‌ترین راه برای انجام این تغییر چیست؟

سه حرکت. توکن‌های shadcn و Tailwind را یاد بگیرید. طراحی جفتی با Cursor یا Claude Code در یک مخزن واقعی. یک جزء را به عنوان درخواست pull مستقر در این سه ماهه ارسال کنید. حرکت سوم، حرکتی است که اهمیت دارد.

در سمت راست تغییر قرار بگیرید

گردش کار ماکت‌سازی عملکرد بسیار خوبی داشت. در سال ۲۰۲۶، رقابت را به یک برنامه در حال اجرا باخت و تیم‌هایی که رابط کاربری محصول را به صورت کد ارسال می‌کنند، هزینه بیشتری دریافت می‌کنند، سریع‌تر یاد می‌گیرند و خلاصه‌هایی را که استودیوهای Figma-deck قبلاً داشتند، برنده می‌شوند.

سه حرکت برای قرار گرفتن در سمت راست. اول، توکن‌ها را به بالادست منتقل کنید. رنگ، نوع، فاصله، شعاع، حرکت، ارتفاع. یک فایل، هر دو ابزار آن را می‌خوانند، هیچ صفحه هنری مالک آن نیست. دوم، shadcn یا معادل آن را روی یک مخزن واقعی اجرا کنید، با Cursor یا Claude Code جفت کنید و یک جزء را به عنوان درخواست pull مستقر در این سه ماهه ارسال کنید. سوم، تحویل را تغییر دهید. فروش دسته‌های Figma را به عنوان نسخه نهایی متوقف کنید. اجزای ارسال شده، برنامه‌های مستقر شده، سطوح در حال اجرا را بفروشید.

اگر می‌خواهید رابط کاربری محصول با کد روی پشته 2026 ارسال شود، استخدام ⟦برند ۰⟧ را انتخاب کنید. AppBrainy مهندسی کامل محصول را با طراحان در بخش diff ارسال می‌کند. ClaudeBrainy بسته‌های مهارت و کتابخانه‌های prompt را که هوش مصنوعی را به لایه تولید یک پایگاه کد واقعی تبدیل می‌کنند، ارسال می‌کند. استودیوها هنوز دسته‌های Figma را به عنوان نسخه نهایی قیمت‌گذاری می‌کنند، در خلاصه سه ماهه بعدی نخواهند بود. در خلاصه باشید.