باز کردن منوی سایت
Skill عملی برای AI Agent

Web Design Guidelines

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

آمادهطراحی UIمتوسطبه‌روزرسانی ۱۶ تیر ۱۴۰۵
نصب سریعلینک GitHub
1

این Skill چه کاری می‌کند؟

این Skill به شما کمک می‌کند UI را با کمک AI Agent از نظر طراحی، خوانایی و دسترس‌پذیری سریع‌تر بررسی کنید. کافی است صفحه، هدف و مخاطب را به Agent بدهید تا ایرادهای مهم، پیشنهادهای بهبود و نکات اجرایی دریافت کنید. این Skill برای کسانی مناسب است که می‌خواهند قبل از release، کیفیت تجربه کاربر را دقیق‌تر بسنجند.

2

ورودی لازم

  • صفحه یا نمونه UI
  • مخاطب هدف
  • هدف صفحه
  • محدودیت دسترس‌پذیری
3

خروجی نهایی

  • فهرست ایرادهای UI
  • پیشنهاد بهبود چیدمان
  • نکات accessibility
  • اقدام‌های سریع
4

مناسب کدام Agentهاست؟

Claude CodeCursorCodexGeminiChatGPT
5

Copy Prompt / Workflow

این UI را از نظر طراحی و دسترس‌پذیری بررسی کن. ورودی: صفحه هدف، مخاطب، هدف تجاری و محدودیت‌ها. خروجی: ایرادهای مهم، پیشنهادهای کوتاه و اولویت اصلاح.
6

آموزش استفاده مرحله‌ای

  1. صفحه یا تصویر UI را بده.
  2. هدف صفحه و مخاطب را توضیح بده.
  3. از Skill بخواه ایرادها را بر اساس اثر روی کاربر مرتب کند.
  4. پیشنهادها را به تغییرهای کوچک و قابل اجرا تبدیل کن.
7

مثال واقعی

برای صفحه ثبت‌نام، این Skill می‌تواند مشکل کنتراست، ترتیب فرم و شفاف نبودن CTA را قبل از انتشار پیدا کند.
8

خطاهای رایج

  • فقط درباره ظاهر نظر می‌گیری و دسترس‌پذیری را نمی‌گویی.
  • خروجی خیلی کلی می‌شود و به تغییر واقعی تبدیل نمی‌شود.
  • مخاطب و هدف صفحه را مشخص نمی‌کنی.
9

منبع و نصب Skill

منبع اصلی و تأییدشده در skills.sh

npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines
منبع GitHubصفحه Skill در skills.sh
10
طراحی UIآمادهمتوسط

Frontend Design

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

ورودینوع محصول
خروجیجهت بصری
Compatible Agents
Claude CodeCursorCodexWindsurfGemini
خروجی نهایی

جهت بصری · چیدمان صفحه · پیشنهاد رنگ و تایپوگرافی · راهنمای اجرای UI

مشاهده SkillGitHub
طراحی UIآمادهمتوسط

Design an Interface

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

ورودینیاز محصول
خروجیطرح صفحه
Compatible Agents
Claude CodeCursorCodexChatGPTGemini
خروجی نهایی

طرح صفحه · ساختار بخش‌ها · اولویت‌های بصری · نکات پیاده‌سازی

مشاهده SkillGitHub
UI Componentsآمادهمتوسط

Shadcn

برای استفاده بهتر از shadcn/ui و ساخت رابط‌های مدرن با Agent استفاده می‌شود.

ورودیcomponent هدف
خروجیپیشنهاد component
Compatible Agents
Claude CodeCursorCodexGitHub CopilotWindsurf
خروجی نهایی

پیشنهاد component · ساختار props · نکات composition · گام‌های پیاده‌سازی

مشاهده SkillGitHub