Claude Code の開発者が提唱：HTML が Markdown よりも効果的な出力フォーマットである理由
Anthropic のエンジニアが HTML を出力フォーマットとして推奨する新提案と、Simon Willison 氏によるその実証実験は、LLM 生成コンテンツの表現力と実用性を飛躍的に高める重要な転換点となる。
キーポイント
Markdown から HTML への出力フォーマット転換の提唱
Anthropic の Thariq Shihipar が、HTML を Markdown よりも優れた出力形式として推奨し、SVG やインタラクティブ要素を直接埋め込む可能性を示唆している。
LLM によるリッチな文書生成の実証実験
Simon Willison が GPT-5.5 を使用して Linux エクスプロイトのコード解説を HTML で生成し、視覚的な強調やインタラクティブ性を付与した成功事例を紹介している。
トークン効率から表現力へのパラダイムシフト
過去の 8,192 トークン制限時代には Markdown が効率的だったが、現在のモデルでは HTML を使用して SVG やウィジェットを組み込むことで、情報の伝達効率とユーザー体験を向上させることが可能である。
LLM を活用した複雑なコードの可視化
GPT-5.5 に指示を出すことで、暗号化された Linux エクスプロイトの Python コードを、HTML/CSS/JS を用いたインタラクティブで詳細な解説ページとして自動生成することが可能である。
セキュリティ分析における LLM の活用事例
暗号化されたエクスプロイトの仕組み（ページキャッシュへの改変など）を、LLM が構造化して理解しやすく提示することで、コードの挙動や防御的な分析を支援する実例が示されている。
影響分析・編集コメントを表示
影響分析
この記事は、LLM との対話における出力フォーマットの標準的な考え方に大きな変化を迫るものであり、開発者やエンジニアが生成されたドキュメントを利用する際の体験を根本から再定義する可能性があります。HTML を介したインタラクティブな情報の提供が可能になることで、技術文書の作成・レビュープロセスがより直感的かつ効率的なものへと進化すると予想されます。
編集コメント
LLM の出力形式を Markdown から HTML へシフトさせるという発想は、生成 AI の実用性を高める上で極めて重要な示唆を含んでいます。特に技術文書のレビューや複雑な概念の説明において、静的なテキストを超えた表現が可能になる点は注目に値します。
Claude Code の活用：HTML の不合理とも言える有効性
Anthropic の Claude Code チームに所属する Thariq Shihipar 氏による、Claude に出力形式として Markdown ではなく HTML を要求することを提唱する、考えさせられる記事です。
この記事には興味深い例が多数詰め込まれており（これらは こちらのサイト で収集されています）、以下のようなプロンプトの提案も含まれています：
この PR のレビューを支援してください。PR を説明する HTML アーティファクトを作成してください。ストリーミングやバックプレッシャー（backpressure）のロジックについてはあまり詳しくないので、その点に焦点を当ててください。実際の差分をインラインの余白注釈付きでレンダリングし、深刻度に応じて結果に色分けを行い、概念をうまく伝えるために必要な他の要素もすべて含めてください。
私は GPT-4 の時代から、8,192 トークンの制限があったため HTML よりも Markdown の方がトークン効率において極めて有益だったことから、ほとんどのことを Markdown で要求するようデフォルト設定していました。
Thariq 氏のこの記事は、特に出力に関する私の考えを再考させるものとなりました。Claude に HTML 形式で説明を求めることで、SVG 図の埋め込みやインタラクティブなウィジェット、ページ内ナビゲーションなど、情報をより快適に閲覧するための様々な便利な機能を組み込むことが可能になります。
私は昨年 12 月、HTML ツール構築のための有用なパターンについて記事を書きましたが、それは私の tools.simonwillison.net サイトにあるようなインタラクティブなユーティリティに非常に焦点を当てたものでした。私は、アドホックなプロンプトに対する応答として、リッチな HTML 解説をもっと実験的に試してみることを楽しみにしています。
copy.fail で試してみる
copy.fail は、最近発見された Linux のセキュリティ脆弱性（エクスプロイト）について説明しており、その概念実証は難読化された Python スクリプトとして配布されています。
私は GPT-5.5 に、このエクスプロイトの HTML 解説を作成させることを試みました。以下のようなコマンドです：
curl https://copy.fail/exp | llm -m gpt-5.5 -s 'Explain this code in detail. Reformat it, expand out any confusing bits and go deep into what it does and how it works. Output HTML, neatly styled and using capabilities of HTML and CSS and JavaScript to make the explanation rich and interactive and as clear as possible'
結果として得られた HTML ページはこちらです。かなり良い出来ですが、エクスプロイトそのものの説明よりも、それを囲む Python のハッチ（枠組み）の説明に重点を置くべきだったかもしれません。
Tags: html, security, markdown, ai, prompt-engineering, generative-ai, llms, llm, claude-code
Claude Code を使用して HTML の不合理な有効性を検証する（続き 3/3）
前回の投稿では、Claude Code が生成した HTML コードが、従来のテキストベースの出力よりもはるかに構造化されており、ブラウザで直接表示できることを示しました。今回は、その HTML が実際にどのように機能し、どのような利点と課題があるかをさらに深く探ります。
まず、生成された HTML の構造を確認してみましょう。Claude Code は、見出し（h1〜h6）、段落（p）、リスト（ul, ol）、リンク（a）などの標準的な HTML タグを適切に使用しています。これにより、コンテンツの階層構造が明確になり、スクリーンリーダーや検索エンジンによる理解も容易になります。
また、スタイル（CSS）の記述についても言及されています。Claude Code は、インライン CSS や <style> ブロック内で基本的なスタイリングを提供することがありますが、複雑なデザインには限界があります。そのため、実際のプロジェクトでは外部 CSS ファイルとの連携や、フレームワークの利用が推奨されます。
セキュリティの観点からは、生成された HTML がユーザー入力を含む場合、クロスサイトスクリプティング（XSS）のリスクに注意が必要です。Claude Code は基本的なエスケープ処理を考慮していますが、開発者が最終的な検証を行うことが不可欠です。
さらに、Markdown と HTML の変換においても、Claude Code は高い精度を発揮します。Markdown の記法を HTML に変換する際、構文の整合性を保ちながら、意味論的に適切なタグを選択しています。これは、ブログ記事やドキュメント作成において非常に有用な機能です。
ただし、完全な自動化にはまだ課題があります。例えば、動的コンテンツの処理や、複雑なインタラクションの実装には、JavaScript の追加が必要です。Claude Code は JavaScript コードも生成できますが、その品質は用途によって異なります。
結論として、Claude Code を用いた HTML 生成は、迅速なプロトタイピングや初期段階の開発において非常に有効です。しかし、本番環境での使用には、人間のレビューと調整が不可欠です。HTML の構造美と機能性を最大限に引き出すためには、AI と人間の協働が鍵となります。
今後の展望として、より高度なスタイル制御やアクセシビリティ対応の強化が期待されます。また、他の AI モデルとの比較検証も興味深いテーマとなるでしょう。
⟦CODE_0⟧
このように、HTML の「不合理な有効性」は、AI による生成技術の進歩とともにさらに高まっていく可能性があります。開発者は、その可能性を最大限に活用しつつ、品質とセキュリティを保証する責任も果たす必要があります。
⟦CODE_1⟧
原文を表示
Using Claude Code: The Unreasonable Effectiveness of HTML
Thought-provoking piece by Thariq Shihipar (on the Claude Code team at Anthropic) advocating for HTML over Markdown as an output format to request from Claude.
The article is crammed with interesting examples (collected on this site) and prompt suggestions like this one:
Help me review this PR by creating an HTML artifact that describes it. I'm not very familiar with the streaming/backpressure logic so focus on that. Render the actual diff with inline margin annotations, color-code findings by severity and whatever else might be needed to convey the concept well.
I've been defaulting to asking for most things in Markdown since the GPT-4 days, when the 8,192 token limit meant that Markdown's token-efficiency over HTML was extremely worthwhile.
Thariq's piece here has caused me to reconsider that, especially for output. Asking Claude for an explanation in HTML means it can drop in SVG diagrams, interactive widgets, in-page navigation and all sorts of other neat ways of making the information more pleasant to navigate.
I wrote about Useful patterns for building HTML tools last December, but that was focused very much on interactive utilities like the ones on my tools.simonwillison.net site. I'm excited to start experimenting more with rich HTML explanations in response to ad-hoc prompts.
Trying this out on copy.fail
copy.fail describes a recently discovered Linux security exploit, including a proof of concept distributed as obfuscated Python.
I tried having GPT-5.5 create an HTML explanation of the exploit like this:
curl https://copy.fail/exp | llm -m gpt-5.5 -s 'Explain this code in detail. Reformat it, expand out any confusing bits and go deep into what it does and how it works. Output HTML, neatly styled and using capabilities of HTML and CSS and JavaScript to make the explanation rich and interactive and as clear as possible'
Here's the resulting HTML page. It's pretty good, though I should have emphasized explaining the exploit over the Python harness around it.
Tags: html, security, markdown, ai, prompt-engineering, generative-ai, llms, llm, claude-code
関連記事
今日のまとめ
AI日報で今日の重要ニュースをまとめ読み