Hervé Studio

Six prompts, in build order. Each one describes the visual language, not the original site.

• Main build prompt+−

  Copy

  Create an art-directed creative-studio homepage led by a strict split-screen hero: a calm, nearly white editorial field on the left and a constantly changing project-reel stage on the right.
  
  Use the supplied 1920×968 desktop capture as the overall wide reference stage. Do not treat that overall page ratio as the required aspect ratio for every media asset inside the reel.
  
  Make the left panel roughly 59% of viewport width and the right project stage roughly 41%, both extending the full viewport height.
  
  Set the background to #FFFFFF and use #050505 for almost all interface text.
  
  Place your own compact wordmark around 24px from the top-left. Put a small pale-gray #F3F3F3 menu pill near the upper centre-left, and a yellow #FFD817 contact pill plus an outlined language control toward the upper-right.
  
  Controls should remain visually quiet:
  - approximately 40px high;
  - clean grotesk around 14px;
  - restrained padding;
  - no strong shadows;
  - no decorative gradients.
  
  Center the left editorial content within a narrow text column beginning around 10% from the viewport’s left edge.
  
  Use a self-authored two-line statement in a high-contrast editorial serif. At wide desktop size, target approximately 118–128px, around 0.95 line-height, normal weight and tight optical spacing.
  
  Keep the headline visually dominant but not centered across the entire left panel. Align it deliberately within the editorial column.
  
  Place a short sans-serif explanatory paragraph below it, constrained to roughly 350–400px wide. Keep the body around 16px with compact but readable leading.
  
  Near the lower-left edge, show a small city/location label and a live or local-time-style detail in understated serif or grotesk text.
  
  Anchor a warm-ivory #F4EFE9 conversation CTA tile near the lower-right area of the editorial panel. Keep it square or nearly square rather than card-like.
  
  Inside the CTA tile include:
  - a small serif eyebrow near the top;
  - a sans-serif action label near the bottom;
  - a thin directional arrow.
  
  Keep the tile corners square and avoid shadow.
  
  The right column is the signature.
  
  Build it as a full-height, overflow-hidden media viewport occupying roughly 41% of the desktop viewport width.
  
  This reel is intentionally a tall crop, not a 1.98:1 content frame.
  
  Prepare each project scene with enough source resolution and safe visual area to survive aggressive vertical cropping.
  
  Use approximately 3–5 original art-directed scenes such as:
  - a fashion/editorial collage;
  - a street-poster or campaign-display scene;
  - a close-cropped lifestyle or portrait campaign;
  - an architectural or product-focused scene;
  - an experimental graphic or digital composition.
  
  Use original, licensed or generated material only.
  
  Do not reproduce real client names, source campaigns, logos or identifiable artwork.
  
  Allow portraits, type fragments and project elements to leave the right and bottom edges intentionally.
  
  Each scene may include restrained internal overlays such as:
  - translucent UI fragments;
  - oversized faint typography;
  - small project labels;
  - framed poster treatments;
  - subtle graphic borders.
  
  Do not turn the entire page into a dashboard.
  
  Transition between project scenes with slow crossfades and mild position or scale drift rather than hard carousel slides.
  
  The editorial left side should remain stable while the project reel changes.
  
  Use normal DOM and media elements. A practical reconstruction can use:
  - layered `<figure>` elements;
  - responsive images;
  - short muted video clips;
  - GSAP-driven opacity and transform transitions.
  
  Canvas and WebGL are unnecessary.
  
  Provide a poster for every video scene.
  
  Use semantic navigation, headings, links and buttons. Keep focus visible and keyboard order logical.
  
  Respect reduced-motion preferences by showing a static lead scene or manual project controls instead of auto-advancing motion.
  
  At tablet widths, retain the editorial/media contrast but rebalance the columns.
  
  On phones, replace the desktop split with a vertical composition:
  1. navigation;
  2. editorial manifesto;
  3. CTA;
  4. shorter wide project reel;
  5. metadata.
  
  Do not add:
  - feature grids;
  - testimonial carousels;
  - metric counters;
  - glassmorphism;
  - gradients;
  - generic agency sections;
  - excessive rounded cards;
  - loud shadows.
  
  The final result should feel like a quiet gallery placard placed beside a constantly changing exhibition window.

• Build frontend
• Generate assets
• Add animations
• Responsive polish
• Final visual polish

These prompts describe a visual language: composition, rhythm, type scale and motion. Build with your own branding, copy, logos and imagery — the design and content of Hervé Studio belong to their authors.

Agent

Claude Code

Model

Claude Opus 5The build is a precise editorial layout with a timed media crossfade and small interaction details, all well suited to sustained CSS and component work without 3D rendering.

The visual system, split composition, and observed media transitions reproduce reliably with current frontend tools; the main remaining challenge is sourcing equally varied, polished art-directed project imagery.