メインコンテンツへ移動
AIチュートリアル

AIの回答を「Answer me with HTML」で読みやすいページに変換

「Answer me with HTML」が簡潔なAI生成Markdownを構造化された視覚的なページに変換する方法を学びます。このチュートリアルでは、インストール、日常的なプロンプト、CLIからの直接レンダリング、テーマ、コンポーネント、文章チェック、設定、任意の常時オンモードについて説明します。

約17分で読了
AIの回答を「Answer me with HTML」で読みやすいページに変換

Answer me with HTMLの機能

Answer me with HTMLは、複雑な回答を読みやすく自己完結したHTMLページに変換するエージェントスキルです。モデルにすべてのHTML要素、CSSルール、SVGの座標を書かせる代わりに、このスキルでは短いMarkdownの下書きを作成させます。付属のCLIがレイアウト、スタイル設定、図の描画を処理します。

この役割分担により、生成される出力と待ち時間を削減できます。プロジェクトのベンチマークでは、このスキルの出力トークン数の中央値は6,873ではなく923で、回答の完了時間は46秒ではなく13秒でした。追加のエージェント処理で会話のコンテキストを再読み込みするため、測定されたコストはほぼ同じでした。

Answer me with HTMLのページ例

このツールは、構造化によって理解しやすくなる情報に役立ちます。たとえば、アーキテクチャの説明、複数ステップのプロセス、比較、タイムライン、モジュールツリー、注釈付きの文章レビューなどです。単純な質問には単純なテキスト回答を返すこともできます。ページを明示的に指定しない限り、ページを作成する価値があるかどうかはエージェントが判断します。

主な機能

  • コンパクトなモデル出力: モデルは、繰り返しの多いHTML、CSS、SVGを何百行も書くのではなく、コンテンツを作成します。
  • コード駆動のレイアウト: CLIがパネルの配置と図の座標を計算し、ラベルの切れや不均一な余白を減らします。
  • 便利な検証: 下書きにエラーがある場合、CLIは該当する行、コンポーネント、正しい例を報告するため、エージェントが修正できます。
  • ビジュアルコンポーネント: 下書きには、フローチャート、シーケンス図、ツリー、タイムライン、制限事項、注釈、キーと値のブロック、コールアウト、比較表を含められます。
  • 2つのテーマ: エンジニアリング風のblueprintテーマ、またはカードベースのshadcnテーマを選択できます。どちらもライトモードとダークモードに対応しています。
  • ポータブルな出力: 各結果はCDNリンクやWebフォントを含まない1つのHTMLファイルなので、オフラインで開いたり簡単に共有したりできます。
  • ソースの埋め込み: 各ページには作成に使用したMarkdownが保持されます。ページの「ソースをコピー」コントロールから、その下書きを取得できます。
  • 文章チェック: 英語と中国語の下書きについて、長い文、冗長な表現、受動態、その他の関連する文体上の問題をチェックします。
このスキルで生成されたビジュアルAI回答

要件とインストール

Node.js 20以降が必要です。CLIと実行時依存関係はスキルに同梱されているため、通常のスキルインストールで別途npm installを実行する必要はありません。

オプション1: エージェントにインストールさせる

推奨される方法は、コーディングエージェントにインストールを依頼することです。インストーラーはClaude Code、Codex、Cursor、OpenCodeなど、多数のエージェントに対応しています。

npx -y skills add QingYunA/answer-me-with-html -g -yを実行してAnswer me with HTMLスキルをインストールしてください。-aに-a claude-codeのような適切なエージェント名を指定します。その後、スキルのSKILL.mdを読み、TCPの3ウェイハンドシェイクを説明するページを作成してください。

オプション2: 対話型インストーラーを使用する

次のコマンドを実行し、スキルをインストールするエージェントを選択します。

npx skills add QingYunA/answer-me-with-html

このコマンドは、70以上のエージェントに対応するvercel-labs/skillsインストーラーを使用します。

オプション3: Claude Codeプラグインをインストールする

Claude Code内でマーケットプレイスを追加し、プラグインをインストールします。

/plugin marketplace add QingYunA/answer-me-with-html
/plugin install answer-me-with-html@answer-me-with-html

オプション4: 手動でインストールする

リポジトリをクローンし、スキルディレクトリをエージェントのスキルフォルダーにコピーします。Claude Codeの場合は、次のコマンドを使用します。

