Utiliser des artefacts

use-artifacts donne à Claude Code et Codex un workspace d'artefacts qui épouse ta façon de penser. Au lieu d'enfouir un plan, une comparaison ou un prototype substantiel dans le chat, il crée une expérience HTML soignée et réutilisable sous ~/.agents/artifacts/<id>/.

Quand l'utiliser

Crée un artefact quand le résultat est substantiel, autonome, visuel, interactif, de type document, ou susceptible d'être revisité. Les bons cas incluent les plans de features, les revues de sécurité, les briefs produit, les explications d'architecture, les tableaux d'options, les dashboards, les diagrammes et les prototypes.

Garde les réponses minuscules et les extraits courts dans le chat. Si le changement appartient directement à un produit existant, implémente-le là-bas, sauf si un prototype séparé a été demandé.

Documents de réflexion

Le mode par défaut transforme le raisonnement public en une page moderne, facile à parcourir : une thèse claire, la recommandation la plus forte près du haut, et des sections structurées pour les preuves, les flux, les compromis, les cas limites, le déploiement et la validation.

Les artefacts de plan incluent toujours deux vues de l'idée :

• un brouillon de contenu qui décrit ce que la page ou la feature dit et fait
• des croquis qui montrent comment la hiérarchie et le contenu pourraient être disposés

Croquis et variations

Quand la demande porte sur des options, l'artefact devient un tableau de comparaison. Il montre trois à six directions en une séquence verticale, donne à chaque direction toute la largeur disponible, et garde une fidélité assez basse pour comparer les concepts sans prétendre que l'implémentation est finie.

Artefacts interactifs

Calculateurs, dashboards, simulations, mini-apps, diagrammes et visualisations utilisent le mode interactif. La sortie préférée est un index.html unique, responsive et autonome, avec un balisage sémantique, des contrôles accessibles et un état local. Les dépendances externes sont évitées sauf si l'idée en a vraiment besoin.

Le style suit le produit

Chaque artefact commence par use-style. Pour une app existante, ses vrais tokens, composants, typographie, espacement, couleur, radius, ombre et motifs d'interaction sont la source de vérité. Un style nommé peut soutenir ce langage, mais ne le remplace pas.

S'il n'existe aucun contexte produit, le skill choisit le préréglage sobre le plus proche ; black-grid est le repli technique minimal. Une direction visuelle explicite de ta part l'emporte toujours.

Contrat du workspace

Chaque artefact vit hors du dépôt courant :

~/.agents/artifacts/<id>/
├── index.html      # the viewable artifact
├── HIGHLOGIC.md    # concise design logic and iteration state
├── manifest.json   # title, kind, style, entrypoint, and files
└── versions/       # optional snapshots before major rewrites

L'emplacement global garde les artefacts disponibles d'un projet à l'autre sans polluer les dépôts produit.

En créer un

Invoque le skill directement :

$use-artifacts Create three modern onboarding directions

Ce skill est inclus dans le lot Premium. Installe-le ou rafraîchis-le avec :

npx aiblueprint-cli@latest agents pro setup

Le script d'échafaudage inclus crée les métadonnées du workspace et les fichiers de départ ; l'agent implémente ensuite, ouvre et vérifie le HTML final avant de le lier dans le chat.