پرش به مطلب اصلی

تبدیل تصویر یا اسکرین‌شات به کد HTML

با استفاده از هوش مصنوعی می‌توانید تصاویر، اسکرین‌شات‌ها، طرح‌های گرافیکی یا فایل‌های طراحی را به کد HTML تبدیل کنید. خروجی تولیدشده را می‌توانید مستقیماً در بخش Source Code ویرایشگر TinyMCE فروش‌گستر قرار دهید.

در این راهنما دو نوع پرامپت آماده ارائه شده است:

  • Bootstrap Smart Mode برای تولید HTML سبک، استاندارد و بدون CSS اضافی
  • Pixel Perfect Mode برای بازسازی دقیق ظاهر طراحی در صورت نیاز
نکته

این راهنما با مدل‌های هوش مصنوعی مانند ChatGPT، Claude، Gemini، Grok و سایر مدل‌هایی که قابلیت تحلیل تصویر دارند سازگار است.

چک‌لیست قبل از شروع​

قبل از ارسال پرامپت، موارد زیر را آماده کنید.

  • ✅ تصویر یا اسکرین‌شات با کیفیت مناسب (ترجیحاً Full HD)
  • ✅ در صورت امکان فقط بخش موردنظر را Crop کنید.
  • ✅ اگر خروجی باید با قالب فروشگاه هماهنگ باشد، یک اسکرین‌شات از صفحه اصلی فروشگاه نیز ارسال کنید.
  • ✅ اگر فونت یا آیکون اختصاصی در تصویر وجود دارد، آن را نیز ارسال کنید.
  • ✅ اگر تصویر مربوط به نسخه موبایل است، همان تصویر موبایل را ارسال کنید.

پرامپت شماره ۱ (Bootstrap Smart Mode)​

هدف​

تولید HTML تمیز، سبک و استاندارد با استفاده حداکثری از کلاس‌های Bootstrap و بدون ایجاد CSS اضافی.

مناسب برای​

  • مقالات
  • صفحات محصول
  • صفحات خدمات
  • سوالات متداول (FAQ)
  • راهنمای خرید
  • صفحات محتوایی

ویژگی‌ها​

  • استفاده حداکثری از Bootstrap
  • حداقل CSS اختصاصی
  • کاملاً Responsive
  • سازگار با TinyMCE
  • خروجی سبک و خوانا
You are an expert Front-End developer specialized in HTML5, Bootstrap 5 and responsive eCommerce content.

If the uploaded image contains text, first extract and understand the content. Then recreate the layout using semantic HTML instead of converting the image visually.

Analyze the uploaded image or screenshot.

Generate clean production-ready HTML that can be pasted directly into the TinyMCE Source Code editor.

Rules:

- Return ONLY HTML.
- Do NOT generate Markdown.
- Do NOT explain anything.
- Bootstrap 5 and Font Awesome 7 are already loaded.
- Never import Bootstrap, Font Awesome, CSS libraries or JavaScript.
- Never generate <html>, <head>, <body>, <script> or <link>.
- Never use inline JavaScript.
- Use semantic, responsive RTL HTML.
- Use Bootstrap 5 utility classes whenever possible.
- Avoid custom CSS unless absolutely necessary.

Automatically detect Bootstrap components such as:

- Cards
- Alerts
- Tables
- Buttons
- Badges
- Accordion
- Grid
- Navbar
- Lists

Use the matching Bootstrap component whenever possible.

Convert spacing into Bootstrap spacing utilities including:

- mt-*
- mb-*
- pt-*
- pb-*
- px-*
- py-*
- gap-*

Detect colors automatically.

If a color is similar to Bootstrap theme colors, use Bootstrap utility classes instead of custom CSS.

Examples:

- btn-primary
- bg-primary
- text-primary
- bg-danger
- bg-warning
- border-success

Only generate custom CSS when Bootstrap cannot reproduce the layout.

If CSS is required:

- Generate only one <style> block.
- Prefix every custom class with "ai-".
- Never modify Bootstrap classes.
- Never style html, body or global elements.

Keep the output lightweight, clean and production-ready.

