N° 01 · Synthétiseur jouable
Soft Machine
Un synthétiseur qui fonctionne vraiment, reconstruit par l'IA à partir d'un prompt publié par une galerie publique: un oscilloscope en direct, quatre boutons rotatifs, un séquenceur à 16 pas et un clavier de deux octaves. Jouez-y, copiez le prompt et voyez ce que le modèle a dû résoudre seul et que le prompt ne mentionne jamais.
Jouez une note ou lancez le séquenceur
Séquenceur Les pads prennent la dernière note jouée
Clavier C3–C5
Sound starts on your first tap. No sound on a phone? Check the volume and that silent mode is off.
Comment jouer
- Cliquer ou toucher
- Appuyez sur les touches. Glissez le doigt dessus pour un glissando.
- A à K
- Jouez avec le clavier de l'ordinateur après avoir cliqué sur le synthé. Z et X changent d'octave (Y et X sur les claviers suisses et allemands).
- Faire glisser un bouton
- Vers le haut ou vers le bas. Maintenez Shift pour un réglage fin, double-cliquez pour le remettre à zéro.
- Bouton de lecture
- Lance le séquenceur. Touchez les pads pour y ajouter la dernière note jouée.
- En-tête
- Changez le thème du site et le synthé change de couleur avec lui.
Le prompt complet · environ 450 mots
Copiez-le, collez-le, voyez ce que vous obtenez
Voici le prompt que Claude Opus 5.5: 100 HTML Files a publié pour Soft Machine (No. 007), mot pour mot. Il a deux parties: un paragraphe qui décrit cette réalisation, et des règles maison que la galerie a ajoutées à chaque prompt. Le bouton copie les deux. Il est en anglais, tel qu'il a été publié. Les modèles le comprennent tout aussi bien; si vous voulez les réponses en français, précisez-le simplement.
Partie 1 · La réalisation · 170 mots
Create "SOFT MACHINE", a playable neumorphic synthesizer. Everything is sculpted from one soft clay surface (#e4e8ee) with paired light/dark shadows (#ffffff / #b8bec7), raised and pressed states, and a single accent — warm coral #ff6b5a — for active LEDs and the waveform. Layout: a device centred on the page with an OLED-like inset screen showing a live oscilloscope (AnalyserNode drawn on canvas); four rotary knobs (cutoff, resonance, attack, release) dragged vertically; a waveform selector (sine/triangle/saw/square) as neumorphic segmented buttons; a 16-step sequencer row of soft pads; and a two-octave keyboard of soft keys. Typography: a rounded sans stack ("SF Pro Rounded", Nunito, "Varela Round", "Segoe UI", system-ui, sans-serif) with small-caps labels in muted slate. Interaction: click/touch keys or use computer keys A–K to play (Web Audio oscillator → filter → envelope); knobs update the sound in real time with smooth value tooltips; the sequencer plays/stops with adjustable tempo. Audio starts only after the first gesture. Responsive: the device scales down and the keyboard becomes compact on phones without page overflow. Partie 2 · Les règles maison ajoutées à chaque prompt de la galerie · 280 mots
SHARED REQUIREMENTS (apply to every page in this 100-page collection): 1. One standalone HTML5 file. All CSS inline in <style>, all JavaScript inline in <script>. No external resources of any kind: no CDN, no libraries, no web fonts, no external images/SVG/audio files, no network requests. All visuals come from CSS, inline SVG, Canvas and procedural code. 2. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, a viewport meta tag, a meaningful <title> and meta description, well-nested semantic markup, unique ids, labels/aria attributes for controls, <button type="button"> for actions. 3. Typography from local system font stacks only, always ending in a generic family; display lettering may be drawn with SVG or Canvas. 4. Responsive from 360px phones to large desktops with no horizontal page scroll; canvases match their container and devicePixelRatio (capped at 2) and re-layout on resize. 5. Works offline by opening the file directly (file://); no console errors; storage access guarded with try/catch. 6. Smooth motion via requestAnimationFrame and transform/opacity; animation pauses when the tab is hidden where it matters; honours prefers-reduced-motion with a calmer fallback. 7. Pointer events so mouse and touch both work; visible :focus-visible styles; keyboard support where it makes sense. 8. Any sound is synthesized with the Web Audio API, starts only after a user gesture, and has a visible mute/toggle. 9. Premium finish: a deliberate palette and spacing, polished micro-interactions, a beautiful first frame before any interaction, and original copy (no lorem ipsum). Factual content must be accurate; fictional brands, people and data are clearly fictional. 10. Quality bar: visually impressive, bookmark-worthy, showcase-grade, premium, full of delightful details, and clearly distinct from the other 99 pages in concept, layout, palette, typography and motion.
Ce que vous avez sous les yeux
Tout fonctionne sur cet appareil. Les touches jouent via le moteur sonore intégré à tous les navigateurs modernes: un oscillateur produit le son brut, un filtre le façonne et une enveloppe décide comment chaque note monte et s’éteint. Dès que vous avez joué une note, l’écran dessine le son réel que produit le synthé, environ 60 fois par seconde. Dessous, il n’y a ni fichiers audio, ni plug-ins, ni bibliothèques. Ça fait environ 1700 lignes de code, et pas une seule n’a été écrite par une personne.
J’ai trouvé l’original dans une galerie de 100 pages web d’un seul fichier, chacune publiée à côté de ce que la galerie présente comme le prompt exact qui l’a produite. La galerie les attribue toutes à Claude Opus 5.5: selon ses notes, 20 agents Claude ont travaillé en parallèle, et chaque page a été affichée dans un navigateur et vérifiée sur captures d’écran avant d’être acceptée. Je suis à peu près sûr que la plupart des gens en dehors de la bulle de l’IA ne savent pas qu’un modèle sait faire ça aujourd’hui. J’ai donc demandé à Claude Code de le reconstruire ici, aux couleurs de ce site, pour que vous puissiez en jouer sans rien télécharger.
Un seul paragraphe? Pas tout à fait
Le paragraphe qui décrit le synthé fait environ 170 mots. Le prompt complet a une seconde partie facile à rater: dix règles maison que la galerie a ajoutées à chacun de ses 100 prompts. Un seul fichier autonome. Fonctionne sur tout, d’un téléphone de 360 pixels à un grand écran. Des commandes étiquetées et accessibles. Le respect du réglage de réduction des animations. Du son seulement après un geste de l’utilisateur, avec un bouton de sourdine visible. Et un niveau d’exigence qui réclame franchement quelque chose de « bookmark-worthy, showcase-grade, premium » (en substance: digne d’être mis en favori, digne d’une vitrine, haut de gamme).
Cette seconde partie pèse plus lourd qu’elle n’en a l’air. C’est le document de standards de la galerie: écrit une fois, hérité par chaque brief. C’est l’argument que je défends dans Votre IA n’a aucune idée de ce que fait votre entreprise: la brillante nouvelle recrue travaille bien mieux quand vos standards viennent avec le poste, au lieu d’être réexpliqués à chaque demande. Ces règles maison expliquent pourquoi le synthé a un bouton de sourdine et des boutons rotatifs qu’on règle avec les flèches du clavier, alors que le paragraphe ne mentionne ni l’un ni l’autre.
Vous pouvez faire pareil pour vos propres demandes récurrentes: écrivez vos standards une fois et collez-les sous chaque brief, ou mettez-les dans les instructions personnalisées de votre assistant s’il en a. Le réglage qui empêche l’IA de rester générique explique comment.
Pourquoi le paragraphe fonctionne
Relisez-le et comptez les décisions qu’il contient. Les couleurs exactes de la surface, des deux ombres et de l’unique accent. Quatre boutons nommés, qu’on fait glisser à la verticale. La chaîne du signal détaillée: oscillateur, puis filtre, puis enveloppe. Quelles touches de l’ordinateur jouent les notes. Ce qui doit se passer sur un téléphone. Et une ligne qui vous épargne un après-midi de confusion: « Audio starts only after the first gesture » (le son ne démarre qu’après le premier geste). Les navigateurs ne jouent aucun son tant que vous n’avez pas cliqué ou tapé quelque chose sur la page. Oubliez ça et votre synthé reste muet, sans rien à l’écran pour vous dire pourquoi.
C’est une spécification: elle tranche les décisions qui comptent et laisse le reste ouvert. C’est ça, la vraie compétence qu’on voit ici. Rédiger des spécifications occupe une bonne partie de mon travail quotidien, et la leçon s’applique telle quelle: le modèle a besoin de ce dont un bon développeur a besoin, c’est-à-dire des décisions claires sur ce qui compte et de la liberté pour tout le reste.
C’est aussi pour ça que je ne le donne pas comme un prompt à mémoriser. Copiez-le, bien sûr. Ce qui se transpose à votre propre travail, c’est la façon dont il est écrit.
Ce que le prompt ne dit jamais
Le paragraphe et les règles maison ensemble font environ 450 mots. Le synthé terminé fait environ 1700 lignes de code. Tout ce qu’il y a entre les deux a dû être résolu, et l’essentiel relève de ces détails qu’on ne connaît que si on a déjà construit un logiciel audio:
Un timing qui ne dérive pas. Un séquenceur doit tomber pile sur chaque pas. Les minuteurs du navigateur sont imprécis: ils se déclenchent en retard dès que la page est occupée, et vous l’entendriez comme un rythme qui trébuche. La solution utilise deux horloges. Un minuteur approximatif se réveille toutes les 25 millisecondes et planifie les notes à jouer dans le huitième de seconde suivant sur l’horloge propre de la carte son, qui est exacte. Le prompt dit « adjustable tempo » (tempo réglable) et ne dit rien des horloges.
Des notes qui s’arrêtent sans claquement. Relâchez une touche au milieu de son entrée en fondu et le volume doit redescendre en douceur depuis l’endroit où il se trouve à cet instant. Coupez-le d’un coup et le haut-parleur claque. Tous les navigateurs n’ont pas de raccourci pour retenir cette valeur intermédiaire (Firefox n’en a pas), alors le code la calcule lui-même.
Un écran qui reste stable. Dessinez les échantillons bruts du son et l’onde glisse sur le côté à chaque image. L’écran attend que l’onde croise zéro en montant et commence à dessiner là, la même astuce qu’un oscilloscope matériel. Avant la première note, il ne peut pas montrer un son qui n’existe pas encore, alors il reconstruit la forme d’onde actuelle à partir de ses harmoniques et la fait passer par les mêmes calculs de filtre. Tournez le bouton Cutoff avant de jouer quoi que ce soit et vous verrez l’onde s’arrondir.
Des boutons rotatifs qui se manipulent comme de vrais boutons. Un glissement vertical qui continue de fonctionner quand votre doigt quitte le bouton, Shift pour un réglage fin, les flèches du clavier pour les gens qui n’utilisent pas de souris, et un lecteur d’écran qui annonce « Cutoff, 2.4 kHz » au lieu d’une boîte sans étiquette. Les règles maison demandent en termes généraux la prise en charge du clavier et des commandes étiquetées; les détails relèvent du modèle.
Les doigts. Sur un téléphone, faire glisser le doigt sur un bouton ferait normalement défiler la page. Le synthé s’approprie donc ces gestes et laisse le reste de la page défilable. Glissez un doigt le long du clavier et chaque touche sonne à votre passage.
Le paragraphe ne mentionne rien de tout ça, et les règles maison ne demandent que des choses générales (« keyboard support where it makes sense », soit la prise en charge du clavier là où c’est pertinent). Les deux horloges, la fin de note sans claquement et l’écran stable ne sont demandés nulle part. Dans cette version, Claude Code a trouvé tout ça tout seul.
Ce qui a changé pour cette page
La version de la galerie est une page autonome. L’intégrer dans un site en production a demandé quelques changements, et ils montrent la dernière ligne droite entre une démo impressionnante et quelque chose qu’on mettrait vraiment en ligne:
- Les couleurs suivent le site. L’argile est crème chaud en mode clair, parchemin en sépia et anthracite en mode sombre. Essayez le sélecteur de thème dans l’en-tête. L’unique accent est l’orange de ce site, à la place du corail.
- Les touches de l’ordinateur ne jouent que lorsque le synthé a le focus. Sur une page autonome, on peut s’approprier toutes les frappes. Dans un article avec un formulaire de newsletter en dessous, taper votre adresse e-mail ne doit pas jouer un air.
- Les touches sont associées à leur position. Sur les claviers suisses et allemands, Y et Z échangent leur place, donc l’assignation suit l’emplacement d’une touche, pas la lettre imprimée dessus.
- Il fait partie du code du site. Il utilise les polices de la page et ses calculs sont couverts par des tests.
Le brief adapté en bas de cette page intègre tout ça dans le prompt d’origine.
Comment s’est passée la reconstruction
J’ai donné le paragraphe à Claude Code en demandant une version dans le design de ce site. Il a écrit le synthé, puis a vérifié son propre travail: des tests unitaires pour les calculs, et un vrai navigateur piloté par un script qui cliquait sur les touches, faisait glisser les boutons, changeait de thème et réduisait la fenêtre à la largeur d’un téléphone.
La trouvaille la plus utile est venue avant tout test. La première version suivait uniquement le paragraphe. Quand Claude Code a lu le prompt complet de la galerie, il a trouvé les règles maison qui demandent un bouton de sourdine visible et « a beautiful first frame before any interaction » (une belle première image avant toute interaction), et il a ajouté les deux. C’est l’aperçu à l’écran que vous voyez avant votre première note. Les notes de la galerie sur sa propre version décrivent un aperçu dessiné à partir des harmoniques de la forme d’onde, et cette version reprend la même idée. Même modèle, meilleur résultat, parce qu’il avait maintenant les standards.
Le tour dans le navigateur a révélé deux petits problèmes. Sur un écran de 320 pixels, le bouton Effacer décalait la page de 47 pixels sur le côté. Et les notes faibles du séquenceur s’affichaient à l’écran comme une ligne presque plate. Claude Code a corrigé les deux. Écrire, afficher, regarder, corriger: c’est la même boucle que la galerie décrit pour ses propres pages.
Essayez vous-même
- Copiez le prompt complet ci-dessus. Le bouton copie les deux parties. (Les règles maison mentionnent les 99 autres pages de la galerie; le modèle s’en accommodera.)
- Collez-le dans Claude, ChatGPT ou Gemini et envoyez-le. Selon votre abonnement et vos réglages, les trois peuvent afficher le résultat juste à côté de la conversation (Claude appelle ça un artefact, les deux autres Canvas). Si le vôtre ne le peut pas, enregistrez la réponse sous
soft-machine.htmlet ouvrez-la dans votre navigateur. Si la réponse s’arrête au milieu du fichier, tapez « continue ». - Ensuite, poursuivez. Demandez un effet d’écho. Demandez-lui d’utiliser les couleurs de marque de votre entreprise. Demandez-lui pourquoi le séquenceur a besoin de deux horloges, et vous apprendrez quelque chose sur la façon dont les logiciels gèrent le temps, qui s’applique bien au-delà de la musique.
Une seule réponse de chat est un test plus dur que ce que la galerie et moi avons fait, puisque les deux versions ont été vérifiées et corrigées en boucle. Attendez-vous donc à ce que votre première version demande un ou deux tours de « cette partie est cassée, corrigez-la ». Ces allers-retours, c’est le fonctionnement normal. La galerie attribue sa version à l’un des modèles les plus forts disponibles en septembre 2026, et d’autres modèles vous donneront un résultat différent. Voir cette différence par vous-même vaut bien les cinq minutes que ça prend. Quand quelque chose casse, décrivez ce que vous voyez et collez l’erreur de la console du navigateur (F12, puis Console). C’est comme ça que commence presque tout débogage avec l’IA, le mien compris.
Il n’y a aucune donnée d’entreprise dans ce prompt, alors vous pouvez l’essayer sans risque sur l’assistant que vous avez, y compris celui que votre employeur vous a donné. Pour la vue d’ensemble sur cette façon de construire, Le week-end avec sa propre application applique la même idée à quelque chose d’utile.
Le brief, adapté pour cette page Le même prompt, avec toutes les modifications faites pour ce site. Utile si vous voulez voir comment une spécification change quand une démo doit vivre dans un vrai produit.
Créez « SOFT MACHINE », un synthétiseur néomorphique jouable qui vit dans une page d'article de goodaiguide.com, comme composant du site plutôt que comme page autonome. Tout est sculpté dans une seule surface d'argile douce qui suit le thème du site: argile crème chaude (#ebe6de) en mode clair, parchemin (#e8dcc5) en sépia et anthracite (#25252c) en mode sombre, chacun avec ses propres paires d'ombres claire/sombre, ses états relevé et enfoncé, et un seul accent, l'orange du site #F97316, pour les LED actives, les arcs des boutons et la forme d'onde. Mise en page: l'appareil repose sur un panneau d'argile assorti dans la colonne de la page, avec un écran encastré de type OLED qui montre un oscilloscope en direct (AnalyserNode dessiné sur un canvas; avant tout son, un aperçu calculé de la forme d'onde actuelle telle que le filtre la façonne); quatre boutons rotatifs (cutoff, resonance, attack, release) qu'on fait glisser à la verticale; un sélecteur de forme d'onde (sine/triangle/saw/square) sous forme de boutons segmentés néomorphiques; une rangée de séquenceur à 16 pas faite de pads doux; et un clavier de deux octaves aux touches douces. Typographie: la Plus Jakarta Sans du site, avec des étiquettes en petites capitales d'une encre atténuée. Interaction: cliquer ou toucher les touches (en glissant dessus, chaque touche sonne) ou utiliser les touches A–K de l'ordinateur pour jouer, associées à la position physique des touches pour que les claviers QWERTZ suisses et allemands fonctionnent aussi, et seulement tant que le synthé a le focus, afin que taper ailleurs sur la page ne joue jamais une note (oscillateur Web Audio → filtre → enveloppe); les boutons modifient le son en temps réel avec des infobulles de valeur douces et fonctionnent comme des curseurs utilisables au clavier; le séquenceur joue/s'arrête avec un tempo réglable, planifié à l'avance sur l'horloge audio. L'audio ne démarre qu'après le premier geste, avec un bouton de sourdine visible. Responsive: l'appareil se réduit et le clavier devient une seule octave compacte avec des boutons d'octave sur téléphone, sans débordement de la page. Exigences communes comme dans l'original, sauf que: construisez-le comme un composant du site existant plutôt que comme un fichier autonome, et utilisez les polices que la page charge déjà. Le synthé lui-même n'effectue aucune requête réseau.