Kickstart Prompt for Web UX & UI Design
این پرامپت به هوش مصنوعی نقش «senior creative director at a design studio known for» را میدهد و برای ساخت خروجی بصری دقیق و قابل کنترل به کار میآید. جمله آغازین آن: «You're a senior creative director at a design studio known for bold,»
متن پرامپت
You're a senior creative director at a design studio known for bold,
opinion-driven web experiences. I'm briefing you on a new project.
**Client:** ${company_name}
**Industry:** ${industry}
**Existing site:** ${if_there_is_one_or_delete_this_line}
**Positioning:** [Example: "The most expensive interior design studio in Istanbul that only works with 5 clients/year"]
**Target audience:** [Who are they? What are they looking for? What are the motivations?]
**Tone:** [3-5 adjective: eg. "confident, minimal, slow-paced, editorial"]
**Anti-references:** [Example: "No generic SaaS layouts,
no stock photography feel, no Dribbble-bait"]
**References:** [2-3 site URL or style direction]
**Key pages:** [Homepage, About, Services, Contact — or others]
Before writing any code, propose:
1. A design concept in 2-3 sentences (the "big idea")
2. Layout strategy per page (scroll behavior, grid approach)
3. Typography and color direction
4. One signature interaction that defines the site's personality
5. Tech stack decisions (animations, libraries) with reasoning
Do NOT code yet. Present the concept for my review.
جایخالیهایی که باید پر کنی
{company_name}«company_name» را با مقدار واقعی خودت جایگزین کن{industry}«industry» را با مقدار واقعی خودت جایگزین کن{if_there_is_one_or_delete_this_line}«if_there_is_one_or_delete_this_line» را با مقدار واقعی خودت جایگزین کنچطور از این پرامپت استفاده کنم؟
این یک پرامپت در سطح «متوسط» از دسته طراحی و هنر است. برای اینکه بهترین نتیجه را بگیری، این مسیر را دنبال کن:
۱) کپی کن. روی دکمه «کپی پرامپت» بزن تا کل متن دقیقاً همانطور که هست در کلیپبورد قرار بگیرد. حذف کردن جملههای ابتدایی معمولاً کیفیت خروجی را پایین میآورد، چون همانها نقش و لحن مدل را تعیین میکنند.
۲) در یک گفتگوی تازه بچسبان. این پرامپت را به عنوان اولین پیام یک چت جدید بفرست. اگر آن را وسط یک گفتگوی طولانی بگذاری، مدل هنوز تحت تأثیر موضوع قبلی است و از نقش خواستهشده بیرون میزند.
۳) جایخالیها را پر کن. در این متن 3 جایخالی وجود دارد: {company_name}، {industry}، {if_there_is_one_or_delete_this_line}. هر کدام را با اطلاعات واقعی خودت جایگزین کن و علامتهای کروشه یا آکولاد را هم پاک کن. هرچه این مقادیر مشخصتر باشند (مثلاً «مدیر فروش یک شرکت نرمافزاری B2B» به جای «یک مدیر») خروجی دقیقتر میشود.
۴) به مدل زمینه بده. مخاطب، زبان خروجی (مثلاً «به فارسی جواب بده»)، طول تقریبی و لحن مورد نظرت را اضافه کن. بیشتر جوابهای ضعیف نتیجه نبودِ همین سه خط اضافهاند، نه ضعف خودِ پرامپت.
۵) یک بار اصلاح کن. جواب اول را نهایی فرض نکن. بنویس «این بخش را کوتاهتر کن»، «مثال واقعی اضافه کن» یا «سه نسخه متفاوت بده». دور دوم تقریباً همیشه بهتر از دور اول است.
۶) پارامترها را تنظیم کن. نسبت ابعاد، سبک و میزان جزئیات را متناسب با ابزار تصویریای که استفاده میکنی تغییر بده؛ همان پرامپت در ابزارهای مختلف خروجی متفاوتی میدهد.
نمونه استفاده واقعی
چه خروجیای باید بگیری
نکتههای حرفهای
- اگر خروجی کلی و بیروح بود، یک نمونه از «خروجی خوب از نظر خودت» به مدل نشان بده؛ یک نمونه بیشتر از ده خط توضیح اثر دارد.
- برای متن فارسی، جمله «به فارسی روان و بدون ترجمه تحتاللفظی بنویس» را انتهای پرامپت اضافه کن.
- جایخالیها را خالی نگذار؛ اگر مقداری را نمیدانی، به جای حذفش بنویس «فرض کن ...» تا مدل سرخود چیزی از خودش نسازد.