Un Design Tokens Explorer pour aligner designers et développeurs
En tant que designer travaillant avec des développeurs, j'ai constaté une friction récurrente : la traduction des décisions design en code. Les design tokens (couleurs, espacements, typographies) étaient documentés dans Figma, mais les devs devaient manuellement copier-coller les valeurs, générant incohérences et frustration.
Défi : Comment créer un pont vivant entre les design tokens Figma et le code, permettant aux designers et devs de parler le même langage ?
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.
Un vibecoded devenu outil quotidien, et la preuve que je sais builder end-to-end.
Utilisateurs cibles : Designers utilisant Figma, Développeurs front-end (React, Vue, Angular), Product teams
Vibecodé en 3 mois : de l'idée au produit utilisable
8 interviews designers/devs + analyse de 3 outils existants + exploration de 3 concepts wireframes. Valider le problème et définir le MVP.
Maquettes Figma + prototype interactif testé avec 5 utilisateurs. Documenter les micro-interactions et créer le Design System du projet (méta!).
Next.js 14 + TypeScript + Tailwind. Parser multi-format (JSON, YAML) + interface d'exploration + export code 4 formats. 100% vibecoded avec Claude Code et Cursor.
Beta testing avec 12 utilisateurs. Bug fixes, optimisations et création de la landing page + documentation complète.
Méthodes : User Interviews, Rapid Prototyping, Vibecodng (AI-assisted dev), Iterative Design, Dogfooding (using it myself daily)
Un explorer de tokens intuitif qui génère du code prêt à l'emploi
Impact : Setup en moins de 30 secondes
Impact : Trouvez n'importe quel token en <3 secondes
Impact : 0 erreur de copie manuelle
Impact : Réduction des allers-retours design/dev
Impact : Validation dark mode sans effort
Impact : Single source of truth vivante
Un vibecoded devenu outil quotidien pour plusieurs équipes
Polytoken a transformé notre workflow. Plus besoin de chasser les valeurs dans Figma ou de demander au designer "c'est quelle couleur déjà ?". Tout est là, clair, avec le code prêt à copier.
Thomas D., Lead Developer @ Startup SaaS
En tant que designer, je l'utilise pour vérifier la cohérence de mon DS avant de le passer aux devs. Le preview contextuel m'a fait gagner des heures de QA visuelle.
Julie R., Product Designer
Ce vibecoded m'a prouvé qu'on peut créer un produit complet en portant toutes les casquettes.
Rôle : Product Builder, 3 mois (vibecoded)
Outils : TypeScript, Next.js, Figma Plugin API, Jest, GitHub Actions
Thématiques : Design System, Dev Tools, DesignOps
Formée en psychologie, je transforme des problèmes complexes en produits que les gens comprennent et adoptent.