Le blog

Du développement à l'orchestration : comment l'IA redéfinit nos métiers

Publié le 18 février 2026

Chez Les-Tilleuls.coop, nous avons toujours à cœur d'explorer les technologies émergentes pour comprendre comment elles peuvent servir nos clients, mais aussi comment elles transforment notre propre quotidien. Récemment, nous nous sommes réunis pour un partage d'usages autour des LLM (Large Language Models). Loin du hype marketing, nous avons discuté concrètement : qu'est-ce qui marche ? Qu'est-ce qui est gadget ? Et surtout, comment notre métier est-il en train de d’évoluer avec l'IA ? De l'orchestration d'agents autonomes à la gestion de la "mémoire" des projets, voici un retour d'expérience sur nos premières explorations.

Illustration d'une femme en communication avec un robot" class="wp-image-12288#

Le changement de paradigme : du codeur à l'orchestrateur

C'est peut-être le constat le plus frappant de nos échanges : le rôle de développeur·se évolue. Au sein de l'équipe technique, on ne parle plus seulement d'écriture de code, mais de plus en plus de supervision. Si nous n'en sommes pas encore à laisser des flottes d'IA gérer nos projets en autonomie, nous identifions clairement que c'est la suite logique. Des outils comme Antigravity ou Open Code préfigurent déjà des flux de travail multi-agents où les tâches seraient cloisonnées :

  • Un agent analyserait la documentation d'une API et créerait un plan.
  • Un second agent implémenterait la fonctionnalité.
  • Un troisième exécuterait les tests.
  • Un dernier agent rédigerait la documentation de la session.

Le ou la dev passera demain moins de temps à écrire des lignes de code et davantage à relire, valider et orchestrer le travail des IA. L'intelligence artificielle agit ici comme une nouvelle couche d'abstraction, comparable à l'évolution des langages de bas niveau vers des langages de haut niveau dans un sens. C'est une bascule vers un rôle plus "managérial" vis-à-vis du code, mais qui n'enlève rien à la responsabilité : l'expert humain reste le seul garant de la qualité, de la sécurité et de la maintenabilité du code mis en production.

#

Le Markdown : structurer la connaissance pour décupler la pertinence de l'IA

Pour tirer le meilleur parti d'un LLM, la gestion du contexte est primordiale. En effet, la fenêtre de contexte des modèles (la quantité d'informations qu'ils peuvent traiter simultanément) reste une ressource finie et coûteuse : il est souvent impossible ou inefficace de leur fournir l'intégralité d'une base de code brute. Nous avons identifié une bonne pratique qui émerge comme un standard : l'utilisation de fichiers Markdown au sein du repository du projet pour constituer la "mémoire" de celui-ci.

Cette démarche s'inscrit dans le prolongement de la philosophie "Documentation as Code". La différence fondamentale est que cette documentation devient hybride : au-delà de son rôle classique d'onboarding pour les développeur·ses, elle constitue désormais la mémoire vive indispensable au modèle LLM.

Nous ne réinventons pas la documentation, mais nous documentons davantage et de manière plus structurée, souvent assistés par l'IA elle-même.

#

Définir un process commun Dev/PO : BMAD et la source de vérité unique

L'IA nous incite à rassembler toute l'information au même endroit : dans le repository (Git). Peu importe l'outil utilisé, l'objectif est de nourrir cette source unique.

  • Les devs interagissent via des outils intégrés à leur IDE ou en ligne de commande (CLI) comme Claude Code, Github Copilot, Gemini-CLI ou ChatGPT Codex.
  • Les Product Owners (PO) privilégient des interfaces conversationnelles comme Claude Web, Gemini ou ChatGPT.

Un des objectifs de l’intégration de l’IA à nos process est de centraliser l'information pour qu'elle soit exploitable par l'IA et partagée entre tous les membres de l'équipe.

