Skill عملی برای AI Agent
Frontend Design
برای طراحی رابط کاربری متفاوت، قابل اجرا و مناسب Agentها در پروژههای فرانتاند استفاده میشود.
آمادهطراحی UIمتوسطبهروزرسانی ۱۶ تیر ۱۴۰۵
1
این Skill چه کاری میکند؟
این Skill به شما کمک میکند طراحی رابط کاربری را با کمک AI Agent سریعتر و دقیقتر انجام دهید. کافی است نوع محصول، شخصیت برند و صفحه هدف را به Agent بدهید تا layout، پیشنهاد بصری و نکات پیادهسازی دریافت کنید. این Skill برای تیمهایی مناسب است که میخواهند UI قابل اجرا و غیرکلیشهای بسازند.
2
ورودی لازم
- نوع محصول
- شخصیت برند
- صفحه یا component هدف
- محدودیت فنی
3
خروجی نهایی
- جهت بصری
- چیدمان صفحه
- پیشنهاد رنگ و تایپوگرافی
- راهنمای اجرای UI
4
مناسب کدام Agentهاست؟
Claude CodeCursorCodexWindsurfGemini
5
Copy Prompt / Workflow
یک رابط کاربری واضح و قابل اجرا طراحی کن. ورودی: نوع محصول، شخصیت برند، صفحه هدف و محدودیت فنی. خروجی: layout، تایپوگرافی، رنگ، hierarchy و نکات پیادهسازی.
6
آموزش استفاده مرحلهای
- نوع صفحه و هدف تجاری را مشخص کن.
- به Skill بگو UI باید چه حس و چه کاربردی داشته باشد.
- خروجی را به layout و اجزای قابل پیادهسازی تبدیل کن.
- قبل از کدنویسی، یک نمونه مرجع داخلی بگیر.
7
مثال واقعی
برای صفحه pricing یک SaaS، این Skill میتواند مسیر بصری، ترتیب بخشها و CTA را طوری پیشنهاد کند که مستقیم قابل پیادهسازی باشد.
8
خطاهای رایج
- فقط میگویی زیبا باشد و هدف محصول را نمیدهی.
- به جای layout، متن طولانی و مبهم میگیری.
- محدودیت فنی را نمیگویی و طرح غیرقابل اجرا میشود.
9
منبع و نصب Skill
منبع اصلی و تأییدشده در skills.sh
npx skills add https://github.com/anthropics/skills --skill frontend-design
10