danielmiessler/LifeOS

Notification vocale (PREMIÈRE ACTION REQUISE)

curl -s -X POST http://localhost:31337/notify \
  -H "Content-Type: application/json" \
  -d '{"message": "Exécution du skill Webdesign", "voice_enabled": true}' > /dev/null

Ce qu'il fait

Conçoit et intègre des interfaces web via deux voies. ClaudeDesign pilote le produit claude.ai/design d'Anthropic via le skill Interceptor, puis intègre le résultat dans votre codebase. DirectDesign écrit le design en ligne en utilisant la philosophie open-source frontend-design d'Anthropic, chargée depuis une référence locale. Routage par défaut : les travaux courts, ad-hoc et dans le codebase vont à DirectDesign ; les projets multi-pages ou les prototypes partageables vont à ClaudeDesign.

Le problème

Produire une bonne interface web signifie généralement soit lutter avec un outil visuel qui ne peut pas toucher votre codebase réel, soit coder à la main depuis zéro et aboutir aux mêmes défauts génériques à chaque fois. Les deux modes d'échec tirent dans des directions opposées : les outils visuels offrent une finition mais un fossé de remise, tandis que l'écriture directe du code offre une intégration mais une esthétique plate. Ce skill vous offre les deux routes sous un même toit – un aller-retour visuel via claude.ai/design lorsque la révision compte, ou un design en ligne avec une véritable doctrine esthétique chargée lorsque la vitesse et l'itération dans le codebase comptent – et achemine vers la bonne route en fonction de la demande.

Comment ça fonctionne

Webdesign couvre trois voies pour produire une interface web. Choisissez la voie qui convient ; présentez les options par leur nom lorsque l'intention est ambiguë. Nous pilotons toujours la version de Claude Design qui est en ligne – il n'y a pas de version à figer.

Voie 1 – DirectDesign (cheval de bataille par défaut ; {{DA_NAME}} écrit le design en ligne)

{{DA_NAME}} écrit le design directement avec la doctrine esthétique open-source frontend-design d'Anthropic chargée en ligne. Le contenu du prompt principal est reflété depuis github.com/anthropics/skills/tree/main/skills/frontend-design (sous licence MIT) dans References/FrontendDesignPhilosophy.md – liste d'enregistrement, règles anti-défaut, recettes de paires typographiques, vocabulaire de mouvement, discipline des couleurs. Autonome : aucune dépendance d'exécution, pas de navigateur, pas d'authentification. C'est la voie qui a réellement livré chaque design réel produit par ce skill. Flux de travail : DirectDesign.

