Anthropic annonce : Écrivez en HTML

Il y a quelques jours, j’ai vu un post intéressant sur X : L’équipe Claude Code d’Anthropic a annoncé que sa documentation interne n’est plus écrite en Markdown, mais directement en HTML. La raison : Le Markdown est pour les auteurs, le HTML est pour les lecteurs.

Peu après, un projet appelé html-anything​ est devenu viral sur GitHub, dépassant déjà les 2 500 étoiles. Il permet à votre agent IA local d’écrire du HTML pour vous. Il ne génère pas de Markdown ou de PPTX, mais des fichiers HTML statiques purs. Saisissez les besoins à gauche, choisissez un modèle au milieu, et prévisualisez le résultat en temps réel à droite.

Après installation, vous n’avez qu’une seule chose à faire : décrire ce dont vous avez besoin. Par exemple : « Fais un article de blog technique, thème sombre, avec des exemples de code et des graphiques de données. »

L’IA sélectionne automatiquement le modèle, applique les contraintes de conception, et produit un fichier HTML complet. C’est un produit fini, pas un brouillon.

Il ne fournit pas d’IA, il orchestre uniquement

Concernant l’implémentation, html-anything n’embarque pas de modèle, ni ne vend de clés API.​ En termes simples, il appelle les outils d’IA que vous avez déjà installés sur votre ordinateur. Claude Code, Cursor, Gemini CLI, Copilot… tant que vous les avez utilisés et vous y êtes connecté auparavant, il les utilise simplement. Pas d’inscription ou de paiement supplémentaire requis.

Chaque page générée est un produit fini, pas un travail en cours

Il est livré avec 75 modèles soigneusement conçus. Chaque modèle a des contraintes strictes :

• Pile de polices priorisant CJK.
• Grille de base de 8px.
• Rapport de contraste ≥ 4.5.
• Doit utiliser de vraies données.
• Texte de substitution interdit.

L’avantage est de garantir que la sortie respecte des standards professionnels. Il couvre 9 scénarios courants :

1. Prototypes Web.​ Peut être utilisé pour créer des pages d’atterrissage, de tarification, des tableaux de bord d’administration, des blogs techniques, etc.
2. Présentations.​ 20 styles au choix, discutés en détail ci-dessous.
3. Générer une vidéo.​ Écrire et exporter directement en vidéo MP4. Discuté en détail ci-dessous.
4. Cartes pour réseaux sociaux.​ Générez des graphiques dans le style de Xiaohongshu, Twitter, Spotify, etc., en un clic.
5. Documents de bureau.​ Modèles pour rapports hebdomadaires, documents de spécifications, rapports financiers et autres documents de bureau quotidiens.
6. CV.
7. Rapports de données.
8. … et autres scénarios.

Parmi ces 9 scénarios, les modèles de présentation méritent d’être discutés séparément. Il y a 20 styles de présentation complets. Les amis qui font des présentations techniques et des démos produit trouveront cette partie éclairante.

• Style International Suisse :​ Utilise une grille de 16 colonnes avec une couleur principale. Choisissez parmi le Bleu Klein, le Vert Citron, etc. Appliquez directement depuis 22 mises en page fixes. Ça s’ouvre avec cette sensation austère de « ça a l’air cher ».
• Style Magazine & E-Encre :​ 10 mises en page associées à 5 schémas de couleurs, dont Encre, Porcelaine Indigo, et Papier Kraft. Ressemble à un magazine d’art finement imprimé.
• Et des styles comme deck-xhs-pastel(Pastel Xiaohongshu), deck-hermes-cyber(Néon Cyber Hermès), deck-replit(Style démo produit Replit), etc.

Scripts de trame vidéo, peuvent être rendus directement en MP4

En plus des pages statiques et des présentations, html-anything peut également générer du contenu vidéo. Il fournit 10 scripts de trame qui suivent la spécification heygen-com/hyperframes. Passez-les à Remotion​ pour les rendre en .mp4.