Task:

Convert the uploaded image into HTML.

پرامپت شماره ۲ (Pixel Perfect Mode)​

هدف​

بازسازی طراحی با بیشترین شباهت ممکن به تصویر اصلی، حتی اگر نیاز به CSS اختصاصی باشد.

مناسب برای​

  • Landing Page
  • صفحات کمپین
  • صفحات تبلیغاتی
  • طراحی‌های Figma
  • طراحی‌های Dribbble
  • صفحات گرافیکی خاص

ویژگی‌ها​

  • بازسازی دقیق ظاهر تصویر
  • حفظ فاصله‌ها، رنگ‌ها و ترکیب‌بندی
  • CSS اختصاصی در صورت نیاز
  • سازگار با Bootstrap
You are an expert UI developer specialized in converting screenshots into production-ready HTML.

If the uploaded image contains text, first extract and understand the content. Then recreate the layout using semantic HTML instead of converting the image visually.

Analyze the uploaded screenshot carefully.

Recreate the design as accurately as possible.

Return ONLY HTML.

Bootstrap 5 and Font Awesome 7 are already loaded.

Never import any library.

Generate responsive RTL HTML.

Use Bootstrap components whenever possible.

If Bootstrap cannot reproduce the original design accurately, generate a minimal <style> block.

Rules for CSS:

- Style only your own classes.
- Prefix every custom class with "ai-".
- Never style html, body, .container, .row or Bootstrap classes.

Use CSS only when required to reproduce:

- Backgrounds
- Gradients
- Rounded shapes
- Decorative elements
- Complex layouts
- Custom spacing
- Shadows
- Border radius
- Background images

Preserve:

- Typography
- Spacing
- Hierarchy
- Colors
- Composition
- Backgrounds
- Decorative shapes
- Icons
- Cards
- Buttons

Keep CSS minimal.

The final result should visually match the uploaded screenshot as closely as possible.

Task:

Convert the uploaded screenshot into HTML and CSS.

Bootstrap Smart Mode یا Pixel Perfect؟​

نوع صفحهپیشنهاد
مقاله✅ Bootstrap Smart Mode
صفحه محصول✅ Bootstrap Smart Mode
FAQ✅ Bootstrap Smart Mode
راهنمای خرید✅ Bootstrap Smart Mode
صفحه خدمات✅ Bootstrap Smart Mode
لندینگ پیج✅ Pixel Perfect Mode
صفحه کمپین✅ Pixel Perfect Mode
صفحه تبلیغاتی✅ Pixel Perfect Mode
طراحی Figma✅ Pixel Perfect Mode
طراحی Dribbble✅ Pixel Perfect Mode

اشتباهات رایج​

از موارد زیر خودداری کنید تا بهترین نتیجه را دریافت نمایید.

  • ❌ ارسال تصاویر کوچک یا کم‌کیفیت
  • ❌ استفاده از تصاویر تار یا دارای نویز
  • ❌ تلاش برای بازسازی یک صفحه بسیار بزرگ در یک مرحله
  • ❌ استفاده از Pixel Perfect Mode برای صفحات ساده
  • ❌ ارسال نکردن تصویر قالب سایت، زمانی که هماهنگی با طراحی فروشگاه اهمیت دارد

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

  • برای صفحات محتوایی، همیشه ابتدا Bootstrap Smart Mode را امتحان کنید.
  • تنها زمانی از Pixel Perfect Mode استفاده کنید که شباهت ظاهری بسیار مهم باشد.
  • اگر خروجی دقیق نبود، تصویر را Crop کرده و فقط همان بخش را دوباره ارسال کنید.
  • اگر صفحه شامل چند بخش مجزا است، هر بخش را به صورت جداگانه تبدیل کنید و سپس آن‌ها را در کنار هم قرار دهید.
  • اگر تصویر شامل متن است، هوش مصنوعی ابتدا متن را استخراج کرده و سپس آن را با HTML استاندارد بازسازی می‌کند؛ بنابراین خروجی برای موتورهای جستجو نیز مناسب خواهد بود.
آخرین به روز رسانی در تاریخ