git clone --depth 1 https://github.com/QingYunA/answer-me-with-html.git /tmp/answer-me-with-html
cp -R /tmp/answer-me-with-html/skills/answer-me-with-html ~/.claude/skills/answer-me-with-html

その他のドキュメントに記載された場所には、Codexの~/.codex/skills/、Cursorの~/.cursor/skills/、OpenCodeの~/.config/opencode/skill/があります。インストール後に追加の設定は必要ありません。

最初のページを生成する

  1. 内容のある質問をする。 TCPの3ウェイハンドシェイクを説明して、このリポジトリのモジュールがどのように連携しているか整理して、キャッシュにはRedisとMemcachedのどちらがよい？などを試してください。
  2. エージェントに表示方法を選ばせる。 エージェントは短いMarkdownの下書きを作成し、付属のCLIに渡します。
  3. 結果を開く。 デフォルトでは、生成されたページがブラウザーで開きます。
  4. 保存されたファイルを確認する。 生成されたページは~/.answer-me-with-html/pages/に保存されます。
  5. ページのコントロールを使う。 右上のコントロールでテーマやカラーモードを切り替えたり、ソースMarkdownをコピーしたりできます。

エージェントがスキルを自動選択しない場合は、HTMLで説明してのような直接的な指示を追加してください。

レンダリングされた技術解説ページ

ツールがコンポーネントを選択する方法

エージェントは情報の形に合ったコンポーネントを選択します。

  • flowはアーキテクチャ、呼び出しチェーン、判断、グループ化されたシステムを表します。
  • sequenceは、複数の参加者が時間の経過とともに交換するメッセージを示します。
  • treeはフォルダー、モジュール、分類体系を表します。
  • timelineは履歴、リリース、フェーズを整理します。
  • limitsは値とその上限を比較します。
  • annotは文に単語レベルの注釈を追加します。
  • kvはメタデータやタイトルブロックの情報を表示します。
  • calloutは結論、警告、ヒントを強調します。
  • Markdownの表は比較に対応しています。ok、no、warnを含むセルは、視覚的なステータスマークになります。

自分で下書きを作成してレンダリングする

エージェントなしで、同梱のCLIを使用できます。下書きは任意のフロントマターで始まり、レベル2の見出しごとにパネルを作成します。次の例では、TCPハンドシェイクのシーケンス図とフロー図を作成します。

---
title: TCP 3ウェイハンドシェイク
theme: blueprint
---
## 3ウェイハンドシェイク {span=2}
```sequence num
Client -> Server: SYN, seq=x
Server -> Client: SYN+ACK, seq=y, ack=x+1
Client -> Server: ACK, ack=y+1
note Client, Server: ESTABLISHED
```

## C 状態の変化 {span=2}
```flow LR
(CLOSED) -> LISTEN: パッシブオープン
LISTEN -> SYN_RCVD: SYNを受信 / SYN+ACKを送信
SYN_RCVD -> *ESTABLISHED: ACKを受信
```

パネルの見出しでは、span=2でパネルの幅が2列になり、rows=2で高さが2行になり、bareでタイトルバーがなくなります。meta="短いテキスト"でメタデータを追加することもできます。

コマンドラインからレンダリングする

CLIファイルは、インストール済みスキル内のscripts/am.mjsです。リポジトリのチェックアウトから、そのパスを定義して目的のコマンドを実行します。

AM=skills/answer-me-with-html/scripts/am.mjs

node $AM render examples/tcp.en.md
node $AM render notes.md -o out.html --no-open
node $AM render notes.md --theme shadcn
node $AM lint notes.md
node $AM list
node $AM config

最初のコマンドは下書きをレンダリングして開きます。2つ目は出力ファイル名を指定し、ブラウザーを開かないようにします。3つ目は1回の実行に限りテーマを上書きします。残りのコマンドは、文章チェックの実行、コンポーネントの一覧表示、設定の表示を行います。

エージェントは通常、標準入力経由で下書きを渡します。同じことを手動で行うこともできます。

node $AM render - <<'AM_EOF'
## 1つのパネル
```flow
A -> B: こんにちは
```
AM_EOF

am help <component>を使用すると、特定のコンポーネントの完全な構文を確認できます。デフォルトのディレクトリ以外に生成ページを保存したい場合は、AM_HOME環境変数を設定してください。

テーマ、ブラウザーの動作、文章チェックを設定する

設定はコマンドで管理できるため、設定ファイルを手動で編集する必要はありません。値は~/.answer-me-with-html/config.jsonに保存されます。

