👈 این ۱۵ سایت رو بشناس، سطح طراحی‌هات چند پله بالاتر می‌ره!

از طراحی سایت‌های مدرن و انیمیشن‌های خفن گرفته تا کامپوننت‌های آماده و ایده‌های UI/UX؛ این منابع می‌تونن ساعت‌ها توی وقتت صرفه‌جویی کنن!

🎨 ۱۵ منبع جذاب برای طراح‌ها و برنامه‌نویس‌ها:

https://modulify.ai/templates — قالب‌های آماده سایت
https://motionin.design — انیمیشن و موشن‌دیزاین
https://landdding.com — تکنیک‌های طراحی بصری
https://wonderlist.design — طرح‌های حرفه‌ای Figma
https://iconly.design — مجموعه آیکن‌های کاربردی
https://scrolltide.co — ایده‌های انیمیشن اسکرول
https://land-book.com — الهام طراحی سایت
https://godly.website — نمونه سایت‌های خلاقانه
https://supahero.io — ایده طراحی لندینگ‌پیج
https://footer.design — طراحی فوترهای جذاب
https://60fps.design — انیمیشن رابط کاربری موبایل
https://cta.gallery — ایده‌های دکمه و CTA
https://grainient.supply — گرادینت‌های متحرک
https://backgrounds.supply — پس‌زمینه‌های آماده
https://on.design — ابزار و فضای طراحی



💎 @Htmlcss_channels  | #HTML #css #JavaScript

این ابزار open source برای طراحی سایت، خروجی‌های تکراری AI رو کمتر می‌کنه؛ از فونت و رنگ تا چیدمان.
https://github.com/pbakaus/impeccable



💎 @Htmlcss_channels  | #HTML #css #JavaScript

آیکون‌ست رایگان برای طراح‌ها

🔹 Lucide — مینیمال
https://lucide.dev

🔹 Heroicons — ست Tailwind
https://heroicons.com

🔹 Phosphor — ۶ وزن مختلف
https://phosphoricons.com

🔹 Tabler — ۶۰۰۰+ آیکون
https://tabler.io/icons



💎 @Htmlcss_channels  | #HTML #css #JavaScript

🤯 یه خبر فوق‌العاده برای طراح‌ها! دیگه لازم نیست برای هر لوگو ساعت‌ها درگیر تبدیل عکس به وکتور بشی، مدل جدید Ideogram Vector اومده تا طراحی با هوش مصنوعی رو یه مرحله جلوتر ببره!

فقط توضیح می‌دی چه طرحی می‌خوای و به‌جای یه عکس معمولی، فایل SVG قابل ویرایش تحویل می‌گیری!

چه کارهایی می‌تونی باهاش انجام بدی؟

🔸 ساخت لوگو و آیکن با پرامپت
🔸 تبدیل عکس‌های PNG و JPG به وکتور
🔸 طراحی استیکر، لیبل و تایپوگرافی
🔸 تغییر رنگ و ویرایش اجزای طرح
🔸 بزرگ‌کردن طرح بدون افت کیفیت

ماجرا اینه که خروجی رو می‌تونی داخل Figma یا Illustrator باز کنی و روی جزئیاتش کار کنی!

این مدل حالا از طریق Blyth AI هم در دسترسه.
https://blyth.ai/image-generator?model=ideogram-text-to-vector

💎 @Htmlcss_channels  | #HTML #css #JavaScript

بعضی کتابخونه‌های UI واقعاً یه چیز دیگه‌ان؛ Lightswind یکی از اون‌هاست ✨

مجموعه‌ای از کامپوننت‌های خیلی خفن برای React و Next.js؛ از افکت‌های سه‌بعدی و بک‌گراندهای متحرک تا انیمیشن‌های تعاملی که همون نگاه اول توجه رو جلب می‌کنن.

حتماً دموهاش رو ببینید:
https://lightswind.com


💎 @Htmlcss_channels  | #HTML #css #JavaScript

