یه منبع خوب برای طراحانی که دوست دارن UI هاشون از حالت خشک و تکراری در بیاد

؛𝗹𝗶𝗯𝗿𝗮𝗿𝗶𝗲𝘀.𝗱𝗲𝘃 چند تا کتابخونه آماده برای افکت‌های مدرن 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 باشه.

🔖
https://libraries.dev/


💎 @Htmlcss_channels  | #HTML #css #JavaScript

اینم ایده جالبیه برای کسایی که وب کار می‌کنن (با هر فریم ورکی یا حتی html خام) می‌آد و کنار پنل براتون 2700 تا ایکون اضافه می‌کنه و روشون کلیک کنید مستقیم کدش به پروژه اضافه میشه دیگه دردسر سرچ کردن توی اینترنت برای پیدا کردن ایکون رو ندارید کنار دستتونه :


marketplace.visualstudio.com/items?itemName=DevChauhan.reicon


💎 @Htmlcss_channels  | #HTML #css #JavaScript

یه افزونه رایگان Chrome می‌تونه سیستم طراحی هر سایتی رو استخراج کنه؛

نتیجه رو برای AI به Claude، ChatGPT، Cursor و ابزارهای دیگه می‌فرسته.

یعنی به‌جای اینکه ظاهر یه سایت رو دستی تحلیل کنی، Design System اون رو تقریباً آماده تحویل می‌گیری.

https://chromewebstore.google.com/detail/gkeiedoojhdmlaimiookeaoppgfpemij


💎 @Htmlcss_channels  | #HTML #css #JavaScript

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

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

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

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

𝗗𝗲𝘀𝗶𝗴𝗻𝗠𝗗
designmd.me

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

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

𝗔𝘂𝗿𝗮
aura.build

𝗡𝗲𝘂𝗳𝗼𝗿𝗺
neuform.ai

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

𝗧𝘆𝗽𝗲𝗨𝗜
typeui.sh


💎 @Htmlcss_channels  | #HTML #css #JavaScript

اگه برای طراحی سایت دنبال 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، http://Footer.design و http://CTA.gallery هم هرکدوم دقیقاً روی همون بخش خاص تمرکز دارن.

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


💎 @Htmlcss_channels  | #HTML #css #JavaScript

پروژه‌های طراحی فرانت‌اند که مدل‌های هوش مصنوعی می‌زنن معمولاً یه مشکل مشترک دارن: خروجی‌ها فوق‌العاده شبیه به هم، تکراری و پر از الگوهای کلیشه‌ای هستن (اصطلاحاً UI Slop).

ریپازیتوری taste-skill دقیقاً دست گذاشته روی همین نقطه ضعف.

در واقع مجموعه‌ای از Agent Skillهای استاندارد و قابل حمل (SKILL.md) هست که روی ابزار کدنویسی‌تون لود می‌کنید تا کنترل خروجی فرانت‌اند رو دست بگیره:

تنظیم دقیق ۳ پارامتر کلیدی در نسخه v2:
از چیدمان کلاسیک تا نامتقارن و مدرن
تنظیم عمق انیمیشن‌ها
تنظیم تراکم بصری برای داشبوردها یا لندینگ‌ها

اسکیل‌های تفکیک‌شده برای سناریوهای مختلف: بازطراحی پروژه‌های قدیمی (Redesign)، پایپ‌لاین تبدیل عکس رفرنس به کد (Image-to-Code)، و استایل‌های مینیمال یا بروتالیست.
شامل اسکیل‌های مجزا برای تولید تصویر رفرنس (Web/Mobile/Brandkit) و تحویل اون به مدل‌های کدر برای پیاده‌سازی.
سازگار با فریم‌ورک‌های مدرن (React، Vue، Svelte و...) بدون وابستگی به یک استک خاص.

https://github.com/Leonxlnx/taste-skill


💎 @Htmlcss_channels  | #HTML #css #JavaScript

۸مخزن گیت‌هاب که صفحات وب رو به داده‌ی آماده برای AI تبدیل می‌کنن
📌 این ابزارها کار استخراج و پردازش داده از وب رو خیلی راحت‌تر می‌کنن

۱. Firecrawl —
اسکرپینگ و ساختاردهی داده‌های
وب

کاربرد: بهت می‌گی یه سایت یا کل یه دامنه رو بکشه بیرون، خودش می‌ره همه صفحات رو می‌خزه، محتوای اصلی رو از تبلیغات و منوهای اضافی جدا می‌کنه و در نهایت یه خروجی تمیز (معمولاً JSON یا Markdown) تحویلت می‌ده. برای ساخت دیتاست، فید خبری، یا آماده‌سازی داده برای RAG عالیه.
👉 https://t.co/xsjMmveGm2

۲. Crawl4AI —
تبدیل صفحات وب به مارک‌داون تمیز

کاربرد: مخصوص دنیای AI ساخته شده. یه URL بهش می‌دی، اون رو با مرورگر واقعی باز می‌کنه، محتوای مفید رو استخراج می‌کنه و به فرمت Markdown تحویل می‌ده. متن‌ها تمیز و ساخت‌یافته‌ان، مستقیم می‌تونی بدیش به LLM.
👉 https://t.co/1xiUtQ4Vo7

۳. browser-use —
عامل AI که خودش وب‌گردی می‌کنه

کاربرد: به agent های AI یه مرورگر واقعی می‌ده تا بتونن مثل یه آدم توی سایت بگردن، کلیک کنن، فرم پر کنن، لاگین کنن و کارهای پیچیده انجام بدن. فرقش با Crawl4AI اینه که اینجا AI خودش تصمیم می‌گیره چی کار کنه، نه اینکه فقط صفحه رو بخونه.
👉 https://t.co/rDQN9lt2mE

