تولیدِ UI از پرامپت
فقط توضیح بده چه صفحهای میخوای؛ Claude صفحه، فرم یا داشبوردِ کاملِ کدشده تحویلت میده.
در حال بارگذاری…
با Claude از روی یک پرامپتِ ساده، رابطِ کاربری، کامپوننت، دیزاینسیستم و فرانتاِندِ واقعی بساز و سریع iterate کن — از ایده تا کدِ قابلِ استفاده. با Claudy همین قابلیت را در Claude Code و Claude Desktop داری.
قابلیتها
از اولین پرامپت تا کامپوننتِ آمادهی محصول — همهی مسیرِ طراحیِ رابطِ کاربری در یک ابزار.
فقط توضیح بده چه صفحهای میخوای؛ Claude صفحه، فرم یا داشبوردِ کاملِ کدشده تحویلت میده.
از یک ایدهی بصری یا اسکرینشات به کامپوننتِ React/Tailwindِ تمیز و قابلِ اجرا برس.
توکنهای رنگ، تایپوگرافی و فاصلهگذاریِ منسجم بساز تا کلِ محصول یکدست بمونه.
بگو «دکمه گردتر، فاصله بیشتر» و در همون لحظه نسخهی بهروزشده رو ببین — بدون رفتوبرگشتِ طولانی.
کامپوننتهای ماژولار و تایپشده بساز که توی کلِ پروژه دوباره بهکارشون میگیری.
از پرامپت تا UI
توضیح مینویسی، کدِ تمیز میگیری، و خروجیِ زنده رو میبینی — همه در یک جریان.
«یک باکسِ دعوتبهاقدام با عنوان و یک دکمهی نارنجی بساز که وسطچین باشه.»
<section className="rounded-2xl bg-card p-6 text-center"> <h3>به جمعِ ما بپیوند</h3> <Button>ثبتنام رایگان</Button></section>به جمعِ ما بپیوند
جریانِ کار
طراحی با Claude یک گفتوگوی رفتوبرگشتیه؛ هر قدم نزدیکترت میکنه به همون چیزی که توی ذهنت داری — بدون اینکه خودت خطی کد بزنی.
هدف، حالوهوا و محتوای صفحه رو با زبانِ ساده شرح بده — لازم نیست از قبل دیزاین داشته باشی.
Claude لِیاوت، سلسلهمراتبِ بصری و کامپوننتهای لازم رو پیشنهاد میده و کدش رو مینویسه.
هرچی خواستی تغییرش بده؛ از رنگ و فاصله تا حالتهای تعاملی و ریسپانسیوبودن.
خروجی، کامپوننتِ تمیز و قابلِ استفاده در پروژهست — نه فقط یک تصویرِ ثابت.
انتخابِ مدل
هر دو مدل برای طراحیِ رابطِ کاربری عالیان؛ بسته به اندازهی کار یکی رو انتخاب کن.
برای طراحیهای پیچیده و دیزاینسیستم
برای iterate سریع و کارهای روزمره
اشتراکِ Claudy رو بگیر و در Claude Code و Claude Desktop از ایده تا رابطِ کاربریِ واقعی برس — سریع، تمیز و قابلِ استفاده.