Introduction au Projet
Ce document détaille le workflow complet utilisé pour transformer une maquette Figma générée par IA en un site WordPress 100% fonctionnel et dynamique. Le projet "Pile ou SaaS" illustre une approche moderne du développement web, combinant intelligence artificielle, automatisation et bonnes pratiques.
Contexte du Projet
- Client : Agence de vidéo marketing pour SaaS
- Objectif : Site vitrine professionnel avec contenu dynamique
- Contrainte : Déploiement rapide avec maximum d'automatisation
- Innovation : Utilisation de Claude AI pour 100% du code
Phase 1 : Préparation et Analyse
- Figma généré automatiquement par IA
- Design cohérent avec identité de marque
- Contenus textuels intégrés dans la maquette
- Spécifications techniques (couleurs, fonts, espacements)
- Export Figma placé dans
_PREPARATION/Mini-Site Promotionnel SaaS - Structure de fichiers maintenue pour référence
- Assets (images, icônes) extraits et organisés
- Screenshots de toutes les pages (Home, Bio, Méthode, Tarifs, Contact, etc.)
- Stockés dans
_PREPARATION/screenshots_pages - Format PNG haute résolution pour détails précis
- Utilisés comme référence visuelle pour Claude AI
Phase 2 : Développement HTML/CSS avec Claude AI
- Analyse visuelle des screenshots par Claude AI
- Extraction automatique des contenus textuels
- Génération HTML sémantique et accessible
- CSS avec Tailwind CSS pour cohérence et rapidité
- Code responsive mobile-first
- Fichiers stockés dans
_PREPARATION/pile-ou-saas-html
- Tests sur différents navigateurs et tailles d'écran
- Ajustements des espacements et typographies
- Vérification de la fidélité visuelle avec le Figma
- Optimisation des performances
Phase 3 : Configuration WordPress et ACF
- WordPress installé en environnement local
- ACF Pro configuré et activé
- Structure de base du thème créée
- Configuration de la base de données
- Conversion HTML vers PHP WordPress
- Création de templates personnalisés pour chaque page
- Integration de
get_header()etget_footer() - Structure de thème WordPress complète
- Templates : Home, Bio, Méthode, Tarifs, Contact, Podcast, SaaS Academy
Phase 4 : Dynamisation Complète avec ACF
- Analyse complète de tous les contenus du site
- Création de groupes de champs ACF pour chaque template
- Fichiers JSON générés dans
_PREPARATION/acf-json - Structure hiérarchique pour contenus complexes (répéteurs, groupes)
- Options Pages pour header, footer et paramètres globaux
- Custom Post Types (Podcasts, Articles) avec leurs champs
get_field(), the_field()) à la place des contenus statiques.
- Remplacement de tous les textes statiques par des appels ACF
- Gestion des cas conditionnels (afficher si le champ existe)
- Boucles pour contenus répétables (témoignages, étapes, cartes)
- Valeurs par défaut pour éviter les pages vides
- Scripts stockés dans
_PREPARATION/scripts-claude - Un script par page ou type de contenu
- Import automatique de tous les textes, titres, descriptions
- Création des pages WordPress avec bon template assigné
- Import des articles et podcasts avec leurs métadonnées
Phase 5 : Injection de Contenu et Finalisation
- Import via wp-cli ou exécution PHP directe
- Vérification de l'intégrité des données
- Gestion des erreurs et logs d'import
- Tous les champs ACF remplis automatiquement
- Configuration des menus de navigation
- Mise en place du footer dynamique
- Configuration des permaliens
- Intégration des animations GSAP
- Tests de responsive design
- Optimisation des performances
- Site 100% fonctionnel et dynamique
- Interface d'administration intuitive
- Documentation des champs ACF
- Client peut modifier tout le contenu via WordPress
- Seules les images d'articles/podcasts à ajouter
Phase 6 : Fonctionnalités Avancées et Intégrations
- Plugin complet
pileousaas-newsletterdéveloppé par Claude AI - Formulaire AJAX sur la page SaaS Academy
- Stockage en base de données WordPress
- Support multilingue FR/EN pour futures expansions
- Interface d'administration avec statistiques
- Export Excel avec filtres (langue, date)
- Validation des emails et gestion des doublons
- Tracking IP pour analyse
- ScrollTrigger pour animations au scroll
- Animations d'entrée sur tous les éléments (fade-in, slide, scale)
- Animations personnalisées par page (Bio, Méthode, etc.)
- Système d'attributs
data-animatepour configuration facile - Animations des cartes au hover
- Parallax subtil pour profondeur visuelle
- Optimisation des performances avec debouncing
- Fallback gracieux si GSAP ne charge pas
- Bouton flottant "Prendre rendez-vous" en bas à droite
- Popup Calendly modal intégré
- URL Calendly dynamique via ACF Options
- Design cohérent avec l'identité visuelle
- Visible sur toutes les pages du site
- Responsive mobile et desktop
- Icône WhatsApp cliquable dans header desktop
- Également dans menu mobile
- Lien
wa.meavec message pré-rempli - Numéro de téléphone configurable
- Couleur WhatsApp officielle (#25D366)
- Ouverture dans nouvel onglet
- Champ ACF pour URL Spotify sur chaque épisode podcast
- Player Spotify embed responsive
- Affichage conditionnel (si URL fournie)
- Design intégré dans le template podcast
- Fallback vers autres plateformes si nécessaire
- Footer Options : Texte "À propos", liens sociaux, contact, copyright, URL Calendly
- Podcast Settings : Configuration du CTA pour les pages podcast individuelles
- Accès centralisé aux paramètres globaux
- Pas besoin de modifier le code pour changer ces éléments
- Interface intuitive pour le client
- Scripts d'import pour valeurs par défaut
Valeur Ajoutée des Intégrations
- Newsletter : Solution sur mesure sans dépendance à services tiers coûteux
- GSAP : Animations professionnelles qui se démarquent de la concurrence
- Calendly : Conversion optimisée avec prise de RDV immédiate
- WhatsApp : Contact instantané pour leads chauds
- Spotify : Expérience utilisateur fluide sans quitter le site
Stack Technique
L'ensemble des technologies et outils utilisés dans ce projet illustre une approche moderne et efficace du développement web.
Claude AI
Assistant IA pour génération de code, analyse visuelle et automatisation
WordPress
CMS pour gestion de contenu et administration
ACF Pro
Dynamisation complète du contenu via champs personnalisés
Tailwind CSS
Framework CSS pour styling rapide et cohérent
GSAP + ScrollTrigger
Animations fluides et scroll-triggered
PHP 8+
Langage serveur pour WordPress et scripts
Calendly
Système de prise de rendez-vous intégré
WhatsApp Business
Contact direct via messagerie instantanée
Spotify Embed
Lecteur audio intégré pour podcasts
Points Clés du Workflow
Automatisation Maximale
L'ensemble du processus est conçu pour minimiser le travail manuel et répétitif. Claude AI prend en charge la génération de code, l'extraction de contenus et la création de scripts d'import.
Contenu 100% Dynamique
Aucun texte n'est codé en dur dans les templates. Tout passe par ACF, permettant au client de modifier n'importe quel élément sans toucher au code.
Scalabilité
L'architecture mise en place permet d'ajouter facilement de nouvelles pages, sections ou types de contenu sans refonte majeure.
Performance
Malgré l'utilisation intensive d'ACF, le site reste performant grâce à une architecture optimisée et des bonnes pratiques WordPress.
Maintenabilité
Le code généré par Claude est propre, commenté et suit les standards WordPress, facilitant la maintenance future.
Résultats et Métriques
Bénéfices du Workflow
- Gain de temps : Réduction du temps de développement de 70% par rapport à une approche manuelle
- Qualité du code : Code propre, cohérent et conforme aux standards WordPress
- Flexibilité client : Le client contrôle 100% du contenu via interface WordPress
- Fonctionnalités avancées : Plugin newsletter custom, animations GSAP, intégrations tierces (Calendly, WhatsApp, Spotify)
- Évolutivité : Architecture modulaire prête pour extensions futures
- Performance : Site optimisé avec animations fluides et temps de chargement rapide
- Documenté : Chaque étape tracée et workflow reproductible
Conclusion
Ce workflow illustre comment l'intelligence artificielle peut révolutionner le développement web en automatisant les tâches répétitives tout en maintenant une qualité professionnelle. L'approche utilisée démontre qu'il est possible de passer d'une maquette Figma à un site WordPress complet, dynamique et riche en fonctionnalités avec une intervention humaine minimale.
L'utilisation de Claude AI comme assistant de développement permet non seulement d'accélérer considérablement le processus, mais aussi de maintenir une cohérence dans le code et de suivre les meilleures pratiques de développement WordPress. Claude a généré non seulement les templates et la structure, mais également un plugin custom complet, des animations GSAP sophistiquées et l'intégration de multiples services tiers.
Le résultat final est un site professionnel qui combine :
- Design moderne fidèle à la maquette Figma avec animations fluides GSAP
- Contenu 100% dynamique grâce aux 200+ champs ACF configurés
- Fonctionnalités avancées : newsletter custom, intégrations Calendly/WhatsApp/Spotify
- Expérience utilisateur optimisée pour la conversion et l'engagement
- Interface d'administration intuitive pour gestion autonome par le client
Ce projet "Pile ou SaaS" sert de preuve de concept pour une nouvelle façon d'aborder le développement web : une collaboration étroite entre développeur humain (pour la direction, la stratégie et la validation) et IA (pour l'exécution, l'automatisation et la génération de code). Cette approche permet de livrer des sites de qualité professionnelle en une fraction du temps traditionnel, tout en incluant des fonctionnalités qui nécessiteraient normalement des semaines de développement.