Un éditeur de design collaboratif où humains et IA travaillent sur le même canvas. Décrivez ce que vous voulez en langage naturel, l'IA le construit en direct, et votre équipe itère en parallèle via Claude, Cursor, Windsurf, VS Code, Cline et Zed.
Les outils de design et les assistants IA vivent dans des fenêtres séparées. Les designers décrivent une UI dans Figma, puis la re-décrivent dans un chat pour obtenir du code ; les développeurs prompttent leur IDE, mais le design system ne suit pas. Chaque aller-retour fait perdre du contexte. Les équipes ont besoin d'un canvas unique où humains et IA peuvent éditer ensemble, avec le design comme source de vérité.
Nous avons conçu Cod'pen comme un éditeur de design IA-natif : un canvas collaboratif temps réel exposé aux agents IA via une intégration MCP. Designers et développeurs décrivent ce qu'ils veulent, l'assistant IA le construit directement sur le canvas avec des calques, composants et styles propres, et l'équipe affine côte à côte, curseurs en direct, synchro instantanée, historique de versions, aucun conflit de merge.
Un canvas unique pour designer avec l'IA
Cod'pen est le canvas collaboratif où vous décrivez ce que vous voulez et l'IA le construit en direct. Tapez « crée une section hero avec un titre, un sous-titre et deux boutons CTA », l'IA structure les calques, choisit les fonts et l'espacement, et dépose le résultat sur votre canvas en quelques secondes. Ensuite vous ajustez les couleurs, glissez les calques, calez les keyframes et livrez.
Compatible Claude, Cursor, Windsurf, VS Code, Cline et Zed, apportez votre assistant IA, le canvas est l'endroit où vous vous retrouvez.
Du setup au design en 3 étapes
- 1. Connectez votre assistant IA : branchez Claude, Cursor, Windsurf ou n'importe quel client MCP-compatible à votre workspace Cod'pen
- 2. Décrivez ce que vous voulez : « Crée une section hero avec un titre, un sous-titre et deux boutons CTA », L'IA designe… Terminé. Section hero créée
- 3. Affinez ensemble, livrez vite : toute l'équipe voit les changements en direct, édite avec l'IA, et le design reste la source de vérité unique
Pensé pour designers, développeurs et équipes
- Décrivez simplement ce que vous voulez : des pages complètes en une seule phrase, itération par dialogue avec l'IA
- Une IA qui voit votre design : l'assistant a un contexte complet sur les calques, composants et styles, pas juste un screenshot
- Collaboration ouverte : travaillez avec votre équipe et l'IA en même temps, curseurs en direct, synchro instantanée, aucun conflit, comme Figma, en plus malin
- Équipes et permissions : organisez le travail par équipes, projets et contrôle d'accès fin ; partagez des fichiers par lien, sans compte requis
- Historique de versions : remontez le temps, votre design reste la source de vérité
- Livrez 10x plus vite : transformez des idées en interfaces prêtes à passer en prod sans jongler entre les outils
La plateforme propulsée par l'IA qui transforme vos idées en interfaces prêtes pour la prod. Générées sur le canvas, affinées par votre équipe, livrées 10x plus vite.
Cod'pen expose son API de design via MCP (Model Context Protocol) : n'importe quel agent peut lire l'état de l'éditeur, placer des nœuds, éditer la mise en page, gérer les variables et capturer des pages, exactement les mêmes primitives qu'un humain via l'interface. Cette symétrie est ce qui permet aux humains et à l'IA de continuer à travailler sur le même artefact au lieu de s'échanger des screenshots.