HTML Anything: AIの出力をそのまま公開可能なアセットに変換するエージェント型エディタ
生のMarkdownで妥協するのはやめましょう。HTML Anythingは、既存のAIコーディングエージェントを活用してプロダクション品質のHTMLを生成する、ローカルファーストかつAPIキー不要のエディタです。
AI支援開発の時代において、私たちはMarkdownでコンテンツを生成することに慣れ親しんできました。Markdownは高速で読みやすく、どこでも利用できます。しかし、Markdownはあくまで中間状態であり、読者が実際に目にするものではありません。プレゼン資料、レポート、SNSカード、あるいはWebプロトタイプを公開しようとすると、手動でのフォーマット調整が必要な「デザインのギャップ」に直面することがよくあります。
HTML Anything は、HTMLを最終的なネイティブ出力フォーマットとして扱うことで、このギャップを埋めます。これは、Markdown、CSV、JSON、SQLなどの生のデータを、数秒で洗練された公開可能なHTMLに変換するために設計されたエージェント型エディタです。
なぜMarkdownを超えていくのか？
HTML Anythingの開発チームは、「Markdownは書き手のためのものだが、HTMLは読み手のためのものだ」という説得力のある主張をしています。AIに構造化されたHTMLを出力させることで、以下のメリットが得られます。
- レイアウト制御: レンダラー固有の制限に悩まされることはもうありません。
- デザインの一貫性: すべての出力が厳格なデザインシステム（8pxグリッド、CJK優先のフォントスタック、高コントラストのアクセシビリティ）に従います。
- ゼロタッチエクスポート: WeChat、X (Twitter)、知乎（Zhihu）、または高DPIのPNG形式にワンクリックで最適化して変換できます。
仕組み：エージェント型ワークフロー
独自のモデル利用料を支払う必要があるWebベースのAIツールとは異なり、HTML Anythingはローカルファーストです。マシンに既にインストールされているコーディングエージェントを自動検出します。
アプリケーションを起動すると、PATHをスキャンして Claude Code、Cursor Agent、Codex、Gemini CLI、GitHub Copilot、OpenCode、Qwen、Aider などのCLIツールを探し、既存の認証済みセッションを再利用します。APIキーを管理したり、追加のサブスクリプション料金を支払ったりする必要はありません。
技術スタック
- フロントエンド: Next.js 16 (React 19, Tailwind CSS v4使用)
- ストリーミング: Server-Sent Events (SSE) を使用して、AIの出力をサンドボックス化された
<iframe>に直接ストリーミングします。ターミナルに文字が打ち込まれるのを見るように、リアルタイムでページがレンダリングされる様子を確認できます。 - セキュリティ: プレビューは厳格にサンドボックス化されており (
sandbox="allow-scripts allow-same-origin")、カスタムCSSやスクリプトを実行しつつ、ローカルのCookieやストレージは隔離された状態を保ちます。
75種類以上のスキルテンプレート
このツールの強みは「スキル」にあります。各スキルは、特定の出力タイプに対する制約とデザインシステムを定義した SKILL.md ファイルを含むフォルダです。スイススタイルのプレゼン資料、ブルータリズムなWebプロトタイプ、高級感のある雑誌のポスターなど、どのような形式であっても、エージェントは厳格なルールに従います。
- Lorem Ipsum（ダミーテキスト）禁止: 実際のデータを使用することを強制します。
- デザイン規律: すべての要素は8pxのベースライングリッドを尊重しなければなりません。
- アクセシビリティ: コントラスト比は4.5以上に保たれます。
クイックスタートガイド
使い方は簡単です。リポジトリをクローンして開発環境を起動するだけです。
git clone https://github.com/nexu-io/html-anything
cd html-anything
pnpm install
pnpm -F @html-anything/next dev
http://localhost:3000 で起動すると、トップバーがインストール済みのCLIエージェントを自動検出します。テンプレートを選択し、コンテンツを貼り付けて ⌘+Enter を押すだけです。
開発者にとっての意義
このプロジェクトは、「バイブコーディング（vibe coding）」に対する私たちの考え方の転換を象徴しています。単なるコードスニペットを生成するのではなく、私たちは「アーティファクト（成果物）」を生成しているのです。HTML Anythingは、コーディングに使用する既存のCLIツールを活用することで、ブラウザ全体をハイファイでデータ駆動型のコミュニケーションのためのキャンバスに変えてしまいます。
コンテンツ作成の「後で調整しよう」という段階にうんざりしているなら、このプロジェクトはあなたのワークフローに欠けていたピースとなるはずです。