C'est dans cette optique que le framework BMAD (Breakthrough Method of Agile AI Driven Development) prend tout son sens. Ce framework ne se contente pas de fournir des prompts, il structure le cycle de vie du projet en phases distinctes où chaque métier trouve sa place :

  • Phase d'Analyse et Planning (pour le PO) : C'est le moment de définir quoi construire. L'IA guide le PO via des workflows comme /create-product-brief pour capturer la vision stratégique ou /brainstorming pour explorer le domaine fonctionnel. Ensuite, la commande /create-prd aide à formaliser les exigences dans un fichier PRD.md complet. Si l'expérience utilisateur est critique, le workflow /create-ux-design permet de générer une spécification UX détaillée (ux-spec.md) avant même d'écrire la moindre ligne de code.
  • Phase de Solution et Implémentation (Pour le dev) : Une fois le besoin clair, le développeur·se active l'agent "Architecte" (/create-architecture) pour prendre les décisions techniques (Stack, ADRs) qui répondent aux contraintes du PRD. Le travail est ensuite découpé (/create-epics-and-stories) puis implémenté tâche par tâche (/dev-story), avec une étape de contrôle qualité automatisée (/code-review ou/automate).

La véritable force de cette approche réside dans la gestion du contexte. Chaque document produit devient la donnée d'entrée de l'étape suivante : PRD.md informe l'architecte des contraintes, ux-spec.md guide l'implémentation du frontend, Architecture.md indique à l'agent de développement quels patterns suivre.

Sans cette structure rigoureuse, les IA "hallucinent" ou prennent des décisions incohérentes. Ici, elles restent alignées sur la source de vérité du projet co-construit par les différents membres de l’équipe et l’IA.

#

UX/UI, "Low-Tech" et Playgrounds Interactifs

L'IA nous ramène parfois à l'essentiel : faire au plus simple est souvent le plus efficace. Avant de se lancer dans des outils spécialisés (Figma, Lovable), nous constatons qu'il est possible d'exploiter les capacités d'outils textuels comme Claude Code pour le prototypage.

Cette méthode permet de s'affranchir de la complexité des outils de design classiques :

  • Wireframing en ASCII : On demande à l'IA de dessiner l'interface en texte brut ASCII. Cela permet de valider la structure et l'agencement dans une interface purement textuel, sans se perdre dans les détails esthétiques.
  • Itération : Les ajustements (déplacement d'un bloc, reformulation d'un texte) se font par simple échange conversationnel.
  • Documentation : Une fois validé, on sauvegarde le wireframe ASCII en Markdown, accompagné de précisions fonctionnelles si nécessaire.
  • Génération du code : Claude peut ensuite se baser sur ce wireframe validé pour générer un premier jet en HTML/CSS ou coder directement la fonctionnalité dans le projet si celui-ci à déjà un design system sur lequel Claude peut s’appuyer.

Cette approche "Low-Tech" réduit drastiquement la friction entre l'idée et sa première visualisation tout en rationalisant les coûts en évitant de se disperser entre plusieurs abonnements coûteux.

# Wireframe ASCII — les-tilleuls.coop (Homepage)

> Source : https://les-tilleuls.coop/
> Date de capture : 2026-02-18
> Viewport de reference : Desktop ~1440px

---

## 1. Header

```
+================================================================================================+
| [Skip: menu] [Skip: contenu] [Skip: contact]                                                  |
+================================================================================================+
|                                                                                                |
|  [LOGO Les-Tilleuls.coop]                                            [ Contactez-nous ]  (btn)|
|                                                                                                |
+------------------------------------------------------------------------------------------------+
|  Notre offre | Formations | Cloud et DevOps | Technologies | Numérique responsable |           |
|  Nos clients | La coopérative                                                                 |
+------------------------------------------------------------------------------------------------+
|  On recrute | Simulateur de revenus | API Platform Conference | Le blog                       |
+------------------------------------------------------------------------------------------------+
|  [fb] [tw] [gh] [li] [ma] [ig]                                              [🇫🇷] [🇬🇧]      |
+================================================================================================+
```

