Vite Fait, Bien Fait
En productionL'almanach numérique d'aide aux démarches administratives françaises pour publics vulnérables.
- Next.js 15
- TypeScript
- Tailwind v4
- shadcn/ui
- MDX
- Zod
- Vitest
- Playwright
- Pa11y CI
- Vercel
Vite Fait, Bien Fait guide les personnes en situation de vulnérabilité administrative — handicap, précarité, créateurs de structure — à travers leurs démarches en indiquant exactement quoi faire, avec quel organisme, quels documents fournir et quelle lettre envoyer, en fonction de leur problématique et de leur lieu de vie (v1 : Île-de-France).
Le problème
Les sites institutionnels français ne sont pas pensés pour les publics vulnérables : information dispersée, jargon administratif, parcours inintelligible. Les guides corporate visent les actifs ou les entreprises — personne ne fait l'effort pour les personnes en handicap, en précarité ou qui créent une petite structure.
Promesse de marque : Vite (droit au but, pas de blabla), Bien fait (info exacte, contacts vérifiés, lettres conformes), cool sans être pote (ton calme, factuel).
La solution
Un almanach pratique tenu par « quelqu'un qui connaît le système ». L'utilisateur entre son code postal et sa problématique, on lui sort un parcours géolocalisé : arbre de décision, fiches procédure avec étapes, organismes locaux à contacter, formulaires CERFA à remplir, et lettres-types prêtes à envoyer.
Le contenu est versionné en Git en MDX avec validation Zod au build — chaque procédure, lettre, contact local passe par une PR review avant publication.
Ce qui est livré
- 3 arbres de décision (handicap / précarité / création-structure)
- Fiches procédure avec étapes + contacts + liens CERFA
- Lettres-types avec export HTML/PDF
- Filtre géographique CP → ville → département → région (IDF v1)
- Mode admin avec rebuild on-demand
- WCAG 2.2 AA + Pa11y CI
- Glossaire des sigles administratifs avec tooltips ARIA
- Analytics Plausible (sans cookie)
- Mode sombre + TOC sticky + recherche Cmd-Kwip
Process IA
Le projet a été développé avec Claude Code, en suivant la convention « 1 PR = 1 session » pour éviter la dérive de contexte sur longs cycles. La refonte visuelle a été pilotée avec Claude Design : un brief court a produit en une passe un design system complet (palette mode clair/sombre WCAG AAA, 3 familles typo, 8 sections de composants), exécuté ensuite en 4 PRs phasées avec gates Lighthouse + Pa11y.
Retour détaillé sur l'usage de Claude Design dans l'article best-practices-ia/claude-design.
- Claude Code (Anthropic)
- Claude Design (Anthropic)
- Superpowers (Jesse Vincent)