Kama Agency

ScreenBuild

Screenshot → Thème Shopify déployable en un clic

Rôle

Conception, architecture & développement SaaS complet

Durée

3 mois

Livraison

3 mois

−90%

Temps de développement

2 min

Génération d'un thème

300+

Thèmes générés en beta

84%

Code prêt sans retouche

ScreenBuild

Le projet

ScreenBuild est un SaaS pionnier qui transforme n'importe quelle capture d'écran en thème Shopify Liquid complet et déployable directement en boutique. L'utilisateur upload une image — maquette Figma, capture d'un site concurrent, wireframe papier photographié — et le pipeline IA analyse la mise en page, décompose les sections, génère le code Liquid valide et produit un fichier .zip prêt à uploader sur Shopify. Ce qui prenait des jours à un développeur Liquid se fait en 2 minutes.

Le défi

Le défi principal était double : d'abord, obtenir une analyse visuelle suffisamment précise pour identifier les composants (header, hero, cards, footer) avec leurs proportions et hiérarchies. Ensuite, générer du Liquid valide conforme aux standards Shopify OS 2.0 — avec les bons schémas de sections, les blocks JSON corrects et la gestion des variables Liquid — sans hallucinations ou code non fonctionnel.

La solution

Nous avons construit un pipeline IA multi-étapes avec Claude 3.5 Sonnet : première passe d'analyse visuelle qui identifie et nomme les composants avec leur structure, deuxième passe de génération Liquid par composant avec validation syntaxique automatique, troisième passe d'assemblage et vérification de la cohérence globale. Un système de fallback gère les cas ambigus en remplaçant les sections incertaines par des placeholders documentés. L'architecture Next.js App Router avec API Routes serverless permet de gérer les appels IA longs sans timeout.

Le résultat

ScreenBuild réduit de 90% le temps de création d'un thème Shopify custom. Un thème qui demandait 3 à 5 jours de développement Liquid sort en 2 minutes. En beta privée, les 50 premiers utilisateurs ont généré plus de 300 thèmes. Le taux de satisfaction sur la qualité du code généré atteint 84%, avec seulement 16% nécessitant des ajustements manuels mineurs.

Stack technique

Next.js 14TypeScriptShopify LiquidClaude APIStripeSupabaseVercel

Fonctionnalités livrées

  • Upload d'image avec prévisualisation immédiate
  • Pipeline IA multi-étapes (analyse → génération → validation)
  • Téléchargement du thème .zip prêt pour Shopify
  • Authentification et gestion des crédits (Stripe)
  • Historique des thèmes générés par utilisateur
  • Dashboard admin avec métriques d'usage
Chronologie

Déroulé du projet

01
Semaines 1-2

Discovery & Architecture

Définition du MVP, architecture du pipeline IA multi-étapes et conception de l'API Shopify Liquid.

02
Semaines 3-6

Pipeline IA core

Développement du pipeline Claude API (analyse visuelle → génération Liquid → validation syntaxique).

03
Semaines 7-10

Intégrations SaaS

Stripe (crédits), authentification, historique des générations et dashboard admin.

04
Semaines 11-12

Beta & optimisation

Tests avec les 50 premiers utilisateurs, corrections et optimisation du taux de succès à 84%.

Vous voulez le même résultat ?

Discutons de votre projet. Devis gratuit, réponse sous 48h.

Démarrer mon projet