Créer des visuels : artifacts, Design, Slides et images

Ce que Claude Code fait déjà sans rien installer

Claude ne fabrique pas d'images en pixels (photo, illustration peinte). Il écrit du code : HTML, CSS, SVG. Pour un schéma, une page de démo, un dashboard, un deck ou un one-pager, ce code suffit. Et depuis juin 2026, Claude Code peut le publier sur claude.ai au lieu de te laisser un fichier dans un dossier.

Publier une page en artifact

Disponible dans Claude Code depuis juin 2026, d'abord sur Team et Enterprise, aujourd'hui sur Pro, Max, Team et Enterprise. Il faut une session connectée avec ton compte claude.ai (/login) : avec une clé API, ou via Bedrock et Google Cloud, Claude écrit un fichier HTML local à la place.

Comment ça marche :

1. Tu demandes : "fais-moi une page qui compare nos trois offres et publie-la en artifact"
2. Claude écrit le HTML et le publie. La page démarre privée : toi seul la vois
3. Tu demandes une modif, Claude republie à la même URL. Chaque publication devient une version
4. Tu retrouves tout dans le terminal avec /artifacts (ceux de la session en premier, puis les tiens et ceux qu'on t'a partagés ; o ouvre, c copie le lien) ou dans la galerie claude.ai/code/artifacts

Pour partager, ouvre la page dans ton navigateur et passe par le bouton Share. Sur Pro et Max, tu passes de "Only you" à "Anyone with the link", ou tu invites par email (en beta). Sur Team et Enterprise, le partage est interne à l'organisation par défaut (le lien public n'existe que si un Owner l'a autorisé), et tu peux faire de quelqu'un un éditeur. Quand la page est partagée dans ton organisation, Claude Code peut lire les commentaires et y répondre (v2.1.221 ou plus).

Une page peut aussi déclarer des capacités au moment de sa publication, c'est-à-dire des fonctions qu'un HTML statique n'a pas :

• lire tes connecteurs (Pro et plus ; chaque lecteur branche les siens)
• stocker des données, perso ou partagées entre lecteurs (Pro et plus, 20 MB de texte)
• poser une question à Claude depuis la page. Attention, cet usage est facturé au plan de chaque lecteur, pas au tien

/design : des artboards Claude Design depuis le terminal

Pour une maquette de site, un prototype, des slides ou un one-pager qui suivent ton design system, Anthropic a Claude Design. Il est sorti de beta le 8 octobre 2026, sur tous les plans y compris Free. Le détail de l'outil est dans le guide écosystème, chapitre 5.

Dans Claude Code :

/design une landing page pour une app de suivi de budget, ton sobre, mobile first

/design [brief] dessine des artboards sur un canvas et le publie en artifact Claude Design. Tu l'ouvres dans un navigateur desktop, tu modifies un élément directement, et tu exportes chaque artboard en PNG ou PDF. /design et /slides demandent Claude Code v2.1.265 ou plus, et la doc Claude Code présente encore ces templates comme une beta. /design-sync, arrivé avec la mise à jour de juin 2026, fait le lien avec ton design system. Lance-le dans ton repo et lis ce qu'il propose avant de valider.

Le site autonome claude.ai/design ferme le 14 décembre 2026. Si tu y as des design systems, migre-les avant (option "Migrate team design systems") : les chats, commentaires et liens publics de ce site disparaissent à la fermeture.

/slides : un deck

/slides 8 slides pour présenter le bilan du trimestre à mon associé, à partir de NOTES.md

/slides [brief] crée un artifact Claude Slides. Tu modifies les slides directement, tu présentes depuis Claude, puis tu exportes en PPTX ou PDF, ou tu l'envoies vers Google Slides en version éditable.

Claude Docs, via le connecteur claude.ai

Pour une spec ou un document à faire relire, Claude Docs te donne du texte riche sur plusieurs onglets, co-édité en temps réel. Tu commentes section par section, et un @Claude dans un commentaire lui fait faire la modif. Export Word, PDF, Markdown ou Google Docs.

Dans Claude Code, ça passe par un connecteur fourni par Anthropic : là où Claude Docs est disponible, /mcp affiche claude.ai Claude Docs sans rien configurer (chapitre 17). Tu demandes "écris la spec de cette feature dans un Claude Doc", Claude crée le doc et te renvoie le lien. Un document qui vit dans le code (un README) reste un fichier du repo.

Partage : par lien sur Free, Pro et Max ; interne à l'organisation sur Team et Enterprise. Les graphiques tirés des connecteurs ne se rafraîchissent pas tout seuls.

Passer de Claude Design à Claude Code

Le chemin inverse marche aussi. Dans Claude Design, le menu de partage envoie le projet vers un agent de code local (ton Claude Code) ou vers Claude Code Web, ou l'exporte en bundle de passation. Claude Code récupère le design et l'implémente dans ton repo, avec ta stack.

