WEBSITE

Carrousel du studio vison.studios relayé par dailywebdesign : les tendances web que les marques devraient adopter, chacune illustrée sur une même maquette produit (écouteurs). Au programme notamment le scroll storytelling, où le contenu se dévoile au fil du défilement, et la navigation flottante, des menus détachés du bord qui suivent la lecture. Bonne planche pour cadrer une refonte de site ou briefer un studio web.

Concept de site du designer Daniel Snows autour d'un temple antique sous les cerisiers : le titre THEMYSCIRA passe devant et derrière les colonnes, avec des transitions de profondeur entre les plans. Outils annoncés : Figma pour l'interface et les animations, Google Flow pour générer la vidéo, CapCut pour la post-production. Typographies Bentoga et Rokkit. Exemple de site héros qui mêle vidéo générée et typographie en couches.

Daniel Snows présente une série de prompts de héros de site (BlueBird, Primal, Secret, Metaverse...) : chaque fiche décrit l'ambiance, la vidéo plein écran qui démarre au scroll, la typographie et l'introduction automatique, à coller dans Claude, ChatGPT ou Codex pour obtenir la page. Les prompts complets sont réservés à sa bibliothèque payante (Figma for Motion) : seuls les débuts sont visibles sur le post. Intéressant surtout pour la structure d'un bon prompt de landing page.

