Skill عملی برای AI Agent

Design Taste Frontend

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

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

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

این Skill کمک می‌کند یک نیاز محصول را به یک رابط کاربری خوش‌سلیقه و قابل اجرا تبدیل کنید. ورودی شما هدف صفحه، context محصول و محدودیت‌های طراحی است و خروجی، UI آماده و جهت بصری روشن است.

2

ورودی لازم

  • هدف صفحه
  • context محصول
  • محدودیت طراحی
  • نمونه مرجع
3

خروجی نهایی

  • UI آماده
  • جهت بصری
  • چیدمان پیشنهادی
  • نکات اجرا
4

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

Claude CodeCursorCodexWindsurfGemini
5

Copy Prompt / Workflow

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

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

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

مثال واقعی

برای یک لندینگ محصول SaaS، این Skill می‌تواند hero، بخش ویژگی‌ها و CTA را با یک زبان بصری هماهنگ پیشنهاد دهد.
8

خطاهای رایج

  • فقط ظاهر زیبا می‌خواهی و هدف محصول را نمی‌گویی.
  • خروجی را بدون context استفاده می‌کنی.
  • UI را به طرحی غیرقابل اجرا تبدیل می‌کنی.
9

منبع و نصب Skill

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

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

Frontend Design

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

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

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

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

Web Design Guidelines

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

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

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

نمونه‌سازیآمادهمتوسط

Prototype

برای ساخت نمونه اولیه از ایده، نیاز محصول و محدودیت‌ها استفاده می‌شود.

ورودیایده
خروجیطرح نمونه اولیه
Compatible Agents
Claude CodeCursorCodexWindsurfGemini
خروجی نهایی

طرح نمونه اولیه · اجزای اصلی · مسیر ساخت · فرضیه تست