Base64 Promt

⌨️ برنامه‌نویسی سطح پیشرفته کیفیت 85٪ 1716 کاراکتر

این پرامپت به هوش مصنوعی نقش «senior front-end web developer with strong expertise» را می‌دهد و برای کدنویسی، بازبینی و رفع اشکال سریع‌تر به کار می‌آید. جمله آغازین آن: «You are a senior front-end web developer with strong expertise in Base64 image encoding, HTML rendering, and UI/UX design.»

متن پرامپت

You are a senior front-end web developer with strong expertise in Base64 image encoding, HTML rendering, and UI/UX design. Create a single-page, fully client-side web application using pure HTML, CSS, and vanilla JavaScript only (preferably in one HTML file, no backend, no external libraries) with a modern, fully responsive, dark black theme. The site must correctly convert images (JPG/PNG/WEBP) to Base64 and ensure the output works in any HTML editor preview, meaning the app must provide both the raw Base64 Data URL and a ready-to-use HTML <img> tag output (e.g. <img src="data:image/jpeg;base64,..." />) so that pasting the HTML snippet into an editor visually renders the image instead of showing plain text. Include two main flows: Image to Base64 (upload or drag-and-drop image, instant in-app preview, correct MIME detection, copy buttons, optional download as .txt) and Base64 to Image Preview (users paste a Data URL or raw Base64, click a Preview button, and see the image rendered, with automatic MIME correction and clear validation errors). The header must display the title “Convert images ↔ Base64 with HTML-ready output”, and directly underneath it show “prompts.chat” in bold, phosphor green color, linking to https://promts.chat. The footer must replace any default text with “2026” in bold, phosphor green, linking to https://promts.chat . The overall UI should be dark black, while all primary buttons use a dark orange color with subtle glow/hover effects, smooth transitions, rounded cards, clear section separation (tabs or cards), accessible contrast, copy-success feedback, handling of very long Base64 strings without freezing, and perfect usability across desktop, tablet, and mobile.

جای‌خالی‌هایی که باید پر کنی

<img>«img» را با مقدار واقعی خودت جایگزین کن

چطور از این پرامپت استفاده کنم؟

این یک پرامپت در سطح «پیشرفته» از دسته برنامه‌نویسی و توسعه نرم‌افزار است. برای اینکه بهترین نتیجه را بگیری، این مسیر را دنبال کن:

۱) کپی کن. روی دکمه «کپی پرامپت» بزن تا کل متن دقیقاً همان‌طور که هست در کلیپ‌بورد قرار بگیرد. حذف کردن جمله‌های ابتدایی معمولاً کیفیت خروجی را پایین می‌آورد، چون همان‌ها نقش و لحن مدل را تعیین می‌کنند.

۲) در یک گفتگوی تازه بچسبان. این پرامپت را به عنوان اولین پیام یک چت جدید بفرست. اگر آن را وسط یک گفتگوی طولانی بگذاری، مدل هنوز تحت تأثیر موضوع قبلی است و از نقش خواسته‌شده بیرون می‌زند.

۳) جای‌خالی‌ها را پر کن. در این متن 1 جای‌خالی وجود دارد: <img>. هر کدام را با اطلاعات واقعی خودت جایگزین کن و علامت‌های کروشه یا آکولاد را هم پاک کن. هرچه این مقادیر مشخص‌تر باشند (مثلاً «مدیر فروش یک شرکت نرم‌افزاری B2B» به جای «یک مدیر») خروجی دقیق‌تر می‌شود.

۴) به مدل زمینه بده. مخاطب، زبان خروجی (مثلاً «به فارسی جواب بده»)، طول تقریبی و لحن مورد نظرت را اضافه کن. بیشتر جواب‌های ضعیف نتیجه نبودِ همین سه خط اضافه‌اند، نه ضعف خودِ پرامپت.

۵) یک بار اصلاح کن. جواب اول را نهایی فرض نکن. بنویس «این بخش را کوتاه‌تر کن»، «مثال واقعی اضافه کن» یا «سه نسخه متفاوت بده». دور دوم تقریباً همیشه بهتر از دور اول است.

۶) کد را قبل از اجرا بخوان. خروجی را در یک شاخه جدا تست کن و به‌ویژه به مدیریت خطا و ورودی‌های مرزی نگاه کن؛ مدل‌ها معمولاً مسیر خوش‌بینانه را می‌نویسند.

نمونه استفاده واقعی

بعد از فرستادن پرامپت، جای‌خالی‌ها را این‌طور پر کن: • <img> ← «TypeScript» سپس بنویس: «حالا با همین اطلاعات شروع کن و اول یک طرح کلی بده، بعد وارد جزئیات شو.»

چه خروجی‌ای باید بگیری

یک پاسخ ساختارمند شامل تشخیص مشکل، کد اصلاح‌شده، و توضیح خط‌به‌خط تغییرات.

نکته‌های حرفه‌ای

  • اگر خروجی کلی و بی‌روح بود، یک نمونه از «خروجی خوب از نظر خودت» به مدل نشان بده؛ یک نمونه بیشتر از ده خط توضیح اثر دارد.
  • برای متن فارسی، جمله «به فارسی روان و بدون ترجمه تحت‌اللفظی بنویس» را انتهای پرامپت اضافه کن.
  • جای‌خالی‌ها را خالی نگذار؛ اگر مقداری را نمی‌دانی، به جای حذفش بنویس «فرض کن ...» تا مدل سرخود چیزی از خودش نسازد.
  • این پرامپت طولانی است؛ روی مدل‌های قوی‌تر (مثل Claude Opus یا GPT-5) نتیجه محسوساً بهتری می‌دهد.
  • نسخه زبان و فریم‌ورک را صریح بنویس (مثلاً «Node.js 24 و TypeScript 5») تا کد قدیمی تحویل نگیری.

روی کدام مدل‌ها بهتر جواب می‌دهد

Claude Opus

پرامپت‌های مرتبط