• frame-glitch-title​ — Trame de titre d’art glitch. Décalage d’aberration chromatique cyan/magenta, lignes de balayage CRT, sous-titres de données corrompus, bruit ASCII de paragraphe. Fait pour les thèmes cyberpunk.
• frame-logo-outro​ — Trame de fin avec logo de marque. Logo assemblé bloc par bloc + halo lumineux, slogan qui monte, CTA qui apparaît. La carte de clôture pour un lancement de produit.
• vfx-text-cursor​ — Effet de saisie de curseur. Chaque caractère apparaît avec une traînée d’aberration chromatique magenta × cyan. Entrez une citation, obtenez une trame d’ouverture cinématographique.

Exportation en un clic vers plusieurs plateformes

Une fois le contenu généré, l’étape suivante est la publication. Html-anything prend en charge l’exportation en un clic vers plusieurs plateformes grand public, vous évitant la corvée de la mise en forme manuelle.

• Compte Officiel WeChat :​ Le CSS est entièrement intégré en ligne, collez et utilisez directement.
• X / Weibo / Xiaohongshu :​ Automatiquement rendu en PNG haute DPI 2×, copié dans le presse-papiers.
• Zhihu :​ Les formules LaTeX sont automatiquement traitées en images de substitution.

Si vous avez déjà souffert de reformater le même contenu pour différentes plateformes, cette fonctionnalité est très pratique.

Rendu en continu (streaming) + Aperçu en bac à sable (sandbox)

L’expérience pendant la génération est également importante. Html-anything utilise le rendu en continu SSE (Server-Sent Events), vous permettant de voir le processus créatif de l’IA en temps réel. Vous pouvez regarder la page être « dessinée » par l’IA. Si vous la voyez partir dans la mauvaise direction, vous pouvez interrompre et re-demander immédiatement, évitant le gaspillage de ressources de génération et rendant le processus créatif plus contrôlable.

La sécurité est également prise en compte ; ce n’est pas une implémentation grossière qui ne se soucie que de la fonctionnalité. Tout le HTML généré est prévisualisé dans une iframe en bac à sable, isolant le stockage local et les cookies.

Après avoir vu ces fonctionnalités, je suis sûr que certains d’entre vous sont impatients d’essayer.

⚠️ Prérequis :​ Vous devez avoir au moins un CLI d’IA pris en charge installé localement, comme Claude Code, et il doit être fonctionnel.

Installation (3 étapes) :

1. Clonez le code sur votre ordinateur. bashbashgit clone https://github.com/nexu-io/html-anything
2. Accédez au répertoire et installez les dépendances. bashbashcd html-anything pnpm install
3. Démarrez avec une commande. bashbashpnpm devOuvrez votre navigateur sur http://localhost:3000pour voir l’interface.

Vous voulez voir à quoi ressemble chaque modèle ? Ouvrez le répertoire skills/dans le dépôt. Chaque modèle a un fichier example.html. Double-cliquez pour voir l’effet.

Deux petits problèmes

Bien sûr, le projet n’est pas parfait. Il a actuellement deux limitations principales :

1. Il ne peut actuellement générer que des formats HTML et PNG. Si vous avez besoin de PDF ou PPTX, vous devrez vous fier à l’impression du navigateur ou à des outils tiers pour la conversion.
2. Modifier le contenu nécessite une re-génération via l’agent IA. La barrière d’entrée est un peu élevée pour les personnes qui n’ont pas installé de CLI d’IA.

Réflexions finales

Après avoir tant parlé des fonctionnalités, revenons au sujet initial — HTML ou Markdown ?

Il y a pas mal de débats dans la communauté. Certains pensent que Markdown suffit — simple, direct et adapté au contrôle de version. D’autres pensent que HTML est la bonne réponse — mise en page libre, WYSIWYG. Les deux points de vue ont du mérite.

Je pense que la clé n’est pas le format lui-même, mais le contexte dans lequel vous vous trouvez.

• Prendre des notes, écrire de la documentation.​ Markdown suffit.
• Publication multi-plateformes, nécessitant une mise en page fine.​ Les avantages du HTML ressortent.

Surtout maintenant que l’IA peut vous aider à écrire du HTML, la barrière de la mise en forme n’est plus un problème. Qu’en pensez-vous ?

Le projet est open-source sous la licence Apache-2.0. Les amis intéressés peuvent consulter le code source et la documentation dans le dépôt GitHub.

Adresse Open Source :​ https://github.com/nexu-io/html-anything