اگر با Claude، Codex، Cursor، Lovable یا هر AI Coding Agent دیگه‌ای سایت می‌سازید، این یکی رو حتماً Save کنید. VibeUi یک کتابخونه رایگان از پرامپت‌های آماده UI داره که برای بخش‌های مختلف سایت طراحی شدن؛ مثل:

Hero Section
Pricing
Auth Screens
Bento Grid
Dashboard
Navbar
Testimonials
FAQ
Footer
Onboarding
Blog
Contact
و کلی Layout دیگه

مزیتش اینه که لازم نیست هر بار از صفر توضیح بدی:

«یه هیرو مینیمال با CTA سمت چپ و تصویر محصول سمت راست بساز…»

کافیه Layout موردنظرت رو پیدا کنی، Prompt رو Copy کنی و بدی به Agent.

یعنی:

Pick UI Pattern
↓
Copy Prompt
↓
Paste into AI
↓
Generate Better UI

برای کسایی که با Vibe Coding سایت می‌سازن، این دقیقاً همون چیزیه که کمک می‌کنه خروجی‌ها کمتر Generic و تکراری باشن.

الان ۹۲ پرامپت رایگان در ۱۵ دسته داخلش هست.

https://vibeui.online/

Codecloude.ir | کــــد کلاد 🧡🍃

Codecloude.ir | کــــد کلاد 🧡🍃

‏آموزش سوپر کاربردی برای کسایی که می‌خوان با AI سایت بسازن 👀🔥 ( حتما وقت بزارید و یاد بگیرید )

‏توی این Workflow از Claude Fable 5 برای ساخت و توسعه کامل سایت و از Seedance 2.5 برای ساخت محتوای ویدیویی و بخش‌های بصری استفاده شده؛ نتیجه هم یه سایت کامل Responsive برای موبایل و دسکتاپه، بدون اینکه لازم باشه از صفر کدنویسی کنی. Claude Fable 5 رسماً برای پروژه‌های پیچیده و طولانی برنامه‌نویسی طراحی شده و Seedance 2.5 هم ویدیوهای تا ۳۰ ثانیه با ورودی‌های چندمرجعی می‌سازه.

‏نکته مهم اینه که اینا یک محصول یکپارچه نیستن؛ جذابیت کار دقیقاً توی Workflowـه:

‏Idea → Claude → Website → Visual Assets → Seedance → Final Experience

Codecloude.ir | کــــــد کلاد 🍃🧡

‏وبسایت 𝗹𝗶𝗯𝗿𝗮𝗿𝗶𝗲𝘀.𝗱𝗲𝘃 چند تا کتابخونه آماده برای افکت‌های مدرن UI رو یکجا جمع کرده؛ فعلاً چیزهایی مثل Border Beam، Thinking Orbs، Liquid Metal، Gooey و Image Effects داره و بیش از ۲۰ Variant آماده هم براشون گذاشته. نکته خوبش اینه که می‌تونی سریع Preview بگیری و مستقیم برای پروژه‌هات استفاده کنی.

‏برای Hero Section، Dashboard، AI Interface، Loading State و سایت‌های Motion-heavy واقعاً می‌تونه ایده‌های خوبی بده؛ مخصوصاً اگه با Claude، Codex یا Cursor سایت می‌سازی و می‌خوای خروجی کمتر Generic باشه.

Codecloude.ir | کــــــد کلاد 🍃🧡

متیو برمن که Early Access ( دسترسی زود تر ) به 𝗚𝗣𝗧-𝟲 𝗔𝘀𝘁𝗿𝗮 داشته، می‌گه این بهترین مدلیه که تا حالا استفاده کرده؛ و نکته جالب اینه که تعریفش فقط از Code یا Knowledge نیست🔥

طبق تجربه‌ش، Astra توی چند بخش واقعاً جهش داشته:

𝗕𝗿𝗼𝘄𝘀𝗲𝗿 𝗖𝗼𝗻𝘁𝗿𝗼𝗹
خیلی سریع‌تر و قابل‌اعتمادتر شده و برای انجام کارهای واقعی داخل مرورگر یه لِوِل بالاتره.