📌 راهنمای بهینه‌سازی کارایی فرانت‌اند

اگر در حال ساخت سایت هستی، سه چیز مهم است: ریسپانسیو بودن، سرعت و کارایی — و راه‌های زیادی برای رسیدن به آن‌ها وجود دارد.

این آموزش به همین موضوع می پردازد
آنچه در این آموزش یاد میگیرید:
• رندر سمت سرور (SSR)
• استفاده از CDN
• کش (caching)
• فشرده‌سازی فایل‌ها
• بهینه‌سازی تصاویر
• و موارد بیشتر

🔗 https://www.freecodecamp.org/news/the-front-end-performance-optimization-handbook/


#WebDevelopment #Frontend #Coding

💎 @Htmlcss_channels  | #HTML #css #JavaScript

این ابزار یه جورایی مرز بین طراحی و ساخت UI رو برمی‌داره؛. به‌جای اینکه فقط با کد یا ابزارهای معمول طراحی کار کنی، خود رابط رو روی Canvas می‌سازی و باهاش تعامل می‌کنی.

https://canvasui.dev/


💎 @Htmlcss_channels  | #HTML #css #JavaScript

📌 معرفی ابزار LinkSwift

یه ابزار جاوااسکریپت که لینک دانلود مستقیم فایل‌ها رو از هشت سرویس ابری چینی درمیاره — از جمله Baidu Netdisk، Aliyun Drive و Quark.


🔗 https://github.com/hmjz100/LinkSwift

سرویس‌های ابری چینی (مثل بیدو نت‌دیسک) معمولاً به‌جای لینک مستقیم، صفحهٔ دانلود با کلیک‌سی‌جی و رمز می‌دن. این پروژه اون رمز رو خودش رد می‌کنه و لینک دانلود مستقیم و سریع رو تحویل می‌ده — بدون نیاز به نصب افزونه یا کپی‌کردن دستی توکن.

کاربردش: دانلود فایل از این سرویس‌ها رو خودکار و تمیز می‌کنه، مخصوصاً برای فایل‌های بزرگ.

#هوش_مصنوعی #جاوااسکریپت

💎 @Htmlcss_channels  | #HTML #css #JavaScript

📌 ۵ سایت خفن برای برنامه‌نویس‌ها که باید بشناسی


۱. awesome-skills —
بیش از ۹۶۸ مهارت (Skill) متن‌باز برای ایجنت‌های AI
یه فهرست curated از مهارت‌های آماده برای Claude Code، Codex، Cursor و ابزارهای مشابه. حتی یه «متا-اسکیل» داره که خودش تشخیص می‌ده برای هر تسک جدید کدوم مهارت رو نصب کنه.
🔗 github.com/Itsriober/awesome-skills

۲. ui-ux-pro-max-skill —

۵۰ استایل UI رایگان برای هوش مصنوعی
اگه با AI رابط کاربری می‌سازی، این مهارت بهت کمک می‌کنه خروجی‌ات از حالت پیش‌فرض دربیاد.
نصب:
npx skills add nextlevelbuilder/ui-ux-pro-max-skill

🔗 github.com/nextlevelbuilder/ui-ux-pro-max-skill

۳. Watermelon UI —
۶۰۰+ کامپوننت React رایگان
کتابخانه‌ای اوپن‌سورس با Tailwind و shadcn، شامل دکمه، دیالوگ، Data Table، Date Picker و بیشتر — به‌علاوهٔ بلاک‌های کامل صفحه، داشبوردهای ادمین و تمپلیت‌های لندینگ. همه با مجوز MIT.
🔗 ui.watermelon.sh

۴. Diagram Design —
۴۵ نوع نمودار AI
به‌جای Mermaid، یه فایل HTML + SVG تمیز و قابل انتشار می‌سازه؛ بدون سایه‌های زشت و بدون شلوغی. با یه دستور ساده مثل «معماری اپلیکیشنمو بکش» کار می‌کنه و با Claude Code، Cursor، Codex و Windsurf سازگاره.
🔗 diagramdesign.dev

