1. Origine
Potato est un projet indie développé par Harshit Agrawal, un développeur indépendant de l'écosystème Webflow. L'extension est née d'un constat simple : certaines micro-tâches répétitives dans le Designer n'ont pas de raccourci natif (copier un SVG depuis l'asset panel, ajouter une valeur rem en une frappe, renseigner des alt-texts image par image…). Potato s'attaque à ces frictions avec des solutions légères et ciblées. La version actuelle (0.2.4, février 2025) compte environ 2 000 utilisateurs et une note de 5/5 sur le Chrome Web Store.
2. Utilité
Potato répond à des frictions très concrètes du workflow Webflow. Pour les équipes qui travaillent avec le système Client-First, l'ajout de "/16rem" en tapant la barre espace évite une saisie manuelle répétitive à chaque valeur de style. Pour la gestion des SVG, copier le code ou l'embed HTML directement depuis l'asset panel sans quitter le Designer élimine les allers-retours avec un éditeur externe. Pour les images, définir height et width en un clic minimise le Cumulative Layout Shift sans intervention manuelle sur chaque élément. Et la génération d'alt-texts par IA accélère une tâche souvent négligée mais critique pour le SEO et l'accessibilité.
3. Fonctionnalités
Potato couvre six fonctionnalités précises, toutes activées depuis l'extension Chrome pendant une session dans le Webflow Designer.
- Client-First : ajout de "/16rem" en un appui : une seule touche espace pour insérer la valeur dans le champ de style actif
- Copie de SVG depuis l'asset panel : copier le code SVG brut en un clic, sans télécharger le fichier
- Copie de SVG en HTML Embed : générer l'embed HTML prêt à coller dans un Code Embed Webflow
- Définition inline de height/width en un clic : minimise le CLS et améliore le score de performance Lighthouse
- Alt-text automatique par IA : génération d'alt-texts pour les images de l'asset panel via intelligence artificielle ou à partir du nom de fichier
- Class Name Helper : aide au nommage des classes selon les conventions du style system utilisé (Client-First, CUBE CSS, etc.)
4. Cas concrets
→ Sur un projet Client-First avec des dizaines de composants, chaque valeur rem est saisie manuellement dans les champs de style. Avec Potato, un appui espace insère "/16rem" directement : sur une session de build d'une journée, le gain cumulé est perceptible.
→ Lors de l'intégration d'icônes SVG dans un projet Webflow, Potato permet de copier le SVG ou son embed HTML directement depuis l'asset panel. Sur un projet avec une vingtaine d'icônes, c'est autant d'allers-retours avec un éditeur externe éliminés.
→ Avant publication d'un site avec une galerie d'images, Potato génère les alt-texts via IA depuis le nom de fichier ou une analyse de l'image, utile pour les sites avec de nombreux assets visuels.
5. Prix
L'extension Potato est entièrement gratuite.
6. Questions fréquentes
Potato est-il conçu pour les utilisateurs Client-First ?
Oui, c'est même son cas d'usage le plus explicite. La première fonctionnalité est conçue spécifiquement pour les designers Client-First qui insèrent des valeurs rem en boucle.
Potato est-il officiel ?
Non, c'est une extension indépendante développée par Harshit Agrawal, sans lien avec Webflow Inc.
Est-ce sécurisé ?
Oui, selon les déclarations du développeur sur le Chrome Web Store : aucune donnée utilisateur n'est collectée, vendue ou transférée à des tiers. L'extension pèse 31 Ko. Comme toujours, vérifier les permissions demandées avant installation.
Quelle est la différence avec Finsweet Extension ou ViDesigns Extension ?
Finsweet et ViDesigns proposent des fonctionnalités plus larges (gestion de composants, outils de développement avancés). Potato est plus léger et plus ciblé : six fonctionnalités précises, sans configuration. Les deux approches sont complémentaires.
