روش کار با اسکیل UI UX Pro Max در Claude؛ راهنمای کامل نصب، استفاده و پرامپت‌نویسی

اسکیل UI UX Pro Max چیست؟

اسکیل UI UX Pro Max یک بسته متن‌باز از «هوش طراحی» است که برای دستیارهای برنامه‌نویسی مبتنی بر هوش مصنوعی ساخته شده و Claude Code یکی از مهم‌ترین پلتفرم‌های پشتیبانی‌شده آن است. به زبان ساده، این اسکیل مجموعه‌ای از دانش طراحی را که معمولاً در ذهن یک طراح باتجربه وجود دارد، به شکل ساختاریافته و قابل جستجو در اختیار Claude قرار می‌دهد.

بر اساس مستندات رسمی پروژه، این اسکیل شامل حدود ۶۷ سبک رابط کاربری، ۹۶ پالت رنگی، ۵۷ ترکیب فونت، ۹۹ راهنمای تجربه کاربری و ۲۵ نوع نمودار برای ۱۳ استک فناوری است. توجه داشته باشید که این اعداد با انتشار نسخه‌های جدید تغییر می‌کنند و ممکن است در نسخه‌ای که شما نصب می‌کنید کمی متفاوت باشند.

مهم‌ترین نکته این است که UI UX Pro Max یک نرم‌افزار طراحی مثل Figma نیست و خودش صفحه نمی‌سازد. این اسکیل به Claude کمک می‌کند تصمیم‌های طراحی را آگاهانه‌تر بگیرد: چه سبک بصری برای چه نوع کسب‌وکاری مناسب است، چه رنگ‌هایی با هم هماهنگ‌اند، چه فونت‌هایی کنار هم خوب کار می‌کنند و چه الگوهای UX باید رعایت یا از چه الگوهایی باید پرهیز شود.

پیشنهاد مقاله: دایره‌المعارف سبک‌ها و ژانرهای تصویرسازی با هوش مصنوعی

چرا Claude برای طراحی به اسکیل نیاز دارد؟

مدل‌های زبانی بزرگ در نوشتن کد فرانت‌اند بسیار توانا هستند، اما بدون راهنمایی دقیق، تمایل دارند به «میانگین طراحی‌های اینترنت» نزدیک شوند. نتیجه معمولاً صفحاتی است که از نظر فنی درست کار می‌کنند ولی هویت بصری مشخصی ندارند؛ گرادیان بنفش، کارت‌های گرد و چیدمان‌های تکراری نمونه‌های آشنای این مشکل‌اند.

اسکیل UI UX Pro Max این خلأ را در چند بخش پر می‌کند:

• انتخاب مبتنی بر زمینه کسب‌وکار: سبک و رنگ بر اساس نوع محصول (مثلاً فین‌تک، سلامت، فروشگاهی یا SaaS) پیشنهاد می‌شود، نه سلیقه تصادفی.
• یکپارچگی: رنگ، تایپوگرافی، فاصله‌گذاری و جلوه‌ها در یک سیستم طراحی واحد تعریف می‌شوند.
• رعایت اصول UX و دسترس‌پذیری: نکاتی مثل کنتراست مناسب، اندازه هدف لمسی و حالت‌های فوکوس در فرایند طراحی لحاظ می‌شود.
• سرعت: به‌جای چندین بار رفت‌وبرگشت برای اصلاح ظاهر، Claude از همان ابتدا با یک مبنای منسجم شروع می‌کند.

اسکیل (Skill) در Claude چگونه کار می‌کند؟

اسکیل در اکوسیستم Claude پوشه‌ای از دستورالعمل‌ها، فایل‌های مرجع و گاهی اسکریپت‌هاست که Claude هنگام نیاز آن‌ها را بارگذاری می‌کند. قلب هر اسکیل فایلی به نام SKILL.md است که در ابتدای آن نام و توضیح اسکیل نوشته می‌شود. Claude بر اساس همین توضیح تشخیص می‌دهد کی باید از اسکیل استفاده کند.

