اسکیل های طراحی UI به ابزار هوش مصنوعی کمک می کنند هنگام ساخت یا اصلاح رابط کاربری، دستورالعمل های دقیق تری را دنبال کند. بعضی از آن ها روی انتخاب سبک بصری تمرکز دارند، بعضی کد رابط را می سازند و برخی دیگر کیفیت و دسترس پذیری آن را بررسی می کنند.
در این راهنما پنج اسکیل قابل استفاده برای کارهای متفاوت را معرفی می کنیم و روش نصب و استفاده از هر کدام را توضیح می دهیم. این فهرست رتبه بندی قطعی نیست؛ انتخاب مناسب به نوع پروژه و ابزار هوش مصنوعی شما بستگی دارد.
اسکیل طراحی UI چیست؟
اسکیل یک بسته دستورالعمل است که معمولا در فایلی مانند SKILL.md قرار می گیرد. وقتی اسکیل با ابزار کدنویسی شما سازگار باشد، به دستیار می گوید چه زمانی فعال شود، چطور کار را پیش ببرد و چه مواردی را بررسی کند.
برای نمونه، یک اسکیل رابط کاربری می تواند از دستیار بخواهد ابتدا رنگ ها و اجزای پروژه را بررسی کند، سپس از همان سیستم طراحی استفاده کند و نمایش صفحه را در اندازه های گوناگون بسنجد. اسکیل جای بازبینی انسانی را نمی گیرد؛ خروجی را باید پیش از استفاده در مرورگر مرور کنید.
پیش نیاز نصب اسکیل ها
بسیاری از اسکیل های عمومی را می توان با ابزار خط فرمان skills نصب کرد. پیش از شروع، Node.js و npm را آماده کنید، ترمینال را در پوشه پروژه باز کنید و سازگاری اسکیل با دستیار کدنویسی خود را بررسی کنید. راهنمای نصب ابزار را در صفحه رسمی بسته skills ببینید.
الگوی نصب عمومی به این صورت است:
npx skills add OWNER/REPOSITORY --skill SKILL_NAMEاگر ابزار نام دستیار را خواست، گزینه مناسب پروژه را انتخاب کنید. پس از نصب، دستیار را دوباره باز کنید تا اسکیل تازه را شناسایی کند. دستورهای هر مخزن ممکن است تغییر کنند؛ در صورت خطا، راهنمای نصب همان مخزن را ملاک قرار دهید.
۱. Frontend Design؛ شکل دادن به جهت بصری
اسکیل frontend-design از مجموعه Anthropic برای ساخت رابط هایی با تصمیم های بصری هدفمند مناسب است. این اسکیل می تواند نقطه شروع خوبی برای صفحه فرود، معرفی محصول یا نمونه اولیه باشد؛ به ویژه وقتی نمی خواهید خروجی به قالبی کلی و تکراری شبیه شود. توضیحات و دستور نصب را در مخزن رسمی Anthropic Skills بررسی کنید.
نصب
npx skills add anthropics/skills --skill frontend-designنمونه درخواست
با اسکیل frontend-design یک صفحه فرود برای سامانه رزرو نوبت بساز.
مخاطب صاحبان کلینیک های کوچک هستند و هدف صفحه ثبت درخواست دمو است.
رنگ های برند و اجزای موجود پروژه را بررسی و حفظ کن. ابتدا جهت بصری
پیشنهادی را شرح بده و سپس صفحه را پیاده سازی کن.اگر راهنمای برند، فونت یا نمونه صفحه دارید، آن ها را هم به دستیار معرفی کنید تا پیشنهاد جدید با هویت موجود هماهنگ بماند.
۲. UI UX Pro Max؛ پیشنهاد سیستم طراحی
UI UX Pro Max یک اسکیل جامعه محور برای پیشنهاد سبک و راهنمای طراحی متناسب با نوع محصول است. کاربردش زمانی روشن تر می شود که هنوز درباره رنگ، تایپوگرافی، کارت ها یا الگوی صفحه تصمیم نگرفته اید. مخزن آن روش نصب و محدوده قابلیت ها را شرح می دهد؛ پیش از نصب، راهنمای رسمی UI UX Pro Max را بخوانید.
نصب
npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-maxمخزن برای برخی ابزارها روش نصب اختصاصی هم دارد. اگر دستور بالا در دستیار شما کار نکرد، بخش نصب در خود مخزن را دنبال کنید.
نمونه درخواست
برای فروشگاه آنلاین محصولات مراقبت پوست یک سیستم طراحی اولیه پیشنهاد بده.
مخاطب بزرگسالانی هستند که به دنبال خرید مطمئن اند. رنگ ها، فونت ها،
فاصله ها، سبک دکمه ها و قواعد نمایش موبایل را مشخص کن.
سپس صفحه اصلی را با اجزای موجود پروژه پیاده سازی کن.برای بازطراحی یک محصول موجود، از دستیار بخواهید ابتدا سبک های فعلی را فهرست کند و پیشنهادهایش را با همان سیستم طراحی هماهنگ سازد.
۳. Design Taste Frontend؛ ایده پردازی برای صفحه فرود
design-taste-frontend از مجموعه Taste Skill برای ساخت یا پرداخت صفحه های عمومی وب مانند صفحه فرود و معرفی محصول کاربرد دارد. طبق راهنمای پروژه، تمرکز آن صفحه های بازاریابی است و برای داشبوردهای داخلی طراحی نشده است. جزئیات را در مخزن Taste Skill بخوانید.
نصب
npx skills add Leonxlnx/taste-skill --skill design-taste-frontendنمونه درخواست
با design-taste-frontend صفحه معرفی خدمات طراحی سایت را بازطراحی کن.
مخاطب کسب و کارهای کوچک است و هدف صفحه دریافت درخواست مشاوره است.
محتوای واقعی و اجزای موجود پروژه را بررسی کن. پیش از تغییر،
پیشنهادهای خود را شرح بده و ساختارهای مهم را حفظ کن.برای نتیجه دقیق تر، هدف صفحه، محتوای واقعی کسب و کار، مخاطب و اقدام مورد انتظار را در درخواست بیاورید.
۴. Frontend UI Engineering؛ پیاده سازی واکنش گرا
اسکیل frontend-ui-engineering از مجموعه Addy Osmani به پیاده سازی رابط های واکنش گرا، اجزای قابل استفاده و وضعیت های تعاملی توجه دارد. می توانید از آن برای پوشش حالت هایی مانند بارگذاری، خطا و فرم موفق استفاده کنید. صفحه مخزن agent-skills اطلاعات و نسخه جاری اسکیل را در بر دارد.
نصب
npx skills add addyosmani/agent-skills --skill frontend-ui-engineeringنمونه درخواست
با frontend-ui-engineering فرم ثبت نام این پروژه را تکمیل کن.
اجزا و سبک های فعلی را بررسی کن. فرم را برای موبایل و دسکتاپ
واکنش گرا بساز، برای ورودی ها برچسب روشن بگذار و حالت های خطا،
بارگذاری و موفقیت را در نظر بگیر. ساختار پروژه را حفظ کن.بعد از پیاده سازی، از دستیار بخواه حالت های صفحه را فهرست کند. سپس خودتان فرم را با صفحه کلید و در اندازه های متفاوت امتحان کنید.
۵. Web Design Guidelines؛ بازبینی رابط
web-design-guidelines از مجموعه Vercel برای بازبینی کد رابط و یافتن موارد قابل اصلاح کاربرد دارد. این اسکیل برای مرحله ارزیابی مناسب است؛ مثلا وقتی می خواهید یک صفحه را از نظر قواعد طراحی وب و دسترس پذیری بررسی کنید. راهنمای نسخه جاری را در مخزن رسمی Vercel Agent Skills ببینید.
نصب
npx skills add vercel-labs/agent-skills --skill web-design-guidelinesنمونه درخواست
با web-design-guidelines فایل src/pages/Signup.tsx را بررسی کن.
موارد مشکل دار را با دلیل و محل تقریبی در فایل گزارش بده.
فعلا کد را تغییر نده؛ ابتدا یافته ها را ارائه کن.وقتی گزارش را دریافت کردید، موارد را بررسی کنید و فقط برای اصلاح های تایید شده اجازه دهید کد تغییر کند.
کدام اسکیل را انتخاب کنیم؟
- برای ایجاد جهت بصری یک صفحه تازه:
frontend-design - برای پیشنهاد سبک و سیستم طراحی:
UI UX Pro Max - برای ایده پردازی صفحه فرود:
design-taste-frontend - برای پیاده سازی واکنش گرا و وضعیت های رابط:
frontend-ui-engineering - برای بازبینی کد و پیدا کردن ایرادها:
web-design-guidelines
لازم نیست همه اسکیل ها را نصب کنید. یکی را متناسب با مرحله کار انتخاب کنید؛ برای نمونه، ابتدا سیستم طراحی را مشخص کنید، سپس رابط را پیاده سازی و در پایان کد را بازبینی کنید.
گردش کار پیشنهادی از نصب تا بررسی
- هدف را روشن کنید: مخاطب، نیاز صفحه و اقدام اصلی را مشخص کنید.
- محدودیت ها را بگویید: ابزارهای پروژه، اجزای موجود و مواردی را که نباید تغییر کنند شرح دهید.
- پیشنهاد بصری بگیرید: از اسکیل طراحی بخواهید ابتدا پیشنهادش را توضیح دهد.
- پیاده سازی را مرحله بندی کنید: ابتدا فایل های مرتبط را بررسی و سپس تغییرها را اعمال کند.
- صفحه را امتحان کنید: نمایش موبایل، فرم ها، پیام های خطا و دسترسی با صفحه کلید را بررسی کنید.
- تغییرها را بازبینی کنید: فایل های تغییر یافته و نتیجه را در مرورگر ببینید.
برای بهبود خوانایی رابط فارسی، انتخاب فونت نیز اهمیت دارد. در مقاله راهنمای انتخاب فونت فارسی برای سایت و طراحی نکات بیشتری درباره انتخاب فونت مناسب می خوانید.
اگر برای محصول خود به طراحی رابط کاربری یا پیاده سازی وب سایت نیاز دارید، برای مشاوره طراحی سایت با طراحان نوین با کارشناسان ما در تماس باشید.
