Invitation de conception du système Claude conçue par rétro-ingénierie pour des agents d'IA UI sans déchets

La plupart des prompts "assistant de conception" produisent des modèles SaaS génériques — dégradés agressifs, décorations emoji, cartes aux coins arrondis et Inter partout. Le Claude Design System Prompt de Trystan-SA rejette explicitement ces schémas. C'est un prompt système rétro-conçu (licence MIT) qui transforme un LLM en collaborateur de conception exigeant, soucieux de l'accessibilité, et résistant à la médiocrité de l'IA.

Ce qui est inclus

• claude/system-prompt.md — 20 chapitres couvrant la discipline de contenu, la discipline esthétique, la hiérarchie visuelle, l'accessibilité WCAG, les états d'interaction, la pensée système (composants + tokens), et le respect du medium (vraie grille CSS, oklch(), text-wrap: pretty).
• claude/skills/ — 14 procédures invocables regroupées en Production (discovery-questions, frontend-aesthetic-direction, wireframe, make-a-deck, make-a-prototype, make-tweakable, generate-variations), Système (design-system-extract, component-extract), et Revue (accessibility-audit, ai-slop-check, hierarchy-rhythm-review, interaction-states-pass, polish-pass).
• Variante codex/ adaptée pour OpenAI Codex (boucle unique, sans sous-agents).

Comment l'utiliser

Collez le contenu de system-prompt.md comme prompt système de n'importe quel LLM (Claude, GPT, Gemini, modèles locaux). L'agent suit la philosophie de conception et référence les compétences par leur nom lorsque les tâches correspondent. Les compétences peuvent être enchaînées — un flux typique pour un projet nouveau : discovery-questions → frontend-aesthetic-direction → wireframe → make-a-prototype → polish-pass. Un flux sensible à la marque : design-system-extract → generate-variations → make-tweakable → polish-pass.

Principes de conception

Le prompt impose une discipline de contenu (pas de remplissage, chaque élément mérite sa place), une discipline esthétique (éviter les clichés IA, s'engager sur une palette et un ton), une hiérarchie visuelle et un rythme (taille, couleur, poids, position, densité, échelles d'espacement), l'accessibilité (WCAG, HTML sémantique, navigation clavier, anneaux de focus, préférences de mouvement), le feedback d'interaction (états survol, actif, désactivé, focus, chargement, validation), et la pensée système (composants et tokens plutôt que pages uniques).

À qui cela s'adresse

Développeurs utilisant des agents de codage IA qui souhaitent des résultats de conception exigeants et accessibles, sans clichés SaaS génériques.