---

## 2. Hero Section

```
+================================================================================================+
|                                                                                                |
|   +-------------------------------------------+   +----------------------------------------+  |
|   |                                           |   |                                        |  |
|   |  Experts                                  |   |         ┌────────────────────┐         |  |
|   |  API, web & Cloud                  (h1)   |   |         │                    │         |  |
|   |                                           |   |         │   [Photo equipe    │         |  |
|   |  Les-Tilleuls.coop est une                |   |         │    dans bureaux]   │         |  |
|   |  entreprise de services du                |   |         │                    │         |  |
|   |  numérique coopérative, certifiée         |   |         │   1024 x 783 px   │         |  |
|   |  B Corp, créatrice d'API Platform         |   |         │                    │         |  |
|   |  et FrankenPHP, en activité               |   |         └────────────────────┘         |  |
|   |  depuis 2011.                             |   |                                        |  |
|   |                                           |   |                                        |  |
|   |  [ Travaillons ensemble ]  (btn, CTA)     |   |                                        |  |
|   |            └──> /notre-offre              |   |                                        |  |
|   +-------------------------------------------+   +----------------------------------------+  |
|                                                                                                |
+================================================================================================+
```

**Notes :** Fond clair. Le H1 met en gras "API, web & Cloud". CTA primaire.

---

## 3. Domaines d'intervention (fond noir)

```
+================================================================================================+
|  ██████████████████████████████  FOND NOIR  ███████████████████████████████████████████████████ |
|                                                                                                |
|   +-------- STICKY ---------+   +-----------------------------------------------------+       |
|   |                         |   |                                                     |       |
|   |  Nos domaines           |   |  ┌─────────────────────────────────────────────┐    |       |
|   |  d'intervention  (h2)   |   |  │  Développement web                          │    |       |
|   |                         |   |  │                                              │    |       |
|   |  Nous accompagnons les  |   |  │  Symfony, API Platform, Laravel,            │    |       |
|   |  entreprises de toutes  |   |  │  TypeScript, React, Next.js,               │    |       |
|   |  tailles dans leurs     |   |  │  Vue.js, Go, Rust, Python                  │    |       |
|   |  projets web et mobile. |   |  └─────────────────────────────────────────────┘    |       |
|   |                         |   |                                                     |       |
|   |  Expertise technique,   |   |  ┌─────────────────────────────────────────────┐    |       |
|   |  qualité et             |   |  │  Conseil                                    │    |       |
|   |  personnalisation.      |   |  │                                              │    |       |
|   |                         |   |  │  Réduction dette technique,                 │    |       |
|   |                         |   |  │  modernisation                              │    |       |
|   |                         |   |  └─────────────────────────────────────────────┘    |       |
|   |                         |   |                                                     |       |
|   |                         |   |  ┌─────────────────────────────────────────────┐    |       |
|   |                         |   |  │  Architecture logicielle                    │    |       |
|   |                         |   |  │                                              │    |       |
|   |                         |   |  │  Briques fonctionnelles, modèles            │    |       |
|   |                         |   |  │  de données, rapport d'architecture         │    |       |
|   |                         |   |  └─────────────────────────────────────────────┘    |       |
|   |                         |   |                                                     |       |
|   |                         |   |  ┌─────────────────────────────────────────────┐    |       |
|   |                         |   |  │  Intelligence artificielle            (lien)│    |       |
|   |                         |   |  │                                              │    |       |
|   |                         |   |  │  Protocoles MCP, RAG, fine-tuning,          │    |       |
|   |                         |   |  │  reranking                                  │    |       |
|   |                         |   |  └─────────────────────────────────────────────┘    |       |
|   |                         |   |                                                     |       |
|   |                         |   |  ┌─────────────────────────────────────────────┐    |       |
|   |                         |   |  │  UX/UI                                      │    |       |
|   |                         |   |  │                                              │    |       |
|   |                         |   |  │  Recommandations UX, design system,         │    |       |
|   |                         |   |  │  responsive                                 │    |       |
|   |                         |   |  └─────────────────────────────────────────────┘    |       |
|   |                         |   |                                                     |       |
|   |                         |   |  ┌─────────────────────────────────────────────┐    |       |
|   |                         |   |  │  Formation                            (lien)│    |       |
|   |                         |   |  │                                              │    |       |
|   |                         |   |  │  Formations sur-mesure,                     │    |       |
|   |                         |   |  │  éligibles OPCO                             │    |       |
|   |                         |   |  └─────────────────────────────────────────────┘    |       |
|   |                         |   |                                                     |       |
|   |                         |   |  ┌─────────────────────────────────────────────┐    |       |
|   |                         |   |  │  Tierce Maintenance Applicative (TMA) (lien)│    |       |
|   |                         |   |  │                                              │    |       |
|   |                         |   |  │  Maintenance préventive & évolutive,        │    |       |
|   |                         |   |  │  audits                                     │    |       |
|   |                         |   |  └─────────────────────────────────────────────┘    |       |
|   |                         |   |                                                     |       |
|   |                         |   |  ┌─────────────────────────────────────────────┐    |       |
|   |                         |   |  │  Et bien plus encore...               (lien)│    |       |
|   |                         |   |  │              └──> /notre-offre               │    |       |
|   +-------------------------+   |  └─────────────────────────────────────────────┘    |       |
|                                 +-----------------------------------------------------+       |
|                                                                                                |
+================================================================================================+
```