در مورد UI UX Pro Max، اسکیل هنگام درخواست‌هایی مثل ساخت، طراحی، پیاده‌سازی، بازبینی، رفع ایراد یا بهبود رابط کاربری به‌صورت خودکار فعال می‌شود. علاوه بر دستورالعمل‌ها، یک اسکریپت پایتون به نام search.py همراه آن است که پایگاه دانش طراحی را جستجو می‌کند و نتیجه را در اختیار Claude می‌گذارد. به همین دلیل نصب Python 3 جزو پیش‌نیازهای این اسکیل است.

قابلیت‌ها و امکانات اصلی UI UX Pro Max

موتور تولید Design System

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

پایگاه دانش چنددامنه‌ای

داده‌ها در دامنه‌های مختلفی مثل سبک (style)، رنگ (color)، تایپوگرافی (typography)، UX و نمودار (chart) دسته‌بندی شده‌اند و می‌توان هر دامنه را جداگانه جستجو کرد.

راهنمای مخصوص هر استک

اسکیل توصیه‌هایی برای استک‌های متداول فرانت‌اند ارائه می‌کند؛ مثل HTML با Tailwind، React، Next.js، Vue، Svelte و ابزارهایی مانند shadcn/ui و نیز توسعه موبایل. بنابراین خروجی با تکنولوژی پروژه شما هماهنگ می‌شود.

ذخیره Design System برای استفاده مجدد

با گزینه persist می‌توانید سیستم طراحی تولیدشده را در فایل‌هایی ذخیره کنید تا در جلسه‌های بعدی هم Claude به همان قواعد پایبند بماند. این ویژگی برای پروژه‌های چندصفحه‌ای بسیار ارزشمند است.

پیش‌نیازهای نصب

پیش از نصب اسکیل، مطمئن شوید موارد زیر روی سیستم شما آماده است:

1. Claude Code: ابزار خط فرمان یا اپلیکیشن Claude Code که اسکیل در آن اجرا می‌شود.
2. Python 3: برای اجرای اسکریپت جستجوی طراحی. با دستور python3 --version نسخه نصب‌شده را بررسی کنید.
3. Node.js و npm: فقط در صورتی که بخواهید از روش نصب با CLI یا npx استفاده کنید.

روش‌های نصب اسکیل UI UX Pro Max روی Claude

برای نصب این اسکیل چند مسیر وجود دارد. روش مناسب را بسته به نوع کار انتخاب کنید.

روش اول: نصب با uipro-cli (پیشنهادی)

ساده‌ترین راه، استفاده از ابزار خط فرمان رسمی پروژه است. ابتدا CLI را به‌صورت سراسری نصب کنید:

npm install -g uipro-cli

سپس داخل پوشه پروژه خود دستور زیر را اجرا کنید:

uipro init --ai claude

این دستور پوشه .claude/skills/ui-ux-pro-max/ را همراه با فایل‌های اسکیل در پروژه ایجاد می‌کند و داده‌ها و اسکریپت‌ها هم در پوشه‌ای مشترک قرار می‌گیرند. اگر نمی‌خواهید CLI را سراسری نصب کنید، می‌توانید از npx استفاده کنید:

npx uipro-cli init --ai claude

در صورت نیاز می‌توانید با گزینه --output-dir مسیر نصب را هم مشخص کنید.

روش دوم: نصب از مارکت‌پلیس Claude Code

اگر ترجیح می‌دهید بدون npm کار کنید، داخل Claude Code می‌توانید اسکیل را از مارکت‌پلیس اضافه کنید:

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

روش سوم: نصب دستی

پوشه اسکیل را می‌توان به‌صورت دستی در مسیر .claude/skills/ui-ux-pro-max/ (برای یک پروژه) یا ~/.claude/skills/ui-ux-pro-max/ (برای همه پروژه‌ها) کپی کرد. فقط مطمئن شوید فایل SKILL.md در ریشه همین پوشه قرار دارد.

بررسی صحت نصب

بعد از نصب، Claude Code را ری‌استارت کنید تا اسکیل بارگذاری شود. سپس برای اطمینان از سالم بودن اسکریپت جستجو، این دستور را اجرا کنید:

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style

اگر نتیجه جستجو نمایش داده شد، نصب موفق بوده است.

روش کار با اسکیل؛ آموزش گام‌به‌گام

پس از نصب، کار با اسکیل ساده است. مراحل زیر یک جریان کاری استاندارد را نشان می‌دهد.

