Développeurs · Outils

Outils

Les fichiers de votre thème vivent dans un espace de travail de notre côté. L'éditeur du navigateur, la CLI et Claude lisent et écrivent ces mêmes fichiers, vous pouvez donc passer de l'un à l'autre au milieu d'une modification.

Choisir

Trois façons de travailler

Choisissez selon l'endroit où vous aimez taper. Rien de ce que vous faites dans l'une n'y reste enfermé.

	Éditeur du navigateur	CLI dans n'importe quel éditeur	Claude
Installation	Rien	Node.js, et une commande npm	Un abonnement Claude, plus un connecteur
Où vous éditez	Arborescence et éditeur de code sur app.whizzycommerce.com	VS Code ou n'importe quel éditeur, sur votre propre disque	claude.ai, Claude Code, ou VS Code avec l'extension Claude Code
Aperçu	À côté du code	whizzy-theme dev l'ouvre et le rafraîchit à chaque enregistrement	preview_theme renvoie un lien ; screenshot_page montre le résultat à Claude
Git et intégration continue	Non	Oui, avec un WHIZZY_TOKEN	Via Claude Code dans votre dépôt
IA	Assistant facultatif sur votre propre clé d'API Anthropic	Ce que vous utilisez déjà	Votre abonnement Claude ou votre clé d'API
Bon pour	Une correction rapide, ou aucune installation locale	Le travail quotidien, la gestion de versions, les équipes	Esquisser des sections, les corvées, préparer une version

Terminal

La CLI

whizzy-theme fait tourner sur votre machine le validateur même de l'installateur : un passage propre en local est donc une soumission propre. Elle vous connecte à votre compte développeur, pas à une boutique.

npm i -g https://whizzycommerce.com/cli/whizzy-theme.tgz
whizzy-theme login
whizzy-theme init harbour
cd harbour
whizzy-theme dev --page=home

Commande	Ce qu'elle fait
`whizzy-theme login`	Ouvre le navigateur pour vous connecter à votre compte développeur, et garde un jeton sur cette machine.
`whizzy-theme logout`	Oublie le jeton enregistré.
`whizzy-theme whoami`	Affiche le compte développeur et la personne avec qui vous êtes connecté.
`whizzy-theme init <slug> [dir]`	Crée un espace de travail à partir du thème de référence, ou de la version publiée lorsque l'identifiant est l'un de vos thèmes listés, et écrit ses fichiers dans un dossier.
`whizzy-theme pull <slug> [dir]`	Télécharge les fichiers actuels d'un espace de travail, par exemple sur un deuxième ordinateur.
`whizzy-theme push [dir]`	Envoie le dossier vers son espace de travail. Refuse si l'espace a changé depuis votre dernier pull.
`whizzy-theme dev [dir] --page=product`	Envoie à chaque enregistrement et monte le brouillon sur la boutique du thème, avec un aperçu à côté. L'option n'est pas obligatoire.
`whizzy-theme validate [dir]`	Fait tourner en local le validateur de l'installateur et affiche tout ce qu'il écarterait.
`whizzy-theme submit [dir] -m "changelog"`	Soumet les fichiers de l'espace de travail à la revue avec ce journal des changements. Faites un push d'abord si vous avez changé quelque chose en local.
`whizzy-theme status [slug]`	Montre l'état de revue de chaque version et les remarques du relecteur.
`whizzy-theme reset [dir] --yes`	Jette toutes les modifications non soumises et repart de la version publiée, puis en fait le pull.
`whizzy-theme schema [file]`	Affiche ou écrit le JSON Schema du thème pour l'autocomplétion de l'éditeur.

validate sort avec 0 quand rien ne serait écarté, avec 2 quand le thème s'installe mais que quelque chose serait écarté, et avec 1 quand il ne s'installe pas. WHIZZY_ORIGIN pointe la CLI vers une autre adresse de la plateforme, ce dont vous n'avez besoin que si nous vous demandons de tester contre la préproduction.

Autocomplétion dans l'éditeur. Le dossier qu'écrit init contient déjà "$schema" en tête de theme.json, donc VS Code complète et explique chaque champ sans la moindre extension. Il écrit aussi AGENTS.md avec les règles de performance, que les assistants de code lisent d'eux-mêmes.

Automatisation

Intégration continue avec un jeton

En intégration continue il n'y a pas de navigateur pour se connecter. Créez un jeton dans Développeur › Jetons et gardez-le comme secret nommé WHIZZY_TOKEN. Quand cette variable existe, la CLI l'utilise au lieu du login.

Ce workflow GitHub Actions valide et envoie chaque commit de main vers votre espace de travail, et soumet une version quand vous poussez une étiquette commençant par v. Montez version dans theme.json avant d'étiqueter.

name: theme
on:
  push:
    branches: [main]
    tags: ["v*"]

jobs:
  ship:
    runs-on: ubuntu-latest
    env:
      WHIZZY_TOKEN: ${{ secrets.WHIZZY_TOKEN }}
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
      - run: npm i -g https://whizzycommerce.com/cli/whizzy-theme.tgz
      - run: whizzy-theme validate .
      - run: whizzy-theme push .
      - run: whizzy-theme submit . -m "${{ github.ref_name }}: see CHANGELOG.md"
        if: startsWith(github.ref, 'refs/tags/v')