**Notes :** Layout sticky à gauche + scroll à droite. Fond noir, texte blanc. Les cartes sont espacées verticalement et scrollent indépendamment du texte d'intro.

---

## 4. Technologies (fond clair)

```
+================================================================================================+
|                                                                                                |
|                              Nos technologies  (overtitle)                                     |
|                         Toujours à la pointe !  (h2)                                          |
|                                                                                                |
|              Veille technologique constante, créativité,                                       |
|              pérennité et avant-gardisme.                                                      |
|                                                                                                |
|   ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐         |
|   │  ┌────┐  │  │  ┌────┐  │  │  ┌────┐  │  │  ┌────┐  │  │  ┌────┐  │  │  ┌────┐  │         |
|   │  │logo│  │  │  │logo│  │  │  │logo│  │  │  │logo│  │  │  │logo│  │  │  │logo│  │         |
|   │  └────┘  │  │  └────┘  │  │  └────┘  │  │  └────┘  │  │  └────┘  │  │  └────┘  │         |
|   │          │  │          │  │          │  │          │  │          │  │          │         |
|   │   API    │  │ Symfony  │  │Kubernetes│  │  Vue.js  │  │FrankenPHP│  │  React   │         |
|   │ Platform │  │          │  │          │  │          │  │          │  │          │         |
|   │          │  │          │  │          │  │          │  │          │  │          │         |
|   │ En savoir│  │ En savoir│  │ En savoir│  │ En savoir│  │ En savoir│  │ En savoir│         |
|   │  plus >  │  │  plus >  │  │  plus >  │  │  plus >  │  │  plus >  │  │  plus >  │         |
|   └──────────┘  └──────────┘  └──────────┘  └──────────┘  └──────────┘  └──────────┘         |
|                                                                                                |
|                    [ Les technologies que nous maîtrisons ]  (btn)                             |
|                                  └──> /technologies                                            |
|                                                                                                |
+================================================================================================+
```

**Notes :** Grille horizontale scrollable, 6 cartes technos. Chaque carte = logo + nom + lien. CTA secondaire en dessous.

---

## 5. Masterclass / Formations