1. زمینه پروژه را روشن کنید. قبل از درخواست طراحی، نوع محصول، مخاطب هدف، حس و حال برند و استک فنی را در یک یا دو جمله بنویسید.
2. درخواست طراحی بدهید. اسکیل با کلیدواژه‌هایی مثل طراحی، ساخت یا بهبود UI خودکار فعال می‌شود. برای اطمینان می‌توانید نام آن را هم بیاورید یا از دستور /ui-ux-pro-max استفاده کنید.
3. Design System را مرور کنید. Claude ابتدا سیستم طراحی پیشنهادی را از پایگاه دانش استخراج می‌کند. پیش از شروع کدنویسی، رنگ‌ها، فونت‌ها و سبک را بررسی و در صورت نیاز اصلاح کنید.
4. پیاده‌سازی را بخواهید. بعد از تأیید مبنای طراحی، از Claude بخواهید صفحه یا کامپوننت را با همان قواعد بسازد.
5. بازبینی کنید. از Claude بخواهید خروجی را با راهنمای UX و دسترس‌پذیری بسنجد و ایرادها را اصلاح کند.
6. ذخیره و استفاده مجدد. برای پروژه‌های بزرگ، Design System را ذخیره کنید تا در صفحات بعدی هم یکدست بماند.

پیشنهاد مقاله: حقوق برنامه‌ نویسان در ایران

ساخت Design System با اسکریپت search.py

گرچه معمولاً Claude خودش اسکریپت را اجرا می‌کند، آشنایی با دستورها به شما کمک می‌کند نتیجه را کنترل کنید یا مستقیم از پایگاه دانش ایده بگیرید.

جستجو در یک دامنه مشخص

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<query>" --domain <domain>

به‌جای domain می‌توانید مقادیری مثل style، color، typography، ux یا chart را بنویسید.

جستجو بر اساس استک

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<query>" --stack <stack>

تولید Design System کامل

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech" --design-system -p "MyApp"

گزینه -p نام پروژه را مشخص می‌کند و با -f markdown می‌توانید خروجی را به‌صورت Markdown بگیرید.

ذخیره Design System

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp"

با افزودن گزینه --page می‌توانید برای یک صفحه خاص مثل داشبورد، قواعد اختصاصی ذخیره کنید که نسبت به قواعد کلی پروژه اولویت دارند.

نمونه پرامپت‌های کاربردی

کیفیت خروجی به شفافیت پرامپت وابسته است. نمونه‌های زیر را می‌توانید با تغییر جزئیات استفاده کنید.

ساخت لندینگ پیج

/ui-ux-pro-max یک لندینگ پیج برای یک اپلیکیشن مدیریت مالی شخصی بساز.
استک: Next.js و Tailwind. مخاطب: جوانان ۲۵ تا ۴۰ ساله. حس برند: مطمئن، ساده و مدرن.

بازطراحی یک بخش موجود

از اسکیل ui-ux-pro-max استفاده کن و بخش قیمت‌گذاری سایت فعلی را بازطراحی کن.
قبل از تغییر، مشکلات UX فعلی را فهرست کن.

طراحی داشبورد

با ui-ux-pro-max یک داشبورد تحلیلی طراحی کن.
نمودارهای مناسب برای نمایش روند فروش و مقایسه ماهانه را خودت انتخاب و دلیلش را توضیح بده.

ارزیابی دسترس‌پذیری

صفحه checkout را با راهنمای UX و دسترس‌پذیری ui-ux-pro-max بازبینی کن
و فقط مشکلات مهم را به ترتیب اولویت بنویس.

نکته: پرامپت‌ها را می‌توانید به فارسی بنویسید. فقط نام اسکیل و اصطلاحات فنی مثل Tailwind یا Next.js را به انگلیسی بیاورید تا ابهام ایجاد نشود.

مقایسه طراحی با Claude؛ بدون اسکیل و با اسکیل

جدول زیر تفاوت عملی دو رویکرد را نشان می‌دهد. این مقایسه بر پایه تجربه عمومی کار با اسکیل‌های طراحی است و نتیجه دقیق به پروژه و پرامپت شما بستگی دارد.

نکات مهم برای طراحی سایت فارسی و راست‌چین

