使い方ガイドへスキップ
Beautiful Article作者 ConardLi

Beautiful Article スキル。

ダッシュボードにせず、読む価値のある文書をつくる。

  • エディトリアルデザイン
  • HTML
  • ロングフォーム
ソースレビュー · Beautiful ArticleSKILL.md
タスク エディトリアルデザイン 生成物 • インラインのスタイルとスクリプトを含む、自己完結型の article.html • 抽出したソースの Markdown と、抽出品質に関するメモ • 記事のエディトリアルプランと、レビュー済みの最初の見開き 始める前に 文書化されているビルドでは Node/npm、Vite、React、TypeScript、Reacticle を使用します。文書の抽出や任意の PDF 出力には追加のツールが必要になる場合があります。生成画像には、別途利用可能なバックエンドが必要です。
編集部による要約 · ソース確認日 2026-10-07 · 生成された例ではありません

01 機能概要

Beautiful Article

抽出、記事の計画、最初の見開きの承認、全体の組版、オフライン配布を分離したエディトリアルパイプラインです。

ソースに基づくワークフロー実行ベンチマークではありません

進め方

Beautiful Article は、ConardLi の「ソースから記事へ」のワークフローです。記事の URL、Markdown、文書、PDF、スクリーンショットなど、手元にある資料から始めます。目指す成果は短い宣伝用の要約ではなく、長文のリーディング体験です。抽出したソース資料は常に参照できるため、制作の全工程で事実、例、技術的な詳細を確認できます。

特徴的なのは、記事全体を作る前に最初の見開きをレビューする点です。カバー、冒頭のセクション、代表的なビジュアルブロックで、内容がどう読まれるかを決めます。Reacticle がセマンティックな記事コンポーネントを提供し、制約付きのカスタムレイヤーで図などの読書補助を追加できます。納品物は自己完結型の HTML ファイルで、PDF はデフォルトではなく、依頼があった場合に別途出力するものです。

想定される成果物

  • インラインのスタイルとスクリプトを含む、自己完結型の article.html
  • 抽出したソースの Markdown と、抽出品質に関するメモ
  • 記事のエディトリアルプランと、レビュー済みの最初の見開き
サンプルブリーフを見る

ブリーフからレビューまで

  1. 01
    ソースを復元する

    提供された資料を抽出し、欠落している内容や不確かな内容を記録します。難しい PDF やスクリーンショットは、そのテキストを記事の土台にする前に特に注意が必要です。

  2. 02
    読書体験を計画する

    制作の前に、記事タイプとその情報保持レベル、テーマ、レイアウト幅、画像モード、カバーについて、ユーザーから個別に決定を得ます。デフォルトは情報を完全に保持することです。合意した削減があれば、計画に記録します。

  3. 03
    最初の見開きをレビューする

    承認されたカバー、冒頭のセクション、代表的なビジュアルブロックを制作します。独立したレビュアーエージェントによるチェックを受けたうえで一時停止し、ユーザーがサンプルを承認し、順次開発か並行開発かを選択します。

  4. 04
    完成とパッケージ化

    各セクションと完成した記事をレビューして不備を修正し、最終的な納品の可否を確認してからオフラインの HTML をエクスポートします。最初の見開きと最終レビューは、可能であれば独立したエージェントが行います。メインエージェントで代替した場合は、その旨を開示する必要があります。PDF は依頼があった場合のみエクスポートします。

02 利用場面

使いどころ

文書化されているビルドでは Node/npm、Vite、React、TypeScript、Reacticle を使用します。文書の抽出や任意の PDF 出力には追加のツールが必要になる場合があります。生成画像には、別途利用可能なバックエンドが必要です。

適しているケース

  • 技術解説コード、数式、表、比較を、スライド風のカードに圧縮せず、本文と並べて読みやすく保ちたい場合に役立ちます。
  • 持ち運べる閲覧用コピー開発サーバーを起動しなくても、1 つの HTML ファイルとして開けるレポートやエッセイに向いています。

確認すべき制限

  • アプリケーションビルダーではありませんソースでは、このワークフローをダッシュボード、フォーム、汎用的な Web アプリケーション、プロダクトのプロトタイプとは明確に区別しています。
  • 自動でイラストを作るものではありません外部画像や生成画像は意図的に選ぶものです。画像なしの記事でも、画像サービスを黙って呼び出すことなく、内容に基づく CSS や SVG による説明を使えます。

