باز منو فالو نکنید ، یه قابلیت توی Chrome DevTools هست که خیلیا اصلاً خبر ندارن وجود داره و برای طراحها و فرانتاندکارها واقعاً طلاست 🤯
برو روی هر سایتی که خواستی، DevTools رو باز کن و از مسیر زیر برو:
𝗠𝗼𝗿𝗲 𝘁𝗼𝗼𝗹𝘀 → 𝗖𝗦𝗦 𝗢𝘃𝗲𝗿𝘃𝗶𝗲𝘄 → 𝗖𝗮𝗽𝘁𝘂𝗿𝗲 𝗼𝘃𝗲𝗿𝘃𝗶𝗲𝘄
بعد Chrome یه گزارش کامل از طراحی اون صفحه بهت میده؛ چیزهایی مثل:
• رنگهای استفادهشده
• فونتها و سایزها
• Border colorها
• Media Queryها
• CSS declarationهای بلااستفاده
• و کلی جزئیات دیگه از Design System سایت
یعنی برای تحلیل سریع UI یه سایت، لازم نیست تکتک CSSها رو بگردی؛ تو چند ثانیه یه نمای کلی از ساختار طراحی صفحه داری. اگه زیاد سایت تحلیل میکنی یا Reference جمع میکنی این و بوک مارک کن 🔖🔥
اگه دنبال آیکونهای متفاوت، تمیز و حتی Animated میگردی، این لیست و بوک مارک کن 👀🔥
https://t.co/06KlmxzWjB
https://t.co/GUZHhnnP4P
https://t.co/6tsufwLRx9
https://t.co/ZKL9d5hhLS
https://t.co/KZWuH7ic5V
https://t.co/EokODbsXee
https://t.co/DgqhT0T6dI
https://t.co/swFcWJ5cuQ
https://t.co/N2ENFjGNHV
برای UI/UX، طراحی سایت و فرانتاند واقعاً لیست خوبیه 🔖 و اگه منبع دیگهای هم میشناسی، زیر همین پست اضافه کن.
مارو گم نکنی 🧡🍃🙏
۵ ت�� سایت که برای برنامه نویسی قطعا به کارتون میاد، ذخیره اش کنید برای طراحی قطعه به کارتون میاد 👀🔥
𝗰𝗼𝗱𝗲𝘀𝗵𝗼𝘁𝘀.𝗱𝗲𝘃
برای ساخت اسکرینشاتهای متحرک و خوشگل از کد
𝗮𝗶𝗰𝗮𝗻𝘃𝗮𝘀.𝗺𝗲
کامپوننتها و Blockهای AI-native برای ساخت سریعتر UI
𝘀𝘂𝗽𝗲𝗿𝗳𝗶𝗹𝗲.𝗱𝗲𝘃
فایلمنیجر Open Source داخل Terminal؛ مخصوص کسایی که با CLI زندگی میکنن 😅
𝗸𝗶𝗰𝗸𝗿𝗲𝘀𝘂𝗺𝗲.𝗰𝗼𝗺
ساخت رزومه حرفهای و ATS-friendly با کمک AI
𝘂𝗺𝗮𝗻𝗺𝗮𝗱𝗲.𝗰𝗼𝗺
یه دایرکتوری خوشساخت از پروژهها و کارهای دیجیتال برای ایده گرفتن
اگه اهل طراحی، برنامهنویسی، AI یا ساخت محصول دیجیتال ��اشی، این ۵ تا میتونن خیلی به کارت بیان.
آموزش سوپر کاربردی برای کسای�� که میخوان با AI سایت بسازن 👀🔥 ( حتما وقت بزارید و یاد بگیرید )
توی این Workflow از Claude Fable 5 برای ساخت و توسعه کامل سایت و از Seedance 2.5 برای ساخت محتوای ویدیویی و بخشهای بصری استفاده شده؛ نتیجه هم یه سایت کامل Responsive برای موبایل و دسکتاپه، بدون اینکه لازم باشه از صفر کدنویسی کنی. Claude Fable 5 رسماً برای پروژههای پیچیده و طولانی برنامهنویسی طراحی شده و Seedance 2.5 هم ویدیوهای تا ۳۰ ثانیه با ورودیهای چندمرجعی میسازه.
نکته مهم اینه که اینا یک محصول یکپارچه نیستن؛ جذابیت کار دقیقاً توی Workflowـه:
Idea → Claude → Website → Visual Assets → Seedance → Final Experience
Telegram : https://t.co/Wqaie3UysF
راهاندازیش نسبتاً سادهست و لازم نیست دستی X API بسازی.
طبق اعلام رسمی xAI، وقتی اکانت X رو داخل Grok Bot وصل کنی، اگر Developer Account نداشته باشی خودش برات ایجادش میکنه؛ کاربران پولی Grok Bot هم مقداری X API Credit اولیه میگیرن.
مراحلش اینه:
-وارد Grok Bot شو. این قابلیت مربوط به Grok Botـه، نه صرفاً چت عادی Grok.
(فعلاً روی macOS، Windows و iOS در دسترسه و برای پلنهایی مثل SuperGrok و پلنهای واجدشرایط Cursor ارائه میشه )
- از بخش Settings → Plugins / Connectors، کانکتور X رو پیدا کن. در iOS هم Connectorها از داخل تنظیمات قابل اتصال هستن.
- روی Sign in with X / Connect X بزن و با همون اکانت X که میخوای روی اون تحقیق انجام بدی لاگین کن و دسترسیهای خواستهشده رو تأیید کن.
خود xAI این مرحله رو بهصورت رسمی «sign in with the X connector» توضیح داده.
- بعد از اتصال، یه Bot بساز یا یکی از Botهای موجودت رو باز کن و مستقیم دستور بده.
مثلاً:
What did people mention me about this week?
Search X for discussions about AI agents today.
Pull @username's recent posts and summarize them.
Organize my bookmarks by topic.
Find the biggest conversations around this product.
برای تست اتصال، اول یه درخواست ساده مثل «منشنهای این هفته من رو در X بررسی کن» بده. اگر X connector فعال باشه، Bot باید بهجای سرچ عمومی وب، مستقیماً از دادههای X استفاده کنه.
یه نکته مهم: این نسخه فعلاً برای تحقیق و مدیریت دادههای X ساخته شده؛ طبق معرفی فعلی، نباید انتظار داشته باشی خودش بهجای تو پست، ریپلای، لایک یا DM ارسال کنه
با اتصال اکانت X به Grok Bot، میتونی ازش بخوای تایملاین، منشنها، لایکها و Spaces رو بخونه، با اپراتورهای پیشرفته داخل X سرچ کنه، آرشیو کامل رو بگرده، پستهای ا��یر هر اکانت عمومی رو جمعبندی کنه و حتی بررسی کنه چه کسانی یه پست رو Like، Repost یا Quote کردن.
کاربردهای جذابش فقط به سرچ ختم نمیشه؛ میتونی ترندها و خبرها رو دنبال کنی، حجم گفتگو درباره یه موضوع رو بسنجی، بوکمارکهات رو دستهبندی کنی، لیست بسازی، Block و Muteها رو مدیریت کنی و حتی وضعیت Creditهای X API رو ببینی.
مثلاً میتونی بهش بگی:
«این هفته مردم درباره من چی گفتن؟»
«الان همه درباره این موضوع چی میگن؟»
«پستهای اخیر این اکانت رو جمعبندی کن.»
«بزرگترین گفتگوهای شکلگرفته درباره این محصول رو پیدا کن.»
«بوکمارکهام رو بر اساس موضوع مرتب کن.»
«بگو چه کسانی ای�� پست رو Quote کردن و چی نوشتن.»
نکته مهم اینه که فعلاً خودش بهجای شما Post، Reply، Like، Repost، Follow یا DM انجام نمیده؛ یعنی بیشتر یه Researcher و Listener همیشهفعال برای X ـه، نه یه بات خودکار برای اسپم.
برای کسایی که کسبوکار، محتوا، تحقیق، خبر یا مارکتینگشون به X وابستهست، این قابلیت واقعاً میتونه خیلی کاربردی باشه 🔥🫡
این یکی واقعاً گنجینهست برای کسایی که با AI سایت میسازن.🔥🧡
MotionSites AI یه کتابخونه بزرگ از پرامپت��ای آماده برای طراحی سایتهای خفن، انیمیشنی و 3Dـه؛ پرامپت رو برمیداری و میدی به Claude، Cursor، Codex، v0 یا هر Coding Agent دیگه. خود سایت الان صدها طراحی آماده داره و برای Hero، Landing Page، SaaS، Portfolio، Game UI، 3D Website، Background و کلی بخش دیگه نمونه میده.
نکته جذابترش اینه که MCP هم داره؛ یعنی میتونی مستقیم وصلش کنی به Claude Code، Cursor یا Codex تا Agent خودش از کتابخونه MotionSites پرامپت مناسب رو پیدا کنه و استفاده کنه. حتی آموزشهای رایگان برای ساخت سایتهای Scroll Animated و Cinematic هم گذاشته. برای کسایی که از خروجیهای تکراری و Generic ابزارهای AI خسته شدن، واقعاً ارزش Save کردن داره.
MotionSites AI
🔥👌🏻حتما وقت بزارید و این تجربه کار با ai رو از دست ندید
با یه پرامپت درست، کاراکتر ثابت، چند شات حسابشده و ابزارهای ویدیوساز AI میتونی از صفر یه انیمیشن آشپزی بسازی که واقعاً حس یه تیکه از ��یلم انیمیشنی پریمیوم رو بده؛ از شکستن اورئو و مخلوط کردن شکلات تا پخت، تزئین و تست نهایی.
خفنترین بخشش اینه که قبلاً برای همچین چیزی باید مدلسازی، انیمیشن، نور، دوربین، تدوین و کلی نیروی متخصص کنار هم میبود؛ الان با یه Workflow درست، بخش بزرگی از این مسیر شده Prompt + Reference + چند کلیک. پرامپت کاملش رو هم میذارم که خودتون تستش کنید
پرامپتش رو داخل چنل تلگرام گذاشتم 👌🏻🍃 :
https://t.co/lq3DUgX0Ww
ویدیو زیر رو ببینید ؛
این یک Micro-interaction برای OTP Verification است و از نظر فنی خیلی تمیز و سبک طراحی شده.اتفاقی که میافتد این است:
-ابتدا ۴ باکس OTP کنار هم هستن.
-کاربر کد تایید را وارد میکنه.
-به محض وارد شدن رقم آخر، باکسها از حالت خطی خارج میشن.
-هر چهار باکس روی یک مدار دایرهای قرار میگیرن.
-کل مجموعه شروع به چرخش میکنه و خود باکسها هم هنگام حرکت زاویه میگیرن.
-سپس رنگ استیت از سفید/خاکستری به سبز تغییر میکنه.
چهار عدد به سمت مرکز جمع میشون.
در نهایت به یک المان واحد تبدیل میشن و Verified successfully نمایش داده میشه.نکته جذابش اینه که ، کل افکت با HTML + CSS + JavaScript خالص ساخته شده و dependency خاصی نداره
یعنی برای پنل کاربری سایت ها هم کاملاً قابل استفاده اس ؛ نه GSAP لازم دارد، نه React، نه کتابخانه انیمیشن
🔥 پرامپتش رو گذاشتم تو کانال تلگرامم که میتونی خیلی راحت بر اساس سایتی که داری بسازیش
Channel : https://t.co/lq3DUgXyM4
👌🏻🔥 این دیگه Vibe Coding نیست؛ داریم میرسیم به Vibe Game Development. ترکیب Claude Fable 5 + Higgsfield MCP میتونه از یک ایده ساده، یک بازی قابل اجرا با داستان، Asset، Texture، صدا و حتی Multiplayer بسازه.
تقسیم کارش تقریباً این شکلیه:
Idea
↓
Claude Fable 5
تحقیق، طراحی بازی و نوشتن منطق
↓
Higgsfield MCP
ساخت Character، Texture، Sound و Assetها
↓
Hosting + Multiplayer
↓
Playable Game
یعنی بهجای اینکه Claude فقط یک بازی با Boxهای خاکستری و Assetهای موقت تحویل بده، Higgsfield از طریق MCP وارد Workflow میشه و بخش بصری و اجرایی بازی رو هم میسازه. (Higgsfield) حتی Higgsfield یک Game Studio Skill هم آماده کرده که Claude رو برای همین Workflow تنظیم میکنه.
راهاندازیش هم خیلی سادهست:
Claude → Settings → Connectors → Add custom connector
MCP:
https://t.co/mqevJDaRN0
بعد از اتصال، میتونی چیزی در حد:
“Build a first-person pirate game…”
بنویسی و Agent بقیه مسیر رو جلو ببره. (Higgsfield)
چیزی که جذابه خود بازی نیست؛
اینه که داریم به Workflowهایی نزدیک میشیم که:
Idea → Research → Code → Assets → Deploy
رو یک Agent از ابتدا تا انتها مدیریت میکنه.
🔥این یکی از اون دموهاییه که باید Save کنید. با Gemini Omni 1.1 Flash میتونید لوگوی خودتون ��و بدید و تبدیلش کنید به یک انیمیشن واقعی از دوختهشدن لوگو روی پارچه.
بدون دست، بدون کات و با یک شات پیوسته.
این مدل الان از طریق Pika API برای Text-to-Video، Image-to-Video، Reference-to-Video و Video-to-Video در دسترسه. (Pika API)
پرامپت :
“Extreme macro shot of woven cotton shirt fabric, empty at first. Colored embroidery threads rise from the surface and weave themselves into place, laying down tight satin stitches row by row, tracing out the uploaded logo. The stitched area grows steadily across the frame, thread pulling taut and rising into dimensional embroidered texture until the full logo is complete. Camera holds steady, slow satisfying timelapse pace. Soft natural side light, shallow depth of field, visible fabric fibers and realistic thread sheen. No hands, thread moves on its own. One shot, no scene change.”
برای ساخت Logo Reveal، Brand Animation و تبلیغات محصول واقعاً ایده خفنیه.
Pika API:
https://t.co/pSf0oGg7xH
اگر با 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://t.co/R66zI4ABNm
این قابلیت جدید Recraft واقعاً برای طراحها جذابه.Recraft V4 Styles میتونه یک تصویر مرجع بگیره و Style اون رو در تصاویر بعدی حفظ کنه؛ نه فقط رنگبندی کلی، بلکه جزئیاتی مثل:
- ترکیببندی
- نورپردازی
- تکسچر
- زبان بصری
- و حس کلی طراحی
یعنی بهجای اینکه برای هر تصویر دوباره تلاش کنی به همون Style برسی:
Reference → Style → Generate → Consistent Assets
حتی میتونی چند Reference بهش بدی و مشخص کنی مدل چقدر دقیق به استایل پایبند بمونه. Recraft میگه در یک Blind Test در برابر ۷ مدل دیگه، خروجی V4 Styles در ۹۲٪ موارد برای تطابق Style ترجیح داده شده.برای Brand Design، کمپین تبلیغاتی، UI، Illustration و ساخت مجموعه تصاویر هماهنگ، این قابلیت میتونه خیلی کاربردی باشه.
و نکته مهمتر:
برای ساخت Style اختصاصی نیازی به Training نداره.
Recraft V4 Styles
https://t.co/5cR7Ebua1c
این ۴۱ دقیقه صحبت Sam Altman در Stanford رو اگر با AI کار میکنید، از دست ندید. 🔥 نه بهخاطر «ترفندهای Prompt نویسی»؛ بحث خیلی بزرگتر از این حرفهاست.
Altman دربارهی آیندهای صحبت میکنه که در اون یک نفر یا یک تیم خیلی کوچک، با کمک AI میتونه کاری رو انجام بده که قبلاً به یک تیم بزرگ مهندسی نیاز داشت.
توی این گفتگو میرسن به موضوعاتی مثل:
-شروع ChatGPT و رشد غیرمنتظرهاش
-Codex و آینده برنامهنویسی با Agentها
-Scaling و قابلیتهایی که با بزرگتر شدن مدلها ظاهر میشن
-تغییر کامل مدل ساخت Startupها
-آینده ��موزش در عصر AI
-هزینه Compute و زیرساخت
-AGI و مسیر بعدی مدلهای هوش مصنوعی
یه جمله مهم پشت کل این گفتگو هست:
AI فقط ابزار جدیدی برای انجام کارهای قبلی نیست؛ داره مشخص میکنه یک نفر اصلاً تا چه مقیاسی میتونه کار انجام بده. Altman حتی میگه قواعد ساخت Startup نسبت به زمانی که سال ۲۰۱۴ در Stanford درس «How to Start a Startup» رو ارائه میکرد، بهشدت تغییر کرده.
اگر با Claude، Codex، ChatGPT یا Agentها کار میکنید، این یکی واقعاً ارزش Save کردن داره.
🎥 Stanford CS153 — Scale, AGI, and the Future of Everything
Sam Altman — CEO of OpenAI
🔥⚠️امشب بهجای یک ساعت چرخیدن تو اینستا و تیک تاک، این سخنرانی Demis Hassabis در دانشگاه Cambridge رو ببینید.
مدیرعامل و همبنیانگذار Google DeepMind و برنده نوبل شیمی، در این جلسه درباره چیزی صحبت میکنه که احتمالاً بخش مهمی از آینده AI خواهد بود: هوش مصنوعی فقط برای Chatbot و تولید محتوا نیست.
بحث اصلی اینه که AI چطور میتونه سرعت «کشف علمی» رو چند برابر کنه. از AlphaFold و پیشبینی ساختار پروتئینها گرفته تا:
-کشف دارو با AI
-Digital Biology
-مدلهای جهان و درک دنیای فیزیکی
-مسیر رسیدن به AGI
-آینده علم در کنار AI
-و البته ریسکها و ایمنی هوش مصنوعی
یک مثال خیلی جالبش هم کشف داروئه:
فرایندی که امروز ممکنه سالها زمان و میلیاردها دلار هزینه داشته باشه، هدف اینه که با AI در آینده به ماهها و شاید حتی هفتهها کاهش پیدا کنه.اگر آینده AI براتون جدیه، این یکی ارزش Bookmark کردن داره.
🎥 Accelerating Scientific Discovery with AI
Sir Demis Hassabis — University of Cambridge
👌🏻ویدیو اصلی :
اگر با Claude، Codex، Copilot یا هر Coding Agent دیگهای کدنویسی میکنید، GitHub Spec Kit واقعاً ارزش امتحان کردن داره.
مشکل Vibe Coding اینه که معمولاً فقط میگیم:
«این پروژه رو برام بساز»
و Agent هم با برداشت خودش شروع میکنه به کدنویسی.
چند مرحله جلوتر هم میبینیم چیزی که ساخته، با چیزی که اول تو ذهنمون بوده فرق دار��.
Spec Kit دقیقاً ��یخواد این مشکل رو حل کنه:
اول مشخصات پروژه، بعد کد.
روندش تقریباً این شکلیه:
Idea
↓
Spec
↓
Clarify
↓
Plan
↓
Tasks
↓
Implement
↓
Verify
با دستورهایی مثل:
/speckit.constitution
تعریف قوانین و استانداردهای پروژه
/speckit.specify
مشخص کردن دقیق چیزی که میخوای بسازی
/speckit.clarify
رفع ابهامها قبل از شروع
/speckit.plan
طراحی مسیر و معماری پیادهسازی
/speckit.tasks
تبدیل پلن به تسکهای قابل اجرا
/speckit.implement
شروع ساخت پروژه
نتیجه؟
بهجای:
Prompt → Code → Pray 😅
میرسی به:
Idea → Spec → Plan → Build → Verify
بهنظرم آینده توسعه نرمافزار با AI دقیقاً همینجاست؛
نه اینکه Agent هرچی برداشت کرد بسازه، بلکه طبق یک Spec دقیق و قابل بررسی جلو بره.
GitHub Spec Kit هم متنبازه و میتونه کنار ابزارهایی مثل Claude، Codex و Copilot استفاده بشه.
GitHub:
https://t.co/Ykql63cN6K
Docs:
https://t.co/cZt7DXZkP7
🔥اگر با GPT Image 2 تصویر میسازید، این مخزن رو حتماً Save کنید.
Awesome GPT Image 2 فقط یک لیست Prompt نیست؛ عملاً یک کتابخانه بزرگ Prompt Engineering برای تولید تصویر با AI است.
داخلش بیش از ۵۰۰ نمونه Reverse-Engineered و بیش از ۲۰ قالب آماده برای سناریوهای مختلف پیدا میکنید:
پوستر و تایپوگرافی
تصاویر تبلیغاتی
محصول و E-commerce
UI و Interface
Infographic
Logo و Branding
Character Design
Storyboard
تصاویر آموزشی و کلی کاربرد دیگه
قسمت جذابترش اینه که Promptها فقط برای Copy/Paste جمع نشدهاند؛ پروژه روی ایدهی «Prompt as Code» کار کرده تا بشه Style و Templateها رو وارد Workflowهای اتوماتیک کرد.
حتی Agent Skill آماده هم داره که میتونید به Claude Code، Codex و Agentهای مختلف اضافه کنید و موقع ساخت تصویر، خودش از این Style Library استفاده کنه.
برای کسی که مرتب با AI تصویر تولید میکنه، این مخزن واقعاً ارزش Bookmark کردن داره.
GitHub:
https://t.co/IGHZAJq1Vk
اگر هنوز مفهوم AI Agent براتون یکم گنگه، Hermes Agent یکی از پروژههاییه که ارزش بررسی کردن داره. نه فقط برای استفاده؛ برای اینکه بفهمید یک Agent واقعی پشت صحنه چطور ساخته میشه.
یک Agent فقط «یک مدل زبانی + Prompt» نیست.
ماجرا کمکم میرسه به:
Model
↓
Tools
↓
Memory
↓
Skills
↓
Planning
↓
Subagents
↓
Evaluation
↓
Reward / Feedback
↓
Learning Loop
Hermes Agent پروژه متنباز Nous Research دقیقاً روی همین ایده ساخته شده؛ Agentی که میتونه ابزار اجرا کنه، حافظه دائمی داشته باشه، از تجربههای قبلی Skill بسازه، کارها رو بین Subagentها تقسیم کنه و حتی برای Training و Evaluation استفاده بشه.
جذابترین قسمت برای من اینه که وقتی این معماری رو بفهمید، مفاهیمی مثل Agent Harness، Tool Calling، Memory، Reward Function و Evaluation دیگه اونقدر پیچیده بهنظر نمیرسن.
بهنظرم کسی که قراره چند سال آینده جدی با AI کار کنه، بعد از یادگیری LLMها باید حتماً یک مرحله هم بره سراغ معماری Agentها.
https://t.co/j2NvLSfPVg