```
+================================================================================================+
|                                                                                                |
|                                Masterclass  (overtitle)                                        |
|                       Vous former au meilleur du web  (h2)                                    |
|                                                                                                |
|   ┌─────────────┬───────┬───────────┬────────────┬──────────────┐                              |
|   │ Nos best-of │  API  │  Back-end │  Front-end │ Indus/Devops │  (tabs filtre)               |
|   └─────────────┴───────┴───────────┴────────────┴──────────────┘                              |
|                                                                                                |
|   ┌──────────────────────┐  ┌──────────────────────┐                                          |
|   │ ┌──┐                 │  │ ┌──┐                 │                                          |
|   │ │AP│  [API]          │  │ │Sy│  [Back-end]     │                                          |
|   │ └──┘                 │  │ └──┘                 │                                          |
|   │                      │  │                      │                                          |
|   │ Introduction à       │  │ Maîtriser Symfony    │                                          |
|   │ API Platform         │  │                      │                                          |
|   │                      │  │ Description de la    │                                          |
|   │ Description de la    │  │ formation...         │                                          |
|   │ formation...         │  │                      │                                          |
|   │                      │  │ ┌────────┐ ┌───────┐ │                                          |
|   │ ┌────────┐ ┌───────┐ │  │ │2 jours │ │Difficile│                                         |
|   │ │2 jours │ │Débutant│ │  │ └────────┘ └───────┘ │                                         |
|   │ └────────┘ └───────┘ │  │                      │                                          |
|   └──────────────────────┘  └──────────────────────┘                                          |
|                                                                                                |
|   ┌──────────────────────┐  ┌──────────────────────┐                                          |
|   │ ┌──┐                 │  │ ┌──┐                 │                                          |
|   │ │Vu│  [Front-end]    │  │ │AI│  [NEW]          │                                          |
|   │ └──┘                 │  │ └──┘                 │                                          |
|   │                      │  │                      │                                          |
|   │ Introduction à       │  │ Introduction à       │                                          |
|   │ Vue.js               │  │ l'utilisation des    │                                          |
|   │                      │  │ outils d'IA          │                                          |
|   │ Description de la    │  │                      │                                          |
|   │ formation...         │  │ Description de la    │                                          |
|   │                      │  │ formation...         │                                          |
|   │ ┌────────┐ ┌───────┐ │  │ ┌────────┐ ┌───────┐ │                                         |
|   │ │2 jours │ │Débutant│ │  │ │2 jours │ │Débutant│                                         |
|   │ └────────┘ └───────┘ │  │ └────────┘ └───────┘ │                                         |
|   └──────────────────────┘  └──────────────────────┘                                          |
|                                                                                                |
|                      [ Parcourir nos formations ]  (btn)                                      |
|                           └──> /masterclass/formations                                         |
|                                                                                                |
+================================================================================================+
```

**Notes :** Grille 2x2 de cartes formation. Chaque carte = logo techno + tag catégorie + titre + description + badges durée/niveau. Tabs de filtre au-dessus.

---

## 6. Références clients (fond sombre)

```
+================================================================================================+
|  ████████████████████████████  FOND SOMBRE  ██████████████████████████████████████████████████ |
|                                                                                                |
|                       Ils nous font confiance  (h2)                                           |
|                                                                                                |
|           Depuis plus de 10 ans, plus de 200 partenaires                                      |
|           pour du conseil, développement, formation,                                           |
|           maintenance.                                                                         |
|                                                                                                |
|   ┌──────────────┐  ┌──────────────┐  ┌──────────────┐                                       |
|   │              │  │              │  │              │                                       |
|   │  FRANCE TV   │  │  DECATHLON   │  │    ARTE      │                                       |
|   │   (logo)     │  │   (logo)     │  │   (logo)     │                                       |
|   │              │  │              │  │              │                                       |
|   └──────────────┘  └──────────────┘  └──────────────┘                                       |
|                                                                                                |
|   ┌──────────────┐  ┌──────────────┐  ┌──────────────┐                                       |
|   │              │  │              │  │              │                                       |
|   │ IZI by EDF   │  │ COTTON BIRD  │  │  VESTIAIRE   │                                       |
|   │   (logo)     │  │   (logo)     │  │ COLLECTIVE   │                                       |
|   │              │  │              │  │   (logo)     │                                       |
|   └──────────────┘  └──────────────┘  └──────────────┘                                       |
|                                                                                                |
|               [ Consulter nos autres collaborations ]  (btn)                                  |
|                         └──> /nos-clients                                                      |
|                                                                                                |
+================================================================================================+
```

