Agentic Canvas: طراحی با عامل‌های هوش مصنوعی2 min read

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

به همین دلیل ساختیم Agentic Canvas از AgentGrid.io. این یک بوم طراحی هوش مصنوعی رایگان است که در آن شما و یک عامل با قابلیت MCP روی یک صفحه HTML و CSS واقعی کار می کنید. HTML را وارد کنید، با یک طرح یا تصویر شروع کنید یا از نماینده خود بخواهید یک صفحه بسازد. سپس آنچه ساخته شده را انتخاب کنید، جابجا کنید، اندازه را تغییر دهید و ویرایش کنید. شما می توانید Agentic Canvas را باز کنید بدون ایجاد حساب کاربری

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

Agentic Canvas چیست؟

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

به آن به عنوان مکانی فکر کنید که در آن فردی که می بیند چه چیزی نیاز به تعمیر دارد و عاملی که می تواند کد را بنویسد روی یک چیز کار می کنند.

چرا ما به یک بوم برای عوامل هوش مصنوعی نیاز داشتیم؟

1. همکاری بصری بدون یک چرخهٔ تازه‌ای از پرامپت‌ها

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

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

2. مکانی برای جمع آوری بافت بصری

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

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

3. چرا بوم از HTML و CSS واقعی استفاده می کند

چرا یک ابزار طراحی بر روی HTML و CSS بسازیم؟ زیرا عوامل برنامه نویسی قبلاً به صورت روان کد را می خوانند و می نویسند. برای من، درخواست از یک نماینده برای کار در قالب طراحی جداگانه مانند این است که از یک انگلیسی زبان بومی بخواهیم به انگلیسی فکر کند اما چینی بخواند و بنویسد. ترجمه اضافی می‌تواند جزئیات را از دست بدهد و زمان و نشانه‌ها را هزینه می‌کند. من قبل از آن بحث کرده ام طراحی کد است. در اینجا، این ایده به معنای واقعی کلمه است.

با Agentic Canvas، یک فریم یک صفحه واقعی است، نقشه های طرح بندی خودکار به CSS flexbox، و شبکه ها شبکه های CSS هستند. می توانید یک دکمه را به صورت بصری ویرایش کنید، از نماینده خود بخواهید یک انیمیشن یا تعامل اضافه کند، و زمانی که آماده شدید کد را خروجی بگیرید. صفحات زنده می توانند اسکریپت ها، وضعیت های شناور و رفتار پاسخگو را روی بوم اجرا کنند. این تصویری نیست که بعداً مجبور به بازسازی آن شوید.

چه تفاوتی با یک بوم طراحی معمولی دارد؟

یک بوم طراحی معمولی برای ترکیب یک ایده بصری مفید است، اما نتیجه اغلب قبل از تبدیل شدن به یک صفحه وب کار به یک مرحله پیاده سازی جداگانه نیاز دارد. Agentic Canvas یک ابزار طراحی HTML است: یک فریم یک صفحه واقعی است، بنابراین یک نماینده می تواند همان HTML و CSS را که به صورت بصری ویرایش می کنید بخواند و تغییر دهد. این بدان معنا نیست که با تمام ویژگی های یک مجموعه طراحی بالغ مطابقت دارد. نکته این است که تصمیمات بصری و کد کار را با هم نگه دارید، چه در حال اصلاح یک وب سایت تولید شده توسط هوش مصنوعی باشید یا یک وب سایت جدید.

نحوه طراحی وب سایت با Claude یا ChatGPT در Agentic Canvas

1. با آنچه دارید شروع کنید. بوم را باز کنید و HTML را جای‌گذاری کنید، از Figma کپی و جایگذاری کنید، تصاویر یا طرح‌ها را وارد کنید، یا با یک صفحه تولید شده توسط عامل شروع کنید. را راهنمای واردات نقاط شروع پشتیبانی شده را فهرست می کند.
2. نماینده خود را وصل کنید انتخاب کنید عامل‌های هوش مصنوعی، سپس افزودن عامل در بوم دنبال کنید راهنمای اتصال برای Claude، ChatGPT یا دیگر کلاینت های دارای MCP. تا زمانی که عامل کار می کند، زبانه بوم را باز نگه دارید.
3. اولین پاس را با هم انجام دهید. یک طرح یا تعامل بخواهید، سپس نتیجه زنده را روی بوم بررسی کنید.
4. کنترل بصری را در دست بگیرید. عناصر را جابجا کنید، رنگ ها را تغییر دهید، اندازه یک قاب را تغییر دهید و طرح را با دست تنظیم کنید. از نماینده بخواهید از آخرین نسخه ادامه دهد.
5. در صورت آماده شدن، خروجی بگیرید یا به اشتراک بگذارید. HTML یا فرمت پشتیبانی شده دیگری را بدون انتشار خروجی بگیرید. اگر لینک میزبانی می خواهید، از طریق AgentGrid.io به اشتراک بگذارید یا منتشر کنید. آن مرحله ابری اختیاری است و نیاز به یک حساب کاربری دارد.

