TPC
    TPC
    TechDesign

    Vibe Coding Advanced : Construire un SaaS Complexe avec Replit (Sans Coder)

    Roman Raibaudi, Product Designer, a developpe Reality, un outil d'analyse UX avec IA, en 3 mois sans compétences dev. Stack complete : Figma, Replit, Gemini, Vertex AI. Process, choix techniques, coûts reels (500-1000 euros), intégrations API, pipelines GitHub.

    7 min de lecture

    Roman Raibaudi, Product Designer, a developpe Reality, un outil d'analyse UX avec IA, en 3 mois sans compétences dev. Stack complete : Figma, Replit, Gemini, Vertex AI. Process, choix techniques, coûts reels (500-1000 euros), intégrations API, pipelines GitHub.

    1. Contexte du projet Reality

    Speaker : Roman Raibaudi, Product Designer, ex-designer industriel (10 ans digital).

    Besoin initial : transformer les retours utilisateurs en aide a la decision strategique, avec impact financier chiffre. Pas d'outil existant capable d'auditer un parcours UX, scorer les écrans, projeter l'economie de temps et de cout.
    Objectif : creer Reality, un SaaS avec 3 agents IA.

    Alice : Personas Animes

    Génère des personas animes depuis des interviews utilisateurs. Versionnes, exportables PDF/Word.

    Syfy : Discussions Inter-Personas

    Simule des discussions entre personas pour détecter besoins inter-métiers invisibles.

    Jarvis : Audit UX + Impact Financier

    Analyse des captures d'écran de parcours. Applique 17 questions UX algorithmiques. Calcule score d'amélioration. Projette impact financier (euros economises par an).
    Contrainte : zero compétence en code, zero budget dev initial.

    Outils recommandés : Figma, Replit, Gemini, Vertex AI, GitHub.

    2. Formation et Reseau

    1. Formation IA Discipline (octobre 2024)

    Cours Genia : creer des agents IA pour UX process, comprendre LLM, RAG, temperature, garde-fous contre hallucinations. Cours vibe coding : intégrer design system Figma dans Lovable, exporter composants.

    Formation

    Outils : Dust, Replit, Lovable, Figma Make.

    2. Reseau et mentorat

    Slack IA Discipline : echanges quotidiens, retours d'expérience. Appels cles avec Manuel, Camille, Hugo : comparatif Replit vs Lovable, choix stack. Achille : souverainete des données via Vertex AI (stockage France, pas d'entrainement sur données clients).

    Networking

    Outils : Slack, Vertex AI.

    Résultat : choix Replit pour back-end complexe, intégrations API, pipeline GitHub.

    3. Choix de la stack technique

    Critere

    Front design fin

    Replit

    MCP Figma beta

    Lovable

    Oui

    Figma Make

    Basique

    Critere

    Back-end complexe

    Replit

    Oui

    Lovable

    Limite

    Figma Make

    Non

    Critere

    API Dust

    Replit

    Oui (hallucinations reglees)

    Lovable

    Non fonctionnel

    Figma Make

    Non

    Critere

    Doc GitHub

    Replit

    Oui

    Lovable

    Non

    Figma Make

    Non

    Critere

    Analyse async (deco/reco)

    Replit

    Badge actif

    Lovable

    Non

    Figma Make

    Non

    Critere

    Souverainete données

    Replit

    Via Vertex

    Lovable

    Non

    Figma Make

    Non

    Verdict : Replit choisi pour sa capacité back-end (calculs financiers, grilles algorithmiques), MCP Figma (composants directement integres), pipeline GitHub (transition vers devs), et analyse async (badge tourne en arriere-plan, token non reconsomme si deconnexion).

    4. Crash tests des outils

    1. Figma Make : prototype rapide

    Tentative connexion API Dust + design Figma. Résultat : echec intégration API, mais prototype partageable valide.

    Crash Test

    Outils : Figma, Figma Make.

    2. Lovable : import design + API

    Import design system Figma OK. API Dust non fonctionnel (pas de recuperation données cote agent).

    Crash Test

    Outils : Figma, Lovable, Dust.

    3. Replit : stack complete

    MCP Figma + intégration API Dust + back-end complexe. API Dust intégrée mais hallucinations agents. Solution : RAG interne Replit (prompts, grilles UX, lois UX internalisees).

    Crash Test

    Outils : Figma, Replit, Gemini, Vertex AI.

    Lecon cle : Figma Make = MVP concept validation. Lovable et Replit = UX + tech + business centric, dialoguent avec équipes dev.

    5. Synthese

    Lovable

    UX-centric : validation concept rapide. Integrations limitees (API Dust non fonctionnel dans le cas Reality). Adapte pour prototypes interactifs avances.

    Replit

    UX + Tech + Business centric. Back-end lourd (calculs financiers, grilles algorithmiques). MCP Figma beta : composants Figma vers Replit direct. Agent Replit : developpe front + back, doc GitHub auto. Pipeline GitHub : transition vers devs propre.

    "Replit m'a permis de verifier que ca fonctionnait face a des utilisateurs. Ca pose une base pour discuter avec des devs qui reprendront ces morceaux, les nettoieront, les solidifieront."

    Roman Raibaudi, Product Designer

    6. Integrations API et problèmes règles

    1. API Dust via Replit

    Symptome : analyse lente, prompt enrichi/modifie par agent Replit, grilles d'analyse reformatees, résultats desorganises. Solution : decoupler API Dust, internaliser RAG dans Replit (prompts, 17 questions UX algorithmiques, 200+ lois UX). Résultat : analyse rapide, résultats stables, controle total.

    Bug Fix

    Outils : Dust, Replit.

    2. Surconsommation tokens

    Symptome : agent Replit analysait le texte input sans demande. Consommation cachee à chaque iteration. Action : email support Replit, escalade humains, remboursement 75 dollars. Lecon : écrire au support, insister, barriere IA vers humains.

    Support

    Outils : Replit.

    3. Streaming IA (coupure résultats)

    Symptome : output d'analyse tronque, elements manquants. Solution : intégrer méthode anti-streaming (technique apprise via réseau IA Discipline).

    Bug Fix

    Outils : Replit, Gemini.

    7. Stack produit finale

    1. Figma

    Design system, composants, tokens, écrans mock-up.

    Design

    Outils : Figma.

    2. Replit

    Développement front + back (agent Replit).

    Développement

    Outils : Replit.

    3. Gemini + Vertex AI

    LLM via Vertex AI pour souverainete données. Pas d'entrainement sur données clients, stockage France.

    IA

    Outils : Gemini, Vertex AI.

    4. GitHub

    Doc auto, pipeline (push mises a jour version publique).

    DevOps

    Outils : GitHub.

    5. PostHog (a venir)

    Tracking acquisition, onboarding funnel. Identifie drop-offs.

    Analytics

    Outils : PostHog.

    6. Fleuret (a venir)

    Pain test IA : test resistance attaques, recommandations sécurité.

    Securite

    Outils : Fleuret.

    Outils recommandés : Figma, Replit, Gemini, Vertex AI, GitHub, Dust, PostHog, Fleuret.

    8. Figma vers Replit

    1. Connecter Figma a Replit

    Figma > Account Settings > Security > Tokens. Generer token. Replit > Chat agent > Coller token > MCP Figma active. Verifier : Replit > Integrations > MCP Figma (statut actif).

    Setup

    Outils : Figma, Replit.

    2. Développer un composant Figma dans Replit

    Figma > Selectionner composant > Share > Copier lien. Replit > Chat > Coller lien + prompt : "Developpe ce composant, respecte strictement le design Figma". Agent Replit génère code, applique au composant existant.

    Développement

    Outils : Figma, Replit.

    3. Nettoyer un prompt pour nouvelle fonctionnalité

    Rediger fonctionnalité en texte brut (document Word/Notes). Dust > Agent dédié : "Nettoie et reformule ce prompt pour développement Replit". Copier prompt nettoye vers Replit. Gain : economie temps + tokens.

    Prompt Engineering

    Outils : Dust, Replit.

    4. Documentation GitHub

    Replit > Icone en haut a droite > Documentation (dossiers auto-generes). Contenu : architecture code, separation couches, pratiques genie logiciel. Base pour discussions avec devs.

    Documentation

    Outils : Replit, GitHub.

    5. Prompt final avant transition devs

    Prompt a l'agent Replit : "Mets au propre le code avec pratiques solides : separation couches, bonnes pratiques genie logiciel. Verifie toutes les fonctionnalités." Verifier app fonctionnelle. Livrer doc GitHub aux devs.

    Livraison

    Outils : Replit, GitHub.

    9. Wow effects et surprises

    Decouvertes positives

    LLM specialises : Gemini plus rapide pour le use case Reality (analyse visuelle + texte). Souverainete données : Vertex AI = stockage France, pas d'entrainement LLM sur données clients. MCP Figma : fonctionne très bien (composants Figma vers Replit direct). Prompt structure : écrire prompt pour agent dev est different du prompt pour LLM conversationnel.

    Mauvaises surprises

    Agent Replit enrichit prompts sans demande : modifie grilles d'analyse, reformate résultats. Solution = garde-fous stricts, internalisation RAG. Surconsommation tokens cachee : agent analysait input texte sans demande. Remboursement 75 dollars après escalade support.

    "J'ai appris a structurer un prompt non pas pour parler a un agent existant, mais pour creer un agent, et aussi pour parler a un agent qui developpe. Ca m'a forme là-dessus."

    Roman Raibaudi, Product Designer

    10. Demonstration de Reality

    Agent Alice : Personas Animes

    Input : retranscriptions interviews utilisateurs (fichiers texte). Output : persona versionne (V.I, V.II, V.III), fonctionnalités incontournables, besoins, pain points, motivations, contexte. Observations manuelles ajoutables (expertise métier). Historique conversations par version. Export PDF/Word.

    Agent Syfy : Discussions Inter-Personas

    Input : selection personas (projet A + projet B possibles). Output : discussion simulee entre personas, besoins inter-métiers invisibles detectes, opportunités d'evolution projet. Export PDF/Word, annotations manuelles.

    Agent Jarvis : Audit UX + Impact Financier

    Input : captures d'écran parcours utilisateur + contexte scenario (persona cible, taux horaire, devise, KPI vise, frequence tache). Output : score UX (17 questions algorithmiques), justifications (loi UX, famille, principe), améliorations UX concretes, projection financière (cout actuel vs cout projete, economie par tache/mois/an), sprints recommandes (80% impact / 20% effort).
    Métrique

    Tache

    Exemple concret

    Detecter devices en erreur dans dashboard industriel

    Métrique

    Objectif KPI

    Exemple concret

    Reduire temps reparation de 70%

    Métrique

    Score Jarvis

    Exemple concret

    5/12

    Métrique

    Atteinte projetee

    Exemple concret

    32% (vs 70% souhaite)

    Métrique

    Cout par tache

    Exemple concret

    8 euros (15 min)

    Métrique

    Economie projetee

    Exemple concret

    3,40 euros par tache (passage a 9 min)

    Badge analyse : tourne en arriere-plan, utilisateur peut deconnecter/reconnecter sans reconsommation token.

    Outils recommandés : Reality, Alice, Syfy, Jarvis, PDF, Word.

    11. Budget et delais reels

    Element

    Timeline

    Detail

    Octobre 2024 a janvier 2025

    Element

    Duree totale

    Detail

    3 mois (temps plein designer)

    Element

    Budget tokens LLM

    Detail

    500 a 1000 euros

    Element

    Iterations

    Detail

    Plus de 1000 tests pour stabiliser agents

    Element

    Debugging fin

    Detail

    15 derniers jours (raccourcis clavier, synchro personas, details UX)

    La consommation tokens est volontaire : tests repetes pour stabiliser agents, regler hallucinations, valider grilles UX. Budget tokens inferieur au cout temps designer si projet solo.
    Cout futur : pipeline GitHub (collaboration devs), pain test Fleuret (resistance attaques IA), version publique abonnable (dev juridique, compliance).

    12. Ressources et acces beta

    Acces beta Reality

    Remplir formulaire sur la landing page. Roman contacte chaque inscrit individuellement pour echanger sur le use case, donner accès à l'outil, recueillir feedback utilisateur.

    Formations recommandees

    IA Discipline : Genia (agents IA), vibe coding (Lovable, Replit), design system Figma. Slack IA Discipline : réseau, questions quotidiennes, partage expériences.

    Outils recommandés : Figma, Replit, Dust, Gemini, Vertex AI, GitHub, Lovable, Figma Make, Cursor, PostHog, Fleuret.

    Vous recrutez ce profil ?

    TPC vous accompagne pour trouver des profils adaptés à vos besoins.

    Découvrez aussi notre pôle Engineering et son accompagnement dédié.

    Articles lies

    Tous les articles
    Tech

    Recruter un CTO, la méthode de A à Z

    5 min
    Tech

    Les 22 meilleurs outils JavaScript pour les Devs

    2 min
    Tech

    Fiche métier : Software Engineer

    2 min