**Notes :** Logos blancs sur fond sombre. Grille 3x2. Certains logos sont cliquables (ARTE, IZI by EDF, Cotton Bird).

---

## 7. Projet social / Coopérative

```
+================================================================================================+
|                                                                                                |
|           Cette entreprise, c'est vraiment la nôtre !  (h2)                                   |
|                                                                                                |
|           Coopérative détenue à 100% par ses salariés.                                        |
|           Expérimentation quotidienne de création de                                           |
|           valeur, innovation par la collaboration.                                             |
|                                                                                                |
|           [ En savoir plus sur notre projet social ]  (btn)                                   |
|                └──> /la-cooperative/projet-social                                              |
|                                                                                                |
|   +-------------------------------+-------------------------------+---------------------------+|
|   |                               |                               |                           ||
|   |          70+                  |            5                   |          15               ||
|   |    collaborateur·rices        |        antennes               |    ans d'expertise        ||
|   |                               |                               |                           ||
|   +-------------------------------+-------------------------------+---------------------------+|
|                                                                                                |
+================================================================================================+
```

**Notes :** Compteurs animés (counters). Texte centré. CTA vers le projet social.

---

## 8. Formulaire de contact

```
+================================================================================================+
|                                                                                                |
|                     Une question ? Un projet  (h2)                                            |
|                                                                                                |
|   +-----------------------------------+   +------------------------------------------------+  |
|   |                                   |   |                                                |  |
|   |  Coordonnées                      |   |  ┌──────────────────────────────────────────┐  |  |
|   |                                   |   |  │  Nom                                     │  |  |
|   |  📞 +33 3 66 72 43 94            |   |  │  [____________________________________]  │  |  |
|   |                                   |   |  │                                          │  |  |
|   |  ✉️  contact@les-tilleuls.coop    |   |  │  Email                                   │  |  |
|   |                                   |   |  │  [____________________________________]  │  |  |
|   |                                   |   |  │                                          │  |  |
|   |                                   |   |  │  Votre Message                            │  |  |
|   |                                   |   |  │  ┌──────────────────────────────────────┐ │  |  |
|   |                                   |   |  │  │                                      │ │  |  |
|   |                                   |   |  │  │                                      │ │  |  |
|   |                                   |   |  │  │                                      │ │  |  |
|   |                                   |   |  │  │                                      │ │  |  |
|   |                                   |   |  │  └──────────────────────────────────────┘ │  |  |
|   |                                   |   |  │                                          │  |  |
|   |                                   |   |  │  [ Envoyer le message ]  (btn, submit)   │  |  |
|   |                                   |   |  └──────────────────────────────────────────┘  |  |
|   +-----------------------------------+   +------------------------------------------------+  |
|                                                                                                |
+================================================================================================+
```

**Notes :** Layout 2 colonnes : coordonnées à gauche, formulaire à droite. 3 champs : nom, email, message (textarea).

---

## 9. Footer (fond sombre)

```
+================================================================================================+
|  ████████████████████████████████  FOOTER  ███████████████████████████████████████████████████ |
|                                                                                                |
|   ┌───────────┐                                                                                |
|   │  B CORP   │   📞 +33 3 66 72 43 94                                                       |
|   │  CERTIFIED│   ✉️  contact@les-tilleuls.coop                                               |
|   └───────────┘                                                                                |
|                                                                                                |
|   [🇫🇷] [🇬🇧]    [fb] [tw] [gh] [li] [ma] [ig]                                               |
|                                                                                                |
+------------------------------------------------------------------------------------------------+
|                                                                                                |
|   Lille                  Paris                 Nantes                Lyon                      |
|   82 Rue Winston         10 Allée Lydia        2 bis Rue des         Immeuble LE PRESIDENT    |
|   Churchill              Becker                Olivettes             40/42 Av. Georges         |
|   59160 Lomme            75018 Paris            44000 Nantes          Pompidou, 69003 Lyon     |
|                                                                                                |
+------------------------------------------------------------------------------------------------+
|                                                                                                |
|   Nous découvrir | Notre offre | Formations | Technologies | Nos clients |                    |
|   Communauté | La coopérative | Le blog | Mentions légales                                    |
|                                                                                                |
+================================================================================================+
```