Une limite : Claude Design ne sort pas de MP4. Pour une vidéo, enregistre l'écran, ou passe le projet à Claude Code et fais le rendu avec un outil comme Hyperframes. Motion, le template d'animation de Claude Design, exporte en MP4, mais il est en beta et réservé à Team et Enterprise.

Quel outil pour quel besoin

Quand construire ton propre MCP d'images

Tout ce qui précède produit du code. Dès qu'il te faut des pixels (une photo réaliste, une illustration, une retouche de vraie photo, un fond de miniature), Claude Code a besoin d'un outil externe branché via un serveur MCP (Model Context Protocol). Si MCP ne te dit rien, le chapitre 17 couvre le setup complet.

Construire le tien a du sens quand tu génères des images toutes les semaines, que tu veux un rendu qui ressemble à ta marque et pas à du stock photo, et que tu veux contrôler les paramètres. Pour une image par mois, un générateur en ligne suffit.

Dans la suite, on construit un serveur MCP qui connecte Gemini Image à Claude Code, puis des skills qui encodent les bons prompts, avec un fichier partagé pour centraliser les techniques.

Il existe plusieurs MCP de génération d'images (OpenAI, Ideogram, Replicate, Leonardo). On part sur Gemini via un MCP maison baptisé Nano Banana pour trois raisons : l'API est gratuite pour commencer, le modèle Flash Image est bon sur l'édition photo, et coder ton propre MCP te donne le contrôle sur les paramètres.

J'aurais pu en faire un package npm. J'ai préféré te donner le squelette : tu installes ton propre serveur chez toi et tu le modifies comme tu veux, sans dépendre de mon repo.

La façon la plus simple de prendre en main la suite : lire en diagonale, envoyer le tout à Claude Code pour qu'il t'explique comment est construit le MCP, qu'il complète le code et qu'il t'aide à brancher ta clé API Gemini proprement.

Étape 1, construire le serveur MCP "Nano Banana"

Un serveur MCP est un petit programme qui expose des outils à Claude Code via le protocole MCP. On va en créer un qui connecte l'API Gemini Image.

Pré-requis

• Une clé API Gemini (gratuite sur aistudio.google.com)
• Node.js installé

Créer le projet

mkdir -p ~/.claude/mcp-servers/nano-banana/src
cd ~/.claude/mcp-servers/nano-banana

package.json

Crée le fichier package.json :

