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 | کــــــد کلاد 🍃🧡

اگه برای طراحی سایت دنبال Reference می‌گردی، این لیست رو حتماً Save کن؛ چون به‌جای اینکه فقط سایت کامل ببینی، برای هر Section یه منبع جدا داری. 🔥

Navbar
https://navbar.gallery

Hero Section
https://supahero.io

404 Pages
https://404s.design

Footer
https://footer.design

CTA
https://cta.gallery

Website Sections
https://unsection.com

Motion / Interaction
https://60fps.design

Design Details & Interactions
https://designspells.com

Bento Grids
https://bentogrids.com

مثلاً فقط Unsection الان بیش از ۴۰۰۰ Section واقعی برای Hero، Pricing، FAQ، Navbar، Footer، CTA و بقیه بخش‌ها جمع کرده و Navbar Gallery، Supahero، Footer.design و CTA.gallery هم هرکدوم دقیقاً روی همون بخش خاص تمرکز دارن.

اگه قبل از طراحی ۱۰ دقیقه تو این منابع بچرخی و بعد Referenceهات رو بدی به Claude/Codex/Cursor، خروجی خیلی کمتر Generic می‌شه

OpenAI رسماً 𝗖𝗵𝗮𝘁𝗚𝗣𝗧 𝗜𝗺𝗮𝗴𝗲𝘀 𝟮.𝟱 رو منتشر کرد و این یکی به‌نظر می‌رسه بیشتر از یه آپدیت معمولیه. 🔥

نسخه جدید تصویرها رو شارپ‌تر و طبیعی‌تر می‌سازه، Subjectهای عکس مرجع رو بهتر حفظ می‌کنه، ادیت‌های چندمرحله‌ای رو با ثبات بیشتری جلو می‌بره و زمان ساخت تصویر هم تا ۵۰٪ کمتر شده.

چند قابلیت جدیدش خیلی کاربردیه:

𝗣𝗿𝗲𝗰𝗶𝘀𝗶𝗼𝗻 𝗘𝗱𝗶𝘁𝗶𝗻𝗴 → فقط همون چیزی که می‌خوای تغییر می‌کنه، نه کل تصویر
𝗖𝗼𝗺𝗺𝗲𝗻𝘁-𝗕𝗮𝘀𝗲𝗱 𝗘𝗱𝗶𝘁𝘀 → مستقیم روی تصویر کامنت می‌ذاری و می‌گی کجا عوض بشه
𝗦𝗸𝗲𝘁𝗰𝗵 → روی موبایل طرحت رو می‌کشی و ChatGPT تبدیلش می‌کنه به تصویر نهایی
𝗧𝗲𝗺𝗽𝗹𝗮𝘁𝗲𝘀 → برای پوستر، Merch، Product Photo و فرمت‌های آماده
𝗠𝘂𝗹𝘁𝗶-𝗧𝘂𝗿𝗻 𝗖𝗼𝗻𝘀𝗶𝘀𝘁𝗲𝗻𝗰𝘆 → ادیت‌های قبلی کمتر خراب می‌شن و جزئیات بهتر حفظ می‌شن.

برای API هم دو مدل جدید اومده:
𝗚𝗣𝗧-𝗜𝗺𝗮𝗴𝗲-𝟮.𝟱 𝗙𝗹𝗮𝗿𝗲 برای سرعت و حجم بالا، و 𝗦𝘂𝗻𝗯𝘂𝗿𝘀𝘁 برای کنترل و دقت بیشتر در کارهای حرفه‌ای.

به‌نظرم بخش مهم این آپدیت اینه که ساخت تصویر داره از:

𝗣𝗿𝗼𝗺𝗽𝘁 → 𝗜𝗺𝗮𝗴𝗲

می‌ره سمت:

𝗜𝗱𝗲𝗮 → 𝗦𝗸𝗲𝘁𝗰𝗵 → 𝗚𝗲𝗻𝗲𝗿𝗮𝘁𝗲 → 𝗖𝗼𝗺𝗺𝗲𝗻𝘁 → 𝗘𝗱𝗶𝘁 → 𝗙𝗶𝗻𝗮𝗹

یعنی کم‌کم بیشتر شبیه یه Creative Workspace می‌شه تا صرفاً Image Generator

🔥 آموزش کامل ساخت Walkthrough معماری با AI

توی این آموزش قدم‌به‌قدم می‌ریم از یه پلان ساده تا یه ویدیوی Walkthrough واقعی و سینمایی؛ با ترکیب GPT-6 Astra + AutoCAD + Blender + Higgsfield.

داخل فایل، کل مسیر رو حرفه‌ای و مرحله‌بندی‌شده گذاشتم:

آماده‌سازی پلان
لایه‌بندی AutoCAD
ساخت مدل 3D در Blender
نور و متریال، طراحی مسیر دوربین
ساخت Keyframe
انتقال به Higgsfield
حفظ Geometry و Consistency، Negative Promptها
عیب‌یابی و حتی Master Prompt نهایی

یعنی Workflow کامل اینه:
Plan → AutoCAD → Blender → Materials & Lighting → Keyframes → Higgsfield → Final Walkthrough

اگه معماری، طراحی داخلی، 3D یا حتی تولید محتوای AI انجام می‌دی، این فایل واقعاً ارزش نگه داشتن داره؛ چون فقط ایده نیست، روش اجرا + Prompt + چک‌لیست هم داخلشه.

📥 فایل Word آموزش رو از همین پست بردار و نگه دار