Claude Codeプラグインをインストールしている場合は、対話式の設定コマンドを開くか、設定を直接変更します。

/answer-me-with-html:config
/answer-me-with-html:config open off

別のエージェントを使用する場合は、/answer-me-with-html config open offを実行するか、ブラウザーを開かないよう指示します。ターミナルからは次を使用します。

am config
am config set open off
am config reset
  • openのデフォルトはonで、新しいページをブラウザーで開くかどうかを制御します。
  • alwaysのデフォルトはonですが、任意の常時有効インテグレーションがインストールされている場合にのみ機能します。
  • themeのデフォルトはblueprintで、shadcnも指定できます。
  • modeにはauto、light、darkを指定できます。
  • styleにはoff、80、strictを指定できます。デフォルトの80モードは、レンダリングを妨げずに警告を表示します。

下書きでテーマを宣言すると、設定済みのデフォルトが上書きされます。--openおよび--no-openフラグは、1回のレンダリングに限りブラウザーの動作を上書きします。

明るいテーマと暗いテーマのページ例

高度なヒント

常時有効モードを有効にする

通常、エージェントは回答にページが役立つ場合にのみページを作成します。常時有効モードでは、返信に結論、要約、計画、比較、レビュー、説明が含まれる場合に、小さなページを追加します。通常のページは2～4個のパネルを使用し、ブラウザーを開かずにレンダリングされます。雑談や結論を含まない返信は変わりません。

Claude Codeでは、追加のプラグインをインストールします。

/plugin marketplace add QingYunA/answer-me-with-html
/plugin install answer-me-with-html-always@answer-me-with-html

アンインストールせずに一時停止するには、次を実行します。

/answer-me-with-html:config always off

他のエージェントでは、AGENTS.mdなどのグローバルルールファイルに、文書化された常時有効ルールを追加できます。このルールでは、結論に対して小さなページを作成し、--no-openでレンダリングする一方、雑談、純粋なコマンド出力、プレーンテキストの要求は除外するようエージェントに指示します。

厳格な文章検証を使用する

文章チェックは、ASD-STE100を応用した機械検査可能な基準に基づいています。短い文、一般的な単語、直接的な命令、一貫した用語を重視します。英語の手順は20語未満、説明は25語未満、段落は6文以内にしてください。中国語のチェックでは対応する文字数制限を使用し、選択された反復的または曖昧な表現を検出します。

ブロックする検証をグローバルに有効にするには、次を実行します。

/answer-me-with-html:config style strict

ドラフトで style: を指定して、そのページの検証を制御することもできます。

適切なテンプレートを選ぶ

デフォルトの sheet テンプレートは、情報をパネルのグリッドとして配置します。目次付きの1列ページには doc を使用してください。sheet では、フロントマターの cols フィールドで列数を指定します。

ページごとに表示を上書きする

特定のページで異なる設定が必要な場合は、ドラフトのフロントマターに表示設定を記述します。

---
template: sheet
theme: shadcn
title: キャッシュ比較
subtitle: Redis と Memcached
cols: 3
source: 内部アーキテクチャレビュー
---

追加のフロントマターフィールドは、ページタイトルの下に表示されます。組み込みコンポーネントでは対応できない場合、ドラフト形式では生の HTML や SVG ブロックも使用できます。ただし、組み込みコンポーネントを使うと自動レイアウトの利点を得られます。

プロジェクトをローカルで開発する

リポジトリのソースとテストを使用するため、コントリビューターは通常の依存関係のインストールが必要です。

git clone https://github.com/QingYunA/answer-me-with-html.git
cd answer-me-with-html
npm install
npm test
npm run build

src/ 配下のファイルを変更した後は、npm run build を実行して、バンドル済みの skills/answer-me-with-html/scripts/am.mjs を再ビルドしてください。実行時依存関係は、Markdown の解析に使う marked と、フローチャートのレイアウトに使う Dagre の2つです。どちらも CLI にバンドルされます。

まとめ

Answer me with HTML は、コンテンツ生成とページ構築を分離します。エージェントは簡潔な Markdown ドラフトを作成し、CLI がレイアウト、図、テーマ、検証、そして持ち運び可能なオフライン HTML ファイルを提供します。まずスキルをインストールし、視覚的な説明を依頼してください。その後、CLI による直接レンダリング、ページごとのテーマ、厳格な文章チェック、または任意の常時有効モードでワークフローを調整できます。