{
  "name": "nano-banana-mcp",
  "version": "1.0.0",
  "description": "MCP server for Gemini image generation and editing",
  "type": "module",
  "bin": {
    "nano-banana": "./build/index.js"
  },
  "scripts": {
    "build": "tsc && chmod 755 build/index.js"
  },
  "dependencies": {
    "@modelcontextprotocol/sdk": "^1.12.0",
    "zod": "^3.25.0"
  },
  "devDependencies": {
    "@types/node": "^22.0.0",
    "typescript": "^5.7.0"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "Node16",
    "moduleResolution": "Node16",
    "outDir": "./build",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

src/index.ts, le squelette

Le serveur tient dans un seul fichier (~200 lignes une fois complet). Voici le squelette à copier dans src/index.ts :

#!/usr/bin/env node

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";
import * as fs from "fs";
import * as path from "path";

const GEMINI_API_BASE =
  "https://generativelanguage.googleapis.com/v1beta/models";
const DEFAULT_MODEL = "gemini-3.1-flash-image-preview";

const VALID_ASPECT_RATIOS = [
  "1:1",
  "2:3",
  "3:2",
  "3:4",
  "4:3",
  "4:5",
  "5:4",
  "9:16",
  "16:9",
  "21:9",
] as const;

const VALID_SIZES = ["512", "1K", "2K"] as const;

function getApiKey(): string {
  const key = process.env.GEMINI_API_KEY;
  if (!key) {
    throw new Error(
      "GEMINI_API_KEY not set. Get a key at https://aistudio.google.com/",
    );
  }
  return key;
}

function resolveOutputPath(outputPath: string): string {
  if (path.isAbsolute(outputPath)) return outputPath;
  const cwd = process.env.NANO_BANANA_CWD || process.cwd();
  return path.resolve(cwd, outputPath);
}

const server = new McpServer({
  name: "nano-banana",
  version: "1.0.0",
});

// A completer : les fonctions callGemini, extractImageFromResponse,
// saveImage, et les deux outils generate_image / edit_image.
// Demande a Claude Code de les ecrire a partir des tableaux de l'etape 2.

async function main() {
  const transport = new StdioServerTransport();
  await server.connect(transport);
  console.error("Nano Banana MCP server running on stdio");
}

main().catch((error) => {
  console.error("Fatal error:", error);
  process.exit(1);
});

Build et config

cd ~/.claude/mcp-servers/nano-banana
npm install
npm run build

Puis déclare le serveur à Claude Code. --scope user le rend disponible dans tous tes projets, -e passe la clé en variable d'environnement :

claude mcp add nano-banana --scope user \
  -e GEMINI_API_KEY=ta-cle-api-gemini \
  -- node /Users/TON_USER/.claude/mcp-servers/nano-banana/build/index.js

Vérifie avec claude mcp list, puis relance Claude Code. Teste :

> Génère une image d'un coucher de soleil

Si un PNG apparaît, c'est bon.

Étape 2, comprendre les deux outils

generate_image

Crée une image from scratch à partir d'un texte.

Utiliser pour : illustrations, ambiances, paysages, visuels de projets.

edit_image

Modifie une image existante avec un prompt texte. C'est celui qui sert le plus : tu prends une vraie photo de toi et tu changes le décor.

Étape 3, écrire des prompts qui donnent un rendu photo

Un rendu "stock photo" ou un rendu crédible : ça dépend du prompt.

Ce que donne un prompt naïf

"Photo d'un atelier Claude Code avec des gens et un tableau"

Résultat : sourires forcés, éclairage parfait, symétrie, zéro grain. Inutilisable.

La solution : parler en specs photo

Le modèle comprend le vocabulaire photographique. Avec des specs d'appareil, le rendu devient crédible :

Shot on Sony A7III with 35mm f/1.8 lens at ISO 1600.
Shallow depth of field, background slightly soft.
Natural window light from the left, soft shadows.
Visible film grain, slight chromatic aberration at frame edges.
Rule of thirds composition, not centered.

Presets par contexte

Le bloc anti-IA

Ajouter à la fin de tout prompt photoréaliste :

This must look like real candid photography, not AI-generated.
Imperfections: slightly uneven lighting,
natural skin texture with visible pores,
clothes with real fabric folds and wrinkles,
no perfectly symmetrical composition.

Étape 4, créer le skill /photo-gaetan

Ce skill prend une de tes vraies photos pro comme base et la place dans un nouveau décor via edit_image.

Le workflow

1. Choisir une photo source dont la lumière et l'angle sont proches du résultat final
2. Construire un prompt en 4 blocs :
   • Bloc 1 : Préservation du sujet ("Keep this exact person unchanged")
   • Bloc 2 : Scène avec imperfections (chaises dépareillées, quelqu'un sur son tel...)
   • Bloc 3 : Specs photo (objectif, ISO, grain)
   • Bloc 4 : Anti-IA (imperfections, asymétrie)
3. Appeler edit_image avec les bons paramètres
4. Review et itérer si nécessaire

Règle importante : proximité lumière/angle

Plus l'écart entre la photo source et la scène demandée est grand, plus le modèle altère le visage. Pour un meilleur résultat :

• Scène extérieure golden hour : photo source outdoor en lumière chaude
• Scène intérieure bureau : photo source avec lumière fenêtre
• Scène conférence : photo source avec éclairage contrasté

Exemple de prompt complet

Keep this exact person unchanged: face, glasses, hair,
facial hair, clothing, skin tone.
Do not alter any facial features.

Place him in a real workshop setting. He is standing,
turned slightly toward a whiteboard behind him, one hand
raised. The whiteboard is slightly out of focus.

The room is a real French coworking space: mismatched chairs,
a long wooden table with 4-5 attendees, some with stickers
on their laptop lids, one person has a coffee cup, another
is taking notes on paper. Not everyone is paying attention.
Diverse mixed-gender audience.

Shot on Sony A7III with 35mm f/1.8 lens, shallow depth of
field, natural window light from the left, visible grain
at ISO 1600. Rule of thirds, not centered.

Étape 5, créer le skill /image

Ce skill génère des visuels sans personne identifiable : illustrations d'articles, visuels de projets SaaS, backgrounds de carousel, fonds de thumbnails.

Templates disponibles

Calibrage réalisme pour les visuels projet

Le visuel doit donner envie sans tomber dans le stock photo. Vise la photo prise par un client content.

Ajouter des imperfections légères : lierre irrégulier, chaises dépareillées, herbe pas taillée. Sans aller jusqu'au délabré.

Étape 6, centraliser les techniques

Créer un fichier image-techniques.md lu par les deux skills :

brand/prompts/image-techniques.md

Contient :
→ Palette brand (suffixe de prompt)
→ Presets photo par contexte
→ Bloc anti-IA
→ Templates par type de visuel
→ Contraintes (pas de texte, diversité)

Quand le modèle change, un seul fichier à mettre à jour au lieu de modifier chaque skill.

Les 3 règles après 30 tests

1. Séparer visuel et texte. L'IA génère l'image, le HTML affiche le texte par-dessus. Le modèle ne sait pas écrire en français sans charabia.
2. Parler en specs photo. Objectif, ISO, grain, profondeur de champ. Le modèle comprend ce vocabulaire.
3. Partir d'une vraie photo pour les portraits. Le from scratch ne ressemble jamais assez. edit_image avec une photo source dont la lumière matche le résultat final donne les meilleurs rendus.

Sources

• Share session output as artifacts (doc Claude Code)
• Claude Docs (help center)
• Claude Slides (help center)
• Claude Design (help center)
• Dashboards et Motion, annonce du 8 octobre 2026