7 repos GitHub pour construire des sites avec l'IA en 2027

7 repos GitHub pour construire des sites avec l’IA en 2027

Source: (@thegreatest_sv) — post du 6 novembre 2026

Aucun web designer humain n’a envie de se battre contre ça en 2027.

Vous regardez des agents IA construire des sites à une vitesse que la plupart des humains ne peuvent pas suivre. Et le plus inquiétant : ces outils sont accessibles à presque tout le monde.

Voici les 7 dépôts GitHub à connaître avant que vos clients trouvent quelqu’un qui les maîtrise déjà.

1. Bolt.diy — construire des sites entiers avec l’IA

Générer, éditer et exécuter des applications web full-stack avec l’IA.

stackblitz-labs/bolt.diy — 20 046 ⭐ — MIT — TypeScript

La version open source de Bolt.new : vous branchez le LLM de votre choix (Claude, GPT, Gemini, un modèle local), vous prompez, et l’environnement installe les dépendances puis exécute l’application dans le navigateur. Pas de dépendance à un fournisseur unique, pas de quota imposé.

GitHub : https://github.com/stackblitz-labs/bolt.diy

2. shadcn/ui — de l’UI professionnelle en quelques minutes

Des composants beaux et personnalisables pour les sites modernes.

shadcn-ui/ui — 127 550 ⭐ — MIT — TypeScript

Le composant n’est pas installé comme une dépendance : le code est copié dans votre projet, vous le possédez et vous le modifiez. C’est exactement ce qu’il faut à un agent — il lit le fichier, il le change, il n’y a pas de boîte noire. Devenu le standard de fait du front React/Tailwind moderne.

GitHub : https://github.com/shadcn-ui/ui

3. Magic MCP — votre designer front-end IA

Générer des composants React soignés directement depuis votre workflow de code IA.

21st-dev/magic-mcp — 6 408 ⭐ — ISC — TypeScript

Un serveur MCP qui branche la bibliothèque de 21st.dev (plus de 10 000 composants React/Tailwind) dans Cursor, Claude Code ou Windsurf : l’agent cherche un composant existant, en génère un nouveau, ou publie le vôtre — sans quitter l’éditeur.

⚠️ Le projet s’appelle désormais 21st MCP ; le paquet magic-mcp reste maintenu pour ne pas casser les configurations existantes. La configuration à jour est sur 21st.dev/mcp.

GitHub : https://github.com/21st-dev/magic-mcp

4. Playwright MCP — l’IA qui teste son propre travail

Laisser les agents ouvrir des sites, cliquer sur des boutons et attraper les bugs d’interface.

microsoft/playwright-mcp — 39 289 ⭐ — Apache-2.0 — TypeScript

Plutôt que de renvoyer des captures d’écran (coûteuses en tokens et ambiguës), ce serveur MCP expose l’arbre d’accessibilité de la page : l’agent « voit » la structure réelle du DOM, clique, remplit un formulaire, vérifie le résultat. C’est la pièce qui referme la boucle : générer → lancer → tester → corriger, sans humain au milieu.

GitHub : https://github.com/microsoft/playwright-mcp

5. Chrome DevTools MCP — réparer un site cassé plus vite

Donner à l’IA l’accès au débogage navigateur, aux performances et aux diagnostics réseau.

ChromeDevTools/chrome-devtools-mcp — 54 910 ⭐ — Apache-2.0 — TypeScript

L’agent pilote un vrai Chrome : console, requêtes réseau, traces de performance, Core Web Vitals. Il ne devine plus pourquoi la page est lente ou pourquoi un appel API échoue — il lit le panneau Performance comme un dev senior.

GitHub : https://github.com/ChromeDevTools/chrome-devtools-mcp

6. Vercel Agent Skills — rendre le code IA prêt pour la production

Optimisation React, bonnes pratiques front-end et revues de design web.

vercel-labs/agent-skills — 33 660 ⭐ — JavaScript

Le pack officiel de skills de Vercel, au format Agent Skills (skills.sh) :

• react-best-practices — 40+ règles de perf React/Next.js en 8 catégories, classées par impact (waterfalls, taille de bundle, rendu serveur, re-renders…) ;
• web-design-guidelines — audit de l’UI sur 100+ règles : accessibilité, états de focus, formulaires, sémantique HTML ;
• vercel-optimize — audit d’un projet déployé pour le coût, la performance, le cache et l’usage des fonctions.

C’est ce qui transforme une démo générée en quelques secondes en quelque chose qu’on ose mettre en ligne.

GitHub : https://github.com/vercel-labs/agent-skills

7. Webstudio — construire visuellement, garder le contrôle

Un constructeur de sites visuel open source, avec composants et styles réutilisables.

webstudio-is/webstudio — 9 152 ⭐ — AGPL-3.0 — TypeScript

L’alternative open source à Webflow : toutes les propriétés CSS sont exposées, connexion à n’importe quel CMS headless, hébergement où vous voulez (y compris Cloudflare Workers). L’endroit où un humain reprend la main sur ce que l’agent a produit, sans repartir de zéro.

GitHub : https://github.com/webstudio-is/webstudio

La vraie menace

Ce n’est pas l’IA qui remplace tous les designers.

C’est une seule personne qui utilise l’IA pour livrer ce qui demandait auparavant une équipe entière.

2027 arrive vite. Apprenez ces outils avant vos concurrents.

Vérification au 7 novembre 2026 : les 7 dépôts existent, sont publics et actifs ; les compteurs d’étoiles et les licences cités viennent de l’API GitHub.