פקודות מוכנות לשימוש ב-LOVABLE
בחרו פרומפט, העתיקו אותו, והדביקו בצ׳אט של LOVABLE. המקומות המסומנים בסוגריים מרובעים [כמו זה] הם מקומות שתצטרכו למלא בעצמכם.
תוסף נגישות מתקדם לאתר
תוסף נגישות מתקדם עם המון פונקציות של נגישות שנדרשות בתקן הישראלי
You are one of the world's leading Accessibility Engineers.
Your task is NOT to explain.
Your task is to BUILD and integrate a production-ready accessibility toolbar plugin into the current project.
The output must be COMPLETE working source code.
Do not write documentation instead of code.
Do not summarize.
Do not stop until the entire plugin is complete, integrated and working.
====
GOAL
====
Build the most advanced open-source accessibility toolbar possible for the current website.
The toolbar must provide user-controlled visual and interaction accessibility preferences while following WCAG 2.2 AA best practices.
The toolbar must support Hebrew, RTL, English, LTR, desktop, tablet and mobile.
Never claim that the toolbar alone makes a website legally compliant.
Never claim that installing the toolbar guarantees compliance with:
WCAG
Israeli Standard SI 5568
EN 301 549
Any accessibility law or regulation
Never fake accessibility.
Do not automatically alter the website's semantic HTML.
Do not automatically invent alt text.
Do not automatically generate labels.
Do not automatically repair inaccessible ARIA.
Do not add an accessibility scanner, inspector, checker, audit screen, status page or compliance score.
The plugin must only provide user-controlled accessibility display and interaction preferences.
=============
PRIMARY TASK
=============
Inspect the current project.
Identify its framework, structure, design system, global styles, routing and root layout.
Build the complete accessibility toolbar.
Integrate it globally so it appears on all relevant public pages.
Preserve all existing functionality.
Preserve all existing routes.
Preserve all legal pages.
Preserve all privacy pages.
Preserve all SEO configuration.
Do not create a separate route for the toolbar.
Do not create an accessibility status page.
Do not create an admin dashboard.
Do not replace the current application architecture unnecessarily.
====
TECH STACK
====
Use the existing project stack whenever possible.
Preferred implementation:
React
TypeScript
Tailwind CSS
Vite or the project's existing build system
ES Modules
Tree Shaking
Zero dependencies whenever reasonably possible
If lucide-react is already installed, use its Accessibility icon.
If lucide-react is not installed, do not install it solely for one icon.
Instead, create the accessibility icon using the exact internal SVG specified in this prompt.
Use 100% TypeScript.
Do not use any.
Do not use @ts-ignore.
Do not use @ts-nocheck.
Do not weaken strict TypeScript settings.
Do not use dangerouslySetInnerHTML.
Do not use eval.
Do not use new Function.
======
CORE FEATURES
======
Implement all of the following:
Floating accessibility button
Beautiful animated accessibility panel
Hebrew support
English support
RTL support
LTR support
Dark mode support
Mobile support
Tablet support
Desktop support
Keyboard navigation
Screen-reader support
Persistent user preferences
Cross-tab synchronization
Reset all settings
Accessible live announcements
Responsive layout
Style isolation
Safe unmount cleanup
Server-side rendering safety where applicable
===
VISUAL ACCESSIBILITY FEATURES
===
Implement all of the following working controls:
Increase text
Decrease text
Reset text size
Readable font
Increase letter spacing
Increase word spacing
Increase line height
Pause animations
Reduce motion
Grayscale
High contrast
Dark contrast
Light contrast
Invert colors
Highlight links
Highlight headings
Reading guide
Reading mask
Large cursor
Enhanced focus highlight
Hide images
Reset all accessibility settings
Every control must work.
Do not create placeholder buttons.
Do not create non-functional controls.
Do not simulate behavior.
Do not return mock implementations.
====
FORBIDDEN FEATURES
====
Do not build an accessibility scanner.
Do not build an accessibility inspector.
Do not build a checker tab.
Do not build an audit tab.
Do not build an issues tab.
Do not build an errors tab.
Do not build an accessibility score.
Do not build a compliance score.
Do not build a violation counter.
Do not build an automated repair engine.
Do not create a separate accessibility status page.
Do not scan the host website for accessibility violations.
Do not detect or report:
Images without alt text
Buttons without accessible names
Missing form labels
Low contrast
Skipped headings
Keyboard traps
Duplicate IDs
Missing document language
Invalid ARIA
Empty links
Inaccessible dialogs
Do not generate reports about the website.
Do not display a "בודק נגישות" tab.
Do not display an "Accessibility Checker" tab.
Do not display an "Inspector" tab.
The toolbar must contain only user-controlled display and interaction preferences.
===
FLOATING ACCESSIBILITY BUTTON
====
Create a premium floating accessibility button matching this exact visual direction:
Circular blue button
White wheelchair-style accessibility icon
Soft blue shadow
Clean minimalist appearance
Enterprise-quality UI
Positioned at the bottom-right corner by default
48px size on mobile
56px size on desktop
Slight hover scale animation
Strong visible keyboard focus ring
No visible border
High contrast
Large accessible touch target
Use this default color:
#0B7FB3
The icon must be white.
The floating button must visually match this approximate Tailwind design:
fixed
bottom-4
right-4
z-[95]
inline-flex
h-12
w-12
items-center
justify-center
rounded-full
bg-[#0B7FB3]
text-white
shadow-lg
shadow-[#0B7FB3]/30
transition-transform
duration-200
hover:scale-105
focus-visible:outline
focus-visible:outline-[3px]
focus-visible:outline-offset-2
focus-visible:outline-[#0B7FB3]
md:h-14
md:w-14
The button must include:
type="button"
aria-expanded dynamically reflecting whether the panel is open
aria-controls="a11y-panel"
aria-haspopup="dialog"
aria-label using the localized accessibility label
title using the localized accessibility label
Hebrew default label:
אפשרויות נגישות
English default label:
Accessibility options
The default implementation must be functionally equivalent to:
<button
ref={buttonRef}
type="button"
aria-expanded={isOpen}
aria-controls="a11y-panel"
aria-haspopup="dialog"
aria-label={labels.accessibilityOptions}
title={labels.accessibilityOptions}
onClick={togglePanel}
className="
fixed bottom-4 right-4 z-[95]
inline-flex h-12 w-12 items-center justify-center
rounded-full bg-[#0B7FB3] text-white
shadow-lg shadow-[#0B7FB3]/30
transition-transform duration-200
hover:scale-105
focus-visible:outline
focus-visible:outline-[3px]
focus-visible:outline-offset-2
focus-visible:outline-[#0B7FB3]
md:h-14 md:w-14
"
>
<AccessibilityIcon
className="h-6 w-6 md:h-7 md:w-7"
aria-hidden="true"
focusable="false"
/>
</button>
Do not use gradients on the floating button.
Do not use a gear icon.
Do not use a help icon.
Do not use an information icon.
Do not use an emoji.
Do not use text inside the circular button.
Do not use an image file for the icon.
Do not make the button transparent.
Do not make the button square.
Do not remove the visible focus ring.
Do not place inaccessible tooltip content over the button.
Allow button position configuration:
bottom-right
bottom-left
top-right
top-left
The default position must remain bottom-right in Hebrew RTL unless explicitly configured otherwise.
Respect device safe-area insets.
Use safe-area-aware positioning such as:
bottom: calc(1rem + env(safe-area-inset-bottom))
right: calc(1rem + env(safe-area-inset-right))
left: calc(1rem + env(safe-area-inset-left))
Default z-index:
95
Allow the z-index to be configured.
Do not use the maximum possible z-index value.
The button must remain visible without covering critical page controls.
====
ACCESSIBILITY ICON
====
Use the exact wheelchair-style Lucide Accessibility icon.
Preferred implementation:
Use Accessibility from lucide-react if lucide-react already exists in the project.
If lucide-react is not installed, create an internal React SVG component.
Use:
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
Use these exact SVG shapes:
<circle cx="16" cy="4" r="1" />
<path d="m18 19 1-7-6 1" />
<path d="m5 8 3-3 5.5 3-2.36 3.5" />
<path d="M4.24 14.5a5 5 0 0 0 6.88 6" />
<path d="M13.76 17.5a5 5 0 0 0-6.88-6" />
The icon must inherit currentColor.
The icon must be white because the button text color is white.
The icon must be:
24px on mobile
28px on desktop
The SVG must include:
aria-hidden="true"
focusable="false"
Do not give the SVG a second accessible name.
The button already provides the accessible name.
==========================
ACCESSIBILITY PANEL DESIGN
==========================
Create a polished modern accessibility panel.
The design must visually match the floating button.
Use:
Clean white background in light mode
Accessible dark background in dark mode
Rounded corners
Soft shadow
Clear section hierarchy
Large readable labels
Consistent spacing
Clear active states
Accessible blue accent color
Responsive layout
Smooth opening and closing
Reduced-motion fallback
The panel must contain:
A clear title
A close button
Grouped accessibility controls
A reset button
Visible active states
Keyboard focus indicators
Hebrew localization
English localization
RTL layout
LTR layout
Do not make the panel look like a browser alert.
Do not cover the full screen on desktop.
On mobile, the panel may use a bottom-sheet layout.
The panel must remain usable at:
320 CSS pixels viewport width
200% zoom
400% zoom
The panel must avoid horizontal scrolling unless technically unavoidable.
Use a reasonable maximum width.
Use a maximum height based on the viewport.
Allow internal vertical scrolling.
Do not allow the panel to extend outside the visible viewport.
=================
PANEL POSITIONING
=================
Position the panel relative to the floating button.
For bottom-right:
Open above the button.
Align to the right edge.
For bottom-left:
Open above the button.
Align to the left edge.
For top-right:
Open below the button.
Align to the right edge.
For top-left:
Open below the button.
Align to the left edge.
Prevent viewport overflow.
Maintain a minimum viewport margin.
Use logical CSS properties where practical.
Support device safe-area insets.
On mobile, use a responsive bottom sheet where appropriate.
The mobile bottom sheet must include:
Clear heading
Close button
Scrollable content
Safe-area padding
Reachable reset button
Maximum height below viewport height
Do not place controls beneath browser UI or device notches.
Only prevent background scrolling if the panel is implemented as a true modal.
Restore background scrolling correctly when closed.
====
PANEL SEMANTICS
====
Use:
id="a11y-panel"
Appropriate dialog semantics
aria-labelledby pointing to the panel title
aria-describedby only when useful
If the page remains interactive while the panel is open:
Use role="dialog"
Use aria-modal="false"
Do not trap focus
If background interaction is blocked:
Use role="dialog"
Use aria-modal="true"
Use a correct focus trap
Do not set aria-modal="true" unless the behavior is actually modal.
The panel must have a visible title.
The close button must:
Use type="button"
Have a visible icon
Have a localized accessible name
Be keyboard accessible
Have a visible focus state
Hebrew close label:
סגירת תפריט הנגישות
English close label:
Close accessibility menu
Do not rely only on an X character as the accessible name.
====
TOOLBAR KEYBOARD BEHAVIOR
====
The toolbar must be fully usable using keyboard only.
Support:
Tab
Shift+Tab
Enter
Space
Escape
Arrow keys where appropriate
Home and End where appropriate
Escape must close the panel.
When the panel opens:
Move focus to the panel heading or first meaningful control.
When the panel closes:
Return focus to the floating accessibility button.
Do not trap keyboard focus unless the panel is a true modal.
Never create an accidental keyboard trap.
Use native HTML controls whenever possible.
Use button elements for actions.
Use native checkbox, switch or button semantics for toggles.
Every control must have a visible label.
Every active preference must expose its current state programmatically.
Use the correct semantic pattern:
aria-pressed
Native checkbox
role="switch" with aria-checked
Choose the most appropriate option per control.
The focus order must be logical.
Focus indicators must always remain visible.
Do not use outline: none without an accessible replacement.
===
SCREEN READER SUPPORT
===
The toolbar must support:
NVDA
JAWS
VoiceOver
TalkBack
Every control must have an accessible name.
Decorative icons must use:
aria-hidden="true"
Visible text should provide accessible names wherever possible.
Do not duplicate accessible names.
Do not announce decorative icons.
Do not place hidden text that conflicts with visible labels.
Toggle state must be announced.
Stepped values must expose their current value.
The panel title must be announced when opened.
===========
LIVE REGION
===========
Create one visually hidden live region inside the toolbar.
Use:
role="status"
aria-live="polite"
aria-atomic="true"
Use it to announce:
Preference enabled
Preference disabled
Text scale changed
Letter spacing changed
Word spacing changed
Line height changed
All settings reset
Do not announce pointer movement.
Do not announce reading guide movement.
Do not create multiple competing live regions.
Do not repeatedly announce unchanged values.
Example Hebrew announcement:
גודל הטקסט הוגדל ל־120 אחוזים
Example English announcement:
Text size increased to 120 percent
============
COMPONENTS
============
Create and implement the following components, hooks, services or equivalent architecture:
AccessibilityProvider
AccessibilityToolbar
FloatingAccessibilityButton
AccessibilityPanel
AccessibilitySection
AccessibilityControlButton
AccessibilityToggle
ResetAccessibilityButton
AccessibilityIcon
AccessibilityContext
useAccessibility
useLocalStorage
useMediaQuery
useFocusReturn
PreferencesManager
KeyboardManager
FocusManager
ThemeManager
RTLManager
AnimationManager
ContrastManager
TypographyManager
ReadingGuideManager
ReadingMaskManager
CursorManager
ImageVisibilityManager
LocalizationManager
StorageManager
Use the existing project structure where appropriate.
Do not force unnecessary files if the current architecture has a cleaner equivalent.
All functionality must still be complete.
===================
STATE ARCHITECTURE
===================
Create one strict centralized preference state.
Define an AccessibilityPreferences interface containing at minimum:
textScale
readableFont
letterSpacing
wordSpacing
lineHeight
pauseAnimations
reduceMotion
grayscale
highContrast
darkContrast
lightContrast
invertColors
highlightLinks
highlightHeadings
readingGuide
readingMask
largeCursor
focusHighlight
hideImages
Use explicit union types for stepped values.
Example:
type TextScale =
| 1
| 1.1
| 1.2
| 1.3
| 1.4
| 1.5
| 1.6
Do not allow arbitrary invalid values.
Create a complete defaultPreferences object.
Every preference must have:
Typed default value
Validation rule
Update action
Application method
Cleanup method
Localized label
Programmatically exposed state
Unit test
Integration or Playwright test where appropriate
State updates must be immutable.
Avoid race conditions.
Do not duplicate preference state across unrelated components.
Do not use global mutable variables.
======================
PREFERENCE APPLICATION ENGINE
======================
Create a reversible preference application engine.
Apply active preferences using namespaced:
Data attributes
CSS classes
CSS variables
Injected styles
Use a unique namespace.
Recommended namespace:
a11y-toolbar
Use root attributes such as:
data-a11y-toolbar-text-scale
data-a11y-toolbar-readable-font
data-a11y-toolbar-letter-spacing
data-a11y-toolbar-word-spacing
data-a11y-toolbar-line-height
data-a11y-toolbar-pause-animations
data-a11y-toolbar-reduce-motion
data-a11y-toolbar-grayscale
data-a11y-toolbar-high-contrast
data-a11y-toolbar-dark-contrast
data-a11y-toolbar-light-contrast
data-a11y-toolbar-invert-colors
data-a11y-toolbar-highlight-links
data-a11y-toolbar-highlight-headings
data-a11y-toolbar-large-cursor
data-a11y-toolbar-focus-highlight
data-a11y-toolbar-hide-images
Only add an attribute when the preference is active.
Remove the attribute when it is inactive.
Do not leave stale attributes.
Do not overwrite unrelated HTML attributes.
Do not rewrite the host application's className.
Do not remove classes belonging to the host website.
Do not permanently modify React-managed DOM nodes.
Use one injected runtime stylesheet where practical.
Give it the unique ID:
a11y-toolbar-runtime-styles
Prevent duplicate stylesheet injection.
Remove injected styles during final cleanup when no instance remains.
Support multiple mounted providers safely.
Do not create duplicate floating buttons unless explicitly configured.
==============
PREFERENCES BEHAVIOR
==============
Each accessibility setting must work independently.
Multiple compatible settings must work simultaneously.
Settings must not permanently modify the source code.
Do not overwrite host website styles unnecessarily.
Do not break:
Forms
Dialogs
Menus
Dropdowns
Navigation
Text editors
Rich text editors
Payment forms
Authentication controls
Interactive components
Do not interfere with existing keyboard shortcuts.
Do not change semantic HTML.
Do not automatically change:
alt attributes
labels
headings
ARIA roles
tabindex
accessible names
Do not claim to repair inaccessible source code.
Reset must restore all settings to defaults.
=============
TEXT SCALING
=============
Implement controlled text scaling.
Recommended values:
100%
110%
120%
130%
140%
150%
160%
Do not scale below the website's default size unless explicitly configured.
Do not apply transform: scale() to the entire page.
Do not apply browser zoom.
Do not scale the entire body using CSS transforms.
Use CSS variables and controlled font-size rules.
Preserve relative font relationships.
Avoid clipping and overflow where reasonably possible.
Do not scale:
The accessibility toolbar itself
SVG icons
Icon-only elements
Canvas
Code editors
Embedded documents
Allow opt-out using:
data-a11y-toolbar-ignore-text-scale
The toolbar must remain its original size while host content scales.
Announce the current scale through the live region.
===============
READABLE FONT
===============
Provide a readable font mode.
Use a clear local system font stack such as:
Arial
Helvetica
Verdana
system-ui
sans-serif
Do not load remote fonts.
Do not use Comic Sans.
Do not use decorative fonts.
Do not apply the readable font to:
Icons
SVG graphics
Icon font glyphs where it would break them
The readable font setting must be reversible.
==============
LETTER SPACING
==============
Support stepped letter spacing.
Recommended values:
Normal
0.05em
0.1em
0.15em
Use explicit union types.
Do not apply invalid arbitrary values.
Do not apply letter spacing to icons.
Ensure settings are reversible.
==============
WORD SPACING
==============
Support stepped word spacing.
Recommended values:
Normal
0.1em
0.2em
0.3em
Use explicit union types.
Do not apply spacing to icon-only controls.
Ensure settings are reversible.
===========
LINE HEIGHT
===========
Support stepped line height.
Recommended values:
Normal
1.5
1.75
2
Do not force line height onto elements where it breaks functionality.
Avoid applying line height to:
SVG
Canvas
Single-line icon buttons
Controls whose layout would break
Ensure settings are reversible.
=====================
COLOR AND CONTRAST
=====================
Implement:
Grayscale
High contrast
Dark contrast
Light contrast
Invert colors
Do not apply destructive filters to:
Images
Videos
Canvas
iframes
Embedded maps
CAPTCHA
Authentication widgets
Payment widgets
unless the selected mode intentionally requires it and a safe counter-filter is applied.
When invert colors is active, restore images and videos where appropriate using a counter-invert technique.
The toolbar itself must remain readable in every mode.
Do not let host contrast styles affect the toolbar.
Prevent contrast modes from hiding focus indicators.
Prevent foreground and background colors from becoming indistinguishable.
================
CONTRAST MODE CONFLICTS
================
These modes are mutually exclusive:
highContrast
darkContrast
lightContrast
invertColors
Only one may be active at a time.
When one is enabled, disable the others.
Grayscale may remain independent if it does not make the selected mode unusable.
Use deterministic precedence.
Clearly indicate the active mode.
Use radio semantics where these options are presented as a mutually exclusive group.
The group must have a visible accessible label.
======
MOTION
======
Implement:
Pause animations
Reduced motion
Respect:
prefers-reduced-motion: reduce
Pause or reduce:
CSS animations
CSS transitions
Smooth scrolling
Non-essential animated backgrounds
Do not stop media playback automatically.
Do not pause audio or video without explicit user action.
Do not break essential progress indicators.
Do not create flashing or blinking effects.
When reduced motion is enabled:
Remove floating button hover scaling.
Remove unnecessary panel animation.
Preserve focus indicators.
==============
PAUSE ANIMATIONS IMPLEMENTATION
==============
Use reversible namespaced styles.
Prefer safe declarations such as:
animation-play-state: paused !important
transition-duration: 0.01ms !important
scroll-behavior: auto !important
Exclude:
The toolbar root
Elements marked with:
data-a11y-toolbar-essential-animation
Do not pause native media.
Do not automatically stop animated canvas content.
Do not rely on invalid animation-duration values.
===========
HIGHLIGHT LINKS
===========
Implement a link highlighting mode.
Recommended behavior:
Underline links
Increase underline thickness
Increase underline offset
Optionally add a subtle background
Do not change destinations.
Do not alter link behavior.
Do not inject extra visible symbols.
Do not change screen-reader output.
Do not obscure link content.
===========
HIGHLIGHT HEADINGS
===========
Implement a heading highlighting mode.
Recommended behavior:
Visible outline
Subtle accessible background
Clear text emphasis
Do not change heading levels.
Do not change heading semantics.
Do not insert automatic numbering.
Do not add screen-reader noise.
==============
READING GUIDE
==============
Implement a reading guide as a lightweight fixed overlay.
Use one namespaced DOM element.
Recommended ID:
a11y-toolbar-reading-guide
The guide must:
Follow pointer vertical position
Optionally follow focused element position
Use pointer-events: none
Use aria-hidden="true"
Never receive focus
Never block links
Never block form controls
Never block text selection
Use requestAnimationFrame.
Cancel animation frames during cleanup.
Do not attach duplicate listeners.
Recommended default appearance:
4px height
Configurable high-visibility color
Subtle shadow
100vw width
position: fixed
High z-index below the toolbar
Allow configuration of:
Guide color
Guide thickness
Follow focus behavior
Do not continuously calculate layout if the pointer has not moved.
============
READING MASK
============
Implement the reading mask using two fixed overlays:
One above the active reading area
One below the active reading area
Both overlays must use:
pointer-events: none
aria-hidden="true"
The reading area between them must remain clear.
Allow configuration of:
Mask opacity
Reading area height
Do not completely hide page content by default.
Follow pointer movement or focused content.
Do not animate continuously when reduced motion is enabled.
Remove both elements during cleanup.
The mask must not hide the currently focused element.
==============
LARGE CURSOR
==============
Implement a large cursor option.
Use safe local CSS cursor values or locally embedded cursor assets.
Do not load remote cursor files.
Do not replace the text insertion cursor inside:
input
textarea
contenteditable
Do not make text editing harder.
Ensure the cursor setting is reversible.
================
FOCUS HIGHLIGHT
===============
Implement enhanced focus highlighting.
Do not remove existing focus styles.
Add a clear additional outline to focusable elements.
Recommended style:
3px solid
Visible outline offset
High contrast
Do not apply focus styling to non-focusable elements.
Do not use outline: none.
Do not reduce accessibility of existing controls.
============
HIDE IMAGES
============
Implement an option to visually hide non-essential images.
Do not remove images from the DOM.
Do not delete alt text.
Do not modify alt attributes.
Do not set display: none on essential interactive images.
Exclude images used inside:
Buttons
Links
Labels
CAPTCHA
Authentication
Security verification
Payment controls
Interactive maps
Elements marked:
data-a11y-toolbar-essential-image
Prefer reversible styling that minimizes layout shift.
Consider:
visibility: hidden
or opacity-based suppression with preserved layout
Restore all images when disabled.
Do not permanently alter inline styles.
Be careful with background images used for icons or controls.
===============
RESET BEHAVIOR
===============
The reset control must restore all preferences to defaults.
Use one activation.
Do not show an unnecessary confirmation dialog.
After reset:
Remove all namespaced root attributes
Remove preference CSS variables
Remove reading guide elements
Remove reading mask elements
Restore default cursor
Restore images
Restore motion behavior
Restore typography
Clear only the plugin's storage key
Synchronize the reset across tabs
Announce the reset
Keep the panel open unless configured otherwise
Return focus to the reset button
Do not reload the page.
Do not erase unrelated localStorage values.
============
PERSISTENCE
============
Save preferences in localStorage.
Use a versioned key.
Default key:
a11y-toolbar-preferences-v1
Allow custom storage key configuration.
Validate stored values before use.
Handle invalid JSON.
Handle corrupted objects.
Ignore unknown fields.
Reset unsupported values to defaults.
Support future schema migration.
Do not store:
Personal information
Sensitive information
Page content
Identity data
Analytics data
Do not use cookies unless explicitly required.
Load preferences early enough to reduce visible layout flashing without blocking initial rendering.
====================
CROSS-TAB SYNCHRONIZATION
==================
Synchronize preferences between browser tabs.
Prefer:
BroadcastChannel
Provide fallback:
storage event
If neither is available:
Continue without cross-tab synchronization.
Do not crash.
Prevent synchronization loops.
Use the versioned storage schema.
Synchronize reset actions.
Clean up listeners on unmount.
==============
STYLE ISOLATION
=============
The plugin must not conflict with host CSS.
Use unique namespaced:
Classes
IDs
Data attributes
CSS variables
Storage keys
Custom events
Use the prefix:
a11y-toolbar
Do not use generic classes such as:
.active
.open
.panel
.button
.container
Consider Shadow DOM for toolbar UI isolation.
Only use Shadow DOM if:
Focus behavior remains correct
Screen readers can access the UI correctly
Localization works
Styles remain maintainable
If Shadow DOM causes accessibility problems, use strongly namespaced CSS instead.
All injected styles must be removable.
Unmounting must restore the page to its original state.
=====
CLEANUP
=====
Remove all runtime side effects on unmount.
Remove:
Event listeners
Storage listeners
Broadcast channels
Media query listeners
Mutation observers
Resize observers
Injected style elements
Reading guide elements
Reading mask elements
Timers
Intervals
Animation frames
Temporary root attributes
Temporary CSS variables
Do not create memory leaks.
Support React Strict Mode.
Handle mount, unmount and remount safely.
==========
LOCALIZATION
========
Create a fully typed localization system.
Define:
ToolbarTranslations
Every visible string must come from the translation object.
Every live announcement must come from the translation object.
Include complete Hebrew and English translations.
Allow partial translation overrides.
Safely merge custom translations with defaults.
Do not display untranslated keys.
Do not use runtime machine translation.
Do not require an internet connection.
Default Hebrew strings must include:
אפשרויות נגישות
תפריט נגישות
סגירת תפריט הנגישות
הגדלת טקסט
הקטנת טקסט
גודל טקסט רגיל
גופן קריא
ריווח אותיות
ריווח מילים
גובה שורה
עצירת אנימציות
הפחתת תנועה
גווני אפור
ניגודיות גבוהה
ניגודיות כהה
ניגודיות בהירה
היפוך צבעים
הדגשת קישורים
הדגשת כותרות
סרגל קריאה
מסכת קריאה
סמן עכבר גדול
הדגשת מיקוד
הסתרת תמונות
איפוס כל ההגדרות
ההגדרות אופסו
פעיל
לא פעיל
Default English strings must provide natural equivalent translations.
Do not create awkward Hebrew.
Ensure numbers and percentages display correctly in RTL.
==========
RTL REQUIREMENTS
==========
Use:
dir="rtl"
for Hebrew toolbar UI.
Use:
dir="ltr"
for English toolbar UI.
Allow explicit direction configuration.
Do not rely only on the host page direction.
Use CSS logical properties where appropriate:
margin-inline-start
margin-inline-end
padding-inline-start
padding-inline-end
inset-inline-start
inset-inline-end
Do not mirror the accessibility icon.
Do not mirror the close icon.
Mirror only genuinely directional icons.
Text alignment must match direction.
Control order must remain natural in RTL.
Do not reverse percentages or numeric values.
==========
DESIGN SYSTEM
==========
Create CSS variables such as:
--a11y-toolbar-primary
--a11y-toolbar-primary-hover
--a11y-toolbar-primary-foreground
--a11y-toolbar-background
--a11y-toolbar-foreground
--a11y-toolbar-muted
--a11y-toolbar-border
--a11y-toolbar-focus
--a11y-toolbar-shadow
--a11y-toolbar-radius
Default primary color:
#0B7FB3
Default values must maintain readable contrast.
Use:
Consistent spacing
Consistent icon sizes
Consistent border radius
Clear labels
Readable typography
Minimum practical target size of 44 by 44 CSS pixels
Active states must not rely on color alone.
Use an additional indicator such as:
Checkmark
Pressed state
Border change
Text state
Visible state icon
Avoid:
Neon colors
Distracting gradients
Excessive glassmorphism
Low-opacity text
Tiny labels
Unnecessary animation
Oversized panels
====
DARK MODE
====
Support:
Light theme
Dark theme
System theme
Allow explicit configuration.
The toolbar must remain readable in all modes.
Do not depend only on host website dark mode.
Use toolbar-owned theme variables.
Respect prefers-color-scheme when configured as system.
Ensure the blue floating button and white icon remain consistent.
========
PACKAGE API
=======
Expose reusable public exports.
At minimum export:
AccessibilityProvider
AccessibilityToolbar
FloatingAccessibilityButton
AccessibilityPanel
useAccessibility
defaultPreferences
createTranslations
Hebrew translations
English translations
AccessibilityPreferences
AccessibilityToolbarProps
AccessibilityProviderProps
ToolbarTranslations
ToolbarPosition
ToolbarDirection
ToolbarLanguage
Expose styles through a package export where applicable.
Example:
import {
AccessibilityProvider,
AccessibilityToolbar
} from "@package/accessibility-toolbar"
import "@package/accessibility-toolbar/styles.css"
Support a minimal integration:
<AccessibilityProvider>
<App />
<AccessibilityToolbar />
</AccessibilityProvider>
Do not require consumers to manually initialize internal managers.
======
CONFIGURATION API
======
Support typed configuration props including:
language
direction
position
primaryColor
zIndex
storageKey
defaultOpen
enabledFeatures
translations
panelTitle
buttonLabel
theme
className
buttonClassName
panelClassName
readingGuideOptions
readingMaskOptions
onPreferenceChange
onOpenChange
All callback types must be explicit.
Do not use Function as a type.
Do not expose internal mutable objects.
Validate values.
Provide sensible defaults.
Safely apply custom colors using CSS variables.
Do not insert configuration values into raw HTML.
===
INSTALLATION AND INTEGRATION
===
If working in an existing project:
Inspect package.json.
Inspect the application entry point.
Inspect the root layout.
Inspect existing providers.
Inspect global CSS.
Inspect Tailwind configuration.
Inspect existing theme architecture.
Integrate the toolbar at the correct global level.
Do not duplicate existing providers.
Do not break routing.
Do not break SSR.
Do not break hydration.
Do not add unnecessary dependencies.
If the project uses React with Vite:
Integrate into the existing root component or entry point.
If the project uses Next.js:
Use a client component where browser APIs are required.
Prevent SSR access to:
window
document
localStorage
navigator
matchMedia
If the project uses Tailwind:
Reuse it safely.
Extend existing configuration only when needed.
Do not replace the entire Tailwind config.
If the project does not use Tailwind:
Use isolated CSS or CSS modules rather than forcing a large migration.
=======
COMPATIBILITY
======
Support current stable versions of:
Chrome
Edge
Firefox
Safari
Mobile Safari
Chrome for Android
Support React Strict Mode.
Support server-side rendering safely where applicable.
Use feature detection.
Do not assume availability of:
BroadcastChannel
Shadow DOM
matchMedia
localStorage
ResizeObserver
MutationObserver
Provide safe fallbacks.
======
SECURITY
=====
Do not use:
dangerouslySetInnerHTML
eval
new Function
Remote scripts
Remote CSS
Remote icon services
Unsanitized HTML
User-provided JavaScript
Do not send user preferences to external servers.
Do not include:
Analytics
Telemetry
Tracking
Advertising
Do not collect personal data.
Do not introduce unsafe dependencies.
====
PERFORMANCE
====
Minimize bundle size.
Avoid unnecessary dependencies.
Avoid unnecessary re-renders.
Use memoization only when useful.
Use event delegation where appropriate.
Throttle pointer-driven features.
Prefer requestAnimationFrame for visual pointer updates.
Do not continuously scan the DOM.
Do not run expensive layout calculations continuously.
Load optional functionality only when active.
Use passive event listeners where appropriate.
Do not block initial rendering.
Do not create unnecessary MutationObservers.
=====
ERROR HANDLING
====
Fail safely.
If localStorage is unavailable:
Use in-memory state.
If BroadcastChannel is unavailable:
Use storage events.
If all cross-tab methods are unavailable:
Continue without synchronization.
If matchMedia is unavailable:
Use safe defaults.
If document is unavailable:
Skip browser-only behavior.
If stylesheet injection fails:
Keep the toolbar interface functional.
If one preference fails:
Do not crash the host application.
Catch parsing errors.
Validate stored objects.
Ignore unknown fields.
Migrate supported older schema versions.
Avoid unnecessary production console logs.
Do not expose sensitive data.
====
TESTING
====
Generate complete tests using the project's existing testing stack where possible.
Preferred tools:
Vitest
React Testing Library
Playwright
axe-core
Test:
Floating button rendering
Correct accessible button name
Blue background
White accessibility icon
48px mobile size
56px desktop size
Panel opening
Panel closing
aria-expanded updates
aria-controls relationship
aria-haspopup value
Keyboard navigation
Enter activation
Space activation
Escape closing
Focus movement on open
Focus restoration on close
RTL layout
LTR layout
Mobile layout
Desktop layout
Screen-reader names
Toggle states
Preference persistence
Cross-tab synchronization
Reset behavior
Text increase
Text decrease
Text reset
Readable font
Letter spacing
Word spacing
Line height
Grayscale
High contrast
Dark contrast
Light contrast
Invert colors
Reduced motion
Pause animations
Reading guide
Reading mask
Large cursor
Focus highlighting
Image hiding
Link highlighting
Heading highlighting
Corrupted localStorage
Partially valid stored data
Unavailable localStorage
Unavailable BroadcastChannel
Server-side rendering safety
React Strict Mode
Unmount cleanup
Remount behavior
No serious or critical axe-core violations inside the toolbar
Test that the toolbar does not contain:
Accessibility inspector
Accessibility scanner
Checker tab
Audit tab
Issues tab
Compliance score
Accessibility score
Test at:
320px viewport width
Hebrew RTL
English LTR
Mobile viewport
Desktop viewport
Reduced-motion preference
====
ACCESSIBILITY ACCEPTANCE CRITERIA
===
The work is complete only when all of the following are true:
A blue circular floating button is visible.
The button uses #0B7FB3 by default.
The button has a white wheelchair-style accessibility icon.
The button is 48px on mobile.
The button is 56px on desktop.
The button is keyboard accessible.
The button has a visible focus indicator.
The button has the correct accessible name.
aria-expanded reflects the real open state.
aria-controls references the real panel.
aria-haspopup is correct.
The panel is keyboard accessible.
Escape closes the panel.
Focus returns to the button after closing.
Hebrew RTL works.
English LTR works.
Every control has an accessible name.
Every toggle exposes its state.
Every visual feature actually works.
Preferences persist after reload.
Preferences synchronize between tabs.
Reset restores all defaults.
Unmounting removes side effects.
The plugin does not permanently alter host markup.
No scanner exists.
No inspector exists.
No checker exists.
No issue report exists.
No compliance claim exists.
axe-core reports no serious or critical violations inside the toolbar.
Strict TypeScript passes.
The production build succeeds.
The application still works.
=====
PROJECT FILES
=====
Create all files required by the current project.
Where appropriate, include files equivalent to:
src/components/AccessibilityProvider.tsx
src/components/AccessibilityToolbar.tsx
src/components/FloatingAccessibilityButton.tsx
src/components/AccessibilityPanel.tsx
src/components/AccessibilitySection.tsx
src/components/AccessibilityToggle.tsx
src/components/AccessibilityControlButton.tsx
src/components/ResetAccessibilityButton.tsx
src/components/AccessibilityIcon.tsx
src/context/AccessibilityContext.tsx
src/hooks/useAccessibility.ts
src/hooks/useLocalStorage.ts
src/hooks/useMediaQuery.ts
src/hooks/useFocusReturn.ts
src/managers/PreferencesManager.ts
src/managers/KeyboardManager.ts
src/managers/FocusManager.ts
src/managers/ThemeManager.ts
src/managers/RTLManager.ts
src/managers/AnimationManager.ts
src/managers/ContrastManager.ts
src/managers/TypographyManager.ts
src/managers/ReadingGuideManager.ts
src/managers/ReadingMaskManager.ts
src/managers/CursorManager.ts
src/managers/ImageVisibilityManager.ts
src/managers/StorageManager.ts
src/locales/he.ts
src/locales/en.ts
src/styles/accessibility-toolbar.css
src/styles/accessibility-preferences.css
src/types/accessibility.ts
src/utils/browser.ts
src/utils/storage.ts
src/utils/typeGuards.ts
Tests
Do not force this exact folder structure if the existing repository has a better convention.
Do not create duplicate files.
Do not create unnecessary abstractions.
Do not leave placeholders.
Do not use TODO comments.
Do not write pseudocode.
Do not use comments such as:
Implementation goes here
Add your logic here
Continue similarly
Existing code
Rest of component
====
IMPLEMENTATION ORDER
====
Work in this order:
1. Inspect the existing repository
2. Identify the correct integration point
3. Define strict types
4. Create translations
5. Build preference state
6. Build persistence
7. Build cross-tab synchronization
8. Build the provider
9. Build the floating accessibility button
10. Build the panel
11. Build typography controls
12. Build contrast controls
13. Build motion controls
14. Build reading tools
15. Build cursor and focus controls
16. Build link and heading highlighting
17. Build image hiding
18. Build reset behavior
19. Add RTL and LTR
20. Add responsive styling
21. Add style isolation
22. Add cleanup
23. Integrate globally
24. Add tests
25. Run type checking
26. Run linting
27. Run tests
28. Run build
29. Fix all failures
Do not stop after creating the UI.
Do not stop after creating one component.
Do not leave controls disconnected.
==
FINAL BUILD VERIFICATION
==
Before completion, run or logically verify the project's equivalent commands:
npm install
npm run typecheck
npm run lint
npm run test
npm run test:e2e
npm run build
Use the actual scripts available in package.json.
Fix all TypeScript errors.
Fix all lint errors.
Fix all test failures.
Fix all build errors.
Do not suppress errors.
Do not disable accessibility lint rules.
Do not add blanket eslint-disable comments.
Do not delete tests because they fail.
Do not weaken TypeScript.
Do not report completion while errors remain.
===
REPOSITORY SAFETY
==
Do not delete unrelated files.
Do not modify unrelated features.
Do not overwrite legal content.
Do not overwrite:
Terms of use
Privacy policy
Accessibility statement
SEO status pages
Sitemap configuration
Google Search Console integration
Authentication
Payments
Admin tools
Do not change existing page text unless required for the toolbar.
Do not create a new route.
Do not create a status page.
Do not create a scanner screen.
Do not create an admin accessibility dashboard.
Integrate the toolbar globally in the correct root component.
====
NO DOCUMENTATION SUBSTITUTE
====
Do not complete the task by creating only:
README
Architecture plan
Accessibility Constitution
WCAG handbook
Task list
Implementation proposal
Mockup
Screenshot
Partial snippets
Description of intended behavior
The task is complete only after the working code is created and integrated.
Documentation is optional and may only be added after all source code and tests are complete.
====
OUTPUT BEHAVIOR
====
If you have direct repository access:
Inspect and modify the project files directly.
Do not merely print a suggested implementation.
Create the actual files.
Integrate them.
Run checks.
If you do not have repository access:
Output every required file in full.
Use this exact format:
FILE: path/to/file.ts
```typescript
complete file content
Never omit file contents.Never replace code with placeholders.Never say "the rest remains unchanged" when the omitted part is required.Do not output only a plan.Do not output only an explanation.Do not output a handbook.Do not output an accessibility constitution.Do not explain WCAG theory.Do not stop because the response is long.Continue from the next incomplete file.Do not repeat completed files.===
FINAL INSTRUCTIONStart implementation immediately.Do not ask which files to create.Inspect the repository and build the complete working accessibility toolbar now.The final result must include the exact blue circular floating button with the white wheelchair-style accessibility icon described above.Do not add a scanner.Do not add an inspector.Do not add a checker.Do not add an audit panel.Do not add a compliance score.Build and integrate the actual working accessibility toolbar now.אתר בלוג
אתר בלוג מקצועי להצגת מאמרים ותוכן, עם קטגוריות, תגיות, חיפוש וסינון, ועמוד מאמר מעוצב ומושקע – כולל מערכת ניהול תוכן נוחה.
פרומפט לבניית אתר בלוג מקצועי אתה בונה אתר בלוג מודרני ומקצועי המציג מאמרים, מדריכים ותוכן עומק, עם קטגוריות, תגיות, חיפוש מתקדם, סינונים, עמוד מאמר מושקע במיוחד, ואזור אדמין לניהול תוכן. האתר חייב להיות מהיר, רספונסיבי, מותאם מובייל, בעברית RTL, ובעיצוב פרימיום ולא בסיסי. המערכת כוללת אזור ציבורי לגולשים, מערכת מאמרים, מערכת קטגוריות ותגיות, מערכת חיפוש וסינון, מערכת משתמשים (כותבים/עורכים), ואזור אדמין מלא. מבנה האתר דף בית עמוד בלוג (כל המאמרים) עמודי קטגוריה עמודי תגיות עמוד מאמר עמוד אודות עמוד צור קשר דפי מדיניות עיצוב וחוויית משתמש שפה ויזואלית נקייה, טיפוגרפיה גדולה וברורה, הרבה ריווח, תמונות איכותיות, כרטיסיות מאמרים עם צל עדין, אנימציות קלות, נגישות טובה, מצב כהה/בהיר (אופציונלי). דף בית Hero עם כותרת הבלוג ותיאור קצר. סקשן מאמרים אחרונים. סקשן מאמרים פופולריים. סקשן קטגוריות. סקשן הרשמה לניוזלטר. עמוד בלוג (כל המאמרים) גריד של כרטיסיות מאמרים. בכל כרטיסיה: תמונה ראשית, כותרת, תקציר קצר, קטגוריה, שם כותב, תאריך, זמן קריאה משוער. אזור סינון לפי קטגוריה. אזור סינון לפי תגיות. שדה חיפוש. מיון לפי חדש/פופולרי/זמן קריאה. עמוד קטגוריה כותרת קטגוריה. תיאור קצר לקטגוריה. רשימת מאמרים השייכים לקטגוריה. עמוד מאמר (מושקע במיוחד) Hero עם תמונת קאבר גדולה. כותרת H1 גדולה. תקציר פתיחה. פרטי מאמר: שם הכותב, תמונת פרופיל, תאריך פרסום, זמן קריאה, קטגוריה, תגיות. תוכן המאמר בנוי מ: כותרות H2 ו־H3, פסקאות, רשימות, תמונות משולבות, ציטוטים מודגשים, בלוקי טיפ/הערה. סרגל צד (Desktop): מאמרים קשורים. מאמרים פופולריים. קטגוריות. בתחתית המאמר: כפתורי שיתוף לרשתות. ניוזלטר. מאמרים נוספים לקריאה. אפשרות תגובות (אופציונלי). מערכת חיפוש חיפוש לפי כותרת ותוכן. השלמה אוטומטית. מערכת כותבים פרופיל כותב עם תמונה, תיאור קצר ורשימת מאמרים. אזור אדמין Dashboard עם מספר מאמרים, צפיות, קטגוריות ותגובות. ניהול מאמרים (יצירה, עריכה, טיוטה, פרסום). ניהול קטגוריות. ניהול תגיות. ניהול כותבים. SEO לכל מאמר (Title, Description, Slug). SEO וביצועים URL נקיים. Meta Title ו־Description. Open Graph. טעינה מהירה. Lazy loading לתמונות. תוכן דוגמה צור 30 מאמרים לדוגמה. 5 קטגוריות. 10 תגיות. 3 כותבים. תוצר סופי אתר בלוג עובד מלא עם עמוד בלוג, סינונים, קטגוריות, חיפוש, עמוד מאמר מושקע, ואזור אדמין לניהול תוכן, רספונסיבי ובעיצוב פרימיום. התחל לבנות עכשיו.
אתר פורום
אתר פורום שבו משתמשים יכולים לפתוח פוסטים, להגיב, ליצור שרשורים ולנהל דיונים - עם פרופילים אישיים, חיפוש, דירוגים ואזור ניהול מלא.
פרומפט לבניית אתר פורום קהילתי אתה בונה אתר פורום קהילתי מודרני המאפשר למשתמשים לפתוח פוסטים, להגיב, ליצור שרשורים, לדרג תוכן, לעקוב אחרי נושאים ומשתמשים, ולנהל קהילה בצורה נוחה ומסודרת. האתר חייב להיות מהיר, רספונסיבי, מותאם מובייל, בעברית RTL, ובעיצוב פרימיום ולא בסיסי. המערכת כוללת אזור ציבורי לגולשים, מערכת משתמשים, מערכת פוסטים ותגובות, מערכת חיפוש וסינון, ואזור אדמין מלא. מבנה כללי אתר ציבורי עם דף בית, עמודי קטגוריות, עמוד פוסט, חיפוש, עמוד פרופיל משתמש, הרשמה והתחברות. אזור משתמשים עם יצירת פוסטים, עריכת פוסטים, מעקב אחרי תגובות, התראות והגדרות. אזור אדמין לניהול משתמשים, פוסטים, תגובות, קטגוריות ודיווחים. עיצוב וחוויית משתמש שפה ויזואלית נקייה ומודרנית, טיפוגרפיה ברורה, כרטיסיות לפוסטים, היררכיית כותרות נכונה, אנימציות עדינות, כפתורים בולטים, מצב כהה/בהיר (אופציונלי), ונגישות בסיסית. דף בית Hero עם כותרת קהילה, תיאור קצר, כפתור “הרשמה”, כפתור “פתח פוסט”. סקשן פוסטים אחרונים. סקשן פוסטים פופולריים. סקשן קטגוריות ראשיות. סקשן סטטיסטיקות קהילה (מספר משתמשים, פוסטים, תגובות). קטגוריות ותתי־קטגוריות אפשרות ליצור קטגוריות (לדוגמה: כללי, שאלות, עזרה, חדשות, טיפים, מדריכים). כל קטגוריה מציגה רשימת פוסטים, כמות תגובות, צפיות ותאריך עדכון אחרון. פוסטים כל פוסט כולל: כותרת, תוכן עשיר (טקסט + תמונות), שם מחבר, תמונת פרופיל, תאריך, מספר צפיות, מספר תגובות, תגיות. אפשרות עריכה ומחיקה לבעל הפוסט. אפשרות נעיצה (Pin) לפוסטים חשובים. אפשרות נעילת פוסט. תגובות ושרשורים תגובות מקוננות (Reply לתגובה). אפשרות לייק/דיסלייק. אפשרות עריכה ומחיקה לבעל התגובה. אפשרות סימון תגובה כ”תשובה הטובה ביותר”. מערכת משתמשים הרשמה עם שם משתמש, אימייל, סיסמה. התחברות ושכחתי סיסמה. עמוד פרופיל משתמש עם: תמונה, תיאור קצר, רשימת פוסטים, רשימת תגובות, תאריך הצטרפות, מוניטין. דירוג ומוניטין נקודות על פוסטים, תגובות ולייקים. דרגות משתמש (חדש, פעיל, מומחה, מוביל). חיפוש וסינון חיפוש לפי כותרת ותוכן. סינון לפי קטגוריה, תגיות, פופולריות, תאריך. התראות התראה כשיש תגובה לפוסט. התראה כשעונים לתגובה. התראה כשמישהו מתייג משתמש. דיווחים ובקרה כפתור דיווח על פוסט או תגובה. סטטוס דיווח: פתוח, בטיפול, נסגר. אזור אדמין Dashboard עם סטטיסטיקות. ניהול משתמשים (חסימה, מחיקה, שינוי תפקיד). ניהול פוסטים ותגובות. ניהול קטגוריות ותגיות. טיפול בדיווחים. הגדרות כלליות. אבטחה וביצועים הצפנת סיסמאות, Rate Limit, הגנה מספאם, טעינה מהירה, Lazy Loading. תוכן דוגמה צור 50 משתמשים לדוגמה, 100 פוסטים, 300 תגובות, 5 קטגוריות. תוצר סופי אתר פורום עובד מלא עם הרשמה, פוסטים, תגובות, שרשורים, חיפוש, פרופילים, מערכת דירוגים ואזור אדמין, רספונסיבי ובעיצוב פרימיום. התחל לבנות עכשיו.
אתר אינדקס בעלי מקצוע
אתר אינדקס לחיפוש בעלי מקצוע שמאפשר לגולשים למצוא, להשוות ולפנות לבעלי מקצוע לפי תחום ואזור, ולבעלי מקצוע לקבל פרופיל אישי, לידים ודירוגים
פרומפט לבניית אתר אינדקס לחיפוש בעלי מקצוע אתה בונה אתר אינדקס לחיפוש בעלי מקצוע שמאפשר לגולשים למצוא בעל/ת מקצוע לפי תחום, אזור, עיר, זמינות, דירוג, תקציב ושירותים, עם פרופילים עשירים, מערכת פניות/לידים, ביקורות, ואזור ניהול לבעלי המקצוע ולאדמין. האתר חייב להיות מעוצב פרימיום ולא בסיסי, מהיר מאוד, מותאם מובייל, עברית RTL, עם חוויית חיפוש מצוינת. כל ניסוח יהיה ניטרלי מגדרית ויתאים לכל תחום. אם חסר תוכן או תמונות, צור תוכן דוגמה איכותי בעברית ונתונים ריאליסטיים לדמו. מבנה האתר האתר כולל 4 אזורים: אתר ציבורי לגולשים, עמודי קטגוריות וחיפוש, אזור בעל/ת מקצוע (Dashboard) לניהול פרופיל ולידים, ואזור אדמין מערכת. בנה גם דפים חוקיים: תנאים, פרטיות, נגישות, מדיניות פרסום/לידים. 1) עיצוב וחוויית משתמש בנה מערכת עיצוב פרימיום: טיפוגרפיה מודרנית, גרידים נקיים, כרטיסיות עם צל עדין, אייקונים אחידים, תמונות גדולות, אנימציות עדינות, כפתורים ברורים, נגישות בסיסית, טעינה מהירה עם Skeleton. במובייל הוסף כפתור חיפוש קבוע (Sticky) וסינון נוח כ-Drawer. 2) דף בית (Landing ראשי) בנה דף בית ארוך וממיר. Hero עם חיפוש גדול: שדה “מה מחפשים?” (קטגוריה/מילת חיפוש) + שדה “איפה?” (עיר/אזור) + כפתור “חיפוש”. מתחת: קטגוריות פופולריות בכרטיסיות עם אייקון, אזור “בעלי/ות מקצוע מומלצים”, אזור “איך זה עובד” (מחפשים > משווים > פונים), אזור יתרונות (דירוגים אמיתיים, זמינות, תוצאות מהירות, בעלי מקצוע מאומתים), אזור ביקורות של לקוחות, FAQ ו-CTA לבעלי מקצוע “הצטרפו לאינדקס”. 3) קטגוריות, אזורים ועמודי SEO צור עמודי קטגוריה לכל תחום (לדוגמה: אינסטלציה, חשמל, צבעי/ת, ניקיון, מיזוג, הובלות, צילום, עורכי דין, מאמנים וכו’ — לפחות 20 קטגוריות דמו). לכל קטגוריה צור גם עמודי משנה לפי עיר/אזור (SEO): “אינסטלטור/ית בתל אביב”, “חשמלאי/ת בחיפה”, וכו’. בכל עמוד קטגוריה הוסף טקסט תוכן קצר ומקצועי + FAQ ייעודי. 4) דף חיפוש ותוצאות בנה עמוד תוצאות מתקדם. סרגל סינון חכם כולל: קטגוריה, עיר/אזור (כולל מפת אזורים), מרחק (אם יש מיקום), דירוג מינימלי, מחיר משוער/טווח, זמינות (היום/מחר/סופ”ש), “מאומת/ת”, “נותן/ת שירות חירום”, “מגיע/ה לבית”, שפה, אופן התקשרות (טלפון/וואטסאפ). תצוגות: Grid של כרטיסיות + List + Map View (אופציונלי). מיון: הכי מומלצים, הכי קרובים, הכי זולים, הכי מהירים לענות, הכי חדשים. כרטיסיה בתוצאות תכלול: תמונת פרופיל/לוגו, שם, קטגוריה, עיר, דירוג + מספר ביקורות, תגיות שירות (למשל “הגעה מהירה”, “שירות 24/7”), טווח מחיר משוער, כפתור “שלחו פנייה”, וכפתורי התקשרות מהירים (וואטסאפ/טלפון) לפי הרשאות/תוכנית. 5) פרופיל בעל/ת מקצוע (עמוד ציבורי) בנה פרופיל עשיר וממיר מאוד: תמונת קאבר, לוגו/פרופיל, שם, קטגוריות, אזורי שירות, תיאור “אודות” איכותי, גלריית עבודות לפני/אחרי (תמונות), סרטון קצר (YouTube/Vimeo), שירותים מוצעים (רשימה מסודרת), מחירון בסיסי/טווחים (אופציונלי), זמינות ושעות פעילות, תגיות יתרון (אחריות, הגעה מהירה, ניסיון), תעודות/הסמכות (העלאת קבצים), כפתורי יצירת קשר בולטים, טופס פנייה מובנה, מפה/אזורי שירות, ביקורות ודירוגים, שאלות נפוצות ספציפיות לבעל המקצוע, “בעלי מקצוע דומים” בסוף העמוד. 6) מערכת פניות/לידים לגולשים הגולש יכול לשלוח פנייה מתוך כרטיסיה או מתוך פרופיל. הטופס כולל: שם, טלפון, אימייל, עיר/אזור, תיאור הבקשה, דחיפות (מיידי/היום/השבוע), תקציב משוער, אפשרות לצרף תמונות. לאחר שליחה: מסך תודה + הצעה “שלח/י לעוד 2 בעלי מקצוע מומלצים” (כדי להגדיל התאמה). שלח הודעה אוטומטית לבעל המקצוע (אימייל, ו-WhatsApp placeholder) עם פרטי הליד. שמור סטטוס ליד: חדש, טופל, נסגר, לא רלוונטי. 7) מערכת ביקורות ודירוגים אפשרות לביקורת רק אחרי פנייה מאומתת (כדי למנוע ספאם). ביקורת כוללת דירוג כוכבים + טקסט + קטגוריית שירות + עיר. הצג תגיות מהביקורות (למשל “אדיב/ה”, “עמד/ה בזמנים”, “מחיר הוגן”). אפשר דיווח על ביקורת. 8) “מאומת/ת” ואמינות הוסף מערכת אימות לבעלי מקצוע: אימות טלפון ואימייל, העלאת תעודה/מסמך, ואישור אדמין. בעלי מקצוע מאומתים מקבלים Badge בעמוד ובתוצאות. 9) אזור בעל/ת מקצוע (Dashboard) לאחר הרשמה, בעל/ת מקצוע מקבל/ת Dashboard לניהול: פרופיל (תיאור, אזורים, שירותים, מחירים, גלריה, סרטון), זמינות, פרטי התקשרות, קישורים לרשתות, מסמכים, ומיתוג (צבע/כפתור). אזור לידים: רשימת לידים עם חיפוש, סטטוסים, הערות, ומעקב “ענה/לא ענה”. אנליטיקות בסיסיות: צפיות בפרופיל, קליקים לטלפון/וואטסאפ, כמות לידים, אחוז מענה (אם אפשר). אפשרות לשדרוג לתוכנית בתשלום אם קיימת. 10) תמחור ומוניטיזציה (אופציונלי אך מוכן) בנה 3 תוכניות: חינמי (פרופיל בסיסי, כמות לידים מוגבלת, בלי וואטסאפ ישיר), פרו (פרופיל מלא, לידים ללא הגבלה, וואטסאפ, גלריה גדולה, קידום בתוצאות), ביזנס (Featured, עדיפות בתוצאות, תג “מומלץ”, דוחות מתקדמים). חיבור Stripe לניהול מנויים. אפשרות “תשלום לפי ליד” במקום מנוי (אופציונלי). 11) אזור אדמין מערכת (Super Admin) בנה אדמין מרכזי: ניהול בעלי מקצוע (אישור/דחייה/חסימה), ניהול קטגוריות ואזורים, ניהול לידים (צפייה, ייצוא), ניהול ביקורות (אישור/מחיקה/דיווחים), ניהול תוכניות ומחירים, ניהול תוכן שיווקי (FAQ, דפי SEO), סטטיסטיקות מערכת (מס’ משתמשים, לידים, המרות), והגדרות מערכת (SMTP, דומיין, מיתוג). הוסף Audit log לפעולות אדמין. 12) חיפוש, ביצועים ו-SEO החיפוש חייב להיות מהיר ומדויק עם השלמה אוטומטית (קטגוריות/ערים), ומנוע פילטרים שמחזיר תוצאות מידית. הוסף SEO: URL נקיים, מטא טייטל ודסקריפשן לעמודים, Open Graph, ו-Schema בסיסי לעסקים/ביקורות (אם אפשר). בצע אופטימיזציה למובייל: Lazy loading לגלריות, Cache לתוצאות, וטעינה מהירה. 13) דמו ונתונים לדוגמה צור דמו מלא: לפחות 100 בעלי מקצוע פיקטיביים אמינים, 20 קטגוריות, 30 ערים, 300 ביקורות, 200 לידים. הוסף תמונות placeholder איכותיות וגלריות לפני/אחרי. בנה לפחות 10 עמודי SEO לדוגמה של קטגוריה+עיר. 14) תוצר סופי החזר אתר עובד קומפלט עם עמוד בית שיווקי, חיפוש מתקדם, עמודי קטגוריה ועיר, פרופילים עשירים, מערכת לידים, מערכת ביקורות, אזור בעל/ת מקצוע לניהול פרופיל ולידים, ואזור אדמין מלא. הכל RTL, רספונסיבי, פרימיום בעיצוב, ומוכן לצמיחה. התחל לבנות עכשיו.
בניית מערכת לניהול תורים
ערכת פשוטה וחכמה לניהול תורים לעסקים, שמאפשרת ללקוחות לקבוע תור אונליין, ונותנת לעסק לנהל שירותים, צוות, זמינות, תזכורות, ותשלומים – הכל ממקום אחד ובקלות.
פרומפט לבניית מערכת לניהול תורים אתה בונה מערכת SAAS לניהול תורים לעסקים, עם אתר שיווקי, אזור לקוחות, עמוד קביעת תור ציבורי לכל עסק, מערכת תשלומים (אופציונלי), תזכורות אוטומטיות, סנכרון יומן, ואזור אדמין מלא. המערכת חייבת להיות פרימיום בעיצוב, רספונסיבית (מובייל קודם), מהירה ומאובטחת. ברירת מחדל עברית RTL, עם אפשרות רב־שפתיות בהמשך. המערכת תתמוך במגוון סוגי עסקים (קליניקה, סלון, יועצים, סטודיו, טיפולים, אימונים) ולכן כל התוכן, שמות השדות והטפסים יהיו כלליים וניטרליים מבחינת מגדר. 1) אזור שיווקי (Marketing) בנה אתר שיווקי עם עמוד בית ארוך וממיר הכולל Hero עם הצעת ערך, כפתור “התחילו בחינם” וכפתור “צפו בדמו”, הדגשת יתרונות (קביעת תורים בקלות, תזכורות, סנכרון יומן, תשלום מראש, ניהול צוות, דוחות), אזור “איך זה עובד” בשלבים, גלריית מסכים, המלצות לקוחות, שאלות נפוצות ותמחור (חינמי/פרו/עסקי). הוסף דפים: פיצ’רים, תמחור, צור קשר, מדיניות פרטיות, תנאי שימוש, ביטולים/החזרים, נגישות. הקפד על SEO בסיסי: כותרות, מטא, Open Graph, וטעינה מהירה. 2) הרשמה, התחברות, ארגונים ותפקידים המערכת תעבוד במבנה “עסק” (Organization) עם משתמשים וצוות. הוסף הרשמה עם שם מלא, אימייל, סיסמה, שם העסק, תחום, טלפון. לאחר הרשמה – Wizard קצר: הגדרת שעות פעילות, משך תור ברירת מחדל, שירותים, אנשי צוות, מדיניות ביטול, חיבור וואטסאפ/אימייל לתזכורות. תפקידים והרשאות: Owner, Admin, Staff, Viewer. אפשר להזמין אנשי צוות באימייל, להגדיר הרשאות, ולנתק/לחסום משתמשים. 3) ליבת המערכת: שירותים, צוות, זמינות ותורים בנה מודולים עיקריים: שירותים (Services) עם שם שירות, תיאור, משך, מחיר (אופציונלי), זמן מרווח לפני/אחרי, האם דורש תשלום מראש, ושיוך לאנשי צוות. אנשי צוות (Staff) עם שם, תמונה, תחומי שירות, שעות עבודה, ימי חופש, הפסקות, חופשות, וניהול זמינות פרטנית. זמינות (Availability) תכלול שעות פעילות עסקיות כלליות + אפשרות Overrides לימים ספציפיים (חגים/חריגים), כולל תמיכה בחסימת תורים לפי תאריך/שעה. תורים (Appointments) יכללו: סטטוס (ממתין/מאושר/בוטל/הושלם/לא הגיע), לקוח, שירות, צוות, תאריך ושעה, הערות, מקור (אתר/אדמין/ייבוא), ותיעוד שינויים (Audit Log). 4) עמוד ציבורי לקביעת תור (Booking Page) לכל עסק יהיה עמוד ציבורי בקישור קבוע: domain.com/clinic/username או subdomain. העמוד יהיה פרימיום, ממותג, מובייל מושלם, מהיר, עם תהליך קצר וברור: בחירת שירות → בחירת איש/אשת צוות (אופציונלי) → בחירת תאריך → הצגת שעות פנויות → פרטי לקוח/ה (שם, טלפון, אימייל) → אישור הזמנה. הצג מחיר ותשלום מראש אם מופעל. לאחר אישור, הצג מסך הצלחה עם פרטי התור, אפשרות להוסיף ליומן (Google/Apple/ICS), וקישור לביטול/שינוי. תמוך בהגבלות: הזמנה עד X ימים קדימה, מינימום זמן לפני תור, מספר תורים מקסימלי ללקוח ביום, וחסימת ספאם (Rate limit + captcha אופציונלי). הוסף אפשרות “רשימת המתנה” כשאין זמינות: לקוח/ה משאיר/ה פרטים ויום מועדף. 5) שינוי/ביטול תור (Self Service) הלקוח יקבל לינק מאובטח לשינוי/ביטול בהתאם למדיניות העסק (למשל עד 24 שעות לפני). הוספת מסך “ניהול תור” ציבורי: שינוי שעה באותו שירות, החלפת יום, או ביטול. אם יש תשלום מראש, תיעד מדיניות החזרים והוסף סטטוס “החזר מבוקש/בוצע” (גם אם ההחזר מתבצע ידנית). שלח הודעות עדכון אוטומטיות ללקוח ולעסק. 6) לוח ניהול תורים לעסק (Dashboard) בנה Dashboard עסקי עם תצוגת יומן Day/Week/Month, רשימת תורים קרובה, חיפוש לקוחות/תורים, פילטרים לפי שירות/צוות/סטטוס, וכפתור “הוסף תור ידני”. בכל תור אפשר לבצע: אישור, שינוי, ביטול, סימון “הושלם”, סימון “לא הגיע”, הוספת הערות פנימיות, והעלאת קבצים/תמונות (אופציונלי). הוסף תצוגה לצוות: כל איש/אשת צוות רואים רק את התורים שלהם לפי הרשאות. 7) לקוחות (CRM קטן בתוך המערכת) צור אזור לקוחות עם כרטיס לקוח: פרטים, היסטוריית תורים, הערות, תיוגים (VIP/חדש/חוזר), מדדים (מס’ תורים, no-show), והעדפות. אפשר לייצא לקוחות ל־CSV. הוסף אפשרות לשליחת הודעה ידנית ללקוח מהמערכת (אימייל/וואטסאפ אם מחובר). 8) תזכורות והתראות אוטומטיות בנה מערכת Notifications עם תבניות הודעה מותאמות לעסק (ברירת מחדל טקסטים איכותיים בעברית). סוגים: אישור תור, תזכורת 24 שעות לפני, תזכורת 2 שעות לפני, הודעת שינוי, הודעת ביטול, הודעת “לא הופעתם”, והודעת “תודה אחרי ביקור” עם בקשה למשוב. ערוצים: אימייל חובה, וואטסאפ/SMS אופציונלי (כפלייסהולדר אינטגרציה). אפשר להפעיל/לכבות ולשנות תזמונים לכל עסק. 9) תשלומים (אופציונלי אך מוכן מראש) הוסף אפשרות לדרוש תשלום מראש/פיקדון בעת קביעת תור. חיבור Stripe: Checkout או Payment Link בתוך התהליך. סטטוסים: unpaid/paid/refunded. לאחר תשלום – התור מאושר אוטומטית. אם אין תשלום – אפשר לבחור מדיניות “אישור ידני” או “אישור אוטומטי”. שמור היסטוריית עסקאות. 10) סנכרון יומן (Google/Apple/Outlook) אפשר לחבר Google Calendar לכל עסק/איש צוות, עם סנכרון דו־כיווני או חד־כיווני לבחירה. הצג חסימות אוטומטיות בזמנים תפוסים מהיומן. אפשר להוריד קובץ ICS לתור. אם לא בונים אינטגרציה מלאה עכשיו, צור תשתית והגדרות עם placeholders, והקפד שהמערכת תומכת בהוספת חסימות ידניות. 11) מיתוג והתאמה אישית לעסק לכל עסק אפשר להגדיר: לוגו, צבעים, כותרת עמוד, טקסטים קצרים, תמונת קאבר, כתובת, קישור לאינסטגרם/פייסבוק/וואטסאפ. אפשר לבחור תבנית עיצוב (3 תבניות פרימיום). אפשר להפעיל דומיין מותאם אישית בתוכנית פרו. 12) דוחות ואנליטיקות הוסף Analytics: מספר תורים לפי יום/שבוע/חודש, הכנסות (אם יש תשלומים), אחוז no-show, שירותים פופולריים, עומסים לפי שעות, ביצועים לפי אנשי צוות, מקור תנועה לעמוד ההזמנה (אם קיים). הצג גרפים ברורים + ייצוא CSV. 13) תמחור ותוכניות (אם SAAS) Free: שירות אחד, איש צוות אחד, תורים מוגבלים, ללא תזכורות מתקדמות. Pro: ללא הגבלה, תזכורות, תשלומים, תבניות, דומיין אישי. Business: ריבוי סניפים/עסקים, משתמשים רבים, דוחות מתקדמים, SLA. הוסף מסך Billing לניהול מנוי, שדרוג/ביטול, היסטוריית חיובים. 14) אזור אדמין מערכת (Super Admin) צור Super Admin עם: רשימת עסקים, סטטוס מנוי, משתמשים, חסימה/הפעלה, צפייה בלוגים, ניהול תוכניות ומחירים, צפייה בסטטיסטיקות מערכת, ניהול הודעות מערכת (Announcements), והגדרות גלובליות (SMTP, דומיין, ברנדינג). 15) אבטחה, ביצועים ותשתית אבטחה: הצפנת סיסמאות, Sessions/JWT, Role-based access, Rate limiting, הגנות בסיסיות XSS/CSRF, ולוג פעולות אדמין. ביצועים: טעינה מהירה, Lazy loading למסכים כבדים, Cache בסיסי. מובייל קודם בכל המסכים. נגישות בסיסית בטפסים וכפתורים. 16) תוכן דוגמה ותוצר סופי צור דמו מלא עם עסק לדוגמה, 5 שירותים, 3 אנשי צוות, שעות פעילות, 30 תורים פיקטיביים, 50 לקוחות פיקטיביים, תבניות הודעה מוכנות, ודוחות עם נתונים. התוצר הסופי חייב לכלול אתר שיווקי, עמוד קביעת תור ציבורי, מערכת משתמשים, Dashboard עסקי מלא, ניהול לקוחות, תזכורות, אנליטיקות, ואזור אדמין מערכת – הכל בעיצוב פרימיום ו־RTL. התחל לבנות עכשיו.
בניית מערכת LINK IN BIO מתקדמת
מערכת LINK IN BIO לבניית עמוד קישורים אישי ממותג, הכוללת עורך ויזואלי חי, ניהול בלוקים וקישורים, אנליטיקות מתקדמות, מערכת משתמשים, סליקה ומנויים, דומיין אישי ואזור אדמין מלא – הכל במערכת אחת המאפשרת לכל יוצר/ת, עסק או מותג ליצור LINK IN BIO מקצועי תוך דקות.
פרומפט לבניית מערכת LINK IN BIO מתקדמת אתה בונה מערכת LINK IN BIO מתקדמת המאפשרת לכל משתמש ליצור עמוד קישורים אישי ממותג, עם עורך ויזואלי, אנליטיקות, ניהול קישורים, קיצורים, ואזור אדמין מלא. המערכת חייבת להיות מודרנית, מהירה, מאובטחת, רספונסיבית, ובעיצוב פרימיום – לא מראה בסיסי. המערכת כוללת אתר שיווקי + דף נחיתה, מערכת משתמשים (Dashboard), עורך עמוד Link In Bio, עמוד ציבורי לכל משתמש, מערכת אנליטיקות ואזור אדמין. עברית RTL כברירת מחדל, עם אפשרות להוספת שפות בהמשך. קונספט ועיצוב: בנה שפה ויזואלית פרימיום הכוללת טיפוגרפיה מודרנית, גרידים נקיים, כרטיסיות עם צל עדין, אנימציות רכות, כפתורים בולטים, אייקונים אחידים, ניגודיות גבוהה ונגישות. בחר פלטת צבעים הכוללת צבע ראשי, צבע משני, צבע הדגשה, רקע בהיר וטקסט כהה. מבנה כללי של המערכת: אזור שיווקי הכולל עמוד בית, עמוד תמחור, עמוד פיצ’רים, עמוד צור קשר ודפי מדיניות. אזור משתמשים הכולל הרשמה, התחברות, איפוס סיסמה, Dashboard, עורך עמוד, סטטיסטיקות והגדרות. אזור אדמין הכולל ניהול משתמשים, ניהול תוכניות, ניהול תשלומים, סטטיסטיקות מערכת והגדרות כלליות. דף נחיתה ראשי: Hero עם כותרת שמסבירה שניתן לבנות עמוד קישורים מקצועי תוך דקה, תת־כותרת עם תועלת ברורה, כפתור התחל בחינם, כפתור צפייה בדוגמה ותמונה או וידאו של המערכת. סקשן יתרונות המציג מהירות, התאמה אישית, אנליטיקות, התאמה למובייל ו־SEO. סקשן איך זה עובד: נרשמים, יוצרים עמוד, מוסיפים קישורים, משתפים. סקשן דוגמאות עמודים עם גלריה. סקשן תמחור עם חינמי, פרו ועסקי. FAQ ו־CTA לסיום. הרשמה והתחברות: טופס הרשמה עם שם, אימייל, סיסמה ואישור תנאים, אימות אימייל לאחר הרשמה. התחברות עם אימייל וסיסמה ואפשרות לשכחתי סיסמה. Dashboard משתמש: הצגת ברוך הבא עם שם המשתמש, תצוגה מקדימה של העמוד, כפתור עריכת עמוד, סטטיסטיקות מהירות כגון קליקים היום, קליקים השבוע וסך הכל קליקים, קישורים אחרונים, כפתור הוספת קישור, קיצור דרך לסטטיסטיקות וקיצור דרך להגדרות. עורך עמוד LINK IN BIO: עורך ויזואלי עם תצוגה חיה. אזור פרופיל הכולל תמונת פרופיל, שם תצוגה, תיאור קצר ואייקונים לרשתות חברתיות. אזור קישורים עם אפשרות להוספת קישור הכולל כותרת, URL, אייקון, צבע כפתור ובחירה האם לפתוח בטאב חדש. אפשרות לגרירת קישורים לשינוי סדר, שכפול קישור וכיבוי או הדלקה. סוגי בלוקים נתמכים: כפתור רגיל, כותרת טקסט, תמונה, וידאו יוטיוב, גלריה, Divider, טופס יצירת קשר, כפתור וואטסאפ וכפתור טלפון. אזור עיצוב עם בחירת תבנית, צבעים, פונטים, עיגול כפתורים ורקע (צבע, גרדיאנט או תמונה). SEO בסיסי עם Title ו־Description. ניהול דומיין עם כתובת ברירת מחדל username.system.com ותמיכה בדומיין מותאם אישית בתוכנית פרו. עמוד ציבורי של משתמש: כתובת קצרה, טעינה מהירה, מותאם מובייל, תצוגה מלאה של כל הבלוקים, אנימציות עדינות וטעינת Lazy. מערכת סטטיסטיקות: סך הכל צפיות, סך הכל קליקים, קליקים לפי קישור, גרפים יומיים שבועיים וחודשיים, מקור תנועה אם אפשר ומדינות אם אפשר. תוכניות תשלום: Free עם מספר קישורים מוגבל וללא דומיין אישי. Pro עם קישורים ללא הגבלה, תבניות מתקדמות, דומיין אישי והסרת מיתוג. Business עם מספר עמודים ואנליטיקות מתקדמות. סליקה: חיבור ל־Stripe, ניהול מנויים, שדרוג, הורדה וביטול, עמוד הצלחה ועמוד כשלון. אזור אדמין: Dashboard המציג מספר משתמשים, משתמשים פעילים והכנסות. ניהול משתמשים עם חיפוש, צפייה בפרופיל, חסימה ושינוי תוכנית. ניהול תוכניות עם מחירים ופיצ’רים. ניהול תשלומים עם רשימת עסקאות. הגדרות מערכת הכוללות שם מערכת, לוגו, צבעים ו־SMTP. אבטחה: שימוש ב־JWT או Sessions, Rate Limiting, הצפנת סיסמאות והגנה מפני XSS ו־CSRF. ביצועים: טעינה מהירה, Cache ו־Lazy Loading. תוכן דוגמה: צור שלושה משתמשי דוגמה, עשרה קישורים לכל אחד ושלוש תבניות עיצוב. תוצר סופי: מערכת עובדת מלאה הכוללת אתר שיווקי, מערכת משתמשים, עורך ויזואלי, עמודים ציבוריים, אנליטיקות ואזור אדמין, רספונסיבית, RTL ובעיצוב פרימיום. התחל לבנות עכשיו.
אלמנט נעלם מהמסך
פרומפט פשוט שעוזר להבין למה אזור או חלק מהאתר נעלם אחרי שינוי, איך לבדוק אם הוא נמחק, מוסתר או מקולקל, ומה הצעד הקטן הבא שצריך לעשות כדי להחזיר אותו.
A UI section that used to work has disappeared completely after the latest changes. It was visible before the last edit, and now it’s missing / the page may be partially blank. Please troubleshoot step-by-step: Determine whether the missing component is: Not mounted at all (not rendered in JSX / route not reached), or Mounted but empty (rendering but no data / filtered out), or Crashing during render and preventing the UI from showing. Check the likely causes: Was the component removed from a parent’s JSX during refactor? Is the import/export broken or pointing to the wrong path? Did a conditional render / feature flag / permissions check start hiding it? Is state, props, or a selector now returning empty data unintentionally? Did a runtime error stop React from rendering the tree? Use lightweight diagnostics: Suggest exactly where to add console.log (or breakpoints) to confirm mount + props/data. If the screen is blank, ask for the console error and infer the most probable source. Propose the smallest fix: If it’s not mounted: restore it in the correct parent JSX (and ensure import is correct). If it’s mounted but empty: trace the data source and identify why it’s empty. If it crashes: identify the failing line/module and propose a safe patch. If you need logs: Ask me to paste the DevTools console output and the relevant component/parent files. Important: Apply changes incrementally and avoid unrelated refactors.
טיפול בשגיאות מתמשכות
תבנית פרומפט להתמודדות עם באגים שחוזרים שוב ושוב או משנים צורה, באמצעות מיפוי ניסיונות קודמים, הבנת שורש הבעיה, בחינת גישות חלופיות, ובידוד רכיבים בעייתיים - עד למציאת פתרון יציב.
We are dealing with an error that keeps recurring or reappearing in different forms. Before attempting another fix, let’s take a step back and analyze the situation systematically. Please do the following: List all solutions and fixes attempted so far for this error (based on conversation and context). Explain in simple, plain language what causes this error and under what conditions it appears. Identify the most likely root cause, not just the symptom. Suggest one or more alternative approaches to achieve the same goal, even if they require a different implementation strategy. If relevant, propose a rollback point and describe how to proceed from there with smaller, safer changes. If a specific component seems completely broken, suggest how to rebuild a minimal version of it from scratch and gradually re-integrate it. Present the findings as a clear, ordered list. Important: Do not apply fixes yet. This step is for diagnosis, understanding, and strategy only. After we agree on an approach, we will implement changes incrementally.
ניתוח ביצועים ואבחון עומסים
תבנית פרומפט להרצת בדיקת עומק על ביצועי המערכת במצב Plan, שמפיקה דו״ח אבחוני עם נקודות חולשה, דוגמאות קונקרטיות והמלצות לשיפור - ללא שינוי קוד בפועל, כדי לאפשר בחירה מושכלת מה ליישם.
Our application functions correctly, but overall performance feels slow and inefficient. Run this in Plan mode and produce a diagnostic performance report. Please analyze the project and identify: Inefficient data access patterns (duplicate fetches, missing caching, N+1 queries, unnecessary polling, etc.). Components that re-render too frequently or perform expensive work during render. Heavy operations running on the main thread that could be deferred or optimized. Asset-related issues (large images, unoptimized media, oversized scripts, unused dependencies). Bundle structure problems (everything in one bundle, lack of code-splitting, no lazy loading). For each issue: Describe where it occurs. Explain why it hurts performance. Suggest a specific optimization approach (e.g., caching, context/state storage, memoization, lazy loading, code-splitting, compression). Return the results as a clear, structured list of findings with recommendations. Important: Do not change any code yet. This step is analysis only. Afterwards, we may choose individual recommendations and ask you to implement them one by one.
גישה בטוחה לשינויים רגישים
תבנית פרומפט שנועדה להנחות את ה-AI לבצע שינויים באזורים קריטיים במערכת בזהירות מקסימלית, תוך שמירה על פונקציונליות קיימת, הימנעות משינויים לא קשורים, וביצוע בדיקות מקיפות לאחר העדכון.
The next update touches a high-risk, core area of the application — work with maximum caution. Review the relevant code paths, integrations, and dependencies end-to-end before changing anything. Do not alter files or components that aren’t directly required for this change. If anything is unclear, stop and outline your reasoning + options before proceeding. After implementation, run comprehensive tests to confirm no regressions in other parts of the system. Task: Extend the current authentication system by adding Google OAuth sign-in, while fully preserving the existing email/password login flow. (Move slowly, verify each step, and re-check assumptions as you go.)
בדיקה מלאה של באגים במערכת
הפרומפט הזה מבקש מהבינה המלאכותית לנתח את הפרויקט כולו לצורך ניקיון, ארכיטקטורה נכונה ולנתח כל קוד שאינו במקומו.
Perform a comprehensive **audit of the entire codebase** to check if the architecture is clean, modular, and optimized: - Identify any files, components, or logic that are in the wrong place or could be better organized. Are there any instances of code that don’t belong in their current file (misplaced logic)? - Evaluate if we have a clear separation of concerns (e.g., data handling vs UI vs state management). Point out any overly coupled sections of code. - Highlight any areas of the code that are overly complex or not following best practices. - Provide a report with specific recommendations to improve structure and maintainability, **without making any code changes yet**. Break down the suggestions into an ordered list of steps we could take, from most critical to optional enhancements. *(This is a read-only analysis; do not modify the code during this audit.)*
קורס דיגיטלי
אתר למכירת קורס דיגיטלי הכולל עמוד מכירה, מערכת משתמשים, אזור תלמידים סגור, מערכת ניהול תכני קורס וחיבור לסליקה.
אתה בונה אתר פרימיום למכירת קורס דיגיטלי אחד ספציפי (לא פלטפורמה של כמה קורסים) כולל דף נחיתה ארוך וממיר ברמה גבוהה, 2) תהליך רכישה ותשלום, 3) מערכת קורס לתלמידים (שיעורים/פרקים/קבצים), 4) אזור אדמין מלא לניהול הקורס, משתמשים ותשלומים האתר חייב להיראות רמה של מותג גדול ולא עיצוב בסיסי. שמור על עברית RTL, טיפוגרפיה מעולה, רווחים נכונים, היררכיה ברורה, והרבה אלמנטים ויזואליים (תמונות, וידאו, אייקונים, כרטיסיות, אנימציות עדינות). 0) שאלות שאתה לא שואל אותי אל תבקש ממני מידע נוסף כדי להתחיל. אם חסר תוכן, תייצר תוכן דוגמה איכותי בעברית עם טקסט שנשמע אמיתי, ותשתמש במשתנים/פלייסהולדרים שאוכל להחליף אחר כך. 1) קונספט מותג ועיצוב בנה שפה ויזואלית מודרנית ופרימיום הגדר מערכת עיצוב מלאה כותרות H1/H2/H3 ברורות גופנים: בעברית מודרנית נקייה (דוגמה: Heebo / Assistant / Rubik) כפתורים גדולים עם מצבי hover / pressed כרטיסיות עם צל עדין גרידים עקביים אייקונים אחידים אנימציות עדינות (כניסה רכה, hover עדין) נגישות בסיסית: ניגודיות טובה, פונט קריא, פוקוס ברור בטפסים צבעוניות בחר פלטה פרימיום: צבע ראשי, צבע משני, צבע הדגשה, צבע רקע בהיר, צבע טקסט כהה אל תעמיס צבעים שמור על מראה “סופר נקי” 2) מבנה האתר האתר כולל 3 אזורים מרכזיים א) אתר שיווקי (דף נחיתה + דפים חוקיים) ב) אזור תלמידים (Dashboard + צפייה בשיעורים + התקדמות + קבצים) ג) אזור אדמין (ניהול מלא) דפים חייבים דף נחיתה ראשי (הכי ארוך ומפורט) עמוד תודה אחרי רכישה עמוד התחברות / הרשמה / שכחתי סיסמה עמוד חשבון אישי (פרופיל, סיסמה, קבלות) אזור תלמידים אזור אדמין דפים חוקיים: תנאי שימוש, פרטיות, החזרות/ביטולים, נגישות 3) דף נחיתה פרימיום ארוך וממיר בנה דף נחיתה ארוך מאוד, מחולק לסקשנים, עם תוכן מקצועי, תמונות דוגמה ווידאו מוטמע, כולל CTA חוזר לאורך הדף הדף צריך להיות עשיר וויזואלי. בכל 1–2 סקשנים הוסף אלמנט גרפי (תמונה/אייקונים/כרטיסיות/באנר/וידאו) 3.1 Hero (פתיח) כותרת H1 חזקה עם הבטחה ברורה תת-כותרת שמסבירה למי הקורס ומה התוצאה 2 כפתורי CTA כפתור ראשי: “נרשמים לקורס” שמגלגל לאזור תשלום כפתור משני: “לצפייה בסילבוס” שמגלגל לתוכנית הקורס בצד: וידאו פרומו קצר (YouTube/Vimeo embed) עם מסגרת פרימיום ותצוגת poster מתחת: שורת אמון (Trust Bar) עם 4–6 אייקונים: “גישה מיידית”, “תמיכה”, “עדכונים”, “תשלום מאובטח”, “קבצים להורדה”, “ללא הגבלת זמן” 3.2 למי זה מתאים גריד של 6 כרטיסיות כולל “מתאים אם…” ו“לא מתאים אם…” (טקסט קצר ובוגר) 3.3 התוצאה הסופית סקשן חזק עם לפני/אחרי (כרטיס השוואה) בצד: תמונה אילוסטרטיבית איכותית 3.4 מה מקבלים בקורס רשימה עשירה של מודולים/תוצרים השתמש בכרטיסיות עם אייקונים הדגש תוצרים מוחשיים: תבניות, קבצי עבודה, צ’קליסטים, דוגמאות 3.5 סילבוס מלא (תוכנית הקורס) סקשן “תוכנית הלימוד” עם אקורדיון מודרני מודול > שיעורים לכל מודול: כותרת, תיאור קצר, משך כולל, וליד כל שיעור: זמן משוער הוסף כפתור “להצטרפות עכשיו” 3.6 דוגמאות מתוך הקורס גלריה של 6–10 תמונות דוגמה (placeholder) 2 קטעי וידאו קצרים מוטמעים (placeholder) כותרת שמדגישה “זה לא תיאוריה, זה פרקטיקה” 3.7 מי מעביר את הקורס פרופיל מרשים עם תמונה, ביוגרפיה, הישגים, מדדים הוסף “כפי שהופעתי/עבדתי עם…” כפס לוגואים (placeholder) 3.8 המלצות תלמידים סקשן חזק מאוד הוסף טקסט המלצות (8–12) בכרטיסיות וידאו המלצות (2–3 embeds) ציון כוכבים ממוצע וסטטיסטיקות (למשל: % שביעות רצון) הוסף אפשרות סינון המלצות לפי תגיות (למשל: “מתחילים”, “מתקדמים”, “שינוי קריירה”) 3.9 שאלות נפוצות FAQ ארוך (12–18 שאלות) באקורדיון דגש על: תשלום, גישה, תמיכה, זמן, למי מתאים, ביטולים 3.10 אחריות/התחייבות בנה “Badge” של אחריות (למשל 7/14/30 יום) כפלייסהולדר הסבר ברור ותנאים הוגנים 3.11 מחיר ותשלום (הקטע שממיר) זה סקשן עוצמתי עם כרטיס תמחור גדול הצג 2 אפשרויות תשלום אחד תשלומים (אם רלוונטי) הצג מה כלול גישה מלאה לשיעורים עדכונים עתידיים קבצים והורדות תעודת סיום (אם רוצים) כפתור “לתשלום מאובטח” 3.12 CTA אחרון באנר סיום דרמטי, קצר, חד כפתור הרשמה שורה שמרגיעה: “תשלום מאובטח, קבלה אוטומטית, גישה מיידית” 4) תהליך רכישה ותשלום (חוויית Checkout) מטרות תשלום מהיר, בלי חיכוך, מובייל מושלם אחרי תשלום: יצירת משתמש אוטומטית + הרשאה לקורס + מיילים מסכים א) Modal/עמוד Checkout בתוך האתר שדות: שם מלא, אימייל, טלפון (אופציונלי), קופון (אופציונלי) סיכום הזמנה ברור מדיניות ביטול קצרה ליד הכפתור כפתור תשלום בולט אייקונים של אבטחה/SSL ב) הצלחה (Success) מסך תודה מפורט כפתור “כניסה לקורס עכשיו” הסבר: “נשלח אליך מייל עם פרטים” קישור לחשבונית/קבלה באזור האישי ג) כשל תשלום (Cancel/Fail) מסך מכבד שמאפשר לנסות שוב כפתור “נסה שוב” קישור לתמיכה חיבורים חבר לסליקה (Stripe מומלץ) תמיכה בקופונים שמירת טרנזקציות שליחת מיילים אוטומטית מייל “ברוך הבא לקורס” מייל קבלה מייל איפוס סיסמה 5) מערכת הקורס לתלמידים (LMS) אחרי התחברות, התלמיד נכנס ל-Dashboard בנה חוויה נקייה, פרימיום, קלה להתמצאות 5.1 Dashboard תלמיד כרטיס “המשך מאיפה שעצרת” התקדמות כללית באחוזים מודולים אחרונים הודעות/עדכונים מהיוצר (Announcements) קישורי קיצור: קבצים, תמיכה, חשבון 5.2 עמוד תוכן הקורס רשימת מודולים בצד (Sidebar) מודול פתוח מציג שיעורים כל שיעור: סטטוס (לא נצפה/נצפה), זמן, כפתור “התחל” חיפוש בתוך שיעורים פילטרים: “לא נצפו”, “נצפו”, “עם קבצים” 5.3 עמוד שיעור נגן וידאו גדול (YouTube/Vimeo/קובץ) כותרת שיעור תיאור קצר כפתורי ניווט: הקודם/הבא כפתור “סמן כנצפה” אוטומטי בסוף צפייה קבצים מצורפים להורדה (PDF/ZIP וכו) תקציר נקודות משימות לביצוע (Checklist) לשונית שאלות/תגובות (אופציונלי) הערות אישיות לתלמיד (Notes) נשמרות לחשבון שלו 5.4 הרשאות ואבטחה רק מי ששילם יכול לצפות חסימה לשיתוף לינק ישיר בדיקת Session אפשרות ניתוק מכל המכשירים 6) אזור אדמין לניהול הקורס בנה Admin אמיתי, לא משהו מינימלי תפריט צד + דשבורד נתונים 6.1 דשבורד אדמין הכנסות היום/שבוע/חודש מספר רכישות אחוז המרה (אם יש נתונים) תלמידים פעילים שיעורים הכי נצפים נטישות בצ’קאאוט (אם קיים מעקב) 6.2 ניהול תוכן הקורס CRUD מלא מודולים שיעורים גרירה לסידור (Drag & Drop) שדות לשיעור כותרת תיאור וידאו (קישור) משך שיעור קבצים מצורפים משימות סטטוס טיוטה/מפורסם תזמון פרסום עתידי (אופציונלי) 6.3 ניהול תלמידים רשימת תלמידים עם חיפוש וסינון סטטוס: פעיל/מושהה תאריך הצטרפות מקור רכישה (אם קיים) אחוז התקדמות בקורס צפייה בפרופיל תלמיד איפוס סיסמה שליחת הודעה/מייל לתלמיד הענקת גישה ידנית (Admin grant) שלילת גישה 6.4 תשלומים והזמנות רשימת הזמנות סטטוס תשלום סכום אמצעי תשלום חשבוניות/קבלות קופונים החזרים (לפחות תיעוד/סימון) 6.5 קופונים ומבצעים יצירת קופון אחוז/סכום תוקף מגבלת שימוש קופון חד פעמי/רב פעמי 6.6 הודעות ועדכונים לתלמידים מערכת Announcements כתיבת הודעה שליחה לכל התלמידים / קבוצה הצגה בדאשבורד תלמיד 6.7 הגדרות מערכת שם הקורס תיאור קצר מחיר הגדרות תשלום הגדרות מיילים עמודי חוק העלאת לוגו/תמונת קורס SEO בסיסי 7) SEO, ביצועים, אנליטיקה בנה SEO מלא לדף נחיתה Meta title/description Open Graph סכמה בסיסית (Course אם רלוונטי) URL נקיים מהירות טעינה טובה תמונות ממוטבות אנליטיקס הטמע אירועים View landing Click CTA Start checkout Purchase success הטמע Pixel / GA4 placeholders 8) תוכן דוגמה ותמונות/וידאו אם אין נכסים אמיתיים, צור תמונות placeholder בסגנון אחיד (אנשים/עבודה/מסכים) וידאו placeholders עם embed אייקונים איכותיים צור גם סט המלצות ריאליסטי בשמות פרטיים בעברית 9) דרישות חוויית משתמש מובייל קודם Sticky CTA בדף נחיתה במובייל טפסים נוחים טעינות עם skeleton שגיאות טופס ברורות מיקרוקופי איכותי כל כפתור CTA מקפיץ/מוביל לתשלום 10) מה התוצר הסופי שאתה מחזיר החזר אתר עובד קומפלט דף נחיתה פרימיום ארוך Checkout עובד מערכת תלמידים עם תוכן דוגמה של לפחות 4 מודולים 20 שיעורים קבצים מצורפים דוגמה אזור אדמין מלא לניהול הכל הכל מעוצב, RTL, רספונסיבי, פרימיום, לא בסיסי
פרומפט למערכת מרקטפלייס
פרומפט מקיף לפיתוח פלטפורמת מרקטפלייס בעברית מלאה, הכוללת פתיחת חנויות עצמאיות, ניהול מוצרים ומכירות, סל קניות משותף, מערכת תשלומים מאובטחת, דשבורד למוכרים ולקוחות, וממשק ניהול כללי – מותאם לדסקטופ ולמובייל.
מטרה: בנה עבורי פלטפורמת מרקטפלייס (קניון דיגיטלי) מלאה בעברית (RTL), שבה כל משתמש יכול לפתוח חנות עצמאית, להעלות מוצרים, לנהל מכירות ולבצע עסקאות אונליין – תחת מערכת אחת מאוחדת ונוחה. הפלטפורמה תאפשר אינטראקציה בין מוכרים ללקוחות, כולל מערכת ניהול חנויות, סל קניות משולב, תשלומים מאובטחים, חוויית משתמש גבוהה, וכלים למעקב אחר מכירות וביצועים. מבנה כללי שם הפלטפורמה: קניון העסקים הגדול תיאור קצר: קניון דיגיטלי שבו כל אחד יכול לפתוח חנות ולמכור אונליין שפה: עברית בלבד, RTL מלא קהל יעד: עסקים קטנים, מוכרים עצמאיים, לקוחות קצה מודולים מרכזיים דף בית כללי הצגת קטגוריות עיקריות (אופנה, טכנולוגיה, אוכל, מוצרים יד שנייה וכו') באנרים לקידום חנויות, מבצעים, קטגוריות מובילות מנוע חיפוש חכם עם הצעות בזמן אמת הצגת מוצרים בולטים / חנויות מומלצות / חנויות חדשות מערכת חנויות עצמאיות כל משתמש יכול להירשם כמוכר ולפתוח חנות דיגיטלית ניהול חנות: לוגו, באנר, תיאור, פרטי יצירת קשר ניהול מלאי: העלאת מוצרים, עריכת מחירים, תיאורים, תמונות, מבצעים קטלוג אישי לכל חנות עם כתובת URL ייחודית סטטיסטיקות חנות: צפיות, מכירות, לייקים, פידבק ניהול מוצרים ומכירות העלאת מוצרים עם פרטים מלאים: שם, תיאור, מחיר, מבצע, תמונות, קטגוריה, תגיות תמיכה באופציות (מידות, צבעים, וריאנטים) מעקב אחר זמינות מלאי אוטומטית אפשרות להגדיר משלוחים לפי אזור, מחיר או זמן עדכון סטטוס: פעיל / לא זמין / אזל מהמלאי סל קניות ותשלום סל קניות משותף – לקוח יכול לקנות ממספר חנויות במקביל תצוגת סל קניות עם סיכום, משלוחים נפרדים, הנחות וקופונים קופה בעברית מלאה עם חוויית תשלום פשוטה תמיכה בתשלומים: כרטיסי אשראי, ביט, PayPal אינטגרציה ל-Payments Gateway (כמו Tranzila / Meshulam / Stripe) אזור אישי ללקוחות צפייה בהיסטוריית רכישות מעקב אחרי משלוחים שמירת מוצרים למועדפים השארת ביקורות ודירוגים אזור אישי למוכרים דשבורד ניהול מכירות: הזמנות, הכנסות, מוצרים מובילים ניהול משלוחים והודעות לקונים טבלת עסקאות עם סטטוס כלי ניתוח בסיסיים (כמה נצפה, כמה נמכר וכו') מערכת ניהול כללית (Admin) ניהול משתמשים: מוכרים ולקוחות ניהול קטגוריות מערכת ניהול עסקאות, מחלוקות ודיווחים מעקב אחרי חנויות לא פעילות או בעיות תשלום מערכת הודעות כללית לשליחת עדכונים למשתמשים ממשק ועיצוב RTL מלא, כולל טפסים, תצוגות, תפריטים, שמות שדות עיצוב מודרני, צבעוני, אך נקי ומרווח אפשרות תצוגה ברמת חנות וברמת מערכת כללית ניווט פשוט וממוקד גם ללקוחות וגם למוכרים רספונסיביות מלאה – מותאם למובייל ודסקטופ טכנולוגיה רצויה Frontend: Next.js / React / Vue Backend: Node.js / Firebase / Supabase DB: PostgreSQL / Firestore אחסון תמונות: Cloud Storage ניהול תשלומים: Stripe / Tranzila / Meshulam API אבטחה ופרטיות הגנת SSL בכל הרכיבים אימות דו-שלבי למוכרים מסנני תוכן למניעת פרסומים אסורים פרטיות לקוח – אין חשיפת פרטים אישיים ללא אישור יעד סופי: מערכת מרקטפלייס מלאה, בעברית, ידידותית למשתמש, שבה כל אחד יכול לפתוח חנות ולמכור אונליין – עם סל קניות מאוחד, חוויית קנייה חלקה, ניהול חנויות עצמאי, ודוחות לבקרה וביצועים
פרומפט לאפליקציית Swap
צפו בתוצאה ותחזרו לכאן רגע... כן. כל זה נבנה באמצעות הפרומפט הבודד הזה.
בנה עבורי אפליקציית היכרויות בשם SWAP – אפליקציה חדשנית בעברית מלאה (RTL), בעיצוב מודרני ועם חוויית משתמש אינטואיטיבית, שתאפשר למשתמשים להכיר אחד את השני בצורה ויזואלית, מהירה, בטוחה ומבוססת התאמות הדדיות בלבד. המערכת צריכה לכלול רישום, פרופילים, סווייפים, צ'אטים והתאמות – בדומה לקונספט של Tinder אך עם דגש ייחודי על פרטיות, שקיפות והתאמה חכמה. מבנה ראשי שם האפליקציה: SWAP שפה ראשית: עברית בלבד (כולל RTL) פלטפורמות: מובייל (iOS / Android) + גרסת ווב רספונסיבית עיצוב: מודרני, חלק, רגיש ונקי, מותאם לקהל צעיר ובוגר כאחד מודולים עיקריים 1. מסך רישום והתחברות הרשמה דרך מספר טלפון, אימייל או חשבון Google / Facebook אימות טלפון (OTP) ואימות כתובת מייל איסוף פרטים בסיסיים: שם, גיל, מין, העדפה מינית, עיר, תמונת פרופיל ראשית הסכמה לתקנון ושמירת פרטיות 2. מסך פרופיל אישי עריכת פרטים אישיים, תיאור קצר (bio), בחירת תחומי עניין, תעסוקה, לימודים העלאת מספר תמונות (עד 6) קביעת טווח גילאים מועדף להתאמות, מיקום גאוגרפי, מרחק, והעדפות צפייה בפרופיל כפי שמשתמשים אחרים רואים אותו (preview) 3. מנגנון התאמה (Matching / Swipe) תצוגת כרטיסים עם פרטי משתמש: שם, גיל, תמונה, תחומי עניין משותפים אפשרות סווייפ ימינה (לייק) / שמאלה (דילוג) התאמה נוצרת רק כשיש לייק הדדי הגבלה יומית על כמות סווייפים חינמיים מנגנון דירוג פרופילים (לצורכי שיפור איכות התאמות) 4. צ׳אט / הודעות פתיחת צ'אט לאחר התאמה בלבד שליחת טקסטים, אימוג’ים, תמונות (בהתאם להרשאות) אפשרות לחסום או לדווח על משתמשים סטטוס הודעה (נשלחה, נצפתה) חיווי "הקלדה..." 5. פיצ׳רים נוספים אפשרות "לגלול אחורה" (Undo) בסווייפ האחרון – רק למנויים תוספות פרימיום: Boost לחשיפת פרופיל, Super Like, מצב גלישה אנונימית פילטרים מתקדמים: לפי תחום עניין, השכלה, מצב משפחתי, עישון, ילדים ועוד תזכורות לפעילות, הצעות יזומות מהמערכת ניהול ו-Admin פאנל ניהול מלא: צפייה בכל המשתמשים, ניתוח נתונים, חסימות, דוחות משתמשים סטטיסטיקות פעילות יומיות: כמות התאמות, הודעות, זמן שהיה, משתמשים פעילים ניהול תוכן פוגעני / דיווחים / שירות לקוחות חוויית משתמש ועיצוב RTL מלא ומדויק עיצוב מבוסס קווים עגולים, טיפוגרפיה קריאה, צבעוניות רגועה ואחידה אפקטים חלקים (סווייפים, פתיחת צ’אט, טעינת כרטיס) אנימציות עדינות (כמו לב קופץ בהתאמה, מעבר חלק במסכים) תמיכה מלאה במובייל ובטאבלטים (רספונסיביות מלאה) צד טכני Frontend: React Native / Flutter Backend: Firebase / Supabase / Node.js אחסון תמונות: Cloud Storage ניהול בסיס נתונים: Firestore / PostgreSQL Authentication: Firebase Auth + אימות דו-שלבי פרטיות ואבטחה כל צ'אט פרטי ומוצפן מקצה לקצה חסימת פרופילים והגדרות פרטיות לכל משתמש הגבלות על תוכן פוגעני והפעלת מערכת דיווח אוטומטית + ידנית מדיניות פרטיות ברורה
מערכת CRM
פרומפט מקיף ליצירת מערכת CRM מלאה בעברית, הכוללת ניהול לקוחות, לידים, משימות, תקשורת, ודוחות – עם ממשק מודרני ויכולת התאמה לכל עסק. מבוסס על מבנה מודולרי, תומך במובייל ודסקטופ, ומוכן לאינטגרציות עם מערכות חיצוניות.
בנה עבורי מערכת CRM שלמה, בעברית מלאה (RTL), עבור [שם העסק שלכם] – [פרטו על העסק שלכם]. המערכת צריכה לשרת את כלל הצרכים של ניהול לקוחות, לידים, תהליכי מכירה, תקשורת, משימות, הצעות מחיר, דוחות וניהול צוותים – דרך ממשק מרכזי אחד, חכם, מודרני ורספונסיבי. המערכת צריכה להיות מודולרית, כך שכל עסק יוכל להתאים אותה לצרכים הספציפיים שלו מבחינת גודל, תעשייה, מספר עובדים וסוג השירותים או המוצרים שהוא מציע. מבנה כללי שם העסק שלכם: [שם העסק שלכם] סוג העסק: [פרטו על העסק שלכם] מערכת מבוססת משתמשים, עם הרשאות לפי תפקיד (אדמין, נציג, מנהל). מבנה מודולרי – כל רכיב במערכת ניתן להפעיל/להשבית לפי הצורך. ממשק בעברית מלאה בלבד, עם RTL מלא לכל הרכיבים. התאמה מלאה לדסקטופ ומובייל (Responsive Design). מודולים עיקריים 1. ניהול לקוחות יצירת לקוחות חדשים ידנית או בייבוא מקובץ (CSV/Excel). פרופיל לקוח מלא: שם, טלפון, אימייל, סטטוס, מקור הפניה, כתובת, סוג. תיוג לקוחות לפי קטגוריות, סוגים, תגיות מותאמות אישית. היסטוריית פעולות: תיעוד שיחות, פגישות, מיילים, משימות, סטטוס לקוח. סטטוס לפי שלבים מוגדרים מראש (ליד > בטיפול > פעיל > סגור). 2. מעקב לידים ומכירות קליטת לידים ידנית או אוטומטית (API / טפסים / חיבור ל-Zapier). הקצאת לידים אוטומטית לפי עומס/תור/תפקיד. חיווי סטטוס: חדש / בבדיקה / הוצעה הצעת מחיר / הומר / נדחה. מעקב אחוזי המרה, סינון לפי מקור, תיעוד פעולות לכל ליד. 3. משימות ותזכורות יצירת משימות עם תיאור, לקוח מקושר, תאריך יעד, עדיפות. סטטוס: פתוחה / הושלמה / בוטלה. לוח משימות חודשי/שבועי/יומי. קישור לפגישות או פעולות מכירה. 4. ניהול עסקאות והצעות מחיר יצירת הצעות מחיר מותאמות, שמירה כתבניות. מעקב אחר סטטוס הצעה: טיוטה / נשלחה / נצפתה / התקבלה / נדחתה. שליחה אוטומטית של PDF ללקוח כולל תיעוד. שיוך עסקאות ללקוחות, סכומים, שלבי סגירה. 5. תקשורת עם לקוחות שליחת מיילים מתוך המערכת כולל תבניות מייל בעברית. תיעוד שיחות ידני או חיבור למערכת טלפוניה קיימת. שליחת SMS / WhatsApp דרך אינטגרציה. הצגת כל ההתקשרויות בפרופיל הלקוח. 6. דשבורד ודוחות דשבורד עם KPIs לבחירה: לידים חדשים, שיעור סגירה, משימות פתוחות, עסקאות פתוחות. דוחות לפי תאריכים, נציגים, סוגי לקוחות. יצוא לדוחות Excel או PDF. גרפים ותרשימים לחיזוי וצמיחה. עיצוב וחוויית משתמש עיצוב מודרני, נקי, בעברית מלאה. RTL מלא – כולל כיווניות, יישור, כפתורים, תפריטים. ממשק רספונסיבי למובייל ולטאבלט. תמיכה בהנגשת צבעים, טקסטים ברורים וכפתורים גדולים. יכולות טכניות נדרשות התחברות עם סיסמה, הרשאות לפי תפקיד. שמירת מידע בענן עם גיבוי יומי. אפשרות חיבור למערכות צד שלישי: חשבונית ירוקה, Google Calendar, Outlook וכו׳. תמיכה ב־API ציבורי. אפשרות יבוא/יצוא של לקוחות, עסקאות, לידים. טכנולוגיות מועדפות React / Vue / Next.js Tailwind CSS / Bootstrap Firebase / PostgreSQL פריסה בענן (Vercel / Netlify / Render) מטרה סופית: מערכת CRM מלאה, בעברית, עם ממשק נוח ונקי, תמיכה מלאה בלידים, לקוחות, מכירות ותקשורת, המאפשרת התאמה לכל עסק לפי מאפייניו, עם דגש על גמישות, שימושיות וביצועים.
אתר חנות עם אינטגרציה לShopify
תבנה לי אתר חנות של [פרטו על העסק שלכם] תכלול:
עמוד הבית: יכלול באנר ראשי רחב (hero) עם קריאה לפעולה (כגון “מבצעים היום” או “קנה עכשיו”) ומשובץ תמונה או סליידר של מוצרים מובילים. מתחת יופיעו קטגוריות עיקריות בולטות (למשל “ביגוד”, “אלקטרוניקה”, “רהיטים” וכו׳) עם תמונות ממותגות, ואזור של מוצרים מומלצים או “מבצעים בלעדיים”. העיצוב יהיה נקי ומודרני, עם טקסט בולט והיררכיה ויזואלית ברורה כדי למשוך את המשתמש. לדוגמה, מבנה בסיסי ב-HTML ייראה כך:
<!DOCTYPE html> <html lang="he" dir="rtl"> <head><meta charset="UTF-8"><title>עמוד הבית</title></head> <body> <header> <!-- נבנה כאן תפריט עליון עם קישורים לקטגוריות, חיפוש, אזור אישי ועגלת קניות --> <nav> <ul> <li><a href="/">בית</a></li> <li><a href="/collections">קטגוריות</a></li> <li><a href="/sales">מבצעים</a></li> <li><a href="/contact">צור קשר</a></li> </ul> <form action="/search" method="get"> <input type="text" name="q" placeholder="חיפוש..." /> <button type="submit">🔍</button> </form> </nav> <div class="account-links"> <a href="/account">החשבון שלי</a> <a href="/cart">עגלת הקניות</a> </div> </header> <main> <section class="hero"> <!-- באנר ראשי עם תמונה וקריאה לפעולה --> </section> <section class="categories"> <!-- רשת קטגוריות בולטות עם תמונות --> </section> <section class="featured-products"> <!-- מוצרים מומלצים או חדשים --> </section> <!-- המשך תוכן עמוד הבית... --> </main> <footer> <!-- פרטי יצירת קשר, קישורים למדיניות וכו' --> </footer> </body> </html>
עמודי קטגוריה ותתי-קטגוריה: לכל קטגוריה עיקרית יהיו עמודי קטגוריה מסודרים, ובהם כותרת ותיאור הקטגוריה, אפשרויות סינון בצד (לפי טווח מחיר, צבע, מותג, פופולריות וחדשנות) ותצוגת רשת (grid) של המוצרים במחלקה. לכל קטגוריה ראשית יהיו גם דפי תת-קטגוריה ב-RL לביצוע ניווט היררכי יעיל.
עמודי מוצר בודד: לכל מוצר יש דף ייעודי עם שם מוצר, תיאור מפורט, גלריית תמונות באיכות גבוהה (כולל אפשרות ZOOM או תצוגת 3D במידת הצורך), מחיר, מחיר מבצע אם קיים, רשימת אפשרויות (כגון צבע/מידה/כמות) ולחצן “הוסף לסל”. לדוגמה, תבנית Liquid לדף מוצר בשופיפיי יכולה להיראות כך:
{% comment %} דף מוצר ב-Shopify עם תבנית Liquid {% endcomment %}
<div class="product-page"> <h1>{{ product.title }}</h1> <img src="{{ product.featured_image | img_url: '1024x1024' }}" alt="{{ product.featured_image.alt }}" /> <p>{{ product.description }}</p> <p class="price">מחיר: {{ product.price | money }}</p> {% if product.compare_at_price > product.price %} <p class="discount">במבצע: {{ product.compare_at_price | money }}</p> {% endif %} <!-- אפשרויות בחירה (צבע, מידה וכו') --> {% for option in product.options_with_values %} <label>{{ option.name }}:</label> <select name="option-{{ option.position }}"> {% for value in option.values %} <option>{{ value }}</option> {% endfor %} </select> {% endfor %} <label>כמות:</label> <input type="number" name="quantity" min="1" value="1" /> <button type="submit">הוסף לסל</button> </div>
אזור אישי ללקוח: עמוד מאובטח שכולל: פרטי המשתמש (שם, אימייל), היסטוריית הזמנות (עם סטטוס כל הזמנה), ניהול כתובות (כתובת למשלוח), ניהול אמצעי תשלום (האם לשמור פרטי כרטיס אשראי), רשימת מוצרים מועדפים והתראות/הודעות מערכת. כל עמוד באיזור האישי מנוהל עם גישה מאובטחת (התחברות) ומאפשר עריכה של פרטים באופן עצמאי.
פאנל ניהול (Admin): מערכת ניהול פנימית או שופיפיי אדמין מלאה, עם הרשאות מנהל (Admin) שיוכל: לנהל מוצרים (צור/ערוך/מחק, לוגו ומדיה לכל מוצר), קטגוריות ותתי-קטגוריות, לקוחות (רשימות, פרטי לקוח), הזמנות (צפייה, מעקב סטטוס, עדכון הזמנות, הוצאה לפועל), קופונים וקודי הנחה (יצירה וניהול קמפיינים), מדדים ודו"חות (ניתוח מכירות, דוחות מלאי, מעקב המרות). אפשרות להוסיף אינטגרציה עם כלים אנליטיים (Google Analytics, Facebook Pixel) לצורך ניטור מלא של ביצועים.
תוכן החנות
מבנה קטגוריות מוצרים: יש ליצור קטגוריות כלליות (למשל “ביגוד גברים”, “אופנה נשים”, “אלקטרוניקה”, “אביזרים לבית” וכו׳) ותתי-קטגוריות מתאימות (למשל “חולצות”, “מכנסיים” תחת אופנה). הקטגוריות מוצגות באתר במשולב עם תמונות אייקוניות להכוונת המשתמש.
מוצרים דוגמאיים: לכל קטגוריה מייצרים מספר מוצרים לדוגמא עם שם ברור, תיאור תמציתי ומשכנע, מספר תמונות איכותיות, מחיר רגיל ומחיר מבצע (אם יש), וכפתורי בחירה (מצב כמו “בחירת צבע” או “בחירת מידה”). לדוגמה, מוצר “שמלה אביבית”: תיאור קצר על הבד והגזרה, תמונות מכל הזוויות, מחיר 279 ש״ח, במבצע 249 ש״ח, אפשרות בחירה בגדלים Small/Medium/Large.
אפשרויות סינון וחיפוש: על דפי קטגוריה להיות מצוידים בסינונים דינמיים בצד המסך. ניתן לסנן לפי מחיר (טווח עגלגל), לפי צבעים (סקירת צבעים קטנים), לפי מותגים, לפי פופולריות (לפי מכירות או דירוגים) ולפי חדשנות (המוצרים החדשים ביותר). בנוסף, יש להטמיע חיפוש פנימי חכם (autocomplete) שיודע להתמודד עם מילים בעברית ופועל לפי כניסות משתמש, כדי להוביל למוצרים הרלוונטיים במהירות. ניווט בעמודי הקטגוריות יתבצע גם לפי דירוג וכמות מוצרים בעמוד, עם יכולת מעבר בין עמודים (pagination).
פונקציונליות מתקדמת
התחברות והרשמה: למשתמשים יש אפשרות להירשם לחשבון חדש (שם משתמש, אימייל, סיסמה) ולהתחבר. יש אפשרות להתחבר דרך רשתות חברתיות (למשל OAuth דרך פייסבוק/גוגל) לתהליך חלק ומהיר. לאחר ההתחברות, המשתמשים יוכלו לצפות ולנהל את ההזמנות והפרטים האישיים שלהם. גישה למשימות כמו “הוספת מוצרים למועדפים” ושמירת עדיפויות מתאפשרת רק למשתמשים רשומים.
תמיכה מלאה בעברית (RTL): כל ממשק האתר בימין-לשמאל (RTL). הקוד יוסיף במידת הצורך התנייה ל-<html lang="he" dir="rtl"> או שימוש בספריות CSS התומכות ב-RTL, כדי לוודא שהשפה והפריטים מיושרים נכון. יש להקפיד לתרגם את כל הטקסטים (כולל הודעות שגיאה, כפתורי מערכת וכו׳) לעברית. מבנה ה-UI יתבסס על תרגום אמיתי (RTL אמיתי) ולא רק על היפוך קוסמטי של האתר. כך, למשל, תפריטים ומחוון עגלת קניות יהיו מוצגים במקומם הטבעי עבור קוראים בעברית (כפי שמודגם באיור). (תמונה ממחישה את החשיבות של RTL אמיתי: יישור תפריטים ונכסים מצד ימין במקום השמאלי.)
אינטגרציה לשופיפיי: האתר יפותח כך שניתן יהיה לחברו בקלות לפלטפורמת Shopify. זאת על ידי שימוש בתבניות Liquid (אם יוצרים Theme מותאם) או על ידי שימוש ב-Shopify Storefront API. ניתן למשל לבנות תבנית חנות ב-Shopify שמיישמת את הדפים האמורים, או אלטרנטיבית לבנות חנות Headless עם Next.js/React המקבלת נתונים מ-Shopify בממשק API. כל העסקאות והקטלוג ינוהלו ב-Backoffice של Shopify, וניתן יהיה לפרסם את האתר ב-Shopify AppStore. בפאנל הטכני, קידוד Liquid מאפשר למשל שימוש ב-{{ product.title }} ו-{{ product.price }} מתוך מערך הנתונים של Shopify, כש-CMS של Shopify משמש לניהול המוצרים.
תשלום מאובטח: תמיכה בכל אמצעי התשלום הנפוצים: כרטיסי אשראי (Visa, MasterCard) באמצעות שערי תשלום מוכרים (למשל Stripe, PayPlus), וכן תמיכה ב–PayPal. חשוב במיוחד בישראל – תמיכה באפליקציית הביט והעברות בנקאיות (כגון מערכות PayBox או Bit). נשתמש ב-SSL/TLS לפעולות קופה מאובטחות. תהליך התשלום יהיה בשלב אחד או קצוב למספר שלבים מינימלי (לדוגמה, בחירת כתובת – בחירת תשלום – סקירה ואישור) למניעת נטישת לקוח.
סל קניות וקופה: סל קניות דינמי (AJAX) – עם עדכון כמות והסרה ללא רענון עמוד. הכפתורים “הוסף/הסר” יתעדכנו מידית. דף הקופה יציג סיכום בהיר של הפריטים, המחיר הכולל, אפשרויות שילוח וכתובות, ומעבר ברור לשלב התשלום. מערכת הקופה תהיה מוגנת (שימוש בפרוטוקול HTTPS) ופרוססינג הביצוע יתבצע רק לאחר אימות פרטי לקוח. כל הפעולות בשלב הקופה (זיהוי משתמש, אימייל, שיטות משלוח, תשלום) יבוצעו בעברית ברורה וללא מושגים מבלבלים.
עיצוב
קונספט עיצובי מקצועי ומודרני: צבעוניות נקייה (לרוב שילוב שני צבעי בסיס עם צבעי הדגשה), טיפוגרפיה קריאה (מומלץ להשתמש בגופנים ישראליים/web-safe תומכי עברית), ואלמנטים גרפיים באיכות גבוהה. חשוב לשמור על אחידות מיתוגית לכל האתר. עיצוב יסתמך על תבניות CSS מודרניות (Bootstrap 5 עם RTL, Tailwind CSS, או ספריות UI מתקדמות) להבטחת מראה עדכני ואלגנטי. שימוש באנימציות קטנות (הגדרות עכבר על מוצר, טעינת תמונות בהדרגה) יוסיף יוקרתיות ללא פגיעה בביצועים.
ריספונסיביות מלאה: האתר מותאם באופן מלא לכל גדלי המסכים – מטלפונים חכמים ועד מחשבים שולחניים. בדיקות מראות שכ-70% מהרכישות בישראל נעשות במובייל, לכן חלק עיצובי נפרד לכל פורמט (המטה–מודל “Mobile-first”). במובייל התפריטים הופכים לתפריט המבורגר או תפריט גלילה תחתונה, והתמונות ממוזערות במידת הצורך על מנת לשמור על מהירות טעינה. כל התמונות באתר יטענו בגודל מתאים (למשל srcset) כדי לשפר ביצועים וגם שימוש ב-lazy-loading תמונות.
UX ואסתטיקה: האתר יוצר חווית משתמש נעימה: עיצוב נקי ומתוחכם ירתיע נטישה. נשתמש ברווחות מתאימות, כפתורים גדולים וקריאים, וחוויות אינטראקציה פשוטה (אנימציה על כפתורים, הרשאות שקופות). רכיבים כמו “הוספת לסל” ו”רכישה מהירה” (Quick Buy) יוצבו בקצוות גלים כדי להבטיח קליק מיידי. בנוסף, ניתן להוסיף מערכת דירוגים וביקורות למוצרים (עם כוכבים וציון ממוצע) כדי לשפר את האמון.
נגישות ונוחות
ממשק מלא בעברית: כל רכיב משתמש יוגדר בעברית, כולל טקסטים, כפתורים, תפריטים, הודעות מערכת וטפסים. אתר עם ממשק לא-מתורגם עלול לבלבל מבקרים. ממשק עברי מעלה את אמון הלקוחות ומפחית חסמים בתהליך הרכישה. ב-HTML נגדיר lang="he" וניתן <meta charset="UTF-8"> לתמיכה תקינה בעברית.
ניווט פשוט ואינטואיטיבי: תפריט עליון ברור עם קישורים עיקריים ושורת חיפוש מובלטת. תפריטים “נשלפים” (Dropdown) עבור תתי-קטגוריות במידת הצורך. שורת חיפוש חכמה בלובי מתחת לתפריט, המחפשת טקסט חופשי במוצרים בקליק אחד. בנוסף – תפריט צדדיות (Sidebar) בחנויות עם המון קטגוריות. ניווט לפי קטגוריות מציג “breadcrumb” (נתיב ניווט) בראש דפי קטגוריה ומוצר.
חיפוש חכם ושימוש בקטגוריות: מנוע חיפוש פנימי תומך העשרה של תוצאות (autocomplete) ומציע תיקונים אוטומטיים לשגיאות הקלדה בעברית. הקטגוריות חייבות להיות מוגדרות היטב כדי שהמבקר ימצא מוצר על פי הצורה שהוא מצפה (בדוגמת סופרמרקט – מוצרים דומים יחד). הפילטרים שהוזכרו לעיל מחזקים את הנגישות על ידי איפשור שימוש חכם באתר.
תאימות ונגישות ברמה בסיסית: גם אם האתר בעברית בלבד, יש לדאוג לצבעי ניגוד גבוהים (למשל טקסט כהה על רקע בהיר) לטובת קריאות, גודל גופן מינימלי מספיק, ואלמנטים שמזהים קורא מסך (תמונות עם תגיות ALT).
דרישות טכניות
קוד נקי ומוכן לשופיפיי: נשתמש ב-HTML5, CSS3 (כולל Flexbox/Grid), ו-JavaScript מודרני (ES6+). הקוד יועבר בספריית ניהול גרסאות (כגון Git) ויתועד. במידה ובוחרים להשתמש ב-Shopify Theme, הקוד יהיה בפורמט Liquid עם קבצי .liquid מוגדרים (templates, sections) המתחברים ל-Shopify JSON config. אפשרות נוספת היא שימוש ב-Next.js/React כ-Front-End עם fetch ל-Shopify API. בכל המקרים, נהיה זהירים בשימוש בספריות גדולות מיותרות כדי לא לפגוע במהירות הטעינה.
ביצועים: 2 שניות היא רף המטרה למהירות טעינת דף. לכן נבצע minification של CSS/JS, נשתמש ב-lazy load לתמונות, ונבדוק עדיפויות טעינה (לדוגמה – Bootstrap CDN או שימוש בפונטים מערכתיים). נוודא שבדיקות PageSpeed Insights מקבלות ציון גבוה, וניישם caching חכם.
פריסה ושרתי: הקוד יהיה מוכן לפריסה מיידית: HTML/CSS/JS ישמרו בקובצי אתר סטטיים. אפשר לספק קבצי ה-Theme (למשל .zip לתבנית Shopify). יש לוודא שהקוד פועל היטב על שרת (בהרצה מקומית) ושהגרסאות האחרונות של הדפדפן השונות נבדקות. בסוף הפיתוח האתר יהיה מוכן להעלאה לשרת (למשל GitHub Pages, Netlify, או התקנת Shopify) והפעלתו מיד – אין צורך בשינויים נוספים לפני העלאתו לאוויר.
שפות וטקסטים
עברית בלבד: כל הטקסטים על האתר – כותרות, כפתורים, טקסט תוכן, שגיאות מערכת – יהיו בעברית בלבד. אין לרשום מילה באנגלית בממשק המשתמש (למעט שמות מותגים/קודים אם חלים). יש לשים לב לאיות תקין ולדקדוק תקני של העברית בכל רכיב.
כיווניות ותצורת RTL: כפי שנאמר, כל הקבצים והתגיות מעוצבים ל-RTL. למשל, בסגנון CSS נכתוב body { direction: rtl; text-align: right; } כדי לתמוך ב-RTL. כל השמות ההיררכיים יהיו בקובצי שפה בעברית בלבד. במידה שמוסיפים אפליקציות או קוד צד ג’ (כגון פלאגין ביקורות), יש לוודא שהן תומכות RTL כדי שלא תופיע ממשק מעורב LTR.
אתר קטלוג מוצרים
אתר קטלוג מוצרים ברמה גבוהה מאוד, עבור מותג או עסק המציג מוצרים למכירה או לתצוגה. האתר לא כולל תשלום אונליין, אלא מיועד להציג מוצרים בצורה מרשימה, עם חוויית ניווט וחיפוש מתקדמת.
[ספרו כמה שיותר על העסק שלכם] - אתר קטלוג מוצרים אינטראקטיבי, מעוצב ומבוסס קטגוריות, מסננים וחיפוש
בנה אתר קטלוג מוצרים מקצועי ומלא עבור עסק המוכר או מציג מגוון מוצרים. מטרת האתר היא להציג מוצרים בצורה ויזואלית ומרשימה, עם יכולת ניווט וחיפוש נוחה, בלי חנות אונליין או סליקה — רק קטלוג שיווקי עשיר. האתר מיועד להיות גם תדמיתי וגם פרקטי לצפייה ונבנה בסטנדרט גבוה של עיצוב, נגישות וביצועים.
🧱 טכנולוגיה וסטייל:
השתמש ב-Tailwind CSS לסטיילינג גמיש, מודרני וקריא, כולל מערכת מרווחים עקבית (px, py, gap, space-x וכו').
השתמש ברכיבי UI מתוך shadcn/ui – בעיקר ל־Cards, Dialog, Sheet, Tabs, Input, Select.
השתמש ב־Framer Motion לאנימציות חלקות בין מעברים (גלריות, פתיחת תפריט מסננים וכו’).
כל עמוד יבנה כרכיב React מודולרי עם הקפדה על היררכיית קוד ברורה.
כתוב קוד בצורה שתומכת ב־Dark Mode (אם מופעל ברמת הדפדפן).
🗂️ מבנה עמודים מלא:
1. עמוד הבית /
Hero Section: כותרת מרכזית + תת-כותרת + כפתור CTA + רקע תמונה/סרטון
אזור הצגת קטגוריות ראשיות (3–6 כרטיסים מעוצבים כולל תמונה ואייקון)
אזור "מוצרים מומלצים": גריד של 4 מוצרים בולטים עם שם, תמונה, תיאור קצר וכפתור "לפרטים"
אזור וידאו תדמיתי מוטמע (YouTube או video player)
טסטימוניאל/סליידר חוות דעת של לקוחות
קריאה לפעולה "צור קשר" עם כפתור גלילה ישירה או section סגור
2. עמוד הקטלוג /products
חיפוש חופשי (Input טקסט) בראש הדף
סיידבר של מסננים: קטגוריה (Select/Checkbox), טווח מחירים (Slider), תגים (multi-select), דירוג (כוכבים), זמינות במלאי
אפשרויות מיון: לפי מחיר (עולה/יורד), שם, פופולריות, חדשנות
גריד של כרטיסי מוצרים:
תמונה גדולה באיכות טובה (16:9)
כותרת המוצר
תיאור קצר (3–4 שורות max)
תגי מצב ("חדש", "במלאי", "אזל")
כפתור "לפרטים נוספים"
Toggle בין גריד ל־List View
טעינה עצלה (lazy loading) של מוצרים בגלילה
3. עמוד מוצר יחיד /products/[slug]
כותרת
גלריית תמונות (כולל Zoom בתמונה)
סרטון הדגמה מוטמע (אם קיים)
תיאור מלא של המוצר (יכול להכיל bullet points, טבלאות מפרט)
מידע נוסף: אחריות, זמינות, אפשרות הזמנה טלפונית
כפתור "התעניינות" / "צור קשר" שגולל ישירות לטופס בתחתית העמוד
טופס יצירת קשר מקושר לשם המוצר הספציפי
4. עמוד קטגוריה /category/[slug]
שם ותיאור הקטגוריה
מוצרים שייכים לאותה קטגוריה בלבד (כולל סינון פנימי ומיון)
5. עמוד צור קשר /contact
טופס מובנה: שם, אימייל, טלפון, נושא, הודעה
אייקוני רשתות חברתיות
כתובת פיזית
מפת גוגל מוטמעת (במידת הצורך)
6. Footer קבוע בכל עמוד:
ניווט תחתון חוזר
Terms, Privacy
רשתות חברתיות
year + שם העסק
🛠️ חיבור ל-Supabase:
טבלה: products
id (UUID)
name (text)
slug (text, ייחודי)
description_short (text)
description_full (text)
price (numeric)
category_id (foreign key)
tags (array of text)
main_image_url (text)
gallery_image_urls (array)
video_url (text)
available (boolean)
created_at (timestamp)
טבלה: categories
id
name
slug
description
icon_url
טבלה: leads
name
email
phone
message
product_slug (nullable)
created_at
ודא שכל נתוני הקטלוג נטענים מ־Supabase עם טיפול בשגיאות / fallback
🎨 עיצוב:
צבע רקע לבן או אפור בהיר מאוד, עם צבע מוביל שקט (כחול/ירוק עדין)
שימוש ב־shadow/padding אחיד בין כל האלמנטים
פינות מעוגלות בינוניות (rounded-xl)
מעבר עכבר נעים על כפתורים וכרטיסים (hover:scale, hover:shadow)
📱 רספונסיביות:
גריד משתנה לפי גודל מסך
סיידבר מסננים הופך ל־Drawer או Sheet נפתח במובייל
כל כרטיס מותאם למגע ונגיעה בטוחה
טפסים עם תוויות ברורות (label, placeholder) ונגישים להקלדה במסך קטן
♿ נגישות:
alt לכל תמונה
שימוש ב־aria-labels לכפתורים
צבעים עומדים ב־WCAG AA לפחות
ניווט מקלדת תקין (tab, enter, esc)
Semantic HTML: header, nav, main, section, footer
🚨 טיפול בשגיאות:
אם אין מוצרים זמינים במסנן מסוים – הצג הודעה "לא נמצאו מוצרים בהתאמה"
אם יש שגיאה בטעינת מידע מ-Supabase – הצג רכיב fallback ברור עם כפתור רענון
טופס צור קשר עם הודעות אימות לשדות ריקים / אימייל לא תקין
❓ סיום:
אם יש שדות חסרים, שאל שאלה. אם יש הצעות UX טובות יותר – תציע.
ודא שהמערכת בנויה היטב, מהירה, עם קוד נקי, תצוגה נעימה, ויכולת להתרחב בהמשך.
בניית אתר תדמית מלא
פרומפט מקיף מאוד לבניית אתר תדמית מקצועי מרובה עמודים כולל דינמיקה של עמודי שירותים. מותאם במיוחד לשימוש ב‑Lovable AI עם דגשים על UX, אדריכלות קוד, נגישות, מבנה DB, ורספונסיביות.
[ספרו כמה שיותר על העסק שלכם] תבנה אתר תדמית מרובה עמודים לעסק/מותג בנה אתר תדמית מקצועי, מודרני ורספונסיבי עבור עסק/מותג שירותי. האתר יכיל דפים סטטיים + דינמיים: ✅ מבנה האתר: דף הבית (Home): כותרת חזקה + פסקת פתיחה שמסבירה מה החברה עושה אזור שירותים מקוצר (לדוגמה 3 כרטיסים עם תקציר + כפתור “קרא עוד”) אזור חוות דעת לקוחות אזור קריאה לפעולה (CTA): "השאירו פרטים" או "צרו קשר" אודות (About): סיפור החברה משימה וחזון תמונת הצוות / הערכים שלנו שירותים (Services): תצוגה של כל השירותים ככרטיסים או רשימה לכל שירות יוצג: אייקון/תמונה, כותרת, תיאור קצר, כפתור "למידע נוסף" עמוד שירות בודד (Service Page): כותרת השירות תיאור מפורט (כולל bullet points אם רלוונטי) מחיר / יתרונות / שאלות נפוצות כפתור הזמנה או יצירת קשר צור קשר (Contact): טופס יצירת קשר: שם, אימייל, נושא, הודעה אייקוני רשתות חברתיות מפה מוטמעת (אם תרצה, ניתן לחבר ל-API של Google Maps) כתובת, טלפון, אימייל החברה 🧱 טכנולוגיה / מבנה: השתמש ב־Tailwind CSS לעיצוב מודרני בנה רכיבים עם shadcn/ui לפי הצורך (כרטיסים, כפתורים, accordions, טפסים) צור רכיבי React מודולריים (Header, Footer, ServiceCard וכו') וייבא אותם לכל עמוד כלול routing מלא לפי עמודים: / /about /services /services/[service-id] /contact 🗂️ אם נדרש שימוש ב־Supabase: צור טבלה בשם services עם שדות: id, title, short_description, full_description, image_url, slug משוך את רשימת השירותים לדף /services כאשר לוחצים על שירות — נפתח עמוד דינמי לפי slug ודא שדף שירות נטען מה־DB בהתאם ל־URL (static routing עם fallback / error state אם אין שירות כזה) 🖌️ עיצוב (UI): צבעים: שילוב של צבע עיקרי + אפור בהיר + לבן. טיפוגרפיה: Inter או Rubik, עם היררכיה ברורה בין כותרות לפסקאות אייקונים: השתמש ב־lucide-react או אייקונים אחרים במידת הצורך shadow עדינה, פינות מעוגלות, ריווח נדיב 📱 רספונסיביות: מובייל פרסט: כל הרכיבים מתאימים למסכים קטנים תפריט ניווט הופך ל־hamburger כרטיסים מסתדרים בערימה במסך צר טופס צור קשר נגיש גם בנייד ♿ נגישות: alt לכל תמונה תיוג סמאנטי (section, main, footer) תמיכה בניווט מקלדת כפתורים עם aria-label ניגוד צבעים תקני 🚦 טיפול בשגיאות: אם משתמש הגיע ל־/services/[slug] עם כתובת לא תקפה – הצג הודעת שגיאה / redirect אם שדה חובה חסר בטופס צור קשר – הצג הודעה מתאימה אם לא נטענה רשימת שירותים – הצג placeholder או הודעה “אין שירותים זמינים כעת” 🛠️ בונוסים (לא חובה, אך מומלץ): אנימציות מעבר בין דפים (framer-motion) שלד טעינה (Skeleton) בטעינה מ־DB dark mode toggle תצוגת testimonials / slider אוטומטי כפתור “חזרה לראש הדף” 🧪 בדיקות: ודא שכל עמודי הניווט עובדים שכל רכיב נבנה כרכיב עצמאי וניתן לשימוש חוזר שכל השירותים ניתנים ללחיצה ונפתחים לעמוד תקני ❓ אם משהו לא ברור בדרישה — שאל שאלה לפני התחלת הבנייה. כלול הצעות לשיפור אם יש לך רעיונות לשדרוג החוויה או הפונקציונליות.
דף נחיתה שיווקי ורספונסיבי
דף נחיתה (Landing Page) ברמה הגבוהה ביותר, כולל כל הדרישות המקובלות בעולם מוצר, עיצוב, קוד, נגישות ורספונסיביות.
[ספרו כמה שיותר על העסק שלכם] - צור דף נחיתה שיווקי עבור מוצר דיגיטלי/אפליקציה (ניתן להתאים מאוחר יותר), ברמה מקצועית. כללים כלליים: השתמש ב־Tailwind CSS לעיצוב רספונסיבי ומודרני. בנה את הרכיבים בעזרת shadcn/ui לפי הצורך. הקפד על נגישות, מובייל-פרסט, והיררכיית מידע ברורה. כתוב את הקוד ברכיבי React מודולריים, שמוכנים לשימוש חוזר. השתמש בטקסטים ומבנה שמתאים למוצר טכנולוגי/סטארטאפ (אפשר לשים תוכן מדומה - Lorem Ipsum / placeholders). ✅ מבנה הדף: Hero Section (כותרת ראשית): כותרת גדולה וברורה פסקת משנה (subheading) שמסבירה את הערך כפתור קריאה לפעולה (CTA) בולט תצלום/איור/mockup בצד (אם במסך גדול) Social Proof: לוגואים של חברות מוכרות / חוות דעת משתמשים quote עם שם/תמונה של לקוח Features Section: רשימה של 3–4 יתרונות עיקריים של המוצר אייקון + כותרת + תיאור קצר לכל פיצ’ר CTA כפול: עוד קריאה לפעולה עם טופס הרשמה קצר / כפתור להתחלה FAQ Section: 4–6 שאלות נפוצות + תשובות קצרות נבנה כ־Accordion (שאלות נפתחות בלחיצה) Footer: קישורים (Terms, Privacy, Contact) כפתורי רשתות חברתיות 🧩 רכיבי עיצוב / הנחיות UI: גופנים: Sans-serif מודרני כמו Inter או Rubik צבעים: נייטרלים עם accent צבעוני רגוע (כחול/סגול/ירוק עדין) אפקטים: הצללה קלה, פינות מעוגלות, מרווחים נדיבים ריווח: padding פנימי אחיד לפי scale של Tailwind (px-4, py-6 וכו') 📱 רספונסיביות: במסך קטן: האלמנטים מסתדרים בערימה (stacked), טקסט גדול יותר, תפריט הופך ל־hamburger במסך גדול: מבנה רשת דו-עמודי (Grid או Flex), תמונה בצד, טופס ליד טקסט ♿ נגישות: תגיות HTML סמאנטיות (section, main, nav, footer) alt לכל תמונה ניגוד צבעים תקני (WCAG AA לפחות) כפתורים עם aria-label או טקסט ברור תמיכה בניווט מקלדת 💡 בונוס (לא חובה אבל מומלץ): אנימציית מעבר חלקה (transition, hover) לכפתורים עוגני גלילה (scroll-to) בין חלקי הדף תמיכה ב־dark mode מצב טעינה/שלד (skeleton) לפני טעינה של תוכן דינמי
הקמת פלטפורמת מסחר אלקטרוני מלאה
הפרופמט האולטימטיבי ליצירת אתר חנות בעזרת Lovable
צור אפליקציה למסחר אלקטרוני המאפשרת למשתמשים לצפות במוצרים, לנהל סל קניות ולהשלים רכישה. UI/UX: עיצוב מודרני ורספונסיבי בעזרת Tailwind CSS ושימוש ברכיבי shadcn/ui. כלול דף הבית, עמוד קטגוריות, דף פרטי מוצר עם תמונות, עגלת קניות, עמוד תשלום ודף אישור הזמנה. בסיס נתונים: בנה ב-Supabase מסד נתונים עם טבלאות Users (שדות: id, email, password, role), Products (id, name, description, price, stock), Orders (id, user_id, total, status ועוד) ו-OrderItems. יישם CRUD מלא לניהול המוצרים וההזמנות – יצירת מוצרים חדשים, עדכון מלאי ומחיקת פריטים. הרשאות ואימות: יישם מערכת הרשאות כך שרק מנהלי מערכת יוכלו ליצור ולערוך מוצרים ורשומות מנייה. משתמשים רגילים יוכלו לצפות במוצרים ולהוסיף לסל. הטמע תהליך אימות משתמשים (Authentication) של Supabase כדי לאמת כניסה והרשמה בטוחה. תשלום: חבר את [חברת הסליקה] למערכת התשלומים. ודא שתהליך הרכישה משייך את הלקוח להזמנה בתשלום. השתמש ב-Webhooks של [חברת הסליקה] כדי לעדכן אוטומטית את סטטוס ההזמנה ב-Supabase (לדוגמה: כאשר התשלום מאושר, עדכן את שדה status להזמנה המתאימה). דשבורד למנהלים: צור לוח בקרה למנהלים הכולל גרפים וסטטיסטיקות (כגון סך הכנסות ומספר הזמנות יומיות) וכן טבלה עם אפשרות חיפוש וסינון (למשל לפי תאריך הזמנה, סטטוס או קטגוריית מוצר). ודא שהדשבורד מאפשר לנהל מלאי ולעדכן מוצרים ולהוסיף קטגוריות. טיפול בשגיאות: הוסף טיפול בשגיאות כמו מוצר שאינו במלאי, שגיאת תשלום בכרטיס אשראי או ניסיון גישה לא מורשה. הצג הודעות ברורות למשתמשים במידה ומשהו נכשל (למשל: “המוצר אזל מהמדף” או “תשלום נכשל”). רספונסיביות: ודא שכל הממשקים מותאמים למובייל ולטאבלט על ידי עיצוב רספונסיבי. לדוגמה, תפריט ניווט צדדיו יסתתרים במסכים קטנים וישמשו תפריט המבורגר. אם משהו בדרישות לא ברור, שאל שאלות הבהרה.
נגישות בסיסית (Accessibility)
יש לשמור על סטנדרטים של נגישות בכל רכיבי ה‑UI: צבעים מתאימים לניגודיות, תיאורי ALTs, תגיות ARIA וניווט באמצעות מקלדת
Ensure that all UI components comply with accessibility standards: use semantic HTML, ARIA labels where needed, sufficient color contrast, and keyboard navigation support.
שימוש בקבצי ידע (Knowledge Base)
לפני ביצוע שינויים מהותיים, כדאי לבקש לסכם ולבדוק את מסד הידע של הפרויקט.
Before proceeding, review the project knowledge base (README) and confirm your understanding of the requirements and architecture.
שינויים קריטיים בזהירות
כשמתכננים שינוי בסעיף רגיש, כדאי להזהיר את המערכת מראש
The next change is in a critical part of the app, so proceed with utmost caution. Carefully review all related code and dependencies before modifying. Do not alter unrelated components.
אופטימיזציית ביצועים
אם האפליקציה איטית, יש פקודה מיוחדת לניתוח צווארי בקבוק.
Our app is functional but seems sluggish. Please analyze the project for performance bottlenecks and suggest optimizations (e.g., caching, memoization).
המרה מדוייקת מעיצוב לקוד
הפרומפט האולטימטיבי למעצבים ומפתחי Front-end. הוא מנחה את ה-AI לנתח תמונה בצורה עמוקה ולשחזר אותה אחד-לאחד תוך הקפדה על ריווחים, צבעים, טיפוגרפיה ורספונסיביות, ללא "קיצורי דרך" או שינויי עיצוב.
Build a section that matches the attached image pixel-perfect, one-to-one. Your goal is to recreate this section exactly as it appears in the image, including: Layout & Structure Same number of columns and rows Same spacing, padding, margins, and alignment Same hierarchy of elements (headlines, text, buttons, icons, images) Typography Match font sizes, line heights, font weights, letter spacing Keep heading levels identical Preserve text alignment (left / center / right) Colors & Styling Extract and match exact colors from the image Same background colors / gradients Same border radius, strokes, shadows, and outlines Components Buttons: same size, radius, hover feel, and positioning Cards / boxes: same shape, spacing, and layout Icons: same style and approximate size Responsiveness Desktop first Then create mobile version that visually matches the design intent Maintain proportions and hierarchy Technical Requirements Use clean semantic HTML Use modern CSS (Flexbox or Grid) No external UI libraries unless necessary Do NOT simplify Do NOT redesign Do NOT change layout Do NOT “approximate” Critical Rule If any detail is unclear from the image — zoom in, analyze carefully, and infer conservatively. Accuracy is more important than speed. Output Return only the code needed to render this section.
חיבור סטרייפ
פרומפט מפורט להגדרת תשתית תשלומים מלאה בסביבת בדיקה. הוא מכסה הגדרת מוצרים, מודל תמחור (חד-פעמי או מנוי), חיבור Webhooks, עיצוב טופס התשלום וניהול דפי הצלחה/ביטול. כלי חובה למי שרוצה להטמיע סליקה בלי לשכוח אף פרט טכני.
Initiate a Stripe connection in test mode using the configuration detailed below: Utilize the specified product and pricing details: Product IDs are [Your Product IDs], with a pricing model of [One-time or Subscription]. Set the webhook endpoint to [Your Webhook Endpoint]. Style the frontend payment form as follows: [Describe desired payment form or provide an example]. Upon successful payment, redirect users to [Success Redirect URL], and for canceled payments, redirect them to [Cancel Redirect URL]. Please refrain from altering any code, and ensure that I have included all necessary information to effectively start with Stripe.
התאמת רספונסיביות לפי תקן Tailwind & ShadCN
פרומפט המיועד להבטחת קוד נקי ותקני בשיטת Mobile-First. הוא מנחה את ה-AI להשתמש בנקודות שבירה (breakpoints) סטנדרטיות בלבד, תוך יישום עקרונות UX מודרניים להתאמת רכיבים, כדי למנוע "קוד מלוכלך" והגדרות מותאמות אישית מיותרות.
דא שכל העיצובים רספונסיביים לחלוטין בכל נקודות השבירה (breakpoints), תוך אימוץ גישת Mobile-First. יישם עקרונות UI/UX מודרניים כדי להגדיר כיצד רכיבים צריכים להתאים את עצמם לגדלי מסך שונים, תוך שימוש ב-breakpoints הסטנדרטיים של ShadCN ו-Tailwind. הימנע משימוש ב-breakpoints מותאמים אישית אלא אם כן נדרש לכך במפורש.
אופטימיזציית מובייל
פרומפט מקיף לשדרוג חוויית המשתמש במסכים קטנים. הוא מנחה את ה-AI לבצע ניתוח מעמיק של ריספונסיביות, תכנון תוכנית עבודה ובדיקות יסודיות, תוך שמירה קפדנית על העיצוב הקיים ומניעת טעויות בקוד.
שפר את חוויית המובייל של האפליקציה תוך שמירה מלאה על העיצוב והפונקציונליות הקיימים. בחן את הפריסה והריספונסיביות כדי לזהות התאמות הכרחיות למסכים קטנים ולשימוש במגע. בנה תוכנית עבודה מקיפה לפני ביצוע כל שינוי בקוד, ולאחר מכן בצע בדיקות יסודיות במגוון מכשירים כדי לוודא שהאפליקציה פועלת כמצופה. אם יש חוסר ודאות, עצור לרגע, חשוב לעומק והצע פתרונות אפשריים לפני שמבצעים שינוי.
מתיחת פנים עיצובית (Visual-Only Refactor)
הפרומפט האידיאלי לשדרוג הנראות מבלי לגעת ב"מנוע". הוא מנחה את ה-AI לבצע שיפורים ויזואליים בלבד, תוך הגנה קפדנית על הלוגיקה, ניהול ה-State וחיבורי ה-API הקיימים, כולל דרישה לעצירה במקרה של ספק.
[הפרומפט שלכם] - בצע שיפורים ויזואליים בלבד, תוך הקפדה מלאה שהפונקציונליות והלוגיקה של המערכת יישארו ללא שינוי. יש להבין לעומק כיצד ממשק המשתמש הקיים מתקשר עם האפליקציה, ולוודא שמנגנוני הלוגיקה, ניהול ה־state וה־API נשארים זהים. יש לבצע בדיקות מקיפות כדי לאמת שהמערכת פועלת בדיוק כפי שפעלה לפני השינויים. במקרה של חוסר ודאות לגבי השפעה אפשרית כלשהי — יש לעצור ולא לבצע שינוי.