Aller au guide d’utilisation
Beautiful Articlepar ConardLi

Beautiful Article Skill.

Créez un document qui mérite d'être lu, sans le transformer en tableau de bord.

  • Design éditorial
  • HTML
  • Format long
Source examinée · Beautiful ArticleSKILL.md
Tâche Design éditorial Produit • Un article.html autonome avec styles et scripts intégrés • Le Markdown source extrait et des notes sur la qualité de l'extraction • Un plan éditorial et une première double page révisée pour l'article Avant de commencer La construction documentée utilise Node/npm, Vite, React, TypeScript et Reacticle. L'extraction de documents et la sortie PDF facultative peuvent nécessiter des outils supplémentaires ; les images générées requièrent un moteur disponible séparément.
Résumé éditorial · source examinée le 2026-10-07 · exemple non généré

01 Fonctionnement

Beautiful Article

Un pipeline éditorial qui sépare l'extraction, la planification de l'article, l'approbation de la première double page, la composition complète et la livraison hors ligne.

Flux de travail fondé sur la sourcePas un benchmark d'exécution

L'approche de travail

Beautiful Article est le flux de travail de ConardLi qui va de la source à l'article. Il part de contenus que vous avez déjà : une URL d'article, du Markdown, un document, un PDF ou des captures d'écran. Le résultat visé est une expérience de lecture longue, et non un court résumé marketing. Le contenu source extrait reste disponible pour vérifier les faits, les exemples et les détails techniques tout au long de la construction.

Sa décision distinctive est de faire réviser une première double page avant de produire l'article entier. Une couverture, une section d'ouverture et un bloc visuel représentatif établissent la façon dont le contenu sera lu. Reacticle fournit des composants d'article sémantiques, tandis qu'une couche personnalisée contrainte peut ajouter des schémas ou d'autres aides à la lecture. La livraison est un fichier HTML autonome ; le PDF est une sortie distincte, fournie sur demande plutôt que par défaut.

Livrables attendus

  • Un article.html autonome avec styles et scripts intégrés
  • Le Markdown source extrait et des notes sur la qualité de l'extraction
  • Un plan éditorial et une première double page révisée pour l'article
Voir l'exemple de brief

Du brief à la révision

  1. 01
    Récupérer la source

    Extrayez le contenu fourni et gardez trace des éléments manquants ou incertains. Les PDF difficiles et les captures d'écran demandent une attention particulière avant que leur texte ne serve de base à un article.

  2. 02
    Planifier l'expérience de lecture

    Avant la construction, obtenez de l'utilisateur des décisions distinctes sur le type d'article et son niveau de rétention, le thème, la largeur de mise en page, le mode d'image et la couverture. La rétention complète de l'information est le choix par défaut ; consignez dans le plan toute réduction convenue.

  3. 03
    Réviser la première double page

    Construisez la couverture approuvée, la section d'ouverture et un bloc visuel représentatif. Obtenez une vérification indépendante par un agent relecteur, puis faites une pause pour que l'utilisateur approuve l'échantillon et choisisse un développement séquentiel ou parallèle.

  4. 04
    Terminer et empaqueter

    Révisez chaque section et l'article terminé, corrigez les défauts, puis obtenez la décision finale de livraison avant d'exporter le HTML hors ligne. La révision de la première double page et la révision finale font appel à des agents indépendants lorsqu'ils sont disponibles ; tout repli sur l'agent principal doit être signalé. N'exportez le PDF que sur demande.

02 Cas d’usage

Quand l'utiliser

La construction documentée utilise Node/npm, Vite, React, TypeScript et Reacticle. L'extraction de documents et la sortie PDF facultative peuvent nécessiter des outils supplémentaires ; les images générées requièrent un moteur disponible séparément.

Un bon choix

  • Explications techniquesUtile lorsque le code, les formules, les tableaux ou les comparaisons doivent rester lisibles à côté du texte, plutôt que d'être compressés en cartes façon diaporama.
  • Copies de lecture portablesConvient à un rapport ou un essai qui doit s'ouvrir comme un seul fichier HTML, sans dépendre d'un serveur de développement en cours d'exécution.

