Leçon 1 — Pipeline complet : de vercel.com à un design system exploitable
mai 2026 · 5 min de lecture
Leçon 1 — Pipeline complet : de vercel.com à un design system exploitable
Dans cette leçon, on installe les 3 outils du pipeline, on extrait le design system de Vercel et on lance open-design en local.
Les 3 outils du pipeline
designlang
Analyse une URL et génère 21 fichiers de sortie en 5 secondes : tokens W3C, config Tailwind, stubs React, variables CSS, brand voice, score accessibilité.
Repo : Manavarya09/design-extract
open-design
Interface web locale qui génère des prototypes HTML interactifs à partir de prompts. Compatible Claude Code, Cursor, Codex et une dizaine d'autres agents.
Repo : nexu-io/open-design
impeccable
Un skill installé directement dans Claude Code. 23 commandes de design, 27 règles de détection d'anti-patterns, 7 guides de référence (typo, couleur, motion, responsive...).
Repo : pbakaus/impeccable
Installation
# 1. designlang
npm i -g designlang
# 2. pnpm (requis pour open-design)
npm install -g pnpm
# 3. open-design
git clone https://github.com/nexu-io/open-design.git
cd open-design
pnpm install
# 4. impeccable (s'intègre dans Claude Code)
npm install -g impeccable
npx impeccable skills install --yes --global
Extraction du design de Vercel
npx designlang https://vercel.com
Résultat en 5.2 secondes — 2935 éléments analysés.
Ce que designlang a détecté
Palette de couleurs
| Rôle | Hex | Occurrences |
|---|---|---|
| Primary | #0068d6 |
7 |
| Secondary | #52aeff |
6 |
| Accent | #0072f5 |
5 |
| Background | #fafafa |
— |
| Foreground | #171717 |
4262 |
Le noir #171717 domine massivement. Vercel utilise une hiérarchie de gris très précise : #4d4d4d, #666666, #7d7d7d, #8f8f8f.
Typographie
- Police principale : Geist — 2868 utilisations
- Police code : Geist Mono — 66 utilisations
- Taille base : 16px
| Niveau | Taille | Graisse |
|---|---|---|
| H1 | 48px | 600 |
| H2 | 40px | 600 |
| H3 | 32px | 400 |
| H4 | 24px | 600 |
Layout
- Base d'espacement : 2px (tout est multiple de 2)
- Scale :
1px · 24px · 32px · 36px · 40px · 44px · 48px · 85px · 90px · 96px - 56 grids + 496 flex containers
- 411 CSS custom properties
Border radius
| Token | Valeur |
|---|---|
| xs | 2px |
| sm | 5px |
| md | 8px |
| lg | 16px |
| full | 32px |
Brand voice
Vercel écrit en ton neutre, s'adresse au lecteur en "you-only", titres en Title Case, formulations courtes.
Top CTAs : Sign up, Start deploying, Get a demo, Ask AI, Deploy AI apps in seconds.
Score design : 76/100 (C)
4 problèmes identifiés :
- 2 paires de couleurs qui échouent WCAG AA
- 788 règles
!important - 89% du CSS inutilisé
- 9124 déclarations CSS dupliquées
Les 21 fichiers générés
| Fichier | Utilité |
|---|---|
vercel-com-design-language.md |
Référence complète (45 KB) |
vercel-com-design-tokens.json |
Tokens W3C DTCG |
vercel-com-tailwind.config.js |
Config Tailwind drop-in |
vercel-com-variables.css |
411 CSS custom properties |
vercel-com-figma-variables.json |
Variables Figma |
vercel-com-shadcn-theme.css |
Thème shadcn/ui |
vercel-com-anatomy.tsx |
Stubs composants React |
vercel-com-DESIGN.md |
Format agent-native pour Claude Code |
vercel-com-voice.json |
Brand voice et patterns CTA |
vercel-com-motion-tokens.json |
Tokens d'animation |
vercel-com-intent.json |
Rôles de chaque section |
vercel-com-preview.html |
Preview visuelle |
Lancer open-design
cd open-design
PORT=3001 pnpm tools-dev run web
Si le port 3000 est déjà occupé, utilise la variable
PORTpour en choisir un autre.
L'interface s'ouvre sur une URL dynamique (ex: http://127.0.0.1:63928). Une fois dedans :
- Choisis le skill
web-prototype - Importe
vercel-com-DESIGN.mdcomme contexte design - Tape ton prompt — ex. : "Create a hero section for a SaaS deployment tool"
- Le prototype HTML se génère en live
Les commandes impeccable dans Claude Code
Une fois les skills installés, tape directement dans Claude Code :
/impeccable teach # Setup initial — donne ton contexte design
/impeccable craft landing # Conception + implémentation complète
/impeccable audit # Audit qualité (a11y, responsive, perf)
/impeccable critique # Review UX / design
/impeccable polish # Finitions avant livraison
/impeccable animate hero # Ajouter du mouvement purposeful
/impeccable bolder # Rendre le design plus affirmé
/impeccable distill # Simplifier un design surchargé
Pour détecter des anti-patterns sur du code :
npx impeccable detect src/
npx impeccable detect --json src/ # Output JSON pour CI/CD
Ce que ce workflow change
Avant, reverse-engineer le design d'un concurrent prenait des heures : DevTools ouvert, copier-coller de valeurs CSS, reconstruction manuelle des tokens.
Maintenant :
npx designlang https://un-site.com
En 5 secondes tu as les tokens, la config Tailwind, les composants, le brand voice et un fichier DESIGN.md que tu donnes directement à Claude Code pour générer des interfaces dans le même style.
Cas d'usage :
- Reproduire rapidement le style d'une marque existante
- Documenter ton propre design system depuis le site en production
- Analyser la cohérence d'un site avant une refonte
- Alimenter open-design avec un contexte visuel réel
Leçon générée avec Claude Code — pipeline complet disponible sur Build With Nath