Les jetons valent pour un compte développeur. Un jeton peut modifier et soumettre vos thèmes. Il ne voit ni les revenus ni les versements, et n'atteint la boutique d'aucun marchand. Révoquez-le dans Développeur › Jetons s'il fuite.

Claude

Claude via le connecteur développeur

Le connecteur donne à votre propre Claude les outils pour lire, écrire, vérifier, prévisualiser et soumettre vos thèmes. Claude tourne sur votre abonnement. Notre serveur n'exécute que les appels d'outils.

claude.ai

Dans le navigateur

Ouvrez Paramètres › Connecteurs et choisissez Ajouter un connecteur personnalisé.
Nommez-le whizzy-developer, et collez https://app.whizzycommerce.com/mcp/dev.
Appuyez sur Connecter, connectez-vous à WhizzyCommerce et approuvez l'accès à votre compte développeur.
Dans une nouvelle conversation, activez le connecteur depuis le menu des outils.

Terminal

Claude Code

claude mcp add --transport http whizzy-developer https://app.whizzycommerce.com/mcp/dev

Puis lancez /mcp dans Claude Code et connectez-vous. Claude Code sur le web fonctionne de la même façon avec le dépôt de votre thème.

VS Code

Avec l'extension Claude Code

Installez l'extension Claude Code, lancez la même commande claude mcp add dans le terminal intégré, et ouvrez le dossier de votre thème. Claude modifie les fichiers par le connecteur, ou sur disque avec la CLI à côté.

Outil	Ce qu'elle fait
`list_themes`	Liste les thèmes de votre compte développeur, avec leur révision et si chacun est déjà au catalogue.
`create_theme`	Crée un espace de travail à partir du thème de référence ou d'un thème vide.
`read_theme_file`	Lit un fichier avec la révision actuelle du thème, ou liste tous les fichiers quand le chemin est vide.
`write_theme_files`	Écrit plusieurs fichiers d'un coup. Si le thème a changé depuis la dernière lecture de Claude, rien n'est écrit et Claude le relit.
`delete_theme_file`	Supprime un fichier. theme.json ne peut pas être supprimé.
`validate_theme`	Passe les vérifications de publication sur les fichiers actuels : est-ce que ça s'installe, quel CSS est écarté, la version est-elle plus récente, collisions de classes, plugins.
`preview_theme`	Monte les fichiers comme brouillon sur la boutique du thème et renvoie un aperçu de la page ainsi qu'un lien qui place un navigateur sur le brouillon.
`screenshot_page`	Renvoie une capture d'une page à une largeur comprise entre 320 et 1920 pixels, pour que Claude voie ce qu'il a construit.
`submit_release`	Soumet les fichiers actuels à la revue avec un journal des changements. Claude vous demande confirmation d'abord.
`reset_theme`	Repart de la version publiée pour la copie de travail. Claude vous demande confirmation d'abord.
`get_release_status`	Renvoie les dernières versions soumises avec leur état de revue et les remarques du relecteur.

Une conversation qui se termine par une soumission ressemble à ceci.

Vous
Ajoute une section lookbook à harbour : une grande photo avec trois cartes produit à côté, empilées sur téléphone.
Claude
read_theme_file, write_theme_files
Lit theme.json et une section existante pour en tirer les conventions, écrit sections/lookbook.json, et l'ajoute à templates/home.json.
Claude
validate_theme
Le validateur écarte une propriété CSS. Claude la remplace par une que le nettoyeur conserve.
Claude
preview_theme, screenshot_page
Prévisualise la page d'accueil sur la boutique du thème à 390 et 1440 pixels, remarque que les cartes débordent sur téléphone, et corrige la grille.
Vous
Ça me va. Passe-le en 1.3.0 et soumets-le.
Claude
write_theme_files, submit_release
Monte la version, écrit le journal des changements à partir de ce qui a changé, et vous demande confirmation avant de soumettre.
Claude
get_release_status
Rapporte que toutes les vérifications sont passées et que la version attend la revue.

Sans rien installer

L'éditeur du navigateur

Développeur › Thèmes › votre thème › Éditeur. Une arborescence, un éditeur de code qui valide pendant que vous tapez, un aperçu du brouillon sur la boutique du thème et un bouton Soumettre.

L'éditeur a un panneau d'assistant facultatif. Il reste éteint tant que vous n'y avez pas collé votre propre clé d'API Anthropic. La clé est vérifiée auprès d'Anthropic, scellée au repos, gardée sur ce seul espace de travail, et vous pouvez la retirer à tout moment. Chaque requête de l'assistant est facturée par Anthropic à cette clé.

Clairement

Qui paie l'IA

Vous, directement, et seulement ce que vous consommez.

WhizzyCommerce ne fait jamais tourner d'IA sur sa propre clé pour les développeurs. Votre abonnement Claude ou votre clé d'API Anthropic paie votre usage du modèle. Nos serveurs n'exécutent que les appels d'outils que le connecteur reçoit, qui sont gratuits. Nous ne revendons pas, ne comptons pas et ne majorons pas les jetons.

Pourquoi il n'y a pas de terminal hébergé. Un terminal dans notre application voudrait dire faire tourner une machine isolée par développeur, et faire tourner votre connexion Claude sur nos serveurs. Claude Code sur le web est déjà ce terminal : il tourne contre votre dépôt, Anthropic le maintient, et votre abonnement le paie. Ajoutez-y le connecteur et vous avez tout ce qu'un terminal hébergé vous donnerait. Pour le reste, voir Premiers pas.

SuivantConnecter Claude →