Skill عملی برای AI Agent

Design an Interface

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

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

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

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

2

ورودی لازم

  • نیاز محصول
  • مخاطب
  • صفحه یا flow
  • محدودیت فنی
3

خروجی نهایی

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

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

Claude CodeCursorCodexChatGPTGemini
5

Copy Prompt / Workflow

نیاز محصول را به interface اجرایی تبدیل کن. ورودی: نیاز، مخاطب، flow و محدودیت فنی. خروجی: layout، hierarchy و نکات پیاده‌سازی.
6

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

  1. نیاز محصول را کوتاه و روشن بنویس.
  2. از Skill بخواه layout صفحه را بسازد.
  3. اولویت بصری و CTA را مشخص کن.
  4. خروجی را قبل از کدنویسی با تیم مرور کن.
7

مثال واقعی

برای صفحه onboarding، این Skill می‌تواند ساختار کارت‌ها، دکمه‌ها و ترتیب محتوا را به یک طرح اجرایی تبدیل کند.
8

خطاهای رایج

  • نیاز محصول را مبهم می‌دهی.
  • فقط درباره ظاهر حرف می‌زنی و flow را نمی‌گویی.
  • محدودیت فنی را جا می‌اندازی.
9

منبع و نصب Skill

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

npx skills add https://github.com/mattpocock/skills --skill design-an-interface
10
طراحی UIآمادهمتوسط

Frontend Design

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

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

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

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

Web Design Guidelines

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

ورودیصفحه یا نمونه UI
خروجیفهرست ایرادهای UI
Compatible Agents
Claude CodeCursorCodexGeminiChatGPT
خروجی نهایی

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

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

Shadcn

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

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

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