۴. Crawlee —
فریم‌ورک حرفه‌ای ساخت اسکرپ وب

کاربرد: برای وقتی که می‌خوای اسکرپینگ خودت رو از صفر بسازی با قابلیت‌های جدید: مدیریت صف (queue)، تلاش مجدد خودکار، چرخش پروکسی، پشتیبانی از headless browser. مقیاس‌پذیره و برای پروژه‌های بزرگ مناسبه.
👉 https://t.co/5HaahD6Hrz

۵. Scrapy —
غول قدیمی وب‌اسکرپینگ

کاربرد: فریم‌ورک پایتونی که سال‌هاست توی صنعت استاندارده. اگه می‌خوای هزاران صفحه رو در ساعت با ساختار حرفه‌ای اسکرپ کنی (spider, pipeline, middleware)، Scrapy انتخاب کلاسیکه. جامعه‌ی بزرگ، مستندات قوی، و هزاران extension آماده داره.
👉 https://t.co/gNCZqRk7Co

۶. MarkItDown —
تبدیل هر فایلی به مارک‌داون

کاربرد: همه‌کاره‌ست! PDF، Word، اکسل، تصویر، صفحه وب، حتی فایل صوتی رو می‌گیره و تبدیلش می‌کنه به Markdown تمیز. مخصوصاً برای وقتی که یه عالمه سند داری و می‌خوای همه رو یه‌شکل کنی تا بشه به LLM داد یا توی دیتابیس جست‌وجو کرد.
👉 https://t.co/EdMi0RbdyI

۷. Scrapling —
اسکرپینگ تطبیقی برای سایت‌های پویا

کاربرد: سایت‌هایی که دائم ساختارشون رو عوض می‌کنن، selector هاشون رو خراب می‌کنن، یا با anti-bot درگیرن. Scrapling یاد می‌گیره کجای صفحه مهمه و اگه سایت تغییر کنه، خودش تطبیق می‌ده. اسکرپر نمی‌شکنه به این راحتی‌ها.
👉 https://t.co/Kzm5ACDEEL

۸. scrcpy —
کنترل گوشی اندروید از کامپیوتر

کاربرد: اسکرین گوشی اندرویدت رو live روی مانیتور می‌بینی و با کیبورد و ماوس کنترلش می‌کنی. برای تست اپ، اتوماسیون موبایل، یا حتی استخراج داده از اپ‌هایی که API ندارن خیلی به‌درد‌بخوره. رایگان، اوپن‌سورس، بدون نیاز به روت.
👉 https://t.co/wuQ5OjoUCW



💎 @Htmlcss_channels  | #HTML #css #JavaScript

🎨طراحی لندینگ‌پیج حرفه‌ای با هوش‌مصنوعی

یه ابزار AI هست که تو چند دقیقه صفحه‌ات رو می‌سازه. استایل‌های آماده داره، فقط با یه پرامپت ساده یه لندینگ کامل تحویلت می‌ده.

🔗 sceneai.art
⚖️ مقایسه با ۳ ابزار مشابه

ابزارهای زیادی توی این فضا هستن. بسته به نیازت یکی رو انتخاب کن:

🔹 ؛SceneAI — سریع‌ترین راه برای لندینگ شیک
🔹؛ v0.dev — کد React واقعی برای دولوپرها
🔹؛ Relume — ساخت ساختار کلی سایت (sitemap + wireframe)
اینجا می‌تونی پرامپت بدی و ساختار سایت + wireframe بگیری. اگه بخوای خروجی رو توی Figma یا Webflow ببری، از همون‌جا Export می‌کنی.

🔹 ؛Framer — طراحی + انتشار سایت با دامنه اختصاصی

کدوم برای تو مناسبه؟

👤 غیرفنی + فقط لندینگ → SceneAI
👨‍💻 دولوپر + کد production → v0.dev
🏗️ پروژه بزرگ + چند صفحه → Relume
🌐 سایت آماده با دامنه → Framer


💎 @Htmlcss_channels  | #HTML #css #JavaScript

این سایت کامپوننت های زیبایی برای وب داره، کد هاشون هست بعضیاشون حتی پرامپت هم دارن برای اونایی که نمی‌تونن از کدش استفاده کنن یا اینکه با فریم ورکشون سازگار نیست بدید به هوش مصنوعی براتون می‌سازتش:

bencho.dev


💎 @Htmlcss_channels  | #HTML #css #JavaScript

سایت موشن‌سایتس (MotionSites) پرامپت‌ برای طراحی وب‌سایت در اختیارتون می‌ذاره.

سایت MotionSites پرامپت‌های آماده‌ی AI برای ساخت لندینگ داره.

1️⃣ می‌ری تو سایت ، یه نمونه‌ی خوشگل پیدا می‌کنی
2️⃣ پرامپت آماده‌ش رو کپی می‌کنی (همین، فقط کپی!)
3️⃣ می‌دیش به Cursor یا v0.dev
4️⃣ یه لندینگ شیک با انیمیشن‌های روان تحویل می‌گیری

کلی نمونه‌ی آماده برای هر چیزی که فکرشو کن
هدر داره، فوتر داره، کل صفحه داره. هر چیزی بخوای هست.

اینجوری پیش برو:

MotionSites (پرامپت آماده)
↓
Cursor / v0.dev (گرفتن کد)
↓
Sevalla / Vercel (دیپلوی)

🔗 لینک: https://motionsites.ai


✅ رایگان شروع می‌کنی، بعد اگه خواستی پولی‌هاش رو بگیری


💎 @Htmlcss_channels  | #HTML #css #JavaScript