پایگاه دانش UI UX Pro Max بیشتر بر اصول عمومی طراحی بنا شده و ویژگی‌های خاص زبان فارسی را به‌طور پیش‌فرض پوشش نمی‌دهد. بنابراین اگر برای مخاطب ایرانی طراحی می‌کنید، موارد زیر را صریح در پرامپت بنویسید:

• جهت RTL: بنویسید که کل صفحه راست‌چین است و ویژگی‌های جهت‌دار مثل آیکن فلش، پیمایش اسلایدر و چیدمان فرم‌ها باید معکوس شوند.
• فونت فارسی: جفت‌فونت‌های پیشنهادی اسکیل معمولاً لاتین هستند. فونت فارسی مثل وزیرمتن یا ایران‌سنس را مشخص کنید و بخواهید فونت لاتین فقط برای متن‌های انگلیسی به‌کار رود.
• ارتفاع خط: متن فارسی معمولاً به ارتفاع خط بیشتری نسبت به لاتین نیاز دارد تا خوانا بماند.
• ارقام و تاریخ: نوع ارقام فارسی یا انگلیسی و استفاده از تاریخ شمسی را از ابتدا تعیین کنید.
• نیم‌فاصله: از Claude بخواهید در متن‌های نمونه، نیم‌فاصله را درست رعایت کند.

یک پرامپت نمونه برای این منظور:

/ui-ux-pro-max صفحه اصلی فروشگاه آنلاین لوازم خانگی را طراحی کن.
زبان فارسی و کاملاً RTL. فونت وزیرمتن. تاریخ شمسی. استک: HTML و Tailwind.

بهترین روش‌ها برای گرفتن خروجی حرفه‌ای

اطلاعات را دقیق بدهید

هرچه زمینه کسب‌وکار، مخاطب و هدف صفحه روشن‌تر باشد، پیشنهادهای اسکیل دقیق‌تر خواهد بود. عبارت‌های کلی مثل «یک سایت زیبا بساز» نتیجه ضعیفی می‌دهند.

مرحله‌ای کار کنید

اول سیستم طراحی، بعد چیدمان، سپس جزئیات و حالت‌ها. تقسیم کار به مراحل کوچک، خطا را کم و کنترل شما را بیشتر می‌کند.

Design System را مالک شوید

پیشنهاد اسکیل نقطه شروع است، نه حکم نهایی. اگر هویت بصری برند شما رنگ یا فونت مشخصی دارد، آن‌ها را در پرامپت بنویسید تا Claude سیستم را با آن‌ها تطبیق دهد.

حالت‌های واسط را فراموش نکنید

از Claude بخواهید حالت‌های hover، focus، خطا، بارگذاری و خالی را هم طراحی کند. بخش بزرگی از کیفیت تجربه کاربری در همین جزئیات پنهان است.

خروجی را در مرورگر آزمایش کنید

خروجی را روی موبایل، تبلت و دسکتاپ و همچنین با کیبورد تست کنید. اسکیل کیفیت پایه را بالا می‌برد، اما جای تست واقعی را نمی‌گیرد.

پیشنهاد مقاله: فایل llms چیست و چطور باید تنظیم کنیم

مشکلات رایج و عیب‌یابی

اسکیل فعال نمی‌شود

ابتدا Claude Code را ری‌استارت کنید. سپس بررسی کنید فایل .claude/skills/ui-ux-pro-max/SKILL.md وجود دارد و نام اسکیل در بخش ابتدایی آن درست نوشته شده است. اگر هنوز فعال نشد، نام اسکیل را صریح در پرامپت بنویسید یا از دستور /ui-ux-pro-max استفاده کنید.

خطای اجرای اسکریپت پایتون

مطمئن شوید Python 3 نصب است و دستور python3 در ترمینال شناخته می‌شود. در سیستم‌های مبتنی بر یونیکس ممکن است لازم باشد به اسکریپت مجوز اجرا بدهید:

chmod +x .claude/skills/ui-ux-pro-max/scripts/search.py

خطای دسترسی هنگام نصب CLI

اگر هنگام نصب سراسری npm با خطای دسترسی روبه‌رو شدید، می‌توانید از npx استفاده کنید یا تنظیمات دسترسی npm را اصلاح کنید.

خروجی با انتظار شما نمی‌خواند

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

محدودیت‌های اسکیل که باید بدانید