用意するもの

  • ソース資料実際の文書またはアクセス可能な記事と、変換後も残すべきセクション、引用、図を提供してください。
  • 読者と目的チュートリアル、ブリーフィング、レビュー、エッセイのいずれか、そして想定読者がどの程度の予備知識を持つかを明示してください。
  • ビジュアルの許可範囲提供済みのアセット、プレースホルダー、生成画像、画像なしのいずれかを選び、ブランド上の制約や PDF 出力の要否を伝えてください。

03 重要な判断

重要な判断

  1. 装飾より内容を優先

    記事の構成が変わっても、事実の基準は常にソースです。そのため、魅力的なレイアウトが必要な但し書きを誤って削ってしまっていないかに気づきやすくなります。

  2. 早い段階での読書サンプル

    レビュー済みの最初の見開きでは、色だけでなく、実際の本文や解説ブロックを検証します。読みやすい幅やビジュアルの密度は、全セクションを作る前に調整できます。

04 依頼例

絞ったブリーフを試す

以下のサンプルブリーフはテストされていません。使用前にスキルのセットアップを確認してください。

セットアップを確認する

作者のリポジトリパッケージを、付属のスクリプトとリファレンスとともに使用してください。ソースに記載されているのはプロジェクトのスキャフォールディングであり、検証済みの汎用インストーラーコマンドではありません。

アップストリームのソースファイル
https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/beautiful-article/SKILL.md

文書化されているビルドでは Node/npm、Vite、React、TypeScript、Reacticle を使用します。文書の抽出や任意の PDF 出力には追加のツールが必要になる場合があります。生成画像には、別途利用可能なバックエンドが必要です。

まず 1 つの成果物から始める

スキルを実行する前に、このブリーフの範囲、ソース資料、制約を調整してください。

サンプルブリーフ
Beautiful Article を使って、添付の移行ガイドをフロントエンドエンジニア向けのオフライン HTML 解説に変換してください。コード例と互換性に関する注意点は残し、ソースの言語を維持し、生成画像は使用しないでください。読みの構成を計画し、記事を仕上げる前に、導入部と比較ブロック 1 つを含む最初の見開きを見せてください。HTML と抽出メモを納品し、PDF はまだ作成しないでください。

結果を確認する

実際の出力を、次の観察可能な基準で確認してください。

  • 記事をオフラインで開いても、意図したスタイルとインタラクションが維持されている。
  • 必要な例と注意点を、提供されたソースまでたどることができる。
  • 最初の見開きと以降のセクションで、読みやすい階層が共通しており、長文を繰り返しのカードに置き換えていない。

OpenDesign は、コーディングエージェント向けのローカルデザインワークスペースを提供します。この掲載は、スキルが同梱されていること、または外部ツール、認証情報、ソフトウェア依存関係が含まれていることを意味しません。

05 ソースとライセンス

ソースとライセンス

このページは、下記にリンクされた固定済みのソースリビジョンについて説明しています。アップストリームの動作や要件は変更される場合があります。

ソースの所有者
ConardLi
リポジトリ
ConardLi/garden-skills
ライセンス
MIT
確認済みスナップショット
2026-10-07 · aaf9a82f5efd
編集部によるソース要約
抽出、記事の計画、最初の見開きの承認、全体の組版、オフライン配布を分離したエディトリアルパイプラインです。

リンク先のソースに基づく OpenDesign のオリジナル要約です。リポジトリのスター数は日付付きの人気の目安であり、スキルの利用状況や品質スコアではありません。

06 開始前の質問

始める前の質問

デフォルトでソースを要約しますか?

いいえ。このワークフローはソースの情報を保持することを優先します。記事タイプや情報量によって扱いは変わりますが、短縮は編集上の明示的な判断であるべきです。

記事を翻訳できますか?

翻訳は依頼できますが、そうでなければソースの言語が維持されます。翻訳した箇所を検証できるよう、元の資料は別に保管してください。

PDF が主な成果物ですか?

いいえ。主な成果物は自己完結型の HTML です。PDF には、カバーとページ割りの処理を含む、別の印刷用工程が必要です。

OpenDesign

次のデザインの反復に余白を。

ブリーフ、ソース資料、デザイン作業をローカルのワークスペースにまとめましょう。ワークフローに追加する前に、スキル自体のセットアップを確認してください。

アップストリームのソースファイル
https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/beautiful-article/SKILL.md