art-direction

art-direction

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

En une phrase

DéfinirTransforme uneun brief vague ("je veux un truc moderne et chaleureux") en direction artistique web fortecomplète (et actionnable : palette, typo, motifs,typographie, layout, motion)motion, àimagerie partir— d’unplus brief flou ou incomplet. À utiliser au démarrage d’une création/refonte.alternative contrastée pour comparer.

Quand l'utiliser

• VoirAu latout descriptiondémarrage ci-dessusd'un projet quand on n'a que des mots flous comme brief

Pour proposer deux directions visuelles différentes à un client et lale sectionfaire «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 allerune plusrefonte loinoù ».il faut articuler "pourquoi ce nouveau look et pas l'ancien"

Comment l'invoquer

• Slash command : /art-direction (si exposé dans ton CLI)

Phrases déclencheurs : voir la description complète ci-dessous Auto-invocation : sur✅ demandeOui explicite— au démarrage d'une création ou refonte

PourDescription aller plus loin

Art Direction

Objectifdétaillée

TransformerLa un brief (même minimal) en direction artistique actionnableest 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 : décisionsaudience visuelles,cible, tokenspromesse, ton de base, règles de composition, et une alternative.

Procédure

Extraire : audience, promesse, ton,voix, contraintes techniques (stack, délais, contenus)contenus à présenter). ProposerEnsuite il propose 1deux DAdirections principaleartistiques + 1 alternativecontrastées — pas deux variantes proches, mais deux pistes vraiment différentes (contrastées)par exemple "éditorial sobre serif" vs "brutal coloré sans-serif déformée"). DéfinirChaque ladirection signaturecomporte :

5 mood wordswords, 1une phrase “signature”signature, 3 règles non négociablesnégociables, (typo / layout / couleur / motion / imagerie) Généreret un pack prêt-dev :

Palette (rolescomplet : bg/surface/text/muted/primary/accent/danger/success)palette Typopar rôles, typo pairing (displaydisplay+body + body) +avec tailles (clamp)clamp() +et line-heightheights, Spacingéchelle scaled'espacements, +radius, radiiombres, + shadows Motifsmotifs UI (bento, editorial, brutal, glass, organique,organique), etc.)principes Motionmotion. principles

À la sortie, tu as deux fiches DA structurées identiquement (durations/easing/distances)

pour comparer terme à

Outputterme), attenduplus (format)

un

DA"tokens 1quick —draft" Principale

en

JSON Mood:minimal Signature:et DoCSS /variables Don’tprêtes (3/3)pour les modes light + dark. Pour Thymon :

(extrait — voirc'est le SKILL.mdskill completà pourdégainer laau suite)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