Le designer UI bachynskyi_ui filme une sélection de sites web remarquables sur son écran : typographies 3D gonflées, illustrations peintes en plein écran, mises en page expérimentales (dont l'édition hiver 2026 de Shopify Editions). Une banque d'inspiration pour la direction artistique web, les liens sont envoyés en commentant « Wow ».

Méthode en quatre étapes pour générer un site soigné avec Claude Code : installer Claude Code depuis le terminal, ajouter Framer Motion pour les animations, faire installer la skill UI UX Pro Max par Claude Code, puis piocher des composants sur 21st.dev et les coller dans Claude Code. Le guide complet est envoyé en commentant « SITE ».

Quinze astuces pour sortir Claude Design de ses réglages par défaut (même police, icônes bancales, textes creux) : partir d'un design system extrait d'une capture, s'appuyer sur les 2 000 styles de vraies marques de Refero, puiser dans les icônes animées gratuites de Lordicon et utiliser les réglages à la souris qui ne consomment pas de messages. Chaque hack est livré avec son prompt.

Rappel utile : un site ou une appli générés par IA (« vibecodés ») peuvent valoir une amende en France ou en Europe s'ils oublient les obligations légales. Le créateur propose une checklist à confier à Claude ou ChatGPT : politique de confidentialité, conditions d'utilisation, politique et consentement cookies, page de remboursement, collecte de données minimale, accessibilité (contrastes, textes alternatifs).

Présentation d'une bibliothèque à installer dans Claude Code pour générer des sites plus soignés : 50 styles d'interface, 97 palettes de couleurs, 57 polices et un serveur MCP qui ajoute automatiquement animations, glassmorphism et dégradés. Les liens sont envoyés en commentaire.

Viktor Oddy montre une page d'accueil de marque de mode (« Orla ») générée d'un coup par GPT-6 Astra à partir d'une seule image de référence, avec typographie éditoriale et photo plein cadre. Son message : on sort de la phase des sites IA génériques. Le prompt détaillé fait partie de sa bibliothèque payante et n'est pas reproduit ici.

Série de 5 prompts « rôle + tâche » à copier-coller dans Claude pour produire, étape par étape, la spécification complète d'un site avec Figma Make : architecture de l'information, système visuel, copywriting de conversion, logique d'interaction frontend, puis un « traducteur » qui reformate n'importe quelle spec en prompt optimisé Figma Make. Bon kit méthodo réutilisable pour cadrer des briefs de site avec l'IA avant la maquette.

Roundup d'outils UI/UX

Reel de présentation rapide d'outils pour designers UI/UX — sujet mail trompeur (« Anim site Claude ») mais contenu réel = compilation d'outils, pas une démo Claude.

Guide pas à pas : prototype dans Claude Design à partir d'un prompt trouvé sur MotionSites, génération d'images par ChatGPT Image 2.0 animées en vidéo via Runway, intégration des liens vidéo dans le prompt Claude Design, raffinement par prompts successifs, puis export en HTML autonome ou passage à Claude Code. Cinq outils gratuits (ou avec crédits gratuits) combinés pour un site 3D « cinématique » sans budget.

Reel présentant une astuce pour produire des landing pages avec effets 3D directement à partir de Figma.

Reel présentant une technique de création de landing page combinant Google Flow, Claude Code et un skill dédié.

Un créateur documente en direct la construction de son propre site portfolio avec Claude Code : recherche et intégration de la librairie d'animation framer-motion (React/TypeScript) pour animer les transitions, puis mise en avant du résultat final avec une landing page sombre « Design is Everything — Unleashing creativity through bold visuals, seamless [transitions] and limitless possibilities », statut « Available for New Projects » et bouton « Let's Go ». Exemple concret et modeste de « build in public » : Claude Code utilisé non pas pour un usage no-code mais comme copilote de développement classique (choix de librairie, intégration), sur un projet vitrine personnel plutôt qu'un produit commercial.

Tutoriel en carrousel qui empile 4 briques techniques sur Claude Code pour prétendre livrer des sites « à 10 000 $ » : (1) installer Claude Code (`npm install -g @anthropic-ai/claude-code`), (2) ajouter Framer Motion pour des animations et transitions fluides, (3) installer le plugin communautaire « UI/UX Pro Max Skill » qui donne à Claude une base de typographie/espacement/théorie des couleurs, et (4) connecter la bibliothèque de composants premium 21st.dev via un serveur MCP (`claude mcp add magic --npx -y @21st-dev/magic@latest`). Le dernier slide révèle le vrai produit d'appel : un raccourci en une seule commande (`claude /setup-website-builder`) qui enchaîne automatiquement les 4 étapes. Bon instantané de la tendance actuelle à empiler plugins et serveurs MCP autour de Claude Code pour construire des "stacks" de développement web agentiques clé en main, revendues ensuite comme formations ou templates.

Guide montrant comment générer un site web complet en seulement 5 prompts en combinant Claude et Figma Make.

Capture d'une vidéo YouTube démontrant « RUBRIC Console », un agent IA (« The Command Centre for AI Agents ») qui automatise la création de sites vitrines cinématiques en 4 étapes visibles dans l'interface : Brand Analysis → Scene Generation → Website Build → Deploy to Vercel, packagé comme « Agent Kit » nommé « Cinematic Sites » (héros 3D généré par IA, effets au scroll, déploiement live). Même registre que le reel Swishy.ai capté juste avant dans ce lot — 2 outils différents mais un même filon « génération de site complet par agent IA » qui revient régulièrement dans la veille de Thomas.

Reel démonstration de site créé avec Claude façon Framer.

Reel présentant l'outil « Swishy.ai » : un créateur explique en face caméra un outil permettant de générer des sites web à ambiance cinématique. Légende partiellement coupée sur la capture (« personne en... ») et call-to-action en commentaire (« Commente “SITE” pour recevoir le lien »), repéré via le compte relais filmwithalexis. Pige gardée à titre de veille outil malgré le contenu textuel incomplet — même registre que RUBRIC Console (voir plus bas), à recouper si un nom d'outil similaire revient dans un prochain lot.

Reel présentant une stack de production front-end : Claude pour le code, Framer Motion pour les animations, un prompt « UI/UX Pro Max », et la librairie de composants 21st.dev.

Tutoriel vidéo -- créer un site facturé 9700€ en 10 minutes avec Claude Code.

Démonstration d'une technique de construction de site web premium avec Claude Code, positionnée comme une prestation facturable à 9 700 €.

Second reel référence de landing page, envoyé 1 minute après le premier (contenu différent).

Reel référence de landing page (premier des 2 envoyés le même jour, contenus distincts).

Démonstration de clonage de site web avec Claude Code.

Reel exemples de sites web créés avec Claude.

Infographie façon carnet manuscrit détaillant les 8 étapes pour faire construire un site web par Claude Code, avec un template de brief à copier-coller et un exemple concret rempli.

Reel technique d'effet de profondeur pour site web.

Démonstration d'un site complet généré en un seul prompt par Claude Opus 4.6 — prompt complet partagé en fil de discussion.

Débat en commentaires sur l'avenir des sites en stack Next.js/code (UX différenciante, tracking GA4/GTM sur-mesure) face à WordPress et aux outils no-code (Webflow, Cursor, Lovable).

Reel listant des sites web intéressants à consulter pour inspiration.

Tutoriel de design web/UI façon « caméléon » (effet visuel), en russe — le sujet du mail évoquait Coca mais le contenu réel n'a aucun rapport avec la marque.

Le prompt préféré des participants à ses formations (devant la génération d'images) : ChatGPT bascule dans Canvas, code le composant en direct, et on obtient un visuel interactif partageable — sans Figma, sans dev. Parfait pour illustrer un concept abstrait dans une présentation.

« Crée-moi un composant React pour représenter [tel concept]. » Et là, ChatGPT passe dans Canevas, ouvre une fenêtre, code le composant en direct. Tu cliques sur Aperçu, tu vois le visuel, et tu peux partager le lien ou l'intégrer dans une présentation. ✅ Pas besoin de Figma. ✅ Pas besoin de dev. ✅ Et c'est interactif.

Un site perso entièrement fonctionnel avec des chatbots RAG embarqués, construit avec Aura (Meng To) pour le design, la méthode B-MAD pour structurer l'implémentation, et Google Antigravity. Conclusion de l'auteur : « Figma devient redondant pour les projets solo ».

My website is finally live and all AI Agents are fully functional! […] For me, Figma is becoming redundant for solo projects.

Méthode : donner à Gemini 3 six images de référence par section (hero, UI du hero, features, testimonials, pricing, footer) piochées sur Dribbble/Mobbin/Framer pour la structure, pas le style, puis raffiner 3 h — en commençant toujours par le hero.

I give Gemini 3 six images for each section I want to build… Do not worry about the style yet. I only use them to get the layout structure, a base I can refine on top of.

Règle d'or : passer 50 % du temps sur le hero (nav, eyebrow, headline, sub, CTA, social proof, visuel) car il fixe couleurs, typo et espacements que l'IA réutilisera partout. Astuce : fournir un screenshot de référence + demander un set d'icônes Iconify précis.

« Create the hero section for my {app} called {name} in the style of {reference_site} ». Pro tip: use a screenshot and you'll get way better results. For icons, I prompt: « Use Iconify {icon set name} ».

Bibliothèque de prompts précis pour générer des animations d'interface avec Gemini 3 : intro au scroll, bordure animée au survol des boutons, texte qui glisse lettre par lettre, logos en marquee, cartes qui pivotent, flashlight au survol. Le modèle s'appuie fortement sur un bon prompting, idéalement avec image ou code en référence.

Gemini 3 is the best model at creating animations. It's not even close. [...] Intro + animation on scroll: "Animate when in view: fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0." Add a clip animation to the background, column by column using clip-path." Buttons: "Add a 1px border beam animation around the pill-shaped button on hover." Text animation: "Add a vertical text clip slide down animation letter by letter" Logos looping: "Add a marquis infinite loop slow animation to the logos using alpha mask"

Nouvelle fonctionnalité Stitch : un clic pour exporter directement vers AI Studio avec tout le contexte déjà chargé — plus besoin de copier-coller du HTML ou de glisser des assets pour passer du design au prototype fonctionnel.

Google Stitch introduces 1-Click Export to AI Studio. Stitch just rolled out a feature that seriously streamlines the workflow: one click export directly into AI Studio... No more copy pasting HTML or dragging assets.

Astuces pour un vibe-coding efficace avec Gemini 3 : activer « Deep Think » (qualité de sortie très différente), demander un fichier HTML unique en sortie, héberger les images publiquement pour éviter les placeholders vides. Prompt exact fourni dans le post original.

Gemini 3 replaced my web developer job... I asked Gemini to built a portfolio website for Christopher Nolan. And the result was outstanding. Some tips: turn on "Deep Think" feature, make them output single html file, host your images public so that the website can avoid having empty placeholder.

Process complet pour prototyper vite : Google AI Studio → Build → Gemini 3 Pro preview → app « Nano Banana powered » → prompt avec les exigences clés → itérer (build/test/debug). Résultat : un prototype d'app de workflow nodal fonctionnel en seulement 10 minutes.

Just vibe-coded a workflow app using Gemini 3 Pro. It took only 10 minutes to get a functional prototype. My process: Visit Google AI Studio -> Build. Select Gemini 3 pro preview. Select Nano Banana powered app. Write a prompt with key requirements.

Opal permet de créer des mini-apps IA sans écrire une ligne de code, désormais accessible dans plus de 160 pays — usages qui vont de l'automatisation à des workflows de création de contenu de plus en plus sophistiqués.

Google expands Opal to over 160 countries. Google Labs has officially expanded Opal, its no-code AI app generator, to more than 160 countries... Opal allows anyone to create AI-powered mini-apps without writing a single line of code.

Exemple de page web (type fiche recette) générée avec Nano Banana, illustrant un cas d'usage landing page/contenu éditorial généré par IA. Contenu exact non détaillé au-delà du lien raccourci.

Site personnel/portfolio (arnauddutemplier.com) relayé via LinkedIn, contenu exact non détaillé au-delà du lien raccourci. Repère de portfolio à consulter directement.

Démonstration d'une IA capable de construire un site WordPress complet automatiquement. Bon repère d'automatisation IA appliquée au développement web.

Présentation d'une version open source de l'outil de développement d'app par IA Lovable. Bon repère d'alternative gratuite pour du prototypage rapide.

Démonstration de Gamma générant un site web fonctionnel complet sans ligne de code, en alternative à WordPress. Bon repère d'outil no-code propulsé par IA.

Démonstration de création d'une micro-application avec Claude en 3 minutes sans code. Bon repère de rapidité de prototypage IA pour des outils internes simples.

Méthode pour reproduire le design de n'importe quel site web via un outil IA. Bon repère technique de benchmark/reverse engineering rapide de design web.

Guide pour concevoir une landing page à l'esthétique cinématographique. Bon repère méthodologique pour du web design premium narratif.

Comparatif entre Figma et Bolt pour la conception produit et le prototypage. Bon repère pour arbitrer entre outils de design/dev selon le besoin.

Google Stitch génère le code d'une application ou d'un site à partir d'une simple description texte. Bon repère de veille sur les outils IA de génération d'interface.

Framer dévoile 4 nouvelles fonctionnalités pour la création de sites. Bon repère de veille produit sur cet outil de no-code design.

Exemple concret de vibe coding pour créer un téléprompteur sans compétences de développeur. Bon repère pédagogique sur le potentiel du vibe coding.

Retour d'expérience sur Stitch by Google pour la génération d'interfaces UI par IA. Bon repère de veille produit complémentaire sur cet outil.

Sélection de 25 sites web esthétiquement réussis. Bon repère d'inspiration webdesign.

Panorama des nouveautés Figma : générateur de code propulsé par IA, dessin vectoriel, création de sites. Bon repère de veille produit Figma.

Outil générant une interface UI « respectable » à partir d'une simple phrase. Bon repère outil pour du prototypage rapide d'interfaces.

Vidéo YouTube montrant comment automatiser la création et la gestion d'un site WordPress à l'aide de l'IA.

Article présentant Lovable, un outil IA permettant de créer facilement des applications ou des sites web à partir d'une simple description en langage naturel.

Tutoriel expliquant comment recréer n'importe quel site web à l'aide de l'IA à partir d'une capture ou d'une URL de référence.

Nouveau site vitrine conçu avec Framer, mis en avant comme référence de design web moderne.

Article du Point sur les outils IA permettant de créer un site ou une application en quelques secondes.

Post LinkedIn révélant un prompt ChatGPT peu connu permettant de générer une interface façon Canva à partir d'une simple description.

Article listant les nouveautés de la version 6.8 de WordPress.

Réflexion sur l'évolution des sites web au-delà de la simple vitrine en 2025.

Annonce d'une importante nouveauté produit chez Webflow.

Lancement du nouveau site « heyia », présenté comme référence de design web.

Création d'un site de dropshipping de robes entièrement automatisé et brandé grâce à l'IA.

Site web génial et un peu effrayant, partagé comme référence créative.

Modèle de site web généré via un agent IA.

Panorama d'outils de gestion freelance (Figma/Framer, Notion, Indy, Arc Browser, ChatGPT) — bon repère de stack outils pour un designer indépendant.

Retour d'expérience sur Replit, qui permet de générer une application mobile complète (base de données utilisateurs, export PDF, restitution visuelle) en 10 minutes à partir de quelques prompts, sans écrire de code. Illustration de l'ère naissante des « produits instantanés » à la demande.

Lancement de Heyboss.xyz, outil no-code propulsé par IA pour créer des applications/sites rapidement à partir d'une simple description — dans la mouvance des générateurs d'app IA (type Bolt, Lovable).

Repérage d'un site web au design remarquable, partagé comme référence d'inspiration UI/UX autour de l'IA.

Partage d'un fichier de travail Figma (maquette de site web) à télécharger — ressource design prête à décortiquer. Lien non ouvrable en session cloud.

David Serrault présente Bolt.new (générateur d'applications web par IA) à travers l'exemple d'un service digital grand public créé en quelques prompts. Lien LinkedIn non ouvrable, idée rédigée depuis le sujet et le slug du post.

Faute de trouver une interface qui lui convienne parmi les plateformes de génération d'images et de vidéos, Ari Kouts en a fait coder une sur mesure par une IA, sans écrire une ligne de code. Il s'interroge sur ce que ce changement implique dans notre rapport aux outils numériques.

Lucas Poelman se réjouit que son outil Peach Worlds (création de sites 3D sans code) figure dans la sélection Top Web Design Trends 2025 de Muzli, aux côtés de Spline, Unicorn Studio et GSAP. Son message clé : les sites ne sont plus des vitrines mais des récits immersifs. Repère utile pour orienter un site de marque ou une page de campagne vers la 3D et le scroll narratif.