Mes meilleurs prompts pour un bon design (Gemini 3 / Opus 4.5)

Prompt Kinetic typography design :

La version basique qui marche une fois sur 2 : (plus créatif)

Create an impresive Kinetic Typography Design to show your capacities

It needs to be really impresive and give a waw effect

Take inspiration from these websites :

https://wodniack.dev/

https://breadzine.com/

Use some blur and grainy effects but not too much (don’t make it like it’s bugged)

Moins créatif mais plus fiable :

You are a senior creative developer and motion designer.

Create a portfolio home page focused on kinetic typography with a strong wow effect and a lot of fluid text animations. The design should feel technical but playful and very readable.

Goals:
- Make the typography the hero of the page
- Use motion and rhythm to tell a story about the creator
- Keep content simple and clear while the motion feels rich

Visual style:
- Dark background (almost black or deep blue)
- High contrast text, mostly white or light gray
- Use one main display font with a strong personality and one monospace font for details
- Subtle glitch or code inspired devices (binary lines, small grids, small labels)
- Minimal iconography, everything driven by text and spacing

Layout:
- Full screen hero with center or left aligned big text blocks
- Hero text split into multiple lines where certain words can be animated independently
- Sticky minimal navigation at the top with just "About", "Work", "Contact"
- Below hero, sections:
  1. Short "About" in 2 or 3 lines
  2. "Selected work" list, each project is a row with project name, role, year
  3. "Awards or clients" in a compact grid
  4. Simple "Contact" block at the bottom

Kinetic typography and animations:
- Use timeline based animations for the hero text: words sliding in, scaling up, masking in from left or right
- Use line by line reveals, for example each line slides up with a slight delay
- On scroll, animate text blocks with:
  - Tracking and letter spacing changes
  - Weight changes (for variable fonts) as user scrolls past sections
  - Words that fade out while new words fade in at the same position
- On hover over project rows, animate:
  - Slight horizontal slide
  - Change in font weight or letter spacing for the project title
- Micro interactions like:
  - A "Change contrast" toggle that inverts colors or adjusts contrast
  - Small labels that slide in next to the cursor when hovering certain elements

Implementation details if you output code:
- Use semantic typography hierarchy (h1, h2, p)
- Use CSS transforms and opacity, avoid heavy blur
- For React, use Framer Motion or GSAP for complex timelines
- Make sure animations are performant and still work on mobile and low power devices

Ensure the project is fully configured to run immediately. Update vite.config.ts, package.json and any other configuration files required to make the styling (Tailwind) and animations work. Do not assume the environment is pre-configured.

Prompt soft pop neobrutalist design :
(Opus 4.5 & Gemini 3)

La version basique qui marche une fois sur 2 : (plus créatif)

Create an impresive soft pop neobrutalist Design to show your capacities

It needs to be really impresive and give a waw effect

Moins créatif mais plus fiable :

You are a senior creative web designer and front end developer.

Design a single page personal website for a [role, for example "indie product builder and creative developer"] in a Neo-brutalism soft pop style with a strong wow effect and playful animations.

Goals:
- Immediately show personality, confidence and playfulness
- Make the layout feel bold, simple and easy to scan
- Feel modern, accessible and fast, not like a heavy agency site

Visual style:
- Neo-brutalism soft pop
- Flat colors, very bright and saturated (for example electric blue, pastel yellow, coral, mint)
- Large rounded rectangles, thick strokes and chunky UI elements
- Strong black outlines and hard drop shadows that look like cut out cards
- Big modern grotesk typography for headings, slightly friendlier sans serif for body
- Minimal gradients, but you can use soft inner shadows or noise to give a soft pop toy feeling
- Use a lot of white or off white negative space so the layout breathes

Layout:
- Sticky navigation with logo on the left and 3 to 4 simple links on the right
- Hero section with huge headline, short subcopy, one main CTA and one secondary CTA
- Side by side layout in the hero: text on one side, a playful illustration or card stack on the other
- Sections after the hero:
  1. "Selected work" presented as big cards with bold titles and short descriptions
  2. "What I do" with 3 or 4 feature cards
  3. "About me" with a small portrait or avatar and a text column
  4. "Contact" with a simple form or direct email link
- On desktop use a multi column layout with offset cards. On mobile keep one column and keep it very readable

Animations and interactions:
- Use smooth page load animations with a slight overshoot (GSAP or Framer Motion style)
- Cards slide in from slightly different directions with staggered timing
- Hover interactions:
  - Cards lift up with a small shadow change and a tiny rotation
  - Buttons have a micro bounce effect on hover and click
- Floating shapes in the background that move slowly on mouse move (parallax effect)
- Smooth scroll between sections when clicking navigation links
- Add a subtle cursor follower, for example a small circle that grows when hovering interactive elements

Implementation details if you output code:
- Use semantic HTML and accessible colors and contrasts
- Use responsive layout, mobile first, then scale up
- Prefer CSS grid and flexbox for layout
- If you use React, use Tailwind CSS utility classes and Framer Motion for animation
- Keep the code clean, organized and easy to modify

