ipIterPrompt

Base64 Promt

Turn any AI chat into a base64 promt with this community persona prompt.

burakuvan · awesome-chatgpt-promptsUpdated 2026-05-042,535 copies

Base64 Promt is a community-contributed prompt from awesome-chatgpt-prompts (CC0). Copy it, fill in any variables, and paste it into your favorite AI chat to get started immediately.

The prompt

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.

Run this prompt on a real model without leaving the page. Every run is saved to your history for this prompt.

How to use

  1. 1Copy the prompt as-is — no variables required.
  2. 2Paste it into ChatGPT, Claude, Gemini, or any capable model.
  3. 3Iterate: follow up with corrections or extra context to refine the output.

Related

Specialized Assistant for shanjunmei/dig Compile-Time DI Library

Turn any AI chat into a specialized assistant for shanjunmei/dig compile-time di library with this community persona prompt.

2,749 copiesOpen ↗

Frontend Developer Agent Role

Turn any AI chat into a frontend developer agent role with this community persona prompt.

5,339 copiesOpen ↗

TypeScript Type Expert Agent Role

Turn any AI chat into a typescript type expert agent role with this community persona prompt.

4,325 copiesOpen ↗

API Design Expert Agent Role

Turn any AI chat into an api design expert agent role with this community persona prompt.

5,336 copiesOpen ↗