**Notes :** Footer multi-colonnes. Badge B Corp en haut à gauche. 4 adresses de bureaux. Navigation secondaire en bas.

---

## Résumé de la structure

```
┌────────────────────────────────┐
│  1. HEADER                     │  Navigation principale + CTA + socials + langues
├────────────────────────────────┤
│  2. HERO                       │  2 colonnes : texte + photo | CTA "Travaillons ensemble"
├────────────────────────────────┤
│  3. DOMAINES D'INTERVENTION    │  Fond noir | Sticky left + scroll cards right | 8 cartes
├────────────────────────────────┤
│  4. TECHNOLOGIES               │  Fond clair | Grille 6 cartes technos | CTA
├────────────────────────────────┤
│  5. MASTERCLASS                │  Tabs filtre + grille 2x2 cartes formations | CTA
├────────────────────────────────┤
│  6. RÉFÉRENCES CLIENTS         │  Fond sombre | Grille 3x2 logos | CTA
├────────────────────────────────┤
│  7. PROJET SOCIAL              │  Texte centré + 3 compteurs animés | CTA
├────────────────────────────────┤
│  8. FORMULAIRE CONTACT         │  2 colonnes : coordonnées + formulaire 3 champs
├────────────────────────────────┤
│  9. FOOTER                     │  B Corp + contacts + 4 bureaux + nav secondaire
└────────────────────────────────┘
```

---

## Patterns UX identifiés

| Pattern | Sections | Description |
|---------|----------|-------------|
| **Sticky scroll** | Domaines | Texte fixe à gauche, contenu scrollable à droite |
| **Tab filter** | Masterclass | Filtrage par catégorie avec tabs |
| **Logo wall** | Clients | Grille de logos clients en confiance sociale |
| **Counter animation** | Projet social | Chiffres clés avec compteurs animés |
| **Dual CTA** | Header + Hero | CTA header persistent + CTA hero contextuel |
| **2-col form** | Contact | Info de contact + formulaire côte à côte |
| **Card grid** | Technos, Formations | Cartes uniformes avec logo, titre, action |

## Palette & thème

| Élément | Style |
|---------|-------|
| Fond alternant | Clair → Noir → Clair → Clair → Sombre → Clair → Clair → Sombre |
| Typo titres | Gras avec mots clés en **bold** pour emphasis |
| CTAs | Boutons rectangulaires, style primaire |
| Icônes sociales | Facebook, Twitter/X, GitHub, LinkedIn, Mastodon, Instagram |

Enfin, de nouvelles approches émergent régulièrement pour repousser les limites de nos interactions avec l'IA. Le plugin playground de Claude Code en est un parfait exemple. Il permet de générer des fichiers HTML autonomes pour visualiser et manipuler des concepts complexes. Les cas d'usage sont nombreux : visualiser l'architecture d'une base de code sous forme de diagramme interactif, ajuster finement le design d'un composant, brainstormer sur une mise en page ou encore équilibrer les mécaniques d'un jeu. Ces micro-applications offrent un terrain d'expérimentation concret pour interagir directement avec les éléments et générer les modifications nécessaires, là où une simple conversation textuelle montrerait ses limites.

#

Bonnes pratiques : des "Skills" aux fichiers de configurations