۵. Collected —
۵٬۵۹۳ طرح وب گردآوری‌شده
مرجع بصری برای وقتی که داری دنبال ایدهٔ طراحی می‌گردی و نمی‌دونی از کجا شروع کنی.
🔗 collected.li

💡 همه‌شون رایگان و متن‌بازه؛ مستقیم کپی کن توی پروژه‌ات.



💎 @Htmlcss_channels  | #HTML #css #JavaScript

📱Learning Functional Programming with JavaScript

📘 «آموزش برنامه‌نویسی تابعی با جاوااسکریپت ES6+»


🔄 این دوره برنامه‌نویسی تابعی در جاوااسکریپت رو از صفر تا مفاهیم پیشرفته آموزش می‌ده — همراه با مثال‌های واقعی و کد.

🧠 چی یاد می‌گیری؟

• تفاوت سبک تابعی با سبک دستوری/شی‌گرا — و اینکه چرا اپلیکیشن‌های بزرگ با کد تابعی مقیاس‌پذیرتر می‌مونن

• توابع درجه‌بالا (Higher-Order) و اینکه چطور تابع رو به‌عنوان ورودی به تابع دیگه پاس بدی

• تابع‌های خالص (Pure Functions)، عوارض جانبی و اهمیت تست‌پذیر بودن

• کامپوزیشن (Composition) — ساختن رفتارهای پیچیده از توابع ساده

• ایمیوتابلیتی (Immutability) و کار با داده‌های تغییرناپذیر

• متدهای کاربردی روی آرایه‌ها: map، filter، reduce و خوانش این‌ها به‌عنوان ابزارهای ترکیب‌پذیر
• الگوهای پرکاربرد در اکوسیستم مدرن JS

🛠️ پیش‌نیاز: آشنایی مقدماتی با جاوااسکریپت کافیه — از ES6 به بعد (یعنی let/const، توابع فلش، Promise و ماژول‌ها) استفاده می‌شه.

#جاوااسکریپت #برنامه‌نویسی


💎 @Htmlcss_channels  | #HTML #css #JavaScript

دیگه برای استفاده از فونت‌های فارسی در پروژه‌هاتون به Google Fonts یا CDN خارجی وابسته نیستید.

مجموعه‌ای از ۴۴ خانواده فونت فارسی رو در قالب یک پکیج آماده ارائه میده؛ از وزیرمتن و استعداد گرفته تا لاله‌زار و نوتو نستعلیق.

فایل فونت‌ها داخل خود پکیج قرار دارن و فقط فونتی که نیاز دارید وارد پروژه میشه. با پشتیبانی از "next/font/local"، نسخه‌های ارقام فارسی و استایل‌های آماده برای Vite و Astro.

https://github.com/amiryxe/next-persian-fonts


💎 @Htmlcss_channels  | #HTML #css #JavaScript

🎨 ۵سایت جذاب برای طراحان UI/UX


🔹 scrolltide.com—
بیش از ۶۰۰ پرامپت طراحی و ۲۰۰+ کامپوننت، همراه با سورس کد کامل برای سایت‌های سه‌بعدی و اسکرول‌محور

🔹 scrollshaders.com —
۱۱۷ شیدر انیمیشنی در ۱۱ استایل مختلف

🔹 footer.design —
فوترهای بهتر و خلاقانه‌تر

🔹 cta.gallery —
ایده‌های برای دکمه‌های CTA

🔹 styles.refero.design —
استایل‌های واقعی طراحی محصول، برای الهام گرفتن از پروژه‌های واقعی بازار

💡 نکته: اگه دنبال اینی که سایتت توی «فید» اول نتایج گوگل و AI بیاد، یه سری به discoverability و نحوهٔ ایندکس شدن هم بزن — چیزی که خیلی‌ها نادیده می‌گیرن.


#طراحی_سایت #UI_UX #فرانت_اند #وب_دیزاین


💎 @Htmlcss_channels  | #HTML #css #JavaScript