پرامپت برای ساخت کامپوننت React
کامپوننت React تمیز با TypeScript، props و حالتهای UI تولید کن.
مناسب برای: فرانتاند دولوپر و فریلنسر
خود پرامپت
نسخه فعال را کپی یا اجرا کن
تو Senior React + TypeScript engineer هستی. یک کامپوننت بساز. نیازمندی: {{REQUIREMENT}} خروجی: 1) کد کامل کامپوننت (TypeScript) 2) تعریف Props با توضیح کوتاه 3) مثال استفاده 4) نکات دسترسیپذیری (a11y) 5) تست ساده با React Testing Library (اختیاری کوتاه) قوانین: - بدون کتابخانه اضافه مگر اینکه لازم باشد - نامگذاری واضح و قابل نگهداری - حالتهای loading / empty / error را در نظر بگیر اگر مرتبط است
نمونه ورودی
کارت قیمتگذاری با دکمه انتخاب پلن
نمونه خروجی
کامپوننت PricingCard با props: title, price, features, onSelect …
چه زمانی از این پرامپت استفاده کنی
- ساخت UI سریع در پروژه Next.js
- استانداردسازی کامپوننتهای تیمی
- نمونه برای Code Review
- پروتوتایپ فیچر
اشتباهات رایج
- ندادن نیازمندی و استیتها
- درخواست چند کامپوننت در یک پرامپت بدون اولویت
- فراموش کردن TypeScript
- مشخص نکردن استایل (Tailwind/CSS)
پرامپتهای مرتبط
سؤالات پرتکرار
این پرامپت برای چه کسانی مناسب است؟+
برای هر کسی که میخواهد سریعتر و دقیقتر برای «ساخت کامپوننت React» از ChatGPT، Claude، Gemini یا Araaye AI نتیجه بگیرد.
چطور بهترین نتیجه را بگیرم؟+
جایگاههای {{…}} را با جزئیات واقعی پر کن، مخاطب و هدف را مشخص کن، و اگر خروجی ناقص بود یک دور اصلاح بخواه.
آیا نسخه GPT / Claude / Gemini فرق دارد؟+
نسخه اصلی برای اکثر مدلها کافی است؛ نسخههای اختصاصی لحن و ساختار را با سبک همان مدل همراستا میکنند.
میتوانم مستقیم در Araaye AI اجرا کنم؟+
بله؛ دکمه «اجرا در Araaye AI» همان پرامپت را در چت باز میکند تا بدون کپیدستی شروع کنی.
آیا محتوا رایگان است؟+
بله؛ دیدن و کپی پرامپت رایگان است. مصرف اعتبار فقط هنگام اجرای مدل در Araaye AI اعمال میشود.
این پرامپت را با GPT، Claude و Gemini همزمان اجرا کن و بهترین پاسخ را انتخاب کن
در حالت Compare Mode همان پرامپت را یکبار میفرستی و پاسخ سه مدل را کنار هم میبینی — بدون کپیکردن مجدد یا جابهجایی بین تبها.
یا به کتابخانه پرامپتهای آماده برگرد.