Voie 2 – Interface CLI native de Claude Design (préférée pour l'intégration de code + synchronisation du système de design)

Anthropic a livré les commandes propriétaires /design et /design-sync dans Claude Code (juin 2026, GA sur Pro/Max/Team/Enterprise – officiel : support.claude.com/en/articles/14604416). /design-sync extrait le système de design réel d'un codebase dans Claude Design et pousse les modifications construites en retour ; /design crée et modifie des designs depuis le terminal. Ces commandes sont le remplacement propriétaire et déterministe de l'appareil de remise manuel Interceptor – préférez-les pour tout travail lié au code. Flux de travail : NativeDesignSync.

Voie 3 – ClaudeDesign via Interceptor (solution de révision visuelle EXPÉRIMENTALE)

⚠️ Non vérifiée et actuellement non fonctionnelle. Cette voie pilote le canevas web claude.ai/design via le skill Interceptor pour une révision visuelle. Elle nécessite une session claude.ai authentifiée dans le profil Chrome interceptor-test, qui n'est actuellement pas connecté, et elle n'a jamais été exécutée de bout en bout (chaque exécution réelle de ce skill a utilisé DirectDesign). Utilisez-la uniquement lorsque vous voulez spécifiquement le canevas web visuel ET que vous avez d'abord configuré la connexion. Flux de travail : CreatePrototype, ExtractDesignSystem, RefinePrototype, WebsiteToRedesign, ExportToCode, IntegrateIntoApp, DeployDesign. Outil : DriveClaudeDesign.ts.

Règle de routage

Lorsque l'utilisateur demande "un beau design" / "concevoir quelque chose" sans nommer de voie :

• Par défaut, utilisez DirectDesign pour les travaux courts, ad-hoc et dans le codebase – rapidité et itération en contexte.
• Utilisez l'interface CLI native (/design-sync) lorsque le travail consiste à synchroniser un système de design de codebase réel ou à effectuer un travail de design lié au code et que les commandes sont disponibles.
• Recourez à ClaudeDesign (Voie 3) uniquement lorsqu'une révision visuelle sur canevas web est explicitement souhaitée, et rappelez-vous qu'elle nécessite une connexion unique et est non éprouvée.

Opération consciente de l'intégration (CRITIQUE)

Ce skill est fréquemment appelé comme sous-étape d'un travail de site plus vaste – rédaction d'un article de blog, construction d'un tableau de bord d'administration, mise en ligne d'une page marketing. Lorsqu'il est invoqué depuis un contexte parent, le skill :

• Accepte le contexte du projet existant en entrée : framework, fichier de tokens, répertoire de composants, cible de déploiement.
• Produit des diffs / correctifs par rapport à l'application existante, pas des fichiers HTML isolés.
• Respecte les tokens de design et les modèles de composants existants – NE les écrase PAS, sauf si l'utilisateur demande une refonte complète.
• Route le travail d'intégration via Workflows/IntegrateIntoApp.md.

Lorsqu'il est invoqué de manière autonome pour un design vierge, le skill produit un prototype autonome et crée éventuellement une nouvelle application.

Personnalisation

Les préférences de design spécifiques à l'utilisateur (palette de couleurs, typographie, grille d'espacement, timing d'animation, valeurs par défaut du framework) se trouvent dans :

~/.claude/LIFEOS/USER/CUSTOMIZATIONS/SKILLS/Webdesign/
├── PREFERENCES.md     # Tokens de design, frameworks préférés
├── README.md
└── EXTEND.yaml

Le skill lit PREFERENCES.md s'il existe et transmet ces tokens dans le brief de Claude Design et tout bundle de remise en aval. Sans couche de personnalisation, le skill utilise par défaut la sortie d'extraction du système de design de Claude Design.

Routage des flux de travail

Lors de l'exécution d'un flux de travail, affichez cette notification :

Exécution de **NomDuFlux** dans **Webdesign**...

Flux de travail	Déclencheur	Fichier
DirectDesign (Voie 1 – par défaut, {{DA_NAME}} écrit en ligne)	"fais un beau design", "conçois ceci directement", "fais le design toi-même", "conçois quelque chose de cool", "esthétique frontend", "UI brutaliste/éditoriale/rétro/maximaliste", toute demande de design ad-hoc courte sans "prototype" / "maquette" / "claude design"	Workflows/DirectDesign.md
NativeDesignSync (Voie 2 – préféré pour le travail de code)	"/design", "/design-sync", "synchronisation du design", "synchroniser le système de design", "extraire le système de design dans Claude Design", "pousser le code vers Claude Design", "commande de design native"	Workflows/NativeDesignSync.md
CreatePrototype (Voie 3 – expérimental, pilote claude.ai/design)	"concevoir un prototype", "créer un prototype", "maquette", "construire un design", "claude design", "utiliser claude.ai/design"	Workflows/CreatePrototype.md
ExtractDesignSystem (Voie 3)	"extraire le système de design", "extraire les tokens de", "extraire la marque"	Workflows/ExtractDesignSystem.md
RefinePrototype (Voie 3)	"itérer sur", "affiner", "ajuster l'espacement", "changer la couleur"	Workflows/RefinePrototype.md
WebsiteToRedesign (Voie 3)	"refondre ce site", "reconstruire cette URL", "moderniser"	Workflows/WebsiteToRedesign.md
ExportToCode (Voie 3 de repli – préférer /design-sync)	"exporter en code", "livrer au code", "envoyer à Claude Code", "traiter la remise"	Workflows/ExportToCode.md
IntegrateIntoApp (Voie 3 de repli – préférer /design-sync)	"intégrer ceci dans", "patcher dans l'application", "insérer dans le codebase existant"	Workflows/IntegrateIntoApp.md
DeployDesign (Voie 3)	"déployer le design", "livrer en production"	Workflows/DeployDesign.md

Pour le travail lié au code (exportation, intégration, extraction/synchronisation du système de design), préférez la Voie 2 (NativeDesignSync → /design-sync). Les flux de travail de bundle de la Voie 3 ci-dessus restent comme solution de repli documentée lorsque vous travaillez depuis le canevas web, mais ils sont non éprouvés et nécessitent la connexion du profil de test.

Prérequis (VÉRIFICATION PRÉALABLE)

La Voie 1 (DirectDesign) ne nécessite rien – pas de navigateur, pas d'authentification. La Voie 2 (interface CLI native) nécessite uniquement un abonnement Claude incluant Claude Design et un Claude Code à jour (/update si les commandes ne s'affichent pas). Les vérifications ci-dessous s'appliquent UNIQUEMENT à la Voie 3 (ClaudeDesign via Interceptor) :