Limites à vérifier

  • Pas un générateur d'applicationsLa source distingue explicitement ce flux de travail des tableaux de bord, des formulaires, des applications web généralistes et des prototypes de produit.
  • Pas d'illustration automatiqueLes images externes et les images générées sont des choix délibérés. Un article sans image peut tout de même recourir à des explications CSS ou SVG pilotées par le contenu, sans solliciter discrètement un service d'images.

Éléments à fournir

  • Contenu sourceFournissez le document réel ou l'article accessible, ainsi que les sections, citations et figures qui doivent survivre à la conversion.
  • Lecteur et objectifIndiquez s'il s'agit d'un tutoriel, d'une note de synthèse, d'une critique ou d'un essai, et quelles connaissances préalables le lecteur visé possède.
  • Autorisations visuellesChoisissez : ressources fournies, espaces réservés, images générées ou aucune image ; précisez les contraintes de marque et si une sortie PDF est requise.

03 Décisions importantes

Décisions importantes

  1. Le contenu avant la décoration

    La source reste la référence factuelle pendant que la structure de l'article évolue. Il est ainsi plus facile de repérer une mise en page séduisante qui aurait supprimé par inadvertance une nuance nécessaire.

  2. Un échantillon de lecture précoce

    Une première double page révisée met à l'épreuve la vraie prose et les blocs d'explication, pas seulement les couleurs. La largeur de lecture ou la densité visuelle peuvent être modifiées avant que chaque section ne soit construite.

04 Exemple de brief

Essayer un brief ciblé

L'exemple de brief ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Vérifier la configuration

Utilisez le paquet du dépôt de l'auteur avec ses scripts et ses références. La source décrit un échafaudage de projet, et non une commande d'installation universelle vérifiée.

Fichier source amont
https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/beautiful-article/SKILL.md

La construction documentée utilise Node/npm, Vite, React, TypeScript et Reacticle. L'extraction de documents et la sortie PDF facultative peuvent nécessiter des outils supplémentaires ; les images générées requièrent un moteur disponible séparément.

Commencer par un seul livrable

Adaptez le périmètre, le contenu source et les contraintes de ce brief avant d'exécuter le skill.

Exemple de brief
Utilisez Beautiful Article pour transformer le guide de migration joint en un article explicatif HTML hors ligne destiné aux ingénieurs frontend. Conservez les exemples de code et les réserves de compatibilité, préservez la langue de la source et n'utilisez aucune image générée. Planifiez la structure de lecture et présentez une première double page avec l'introduction et un bloc de comparaison avant de terminer l'article. Livrez le HTML et les notes d'extraction ; ne créez pas encore de PDF.

Examiner le résultat

Comparez le résultat réel à ces critères observables.

  • L'article peut s'ouvrir hors ligne, avec les styles et interactions prévus.
  • Les exemples et réserves requis peuvent être retracés jusqu'à la source fournie.
  • La première double page et les sections suivantes partagent une hiérarchie lisible, sans remplacer la prose longue par des cartes répétitives.

OpenDesign fournit un espace de conception local pour les agents de code. Cette fiche ne signifie pas que le skill est inclus, ni que ses outils externes, identifiants et dépendances logicielles sont fournis.

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
ConardLi
Licence
MIT
Version examinée
2026-10-07 · aaf9a82f5efd
Résumé éditorial de la source
Un pipeline éditorial qui sépare l'extraction, la planification de l'article, l'approbation de la première double page, la composition complète et la livraison hors ligne.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, et non une mesure d'usage du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Résume-t-il la source par défaut ?

Non. Le flux de travail privilégie la conservation des informations de la source. Le type d'article et la densité peuvent modifier le traitement, mais tout abrègement doit être une décision éditoriale explicite.

Peut-il traduire l'article ?

Une traduction peut être demandée, mais la langue de la source est sinon conservée. Gardez le contenu original à part afin qu'un passage traduit reste vérifiable.

Le PDF est-il le livrable principal ?

Non. Le livrable principal est le HTML autonome. Le PDF exige une passe d'impression distincte, y compris le traitement de la couverture et de la pagination.

OpenDesign

Faites de la place pour la prochaine itération de design.

Gardez votre brief, votre contenu source et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre flux de travail.

Fichier source amont
https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/beautiful-article/SKILL.md