طراحی رابط و پرامپتنویسی
پرامپت طراحی فرانتاند با Claude؛ از بریف تا بازبینی
برای دورشدن از رابطهای کلیشهای، فقط از مدل نخواهید «خلاقتر» باشد. مخاطب، برند، اولویت محتوا و محدودیتهای واقعی را در بریف (شرح مسئله و الزامات طراحی) روشن کنید و نتیجه را با معیارهای قابل سنجش بازبینی کنید.
چرا رابط تولیدشده ممکن است عمومی به نظر برسد؟
درخواستهایی مثل «یک داشبورد مدرن بساز» هدف محصول، نوع کاربر، دادههای مهم و شخصیت بصری برند را مشخص نمیکنند. مدل با اطلاعات ناقص معمولاً سراغ الگوهای آشنای رابط میرود. این بهتنهایی نشانهٔ ضعف یک ابزار نیست؛ نتیجه به کیفیت brief، زمینهٔ ارائهشده، امکانات ابزار و بازبینی انسانی هم وابسته است.
مقالهٔ منبع Claude Cookbook روی جهتدهی به جزئیات بصری، استفاده از الهامهای متناسب با پروژه و نامبردن از انتخابهای پیشفرض تمرکز دارد. نکتهٔ کاربردی این نیست که فونت یا رنگ خاصی همیشه بد است؛ باید از انتخابهای بیدلیل فاصله گرفت و برای هر تصمیم، دلیل متناسب با کاربر و برند داشت.
پرامپت طراحی فرانتاند با Claude را با بریف روشن شروع کنید
یک بریف مفید بهتر است مسئله را قبل از تزئینات توضیح دهد. این موارد را بنویسید:
- مخاطب و کار اصلی: چه کسی وارد صفحه میشود و مهمترین کاری که باید انجام دهد چیست؟
- زمینهٔ برند: لحن، میزان رسمیبودن و نشانههای بصری مجاز یا نامناسب.
- محتوا و اولویت: اطلاعات ضروری، اقدام اصلی و چیزهایی که نباید پنهان بمانند.
- محدودیت فنی: چارچوب، اندازههای هدف، مرورگرها، فونتهای در دسترس و نیازهای واکنشگرایی.
- کیفیت قابل ارزیابی: خوانایی، کنتراست، سرعت، دسترسپذیری و سازگاری با زبان فارسی یا راستبهچپ.
نمونهٔ پرامپت برای شروع طراحی
این الگو را با اطلاعات واقعی پروژه جایگزین کنید؛ دستورهای کلی مثل «زیبا» یا «منحصربهفرد» معیار پذیرش نیستند.
اگر مدل گزینههای بصری میدهد، تفاوتها را در سلسلهمراتب، ترکیببندی یا شیوهٔ نمایش محتوا بخواهید؛ صرفاً عوضکردن رنگ، مسیر طراحی تازهای نمیسازد.
خروجی را با معیار بازبینی کنید
پس از دریافت نسخهٔ نخست، بهجای درخواست مبهم «بهترش کن»، نقد را به مسئلههای مشخص تقسیم کنید: آیا هدف صفحه در نگاه اول روشن است؟ آیا اقدام اصلی بهراحتی پیدا میشود؟ آیا متن فارسی و اعداد در موبایل خوانا هستند؟ آیا رنگها کنتراست کافی دارند؟ آیا حرکت برای کاربر قابل کاهش است؟
| بُعد | پرسش بازبینی | اصلاح احتمالی |
|---|---|---|
| تایپوگرافی | عنوان، متن و اعداد در اندازههای مختلف خوانا هستند؟ | سلسلهمراتب و فاصلهٔ خطوط را با محتوای واقعی تنظیم کنید. |
| رنگ | اقدام اصلی از عناصر فرعی متمایز است و کنتراست مناسب دارد؟ | پالت را بر اساس برند و آزمون کنتراست بازتنظیم کنید. |
| چیدمان | کاربر بدون اسکن طولانی به محتوای مهم میرسد؟ | ترتیب بخشها را بر اساس وظیفهٔ کاربر تغییر دهید. |
| حرکت و جلوه | افکت واقعاً فهم یا بازخورد را بهتر میکند؟ | حرکت تزئینی را حذف یا امکان کاهش آن را فراهم کنید. |
چه زمانی دستورالعمل پایدار مفید است؟
اگر قواعد طراحی در چندین کار تکرار میشوند، آنها را در brief یا راهنمای پروژه ثبت کنید: توکنهای رنگ، فونتهای مجاز، قواعد راستچین، اجزای تأییدشده و الزامات دسترسپذیری. در محیطهایی که از راهنمای پروژه یا مهارتهای بارگذاریشونده پشتیبانی میکنند، میتوان این اطلاعات را بهصورت مستند جداگانه نگه داشت؛ شیوهٔ بارگذاری به ابزار و محیط اجرایی بستگی دارد و نباید فرض کرد همهٔ نسخههای Claude آن را خودکار انجام میدهند.
محدودیتها و ملاحظات
پرامپت خوب تضمینکنندهٔ رابط باکیفیت یا آمادهٔ انتشار نیست. خروجی ممکن است از نظر برند، کنتراست، مجوز فونت و تصویر، امنیت، عملکرد یا رفتار در مرورگرهای مختلف نیاز به اصلاح داشته باشد. نمونههای منبع نیز آزمایش مستقل ThinkFlow نیستند؛ این مقاله آن ایدهها را با چکلیست عملی و ملاحظات فارسی/راستچین بازتفسیر میکند. پیش از انتشار، فرد مسئول طراحی و توسعه باید خروجی را روی دستگاه و محتوای واقعی آزمایش کند.
منبع و مطالب مرتبط
این مطلب بازنویسی تحلیلی و بومیسازیشدهٔ ایدههای مقالهٔ Prithvi Rajasekaran در Anthropic Claude Cookbook است: Prompting for frontend aesthetics (منتشرشده در ۲۱ اکتبر ۲۰۲۵؛ دسترسی: ۲۸ سپتامبر ۲۰۲۶). متن و مثالهای این صفحه ترجمهٔ خطبهخط یا گزارش آزمایش دستاول نیستند.
- ساخت صفحهٔ وب سفارشی با Claude برای آشنایی با مسیر ساخت یک صفحه.
- طراحی UI با پرامپت متنی برای تبدیل ایده به نمونهٔ اولیه.
- راهنمای استفاده از ابزار ThinkFlow برای آشنایی با گردشکار محصول.
- نمونههای زندهٔ وبسایتهای ThinkFlow را برای دیدن خروجیهای قابل پیشنمایش بررسی کنید.
جمعبندی
برای رسیدن به طراحی متناسب، زمینهٔ واقعی پروژه را به پرامپت بدهید، جهتهای بصری را مقایسه کنید و نتیجه را با معیارهای کاربردپذیری و دسترسپذیری بسنجید. هدف متفاوتبودن به هر قیمت نیست؛ هدف، انتخابهایی است که برای همان کاربر و محصول دلیل داشته باشند.
دیدن نمونههای زندهٔ ThinkFlow