Taste Lab

taste : Capturer l'Essence du Design Taste grâce au Raisonnement Abductif

Dans le monde du développement moderne et de l'intelligence artificielle, la simple extraction de données techniques ne suffit plus à reproduire l'excellence visuelle d'un site web. C'est ici qu'intervient taste, un outil innovant créé par Sen Lin. Conçu pour transformer n'importe quelle URL en un contexte de design complet, taste permet à vos agents IA de comprendre non seulement les chiffres, mais surtout le design taste qui anime une interface.

Qu'est-ce que taste ?

Le concept de taste repose sur une équation simple mais profonde : taste = décisions × compromis (trade-offs).

Alors que la plupart des outils d'extraction se contentent de fournir des jetons (tokens) — comme une couleur de fond #08090A, une police Inter ou un rayon de bordure de 6px — taste va beaucoup plus loin. Ces éléments ne sont qu'une fiche technique. Le véritable design taste réside dans le « pourquoi ».

La philosophie du design taste

• Une décision représente le pourquoi : par exemple, pourquoi avoir choisi ce noir spécifique plutôt qu'un noir pur ?
• Un compromis (trade-off) examine les deux aspects d'un choix : ce qui a été sélectionné et ce qui a été délibérément laissé de côté.

Lorsqu'un agent IA ne possède que des jetons, il copie des nombres sans les comprendre. Un agent doté de taste comprend la signification de chaque décision. Il devient alors capable de prendre les bonnes résolutions de design sur une page qu'il n'a encore jamais vue.

Les Caractéristiques de taste

taste utilise le raisonnement abductif pour rétro-concevoir l'esthétique d'un site. Il transforme une interface complexe en un fichier de contexte utilisable par n'importe quel outil d'IA.

Un pipeline de précision en quatre étapes

Le fonctionnement de taste repose sur quatre agents IA distincts, chacun ayant un rôle spécifique pour affiner l'analyse du design taste :

1. Extract (Extraction des mesures) : Un agent IA Senior en Design extrait des mesures objectives et précises (couleurs, poids, espacements, rayons, ombres) sans aucune approximation.
2. Detect (Détection des motifs) : Un ingénieur principal en design détecte les règles systématiques à partir des mesures extraites, en fournissant des preuves et des objectifs de design pour chaque motif.
3. Infer (Inférence du taste) : Un critique de design ultime dérive le taste en identifiant les compromis délibérés et parfois difficiles faits par le designer.
4. Observe (Observation et filtrage) : Un éditeur final filtre impitoyablement l'analyse pour garantir un résultat sans fioritures (« zero bullshit ») et valide le format de sortie.

Des sorties structurées pour l'IA

Chaque exécution de taste génère deux fichiers ({domain}.md et {domain}.json) divisés en deux parties :

• Partie 1 : Design Map — Un ensemble complet de jetons (couleurs, typographie, espacement, rayons, ombres).
• Partie 2 : Taste DNA — Quatre principes fondamentaux expliquant le raisonnement derrière chaque choix de design.

Les Composants du Taste DNA

Chaque principe contenu dans le Taste DNA de l'outil taste comprend cinq éléments clés pour une compréhension totale :

• Trigger (Déclencheur) : Ce qui a provoqué le choix de design.
• Decision (Décision) : Ce qui a été choisi précisément.
• Reason (Raison) : La logique de design derrière le choix.
• Evidence (Preuve) : Preuve spécifique issue de la page (px, hex, valeurs DOM).
• Trade-off (Compromis) : Ce que ce choix sacrifie au profit de l'esthétique ou de la fonction.

Cas d'Usage : Pourquoi utiliser taste ?

taste est l'outil idéal pour les développeurs et designers qui travaillent avec des agents IA et souhaitent maintenir une cohérence visuelle de haut niveau. Il s'intègre parfaitement avec vos outils quotidiens :

• Cursor : Intégration via .cursor/rules/{domain}-taste.mdc.
• Windsurf : Utilisation de .windsurf/rules/{domain}-taste.md.
• Claude Code : Ajout d'une section Design Taste dans CLAUDE.md.
• GitHub Copilot : Instructions via .github/copilot-instructions.md.
• Outils de génération (v0, Figma Make, Lovable) : Exportation de jetons CSS et instructions spécifiques.

En fournissant le design taste à votre agent, vous lui permettez de coder des interfaces qui respectent l'âme du design original, et pas seulement sa structure brute.

Comment utiliser taste ?

L'installation et l'exécution de taste se font en trois étapes simples. Une fois configuré, vous pouvez lancer l'analyse sur n'importe quelle URL.

Guide d'installation rapide

1. Cloner le dépôt : Clonez l'outil dans votre répertoire de compétences Claude : git clone https://github.com/senlindesign/taste-skill ~/.claude/skills/taste

2. Installer Playwright MCP : Cette étape unique permet de télécharger Chromium (environ 100 Mo) pour l'extraction de données : claude mcp add playwright -s user -- npx -y @playwright/mcp@latest --isolated

3. Exécuter taste : Redémarrez Claude Code, puis lancez l'analyse sur l'URL de votre choix : /taste https://linear.app

FAQ sur taste

Quelles sont les catégories de mesures analysées par taste ? taste analyse 20 catégories de mesures, incluant toutes les couleurs (hex), les poids de police, les valeurs d'espacement (px), les rayons de bordure et les ratios de contraste.

Quel est le format du Design Map généré ? Le Design Map inclut le système de couleurs (fond de page, surfaces, texte primaire/secondaire), la typographie détaillée (H1, H2, corps de texte avec tracking et interlignage), l'espacement (unités de base, paddings) et les effets de profondeur (ombres, bordures inset).

Le projet taste est-il open source ? Oui, taste est un projet de Sen Lin disponible sur GitHub. Vous pouvez consulter le code, contribuer ou l'installer comme une compétence pour vos agents IA.

Est-ce que taste fonctionne avec des outils comme Figma ou v0 ? Absolument. taste peut générer des fichiers taste-tokens.css ou taste-figma.css accompagnés d'instructions pour que ces outils puissent appliquer fidèlement le design taste extrait.

---

Un projet passion par Sen Lin. Disponible sur GitHub, Substack et Medium.