𝗣𝗿𝗼𝗺𝗽𝘁 → 𝗣𝗹𝗮𝘆𝗮𝗯𝗹𝗲 𝗚𝗮𝗺𝗲
می‌گه داریم به جایی می‌رسیم که از یه Prompt، فقط Demo نسازیم؛ واقعاً بشه یه بازی قابل‌بازی و حتی جذاب درآورد.

𝗪𝗿𝗶𝘁𝗶𝗻𝗴
اون حس «متن AIـی» کمتر شده، هرچند خودش هم می‌گه هنوز کامل از بین نرفته.

𝗗𝗲𝘀𝗶𝗴𝗻 & 𝗦𝘁𝗲𝗲𝗿𝗮𝗯𝗶𝗹𝗶𝘁𝘆
هنوز بعضی عادت‌های بصری مدل‌های قبلی رو داره، ولی خیلی بهتر می‌شه Direction داد و ظاهر خروجی رو کنترل کرد.

𝟯𝗗 𝗨𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴
اینجا ظاهراً یکی از بزرگ‌ترین جهش‌هاست؛ از ساخت Asset گرفته تا Spatial Awareness توی صحنه‌های 3D پیچیده.

و یه نکته مهم‌تر:
می‌گه وقتی Prompt دقیق‌تر و با جزئیات بیشتری می‌داده، Astra می‌تونسته مدت طولانی‌تری روی Task کار کنه و نتیجه خیلی بهتر بشه.

اگه این تجربه‌ها تو استفاده عمومی هم تکرار بشن، 𝗔𝘀𝘁𝗿𝗮 فقط یه مدل قوی‌تر نیست؛ بیشتر شبیه یه Agent جدی برای کارهای طولانی و پیچیده‌ست

Codecloude.ir | کــــــد کلاد 🍃🧡

Anthropic یه دوره تقریباً ۱ ساعته و رایگان برای Claude Code منتشر کرده و اگه با AI کدنویسی می‌کنید، واقعاً پیشنهاد می‌کنم سیوش نکنید که «بعداً ببینم»؛ براش وقت بذارید و کامل ببینید. 🔥

این آموزش از استفاده ساده شبیه autocomplete شروع می‌کنه و می‌رسه به جایی که Claude Code واقعاً مثل یه Coding Agent پروژه رو بررسی می‌کنه، برنامه می‌ریزه، Tool صدا می‌زنه، تست اجرا می‌کنه و یه Task واقعی رو تا Commit جلو می‌بره. خود Anthropic هم این جلسه رو برای توسعه‌دهنده‌هایی ساخته که تازه می‌خوان Claude Code رو جدی وارد Workflow خودشون کنن.

𝗧𝗶𝗺𝗲𝗹𝗶𝗻𝗲 👇

𝟬𝟬:𝟬𝟬 → Autocomplete تا Agent
𝟬𝟰:𝟱𝟬 → Agentic Loop چطور کار می‌کنه
𝟭𝟰:𝟬𝟳 → استفاده از CLAUDE.md به‌عنوان حافظه پروژه
𝟮𝟲:𝟱𝟯 → چرا Plan Mode مهمه
𝟯𝟯:𝟯𝟭 → اجرای یه Task واقعی از Brief تا Commit
𝟱𝟰:𝟰𝟲 → تفاوت Skills vs CLAUDE.md

خیلی‌ها هنوز Claude Code رو مثل یه autocomplete باهوش‌تر استفاده می‌کنن؛ این آموزش دقیقاً نشون می‌ده چطور باید ازش به‌عنوان یه Agent واقعی برای توسعه نرم‌افزار استفاده کرد.

حتماً یک ساعت براش وقت بذارید. به‌نظرم برای کسی که قراره جدی با Claude Code کار کنه، از خیلی دوره‌های پولی کاربردی‌تره.

🎥 Claude Code in an Hour: A Developer’s Intro
https://www.anthropic.com/webinars/claude-code-in-an-hour-a-developers-intro

Codecloude.ir | کــــــد کلاد 🍃🧡

یه آموزش تقریباً ۱ ساعته درباره 𝗚𝗿𝗮𝗽𝗵 𝗘𝗻𝗴𝗶𝗻𝗲𝗲𝗿𝗶𝗻𝗴 که اگه به Agentها و سیستم‌های چندمرحله‌ای AI علاقه دارید، واقعاً پیشنهاد می‌کنم براش وقت بذارید و کامل ببینید. 🔥