چه چیزی محلی می ماند و چه چیزی به یک حساب کاربری نیاز دارد؟

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

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

Agentic Canvas را باز کنید و سعی کنید با نماینده خود طراحی کنید. برای نگاهی سریع به گردش کار، نسخه ی نمایشی راه اندازی را تماشا کنید و ویژگی ها را کشف کنید.

سوالات در مورد Agentic Canvas

آیا Agentic Canvas رایگان است و آیا من به یک حساب کاربری نیاز دارم؟

بله، بوم طرح رایگان است. آن را در مرورگر خود باز کنید و بدون حساب شروع به طراحی کنید. یک حساب AgentGrid.io تنها در صورتی مورد نیاز است که بخواهید از طریق AgentGrid.io به اشتراک بگذارید یا منتشر کنید.

کدام عوامل هوش مصنوعی با Agentic Canvas کار می کنند؟

Claude، ChatGPT، Claude Code، Codex، Cursor و سایر عوامل دارای MCP می توانند بوم باز را بخوانند و تغییر دهند. انتخاب کنید عامل‌های هوش مصنوعی و سپس افزودن عامل تا مراحل اتصال را دنبال کنید. تا زمانی که نماینده شما کار می کند، برگه بوم را باز نگه دارید.

آیا می توانم یک وب سایت تولید شده با هوش مصنوعی را به صورت بصری ویرایش کنم؟

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

آیا می توانم یک صفحه یا وب سایت HTML موجود را وارد کنم؟

بله. HTML را در بوم جای‌گذاری کنید، یا یک پوشه سایت یا ZIP آن را در صفحه اصلی رها کنید. همچنین می توانید با انتخاب Figma یا تصویر شروع کنید.

فایل های بوم من کجا ذخیره می شوند؟ آیا از آنها نسخهٔ پشتیبان دارند؟

آنها به صورت محلی در مرورگر و دستگاهی که استفاده می‌کنید، بدون پشتیبان‌گیری ابری خودکار ذخیره می‌شوند. مرورگر یا دستگاه دیگری آنها را نمی بیند. یک کپی از کارهای مهم را خروجی بگیرید یا اگر می‌خواهید پشتیبان‌گیری ابری و سابقه نسخه را دارید، اشتراک‌گذاری AgentGrid.io را انتخاب کنید.

آیا عامل هوش مصنوعی من می تواند بعد از بستن برگه روی بوم کار کند؟

نه. زبانه بوم باید باز بماند تا یک عامل متصل طرح را بخواند یا تغییر دهد. می توانید بعداً به فایل های ذخیره شده محلی خود در همان مرورگر بازگردید.

آیا اتصال یک عامل به آن امکان دسترسی به فضای کاری AgentGrid.io من را نیز می دهد؟

خیر. اتصال یک عامل به بوم به آن امکان می دهد روی فایل های بوم باز کار کند. اتصال آن عامل به آرتیفکت های AgentGrid.io یک مرحله جداگانه است.

آیا می توانم بدون انتشار خروجی بگیرم؟

بله. HTML، PNG، SVG یا PDF را بدون اشتراک گذاری یا انتشار خروجی بگیرید. می‌توانید HTML را به یک عامل برنامه‌نویسی تحویل دهید تا به ساختن در جای دیگری ادامه دهید.

آیا اشتراک گذاری با انتشار یکسان است؟

خیر. اشتراک گذاری از طریق AgentGrid.io به افراد و عواملی که شما انتخاب می کنید دسترسی پیدا می کند. انتشار، طرح را در یک آدرس وب عمومی قرار می دهد. هر دو اختیاری هستند و به یک حساب AgentGrid.io نیاز دارند.