art-direction

art-direction

Catalogue généré le 2026-05-11

En une phrase

Transforme un brief vague ("je veux un truc moderne et chaleureux") en direction artistique web complète et actionnable : palette, typographie, layout, motion, imagerie — plus une alternative contrastée pour comparer.

Quand l'utiliser

• Au tout démarrage d'un projet quand on n'a que des mots flous comme brief
• Pour proposer deux directions visuelles différentes à un client et le faire trancher
• Quand on veut sortir des sentiers battus AI-slop et donner une vraie identité au site
• Avant de plonger dans Figma ou dans le code, pour cadrer les décisions visuelles
• Pour une refonte où il faut articuler "pourquoi ce nouveau look et pas l'ancien"

Comment l'invoquer

• Slash command : /art-direction
• Auto-invocation : ✅ Oui — au démarrage d'une création ou refonte

Description détaillée

La direction artistique est l'étape qu'on saute toujours quand on est pressé, et qu'on regrette ensuite quand chaque écran fait un compromis différent. Ce skill la formalise en quatre temps.

D'abord il extrait du brief les éléments structurants : audience cible, promesse, ton de voix, contraintes techniques (stack, délais, contenus à présenter). Ensuite il propose deux directions artistiques contrastées — pas deux variantes proches, mais deux pistes vraiment différentes (par exemple "éditorial sobre serif" vs "brutal coloré sans-serif déformée"). Chaque direction comporte 5 mood words, une phrase signature, 3 règles non négociables, et un pack prêt-dev complet : palette par rôles, typo pairing display+body avec tailles clamp() et line-heights, échelle d'espacements, radius, ombres, motifs UI (bento, editorial, brutal, glass, organique), principes motion.

À la sortie, tu as deux fiches DA structurées identiquement (pour comparer terme à terme), plus un "tokens quick draft" en JSON minimal et CSS variables prêtes pour les modes light + dark. Pour Thymon : c'est le skill à dégainer au tout début d'un projet, avant même design-tokens ou frontend-design. Il transforme une discussion floue en deux pistes concrètes qu'on peut juger avec ses yeux.

Source

• Plugin : perso (standalone)
• Nom interne : art-direction
• Fichier : /home/thymon/.claude/skills/art-direction/SKILL.md