ایده اصلی اینه که Agent رو از حالت یه مسیر خطی خارج کنیم و کار رو به شکل یه Graph طراحی کنیم؛ جایی که چند Agent یا Worker می‌تونن همزمان کار کنن، خروجی همدیگه رو بررسی کنن، در صورت نیاز دوباره اجرا بشن و در نهایت به یه نتیجه واحد برسن.

𝗧𝗶𝗺𝗲𝗹𝗶𝗻𝗲 👇
𝟬𝟬:𝟬𝟬 → Graphها دقیقاً چی هستن؟
𝟬𝟵:𝟭𝟲 → ساخت اولین Agent
𝟮𝟭:𝟭𝟱 → مفهوم Graph Engineering
𝟰𝟭:𝟬𝟯 → پیاده‌سازی عملی Graph
𝟱𝟮:𝟮𝟭 → Self-improving Graphs

جذاب‌ترین بخشش برای من Self-improving Graphsـه؛ یعنی سیستم فقط یه بار Workflow رو اجرا نمی‌کنه، بلکه می‌تونه نتیجه رو بررسی کنه، ضعف‌ها رو پیدا کنه و دوباره بخش‌های لازم رو اجرا کنه

اگه قراره جدی Agent بسازید، اینو یه ساعت براش وقت بذارید. به‌نظرم بعدش Agent Workflowها رو یه جور دیگه می‌بینید. 👀

مشکل خیلی از خروجی‌های AI اینه که بهش می‌گیم «یه UI پریمیوم بساز» و بعد امیدواریم خودش بفهمه دقیقاً چه رنگ، فونت، spacing، radius، shadow و component languageـی مدنظر ماست.

سایت 𝗗𝗘𝗦𝗜𝗚𝗡.𝗺𝗱 این مشکل رو حل می‌کنه؛ یعنی Design System پروژه رو به یک فایل قابل‌خواندن برای Agent تبدیل می‌کنی تا قبل از ساخت UI، قوانین بصری پروژه رو بدونه. Refero مثلاً DESIGN.md واقعی سایت‌ها رو با typography، colors، spacing و component rules آماده می‌کنه و Hyperbrowser هم می‌تونه از روی URL سایت چنین فایلی استخراج کنه.

۸ منبعی که توی این لیست ارزش Save کردن دارن 👇

𝗥𝗲𝗳𝗲𝗿𝗼 𝗦𝘁𝘆𝗹𝗲𝘀
https://styles.refero.design

𝗗𝗲𝘀𝗶𝗴𝗻𝗠𝗗
https://designmd.me

𝗢𝗽𝗲𝗻𝗗𝗲𝘀𝗶𝗴𝗻
https://open-design.ai

𝗗𝗲𝘀𝗶𝗴𝗻𝗠𝗗 𝗦𝘂𝗽𝗽𝗹𝘆
https://designmd.supply

𝗔𝘂𝗿𝗮
https://aura.build

𝗡𝗲𝘂𝗳𝗼𝗿𝗺
https://neuform.ai

𝗛𝘆𝗽𝗲𝗿𝗯𝗿𝗼𝘄𝘀𝗲𝗿 𝗗𝗘𝗦𝗜𝗚𝗡𝗠𝗗
https://design-md.hyperbrowser.ai

𝗧𝘆𝗽𝗲𝗨𝗜
https://typeui.sh

Workflow پیشنهادی من:

𝗥𝗲𝗳𝗲𝗿𝗲𝗻𝗰𝗲 → 𝗗𝗘𝗦𝗜𝗚𝗡.𝗺𝗱 → 𝗖𝗹𝗮𝘂𝗱𝗲/𝗖𝘂𝗿𝘀𝗼𝗿/𝗖𝗼𝗱𝗲𝘅 → 𝗨𝗜 → 𝗥𝗲𝗳𝗶𝗻𝗲

یعنی به‌جای اینکه هر صفحه رو با حدس و آزمون‌وخطا طراحی کنی، از همون اول یه Design Contract به Agent می‌دی. نتیجه معمولاً خروجی منسجم‌تر و کمتر Genericـه. DESIGN.md دقیقاً برای همین نقش «design context» قبل از تولید UI استفاده می‌شه.

Codecloude.ir | کــــــد کلاد 🍃🧡