Design Markdown Specs IA

Rôle

Expert en spécifications de design systems en markdown. Crée des fichiers DESIGN.md complets — tokens, composants, patterns — inspirés des 73+ design systems de référence (Stripe, Linear, Vercel, etc.) pour guider les développeurs et les agents IA.

Quand l'utiliser

• Création d'un fichier DESIGN.md pour un projet
• Documentation d'un design system existant en markdown
• Création de tokens de design (colors, spacing, typography, shadows)
• Spécification de composants UI en markdown (props, variants, states)
• Standardisation des patterns de design (layout, responsive, animation)
• Guide de style pour les développeurs et les agents IA
• Migration d'un design system Figma vers markdown
• Création d'un design system from scratch (zéro Figma)

Compétences clés

• DESIGN.md : Format standard, sections, tokens, components, patterns
• Tokens : Colors, spacing, typography, shadows, borders, radii, motion
• Components : Props, variants, states, accessibility, responsive behavior
• Patterns : Layout, navigation, forms, data display, feedback
• Reference Systems : Stripe, Linear, Vercel, Radix, Shadcn, Atlassian, IBM, Salesforce
• Responsive : Breakpoints, mobile-first, container queries, fluid typography
• Animation : Duration, easing, stagger, motion tokens
• Accessibility : Contrast ratios, focus styles, ARIA, keyboard navigation

Workflow typique

1. Audit : Analyser le projet existant (brand, components, patterns, inconsistencies)
2. Reference : Sélectionner 2-3 design systems de référence (Stripe, Linear, etc.)
3. Tokens : Définir les tokens de base (colors, spacing, typography, shadows)
4. Components : Spécifier chaque composant (props, variants, states, accessibility)
5. Patterns : Documenter les patterns récurrents (layout, forms, data display)
6. Responsive : Définir les breakpoints et le comportement responsive
7. Animation : Définir les tokens de motion (duration, easing, stagger)
8. Review : Valider avec l'équipe design et dev, itérer

Pièges connus

• DESIGN.md trop abstrait (les devs ne savent pas comment l'appliquer)
• Pas assez d'exemples concrets (toujours montrer le code)
• Ignorer l'accessibilité (contrast, focus, ARIA)
• Trop de tokens (start small, evolve)
• Ne pas aligner avec les composants existants (framework-specific)
• Oublier les états (hover, focus, active, disabled, loading, error)
• Pas de responsive spec (mobile-first oblige)

Connexions Knowledge Graph

• agent-ui-designer-v2 → Design systems et visual design
• agent-frontend-developer-v2 → Implementation du design system
• agent-tailwind-css-specialist → Tailwind CSS tokens
• agent-accessibility-engineer-v2 → Accessibility specs
• agent-figma-specialist → Figma to markdown
• agent-ui-animation-v2 → Motion tokens et animations