Interactive Love Message HTML Page
این پرامپت به هوش مصنوعی نقش «Web Developer» را میدهد و برای کدنویسی، بازبینی و رفع اشکال سریعتر به کار میآید. جمله آغازین آن: «Act as a Web Developer.»
متن پرامپت
Act as a Web Developer. You are tasked with creating a simple and visually appealing HTML page for a partner. Your task is to create an interactive page that displays a beautiful message when clicked.
You will:
- Use HTML to structure the page.
- Apply CSS for styling to make it attractive but not heavy.
- Use JavaScript to handle the click event and reveal a message saying 'دوستت دارم'.
Example:
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Love Message</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f8ff;
font-family: Arial, sans-serif;
}
#message {
display: none;
font-size: 2em;
color: #ff1493;
}
</style>
</head>
<body>
<div id="message">دوستت دارم</div>
<script>
document.body.addEventListener('click', function() {
var message = document.getElementById('message');
message.style.display = 'block';
});
</script>
</body>
</html>
```
جایخالیهایی که باید پر کنی
<head>«head» را با مقدار واقعی خودت جایگزین کن<title>«title» را با مقدار واقعی خودت جایگزین کن<style>«style» را با مقدار واقعی خودت جایگزین کن<body>«body» را با مقدار واقعی خودت جایگزین کن<script>«script» را با مقدار واقعی خودت جایگزین کنچطور از این پرامپت استفاده کنم؟
این یک پرامپت در سطح «پیشرفته» از دسته برنامهنویسی و توسعه نرمافزار است. برای اینکه بهترین نتیجه را بگیری، این مسیر را دنبال کن:
۱) کپی کن. روی دکمه «کپی پرامپت» بزن تا کل متن دقیقاً همانطور که هست در کلیپبورد قرار بگیرد. حذف کردن جملههای ابتدایی معمولاً کیفیت خروجی را پایین میآورد، چون همانها نقش و لحن مدل را تعیین میکنند.
۲) در یک گفتگوی تازه بچسبان. این پرامپت را به عنوان اولین پیام یک چت جدید بفرست. اگر آن را وسط یک گفتگوی طولانی بگذاری، مدل هنوز تحت تأثیر موضوع قبلی است و از نقش خواستهشده بیرون میزند.
۳) جایخالیها را پر کن. در این متن 5 جایخالی وجود دارد: <head>، <title>، <style>، <body>، <script>. هر کدام را با اطلاعات واقعی خودت جایگزین کن و علامتهای کروشه یا آکولاد را هم پاک کن. هرچه این مقادیر مشخصتر باشند (مثلاً «مدیر فروش یک شرکت نرمافزاری B2B» به جای «یک مدیر») خروجی دقیقتر میشود.
۴) به مدل زمینه بده. مخاطب، زبان خروجی (مثلاً «به فارسی جواب بده»)، طول تقریبی و لحن مورد نظرت را اضافه کن. بیشتر جوابهای ضعیف نتیجه نبودِ همین سه خط اضافهاند، نه ضعف خودِ پرامپت.
۵) یک بار اصلاح کن. جواب اول را نهایی فرض نکن. بنویس «این بخش را کوتاهتر کن»، «مثال واقعی اضافه کن» یا «سه نسخه متفاوت بده». دور دوم تقریباً همیشه بهتر از دور اول است.
۶) کد را قبل از اجرا بخوان. خروجی را در یک شاخه جدا تست کن و بهویژه به مدیریت خطا و ورودیهای مرزی نگاه کن؛ مدلها معمولاً مسیر خوشبینانه را مینویسند.
نمونه استفاده واقعی
چه خروجیای باید بگیری
نکتههای حرفهای
- اگر خروجی کلی و بیروح بود، یک نمونه از «خروجی خوب از نظر خودت» به مدل نشان بده؛ یک نمونه بیشتر از ده خط توضیح اثر دارد.
- برای متن فارسی، جمله «به فارسی روان و بدون ترجمه تحتاللفظی بنویس» را انتهای پرامپت اضافه کن.
- جایخالیها را خالی نگذار؛ اگر مقداری را نمیدانی، به جای حذفش بنویس «فرض کن ...» تا مدل سرخود چیزی از خودش نسازد.
- این پرامپت طولانی است؛ روی مدلهای قویتر (مثل Claude Opus یا GPT-5) نتیجه محسوساً بهتری میدهد.
- نسخه زبان و فریمورک را صریح بنویس (مثلاً «Node.js 24 و TypeScript 5») تا کد قدیمی تحویل نگیری.