• اسکیل جای طراح انسانی را نمی‌گیرد؛ تصمیم‌های راهبردی و هویت برند همچنان به قضاوت شما نیاز دارد.
• پایگاه دانش آن عمدتاً با تمرکز بر ادبیات طراحی جهانی تهیه شده و ویژگی‌های زبان فارسی باید دستی مشخص شوند.
• اسکیل خودکار تضمین نمی‌کند خروجی از نظر دسترس‌پذیری کامل باشد؛ ممیزی نهایی لازم است.
• اعداد و امکانات ذکرشده در این مقاله به نسخه فعلی پروژه وابسته است و ممکن است تغییر کند. برای اطلاعات به‌روز به مخزن رسمی پروژه در GitHub مراجعه کنید.

چه کسانی از این اسکیل بیشترین بهره را می‌برند؟

توسعه‌دهندگان مستقل و فریلنسرهایی که طراح اختصاصی ندارند، استارتاپ‌هایی که می‌خواهند سریع یک MVP با ظاهر حرفه‌ای بسازند، آژانس‌های دیجیتال که برای پروژه‌های متعدد به یک مبنای طراحی ثابت نیاز دارند و طراحانی که می‌خواهند ایده‌های اولیه را سریع‌تر به پروتوتایپ تبدیل کنند، از مهم‌ترین گروه‌های مخاطب این اسکیل هستند.

اگر وبسایت فارسی طراحی می‌کنید، می‌توانید از اسکیل برای ساختار کلی، پالت رنگ و الگوی چیدمان کمک بگیرید و بعد با تنظیمات RTL و فونت فارسی آن را بومی‌سازی کنید.

جمع‌بندی

اسکیل UI UX Pro Max راهی مؤثر برای ارتقای کیفیت طراحی در Claude Code است. با نصب ساده، فعال‌سازی خودکار و موتور تولید Design System، Claude از یک مولد کد عمومی به دستیاری تبدیل می‌شود که تصمیم‌های طراحی را بر پایه دانش ساختاریافته می‌گیرد. برای بهترین نتیجه، زمینه پروژه را دقیق توضیح دهید، مرحله‌ای جلو بروید، Design System را ذخیره کنید و برای محتوای فارسی، جهت RTL و فونت مناسب را صریح تعیین کنید. اگر این روند را رعایت کنید، خروجی‌هایی منسجم‌تر، سریع‌تر و حرفه‌ای‌تر خواهید گرفت.

سوالات متداول

اسکیل UI UX Pro Max چیست؟

یک اسکیل متن‌باز برای دستیارهای هوش مصنوعی مثل Claude Code است که پایگاه دانش طراحی شامل سبک‌های UI، پالت رنگ، ترکیب فونت، راهنمای UX و نوع نمودار را در اختیار مدل می‌گذارد تا خروجی طراحی حرفه‌ای‌تر و منسجم‌تر شود.

برای استفاده از UI UX Pro Max به Python نیاز است؟

بله، موتور جستجوی طراحی این اسکیل با اسکریپت پایتون کار می‌کند و نصب Python 3 روی سیستم لازم است.

اسکیل UI UX Pro Max را چطور نصب کنیم؟

سه راه رایج وجود دارد: نصب با uipro-cli و دستور uipro init --ai claude، نصب از مارکت‌پلیس Claude Code و نصب دستی پوشه اسکیل در مسیر .claude/skills.

آیا این اسکیل فقط برای Claude کار می‌کند؟

خیر، این اسکیل از ابزارهای دیگری مانند Cursor، Windsurf، Codex CLI و Gemini CLI هم پشتیبانی می‌کند، اما در این مقاله تمرکز بر Claude Code است.

اگر اسکیل خودکار فعال نشد چه کنیم؟

ابتدا ابزار را ری‌استارت کنید، وجود فایل SKILL.md را در مسیر اسکیل بررسی کنید و سپس نام اسکیل را صریح در پرامپت بنویسید یا از دستور /ui-ux-pro-max استفاده کنید.

آیا برای طراحی سایت فارسی و راست‌چین مناسب است؟

بله، به شرطی که در پرامپت جهت RTL، زبان فارسی و فونت فارسی (مثل وزیرمتن) را صریح مشخص کنید، چون پایگاه دانش اسکیل عمدتاً بر اصول عمومی طراحی استوار است.