1. Skill Interceptor disponible – which interceptor renvoie un chemin. Sinon, demandez à l'utilisateur d'invoquer d'abord la configuration de Skill("Interceptor").
2. Session claude.ai authentifiée – le profil Chrome interceptor-test doit être connecté à claude.ai. Vérifiez au moment de l'exécution (un profil non authentifié atteint le mur marketing, pas l'application) ; si ce n'est pas le cas, une connexion unique avec navigateur est requise avant que tout flux de travail de la Voie 3 puisse s'exécuter.
3. Accès à Claude Design – l'abonnement Claude doit inclure Claude Design (Pro, Max, Team ou Enterprise avec option administrateur activée).
4. Pour IntegrateIntoApp : chemin du projet parent + identifiant du framework (next, astro, vitepress, vite-react, vue, vanilla) transmis dans le contexte.

Prérequis manquants → arrêtez-vous avec une étape de correction claire. Ne reculez jamais silencieusement.

Pièges

Accumulez les leçons ici. La densité d'information est la plus élevée dans les pièges.

• Deux voies, un seul skill. ClaudeDesign (CreatePrototype et al.) pilote claude.ai/design ; DirectDesign fait écrire le design en ligne par {{DA_NAME}} en utilisant References/FrontendDesignPhilosophy.md. Ne les confondez pas. Lorsque l'intention de l'utilisateur est ambiguë, présentez les deux comme des choix nommés et laissez-le choisir – ne l'acheminez jamais silencieusement.
• Natif d'abord – le code et les tokens sont la source de vérité, Figma n'est pas une dépendance. Importez un système de design en liant le dépôt (Claude Design lit les composants et tokens réels à partir du code) ou en téléchargeant des fichiers de tokens/composants, jamais une exportation .fig. N'ajoutez PAS d'aller-retour Figma dans les deux sens (design → .fig, ou code → cadres Figma modifiables). Le pari est que le design vit dans le codebase, pas dans un fichier d'échange externe. Si un besoin de révision visuelle sans dépôt survient un jour, résolvez-le avec un partage d'URL/capture d'écran, pas en couplant le skill à Figma.
• DirectDesign est autonome. La doctrine esthétique se trouve dans References/FrontendDesignPhilosophy.md (reflétée depuis la source MIT anthropics/skills). Aucune dépendance d'exécution sur le plugin frontend-design de Claude Code installé en amont – DirectDesign fonctionne dans tout environnement LifeOS.
• Les commandes natives /design + /design-sync sont désormais la voie liée au code (CONFIRMÉ). La documentation officielle d'Anthropic (support.claude.com/en/articles/14604416) documente les deux commandes, en GA sur Pro/Max/Team/Enterprise depuis juin 2026. /design-sync effectue une synchronisation bidirectionnelle codebase↔système de design – utilisez-la à la place de l'appareil de remise Interceptor pour tout ce qui est lié au code. Il n'y a toujours pas d'API REST publique ou de serveur MCP ; les commandes CLI sont la surface programmable. Si elles n'apparaissent pas, exécutez /update.
• La voie ClaudeDesign/Interceptor (Voie 3) est non éprouvée et actuellement bloquée. Elle n'a jamais été exécutée de bout en bout – chaque exécution réelle de ce skill a utilisé DirectDesign. Le profil interceptor-test n'est pas connecté à claude.ai, donc DriveClaudeDesign.ts atteint le mur marketing, pas l'application. L'outil cible les contrôles par des heuristiques d'arborescence d'accessibilité (compositeur par role=textbox/contenteditable, envoi par /send|submit/, exportation par /export/), donc un bouton déplacé n'est PAS le blocage – l'authentification manquante et la supplantation par l'interface CLI native le sont. Avant de faire confiance à la Voie 3 : connectez le profil de test à claude.ai une fois, puis effectuez une seule exécution supervisée.
• Chrome réel requis. Utilisez le skill Interceptor – c'est la seule automatisation de navigateur autorisée dans LifeOS. L'interface utilisateur de Claude Design dépend de l'état complet de la session de claude.ai ; l'automatisation basée sur CDP déclenche la détection de bots et supprime les cookies de session.
• Les bundles de remise sont des répertoires, pas des fichiers uniques. Un bundle contient PROMPT.md, éventuellement tokens.json, components/, assets/, et un échafaudage spécifique au framework. Traitez l'ensemble du répertoire comme l'unité.
• Le plugin frontend-design s'active automatiquement. Lorsque le bundle de remise est transmis à Claude Code, le plugin (déjà installé dans la place de marché officielle) prend en charge le travail frontend automatiquement – ne l'invoquez PAS manuellement.
• L'extraction du système de design par Claude Design a lieu lors de l'intégration initiale. Pour un nouveau codebase que vous souhaitez faire comprendre à Claude Design, exécutez ExtractDesignSystem D'ABORD avant CreatePrototype – sinon Claude Design utilise des valeurs par défaut génériques et écrase vos tokens.
• Intégration ≠ écrasement. IntegrateIntoApp produit des diffs par-dessus le code existant. Si l'utilisateur veut une refonte complète qui remplace l'interface utilisateur existante, signalez-le explicitement et obtenez une confirmation.
• Les exportations Canva sont modifiables. Si l'utilisateur souhaite qu'un non-développeur (marketeur, fondateur) affine le design, acheminez via Workflows/ExportToCode.md avec --format canva.
• Pas de collaboration en temps réel. Claude Design ne prend pas en charge l'édition multiposte comme Figma. Partagez via une exportation d'URL pour une révision asynchrone.
• Barrière Enterprise. Les comptes Enterprise doivent demander à un administrateur d'activer Claude Design dans les paramètres de l'organisation avant que l'icône de palette n'apparaisse dans claude.ai.
• Quotas de session. La génération de Claude Design est gourmande en tokens. Depuis la mise à jour de juin 2026, son utilisation partage un même pool avec le chat claude.ai, Claude Code et Cowork – ce n'est plus un quota séparé. Pro est limité pour un travail de design soutenu ; Max est recommandé.
• Le système de design d'abord est la solution aux tokens. Le plus grand consommateur de tokens est la ré-inférence de votre marque à chaque passage et sa correction. Exécutez ExtractDesignSystem une fois pour que le système soit une référence fixe et réutilisable ; chaque génération ultérieure le réutilise au lieu de deviner. Moins de cycles de correction = beaucoup moins de tokens sur la durée d'un projet. C'est la mesure unique la plus efficace contre l'épuisement des quotas.
• La fidélité de la sortie n'est pas prête pour la production. Claude Design produit des visuels soignés, mais le code de remise a souvent besoin d'une vérification + d'un passage d'accessibilité. Exécutez Tools/VerifyDesign.ts après l'intégration.
• Vision ne devine pas. Si le prompt ne spécifie pas les points de rupture responsifs, les exigences de contraste ou le comportement en mode sombre, Claude Design choisit des valeurs par défaut qui peuvent ne pas correspondre à l'application cible. Soyez explicite dans le brief.

Exemples

Exemple 1 : Créer un prototype à partir d'un brief

Utilisateur : "Conçois une page de tarification pour une start-up de sécurité IA – esthétique éditoriale, mode sombre uniquement"
→ Invoque le flux de travail CreatePrototype
→ Vérification préalable : Interceptor + session claude.ai authentifiée
→ Compose un brief avec une esthétique explicite, des contraintes, une différenciation
→ Pilote claude.ai/design via Tools

…

[tronqué pour la traduction]