كيف تبني "أداة لتصميم الكاروسيل" في متصفحك باستخدام Claude Artifact ببرومبت واحد

لماذا يجب أن تبني أداة بدل أن تطلب التصميم في كل مرة؟

1. توفير استهلاك التوكنز: بمجرد بناء الأداة، ستعمل كصفحة ويب في متصفحك. لن تضطر لطلب التصميم من كلود في كل مرة، بل ستستخدمه فقط لتوليد الأفكار.

2. الاستقلالية والسرعة: يمكنك رفع صورك الخاصة، وتغيير النصوص، وتعديل الألوان محلياً داخل الأداة بدون أي انتظار.

3. تصدير بضغطة زر: الأداة مصممة لتجمع الشرائح وتصدرها كصور (PNG) عالية الجودة جاهزة للنشر فوراً.

الخطوات العملية والبرومبت الجاهز لتطبيق هذا الشرح وبناء أداتك الخاصة، اتبع هذه الخطوات البسيطة:

الخطوة 1: افتح حسابك في [Claude.ai] وتأكد من تفعيل ميزة "Artifacts" من إعدادات الحساب (Feature Preview).
الخطوة 2: افتح محادثة جديدة، وانسخ البرومبت السحري التالي والصقه في خانة المحادثة:

Build me a single self-contained HTML artifact that works as a visual
editor for creating Instagram/LinkedIn-style multi-slide carousel posts,
which I can fill in with text and images and then export as PNGs.
Customization (fill these in)
Language / text direction: [e.g. English, LTR — or Arabic, RTL]
Font: [e.g. embed "Inter" — or link a Google Font — or use system-ui]
Default accent color: [hex code, e.g. #D97757]
Default slide size: [e.g. 1080x1350 export, 420x525 on-screen — a 4:5
portrait ratio is ideal for Instagram]
Dark or light slide background by default: [e.g. dark #141413 bg, off-white ink]
Core concept
Each "slide" is split into two halves stacked vertically:
An image half — a zone where the user uploads a background photo.
A text half — a solid-color panel with a small eyebrow tag, a bold
heading, and a smaller supporting paragraph, all directly editable in place.
The whole page is a scrollable stack of these slide cards, each with its own
mini toolbar above it, plus a global toolbar at the top and an "add slide"
button at the bottom.
Required features
1. Directly editable text, no forms/modals
- Use contenteditable="true" on the tag/eyebrow, heading, and paragraph.
- Show a placeholder via data-ph="..." + CSS :empty:before{content:attr(data-ph)}.
- On hover/focus, editable regions get a subtle highlight background so it's
  obvious what's clickable — no visible outline/border by default.
2. Image upload per slide, no external hosting
- Clicking/tapping an empty image zone reveals an upload button (visible
  by default, or on hover on desktop).
- Reads the file with FileReader.readAsDataURL() and sets it as a CSS
  background-image — fully client-side, nothing leaves the browser.
- Once an image is set, show a small "change image" button and up/down
  nudge arrows that let the user reposition the image vertically
  (store the offset in a CSS custom property like --posY, adjustable in a
  0–100% range) — useful for portraits where a face gets cropped badly.
- Overlay a subtle color tint (derived from the accent color) and a faint
  grain/noise texture over every uploaded image so photos from different
  sources look visually consistent.
3. Per-slide toolbar
Each slide gets its own compact row of icon buttons above it:
- Move slide up / down (reorder within the stack)
- Flip — toggles whether the image half is on top or the text half is on
  top for that specific slide (use flex-direction: column-reverse)
- Toggle the small tag/eyebrow's visibility on or off
- Duplicate this slide (copies text, image, flip state, and tag visibility)
- Delete this slide (block deleting the very last remaining slide)
- Download just this one slide as a PNG
4. Global toolbar (top of page)
- A native <input type="color"> swatch that recolors every slide's accent
  at once. When changed, use JS to programmatically derive a darker shade and
  a lighter shade from the chosen hex (simple RGB multiplication, e.g. ×0.72
  and ×1.18 clamped to 255) and apply all three via CSS custom properties on
  :root — don't make the user pick three colors separately.
- If the content is bilingual/RTL-capable, an RTL/LTR direction toggle.
- A "download all slides" button. IMPORTANT: do NOT implement this as a loop
  that fires multiple separate link.click() downloads in sequence, even with
  a delay between them. Real browsers (Chrome especially) silently block
  automatic multi-file downloads after the first one or two — this is a hard
  permission gate, not a timing issue, so a setTimeout delay will not fix it
  and the bug will only show up for real users, not in automated testing.
  Instead: bundle the JSZip library inline (same approach as html-to-image
  below), loop through every slide exporting each to a PNG data URL, add
  each one to a JSZip instance as slide-01.png, slide-02.png, etc., then
  call zip.generateAsync({type:'blob'}) once at the end and trigger exactly
  ONE download of a single carousel-slides.zip file. While processing, update
  the button's own text to show progress (e.g. "Exporting… (2/5)") so the
  user knows it's working during the export loop.
5. Add / progress
- A dashed "+ add slide" button at the very bottom that appends a new blank
  slide using the same template function (give it a fresh unique id).
- Each slide shows a thin progress bar + "current/total" counter (like
  Instagram Stories) at its bottom edge, and renumber all slides whenever
  one is added, deleted, or reordered.
6. PNG export (this is the important technical part)
- Bundle the html-to-image library inline via a <script> tag (its
  minified UMD bundle is small — paste it directly into the file so the
  artifact has zero external network dependencies and works fully offline).
- Export using htmlToImage.toPng(element, { pixelRatio, backgroundColor, width, height, cacheBust: true }),
  where pixelRatio is calculated as targetExportWidth / onScreenWidth
  (e.g. 1080/420) so exports are full-resolution even though the on-screen
  card is small.
- Before capturing, add an .exporting class to the slide that hides all
  editor-only chrome (upload buttons, nudge arrows, contenteditable focus
  styling) via CSS, then remove the class after capture completes.
- Name files predictably inside the zip: slide-01.png, slide-02.png, etc.
- For the single-slide "download this one" button (not the "download all"
  button), a plain single PNG download via link.click() is fine — the
  browser block only applies to multiple automatic downloads from one
  action, so one-at-a-time manual downloads are never a problem.
Structure & constraints
- One HTML file. Inline <style> and <script>, no build step, no
  external CDN calls except the bundled libraries (html-to-image and JSZip),
  embedded directly so the artifact has zero network calls at all.
- Use CSS custom properties (--primary, --dark2, --light2, --bg,
  --ink, etc.) for every themeable color so the accent-color system in
  feature #4 can restyle the whole page by touching only :root.
- Seed the page with 2–3 starter slides on load so it isn't empty.
- Keep all JS in plain vanilla functions attached via onclick= in the
  generated template strings — no framework needed, this keeps it a portable
  single file.
- Mobile-friendly: cards should be centered, max-width: 100%, and controls
  usable at narrow viewport widths.
Output
Give me the complete HTML file, ready to open directly in a browser or drop
into an artifact.

واذا ترغب باستخدام المثال كملف جاهز في جهازك حمل الرابط التالي ملف تصميم الكاروسيل جاهز للتحميل