Ensure the project is fully configured to run immediately. Update vite.config.ts, package.json and any other configuration files required to make the styling (Tailwind) and animations work. Do not assume the environment is pre-configured.

Prompt Immersive 3D elements design :

Create an impresive “3D immersive elements Design” to show your capacities

It needs to be really impresive and give a waw effect

Moins créatif mais plus fiable :

You are a senior product designer and creative developer.

Design a portfolio home page that uses immersive 3D elements and subtle cinematic motion for a strong wow effect. The focus is on one or two hero 3D scenes that feel high end and controlled, not like a game.

You are allowed to use WebGL, three.js or React Three Fiber for the 3D parts if you output code.

Goals:
- Immediately immerse the user in a 3D scene that reflects the designer’s style
- Keep the interface minimal so the 3D element stands out
- Make the page feel precise, confident and premium

Visual style:
- Clean and minimal layout with a lot of negative space
- Neutral base colors (off white, light gray, soft beige or charcoal)
- Strong accent color for highlights and CTAs (for example a vivid orange or blue)
- Precise grid, thin separators, fine typographic details
- Editorial feeling with big headings and small captions

3D elements:
- Use one main 3D object in the hero, for example:
  - A rotating abstract sculpture
  - A floating panel of layered UI cards
  - A stylized 3D logo or monogram
- The 3D object should react to:
  - Mouse movement with a subtle parallax or orbit
  - Scroll with small position or depth changes
- Use depth of field, soft lighting and reflections to make it feel premium

Layout:
- Full height hero with the 3D scene on one side and text on the other
- Headline, short descriptive paragraph, 1 main CTA, 1 secondary CTA
- Below hero, sections:
  1. "Services" in a 2 or 3 column layout
  2. "Selected projects" in big cards with large visuals
  3. "Process" as a simple step by step timeline
  4. "Contact" with a short paragraph and a form or email

Animations and interactions:
- Smooth entry animation where the hero 3D scene fades in and moves slightly from depth
- Scroll based animations:
  - Slight parallax between text and images
  - Cards sliding in with a clean, minimal easing
- Hover interactions:
  - Project cards tilt slightly and increase highlight
  - Buttons have a subtle gradient or light sweep on hover
- Micro interactions such as:
  - A minimal progress indicator that shows scroll progress
  - Section titles that animate in from the side with a soft overshoot

Implementation details if you output code:
- Use three.js or React Three Fiber for the 3D scene, keep geometry simple and optimized
- Use requestAnimationFrame and pointer events for camera or object controls
- Keep the rest of the page in classic HTML or React components
- Make sure it degrades gracefully on mobile and older devices, for example by showing a static image if WebGL is not available

Ensure the project is fully configured to run immediately. Update vite.config.ts, package.json and any other configuration files required to make the styling (Tailwind) and animations work. Do not assume the environment is pre-configured.

Prompt Bento grids design : (Gemini 3)

Create an impresive and modern (2024 vibe) “bento grids Design” to show your capacities

It needs to be really impresive and give a waw effect

Add animations and be creative

Make it work at the end

Moins créatif mais plus fiable :

You are a senior product designer and front end developer.

Design a modern marketing site with a Bento grid layout and a strong wow effect, full of smooth card animations. The page should feel like a playful dashboard that showcases multiple features at once.

Goals:
- Present many features in a single Bento grid without feeling crowded
- Make each tile feel like a small interactive story
- Keep everything very usable and clear

Visual style:
- Bento grid cards in different sizes, with soft rounded corners
- Soft gradients or duotone backgrounds for cards
- Light overall background with clear separation between cards and page background
- Modern sans serif font, medium weight, with big headings inside cards
- Use 2 to 3 accent colors and keep the rest neutral

Layout:
- Hero section with:
  - A short, strong headline on the left
  - A small description, main CTA and secondary CTA
  - On the right, a large Bento grid composed of 4 to 6 cards of different sizes
- Each card represents one aspect: analytics, automation, testimonials, integrations, etc.
- Below hero:
  1. Full width "Value proposition" section with one big statement
  2. Extended Bento sections for features, maybe 2 or 3 rows
  3. Social proof (logos, testimonials)
  4. Pricing preview or call to action

Bento grid behavior and animations:
- On initial load, cards animate in with a staggered grid reveal (scale and opacity)
- Cards have micro parallax on hover and a slight tilt effect
- Each card has its own mini interaction:
  - Charts that animate values
  - Icons that slide in from edges
  - Text that reveals line by line
- On scroll, the grid can:
  - Slightly shift vertically to create depth
  - Pin one row while the rest scrolls, if appropriate
- Make transitions between card states smooth and satisfying

Implementation details if you output code:
- Use CSS grid for the Bento layout with named areas
- Define responsive breakpoints where the grid collapses into a simple stack on mobile
- Use transform and opacity based animations to keep performance high
- If using React, combine CSS grid with Framer Motion or GSAP for staggered animations

Ensure the project is fully configured to run immediately. Update vite.config.ts, package.json and any other configuration files required to make the styling (Tailwind) and animations work. Do not assume the environment is pre-configured.