Au-delà de la documentation factuelle du projet (le quoi), les bonnes pratiques actuelles tendent à définir explicitement le comportement de l'assistant (le comment). C'est ce qui différencie une réponse générique d'une réponse parfaitement adaptée à la culture de l'équipe.

Cette personnalisation passe par deux leviers majeurs que nous voyons émerger :

  • L'utilisation de "Skills" : Ce terme désigne des ensembles de prompts avancés qui conditionnent l'IA pour qu'elle adopte un rôle précis avec des méthodologies de travail spécifiques. Si le framework BMAD propose déjà des skills standards (Architecte, QA, Product Manager), il existe une infinité de possibilités. L'idée est de créer ou d'utiliser des skills sur-mesure en fonction des besoins : un skill "Expert Accessibilité" qui vérifie automatiquement les normes WCAG, ou un skill "Refactoring" qui ne se concentre que sur la dette technique. C'est l'équivalent de demander à un collègue de "mettre sa casquette de spécialiste" pour une tâche donnée.
  • L'adoption de standards de configuration (CLAUDE.md, AGENTS.md) : Pour pérenniser ces comportements, l'industrie converge vers l'usage de fichiers de configuration standardisés placés à la racine des dépôts. Plusieurs normes cohabitent aujourd'hui. Nous avons CLAUDE.md, popularisé par la communauté Anthropic, qui sert de référence pour donner du contexte et des instructions spécifiques aux modèles Claude. Il existe aussi AGENTS.md, une initiative plus agnostique qui vise l'interopérabilité entre différents outils et agents (Gemini CLI, Github Copilot, ChatGPT Codex, etc.).

Qu'importe le format choisi, l'objectif reste le même : fournir un README pour les robots. Ce fichier centralise le contexte technique indispensable aux agents mais souvent superflu pour les humains (commandes de build exactes, patterns de code stricts à respecter, instructions de test). Cela permet de garder le README.md propre et concis pour les devs, tout en garantissant que l'IA respecte les conventions du projet dès le premier prompt.

#

Les défis : coûts, apprentissage et plaisir

Ce REX ne serait pas honnête sans aborder les frictions. L'intégration de l'IA ne se fait pas sans heurts :

  • Le coût et l'opacité : Entre les abonnements (Github Copilot, Claude Pro) et la consommation de tokens par API, la facture peut vite grimper. L'usage de modèles puissants (comme Claude Opus 4.6) pour des tâches simples s'avère économiquement non viable. Nous apprenons à "router" nos demandes vers le bon modèle (Gemini Pro / Opus pour l'analyse de gros volumes et pour le code complexe de grosses features, Gemini Flash / Sonnet / Haiku pour les traitements plus simples).
  • L'apprentissage : Une question cruciale a été soulevée par l'équipe. Comment apprendre à coder si l'IA fait tout ? La solution vient paradoxalement de l'outil lui-même. Il est tout à fait possible de configurer l'IA pour qu'elle agisse comme un tuteur (qui guide, explique et challenge) plutôt que comme un simple exécutant. Grâce aux fichiers de configuration évoqués plus haut (CLAUDE.md, AGENTS.md), on peut définir un "mode mentor" qui force l'assistant à privilégier la pédagogie sur la solution immédiate.
  • Le plaisir du code : Certains s'interrogent sur la satisfaction au travail. Si le métier devient 80% de relecture et de rédaction de documentation pour des agents, qu'advient-il du plaisir de développer par soi-même un algorithme ou une interface ? C'est une question ouverte sur l'avenir de nos professions.
#

Conclusion

Chez Les-Tilleuls.coop, nous ne voyons pas les LLM comme une baguette magique, mais comme des outils puissants qui demandent une méthodologie rigoureuse. Vous souhaitez être accompagné·e sur ces sujets ou développer des projets intégrant ces nouveaux workflows ? Notre équipe est prête à relever le défi avec vous !

Thomas Colin

Thomas Colin

Lead developer

Mots-clésAI, IA, Intelligence Artificielle, LLM, Veille

Le blog

Pour aller plus loin