HTML
این پرامپت برای نوشتن متن‌های روان و ساختارمند نوشته شده است. چیزی که از مدل می‌خواهد: «<p>As an expert front end developer, I recommend the following practices for clean, optimized HTML:</p>»
متن پرامپت
```HTML
<p>As an expert front end developer, I recommend the following practices for clean, optimized HTML:</p>
<h2>Use semantic HTML5 elements</h2>
<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
<h2>Write efficient, accessible markup</h2>
<img alt="..." />
<svg> / <canvas>
<video controls>
<audio controls>
<meta name="description" content="...">
<a href="..."><span>Link text</span></a>
<h2>Keep your code maintainable</h2>
<p>Use:</p>
<ul>
<li>Indentation for nested elements</li>
<li>Comments where needed</li>
<li>Break up long code lines for readability</li>
<li>Use CSS for styling - don't include style attributes in HTML</li>
</ul>
<h2>Validate and optimize your HTML</h2>
<p>Use the W3C validator to check your code and:</p>
<ul>
<li>Remove unused/empty elements</li>
<li>Move inline CSS to an external stylesheet</li>
<li>Minify HTML/CSS/JS before deployment</li>
<li>Gzip/compress files for faster loading</li>
</ul>
<h2>Stay up-to-date with HTML5</h2>
<p>Use new HTML5 elements and APIs like:</p>
<details>/<summary> for expandable content
<picture> for responsive images
ARIA roles/attributes for accessibility
New form input types like email/url/range/date/etc.
<p>Here is an example HTML code snippet following best practices:</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
</head>
<body>
<h1>Welcome</h1>
<p>This <span>website</span> was built using <em>HTML5</em> and <strong>CSS3</strong>.</p>
<header>
<nav>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Articles</h2>
<article>
<h3>First article</h3>
<p>...</p>
</article>
<article>...</article>
</section>
<aside>Related links</aside>
</main>
<footer>© 2020 My Website</footer>
</body>
</html>
```
جای‌خالی‌هایی که باید پر کنی
<header>«header» را با مقدار واقعی خودت جایگزین کن<nav>«nav» را با مقدار واقعی خودت جایگزین کن<main>«main» را با مقدار واقعی خودت جایگزین کن<section>«section» را با مقدار واقعی خودت جایگزین کن<article>«article» را با مقدار واقعی خودت جایگزین کن<aside>«aside» را با مقدار واقعی خودت جایگزین کن<footer>«footer» را با مقدار واقعی خودت جایگزین کن<svg>«svg» را با مقدار واقعی خودت جایگزین کن<canvas>«canvas» را با مقدار واقعی خودت جایگزین کن<video controls>«video controls» را با مقدار واقعی خودت جایگزین کن<audio controls>«audio controls» را با مقدار واقعی خودت جایگزین کن<span>«span» را با مقدار واقعی خودت جایگزین کن<details>«details» را با مقدار واقعی خودت جایگزین کنچطور از این پرامپت استفاده کنم؟
این یک پرامپت در سطح «پیشرفته» از دسته نویسندگی و تولید محتوا است. برای اینکه بهترین نتیجه را بگیری، این مسیر را دنبال کن:
۱) کپی کن. روی دکمه «کپی پرامپت» بزن تا کل متن دقیقاً همان‌طور که هست در کلیپ‌بورد قرار بگیرد. حذف کردن جمله‌های ابتدایی معمولاً کیفیت خروجی را پایین می‌آورد، چون همان‌ها نقش و لحن مدل را تعیین می‌کنند.
۲) در یک گفتگوی تازه بچسبان. این پرامپت را به عنوان اولین پیام یک چت جدید بفرست. اگر آن را وسط یک گفتگوی طولانی بگذاری، مدل هنوز تحت تأثیر موضوع قبلی است و از نقش خواستهشده بیرون میزند.
۳) جای‌خالی‌ها را پر کن. در این متن 13 جای‌خالی وجود دارد: <header>، <nav>، <main>، <section>، <article>، <aside>، <footer>، <svg>، <canvas>، <video controls>، <audio controls>، <span>، <details>. هر کدام را با اطلاعات واقعی خودت جایگزین کن و علامت‌های کروشه یا آکولاد را هم پاک کن. هرچه این مقادیر مشخص‌تر باشند (مثلاً «مدیر فروش یک شرکت نرم‌افزاری B2B» به جای «یک مدیر») خروجی دقیق‌تر می‌شود.
۴) به مدل زمینه بده. مخاطب، زبان خروجی (مثلاً «به فارسی جواب بده»)، طول تقریبی و لحن مورد نظرت را اضافه کن. بیشتر جواب‌های ضعیف نتیجه نبودِ همین سه خط اضافه‌اند، نه ضعف خودِ پرامپت.
۵) یک بار اصلاح کن. جواب اول را نهایی فرض نکن. بنویس «این بخش را کوتاه‌تر کن»، «مثال واقعی اضافه کن» یا «سه نسخه متفاوت بده». دور دوم تقریباً همیشه بهتر از دور اول است.
نمونه استفاده واقعی
چه خروجی‌ای باید بگیری
نکته‌های حرفه‌ای
- اگر خروجی کلی و بی‌روح بود، یک نمونه از «خروجی خوب از نظر خودت» به مدل نشان بده؛ یک نمونه بیشتر از ده خط توضیح اثر دارد.
- برای متن فارسی، جمله «به فارسی روان و بدون ترجمه تحت‌اللفظی بنویس» را انتهای پرامپت اضافه کن.
- جای‌خالی‌ها را خالی نگذار؛ اگر مقداری را نمی‌دانی، به جای حذفش بنویس «فرض کن ...» تا مدل سرخود چیزی از خودش نسازد.
- این پرامپت طولانی است؛ روی مدل‌های قوی‌تر (مثل Claude Opus یا GPT-5) نتیجه محسوساً بهتری می‌دهد.