Skill عملی برای AI Agent
ImageGen Frontend Mobile
برای ساخت رابط موبایل با ورودی تصویر و خروجی UI آماده استفاده میشود.
آمادهطراحی موبایلمتوسطبهروزرسانی ۱۶ تیر ۱۴۰۵
1
این Skill چه کاری میکند؟
این Skill کمک میکند از روی تصویر یا ایده، رابط موبایل سریعتر ساخته شود. خروجی را به اجزای واضح، stateهای اصلی و چیدمان مناسب موبایل تبدیل میکند. برای شروع یک UI واقعی و قابل توسعه خیلی مفید است.
2
ورودی لازم
- تصویر مرجع
- نوع اپ موبایل
- قیود UI
- فریمورک هدف
3
خروجی نهایی
- اسکلت رابط موبایل
- چیدمان componentها
- اولویت stateها
- نکات اجرای UI
4
مناسب کدام Agentهاست؟
Claude CodeCursorCodexWindsurfGemini
5
Copy Prompt / Workflow
از روی تصویر یا توضیح کوتاه، UI موبایل را به یک plan اجرایی تبدیل کن. ورودی: تصویر مرجع، نوع محصول و محدودیتهای موبایل. خروجی: ساختار صفحه، اجزای لازم، ترتیب پیادهسازی و نکات responsive.
6
آموزش استفاده مرحلهای
- تصویر یا توضیح دقیق صفحه را بده.
- نوع اپ و فریمورک مقصد را مشخص کن.
- از Skill بخواه UI را به بخشهای موبایلمحور بشکند.
- خروجی را به layout و componentهای قابل اجرا تبدیل کن.
7
مثال واقعی
برای صفحه ثبتنام یک اپ فروشگاهی، این Skill میتواند چیدمان فرم، نوار پایین و حالتهای خطا را برای موبایل آماده کند.
8
خطاهای رایج
- فقط ظاهر را میگیری و به interactionها توجه نمیکنی.
- محدودیت فضای موبایل را وارد prompt نمیکنی.
- خروجی را بدون تست روی عرض کوچک اجرا میکنی.
9
منبع و نصب Skill
منبع اصلی و تأییدشده در skills.sh
npx skills add https://github.com/leonxlnx/taste-skill --skill imagegen-frontend-mobile
10