Polytoken : Un outil de design tokens conçu et développé seul, en 3 mois, le soir et le week-end. Du problème identifié au produit en prod.
La friction sur les tokens revenait à chaque sprint. J'ai construit l'outil pour la supprimer. Seule, sans budget, sans attendre.
Contexte
Dans mon équipe, il n'y avait pas de DS Engineer. Les variables Figma restaient vides : trop complexes à structurer correctement (nomenclature, scopes, modes, alias). Résultat : des valeurs hex copiées manuellement à chaque sprint, une dette UI qui s'accumulait, et des handoffs qui demandaient systématiquement une traduction design-to-code.
Défi : Comment permettre à n'importe quel designer de générer des variables Figma structurées, conformes et prêtes pour le code, sans maîtriser la mécanique sous-jacente ?
Objectif : Créer un pont vivant entre les décisions design et le code, pour que designers et développeurs parlent enfin la même langue.
- ~23k lignes de code, 137 tests automatisés
- 5 personnes dans l'équipe l'utilisent au quotidien
- Plugin Figma live, CI/CD GitHub Actions
La preuve que je sais identifier un problème dans mon équipe, concevoir la solution, et la livrer de A à Z.
Utilisateurs cibles : Designers utilisant Figma, Développeurs front-end (React, Vue, Angular), Product teams
- Side project : temps limité (soirées/weekends)
- Budget zéro : pas de backend complexe
- Solo project : toutes les casquettes (design, dev, product)
- Doit être générique : fonctionner avec n'importe quel Design System
Approche
Vibecodé en 3 mois : de l'idée au produit utilisable
1. Discovery & Validation
8 interviews designers/devs + analyse de 3 outils existants + exploration de 3 concepts wireframes. Valider le problème et définir le MVP.
- 8 interviews avec des designers/devs de mon réseau
- Analyse des outils existants : Zeroheight, Supernova, Specify
- Définition du MVP : focus sur l'essentiel
- Wireframes papier : 3 concepts explorés
2. Design & Prototypage
Maquettes Figma + prototype interactif testé avec 5 utilisateurs. Documenter les micro-interactions et créer le Design System du projet (méta!).
- Maquettes haute-fidélité (Figma)
- Prototype interactif testé avec 5 users
- Micro-interactions documentées
- Design System du projet (méta!)
3. Développement
Next.js 14 + TypeScript + Tailwind. Parser multi-format (JSON, YAML) + interface d'exploration + export code 4 formats. 100% vibecoded avec Claude Code et Cursor.
- Stack : Next.js 14, TypeScript, Tailwind, shadcn/ui
- Parser de fichiers de tokens (JSON, YAML)
- Interface d'exploration interactive
- Export code (CSS, SCSS, JS, TS)
- Dark mode
- Responsive design
4. Tests & Refinement
Beta testing avec 12 utilisateurs. Bug fixes, optimisations et création de la landing page + documentation complète.
- Beta testing avec 12 utilisateurs
- Bug fixes et optimisations
- Documentation utilisateur
- Landing page + onboarding
Méthodes : User Interviews, Rapid Prototyping, Vibecodng (AI-assisted dev), Iterative Design, Dogfooding (using it myself daily)
Solution
Un explorer de tokens intuitif qui génère du code prêt à l'emploi
📦 Import facile de tokens
Impact : Setup en moins de 30 secondes
🔍 Navigation visuelle & recherche
Impact : Trouvez n'importe quel token en <3 secondes
💻 Export code multiformat
Impact : 0 erreur de copie manuelle
🎨 Preview contextuel
Impact : Réduction des allers-retours design/dev
🌗 Dark mode intelligent
Impact : Validation dark mode sans effort
📚 Documentation auto-générée
Impact : Single source of truth vivante
- Web app complète (Next.js)
- Documentation utilisateur
- Tutoriels vidéo
- Templates de tokens de démarrage
Résultats
Un vibecoded devenu outil quotidien pour plusieurs équipes
- ~23k Lignes de code : Codebase complète du plugin
- 137 Tests automatisés : Suite Jest, CI/CD GitHub Actions
- 5 Utilisateurs équipe : Adoption organique, sans onboarding forcé
- 3 mois Side project : Soirées et weekends, de l'idée au prod
- 5 Fonctionnalités : Génération, A11Y, modes, scan, export
- Solo Toutes casquettes : Design, algo, dev, tests, CI/CD
Ce que j'ai appris
Ce vibecoded m'a prouvé qu'on peut créer un produit complet en portant toutes les casquettes.
- Prioriser l'adoption sur l'expertise : Dès la phase de conception, j'ai refusé de créer un outil pour "Power Users". J'ai choisi d'abstraire la complexité technique pour proposer une automatisation invisible. Le succès d'un outil interne dépend de sa capacité à être utilisé sans effort par ceux qui n'ont pas le temps de le maîtriser.
- L'IA comme multiplicateur de force (Vibecoding) : Grâce à Cursor et Claude Code, j'ai construit une codebase complexe (~23k lignes) à la vitesse de mes intuitions. L'IA a comblé le gap technique, me permettant de rester concentré sur les arbitrages produit et l'UX, tout en accélérant mon cycle d'itération par 10.
- Réconcilier les deux mondes : Maîtriser la logique des tokens côté code a radicalement changé ma façon de designer. Aujourd'hui, mes spécifications sont plus précises et mes échanges avec les ingénieurs sont devenus fluides : nous parlons enfin le même langage technique, ce qui supprime les ambiguïtés au handoff.
Compétences mobilisées
Rôle : Product Builder, 3 mois (vibecoded)
- Product Design
- Front-end Development
- TypeScript
- React/Next.js
- Design Tokens
- Developer Experience
- AI-assisted Development
Outils : TypeScript, Next.js, Figma Plugin API, Jest, GitHub Actions
Thématiques : Builder Mindset, Solo Project, Design System, Dev Tools
