nexu-io/html-anything

HTML Anything – エージェント駆動の HTML エディター

これは何か – 任意のプレーンテキスト形式（Markdown、CSV、JSON、SQL など）でコンテンツを書き、ローカルにインストールされた AI コーディングエージェント（Claude、Cursor、Codex、Gemini、Copilot、OpenCode、Qwen、Aider、または IBM Bob）の助けを借りて、その入力を完全な単一ファイル HTML ページへ即座に変換する、ローカルファーストのデスクトップ型 Web アプリです。生成されたページは Tailwind ベースのデザインシステムでスタイル設定され、中国のソーシャルプラットフォーム（WeChat、X、Zhihu）へ直接書き出すか、.html/.png として保存できます。

なぜ重要か – 現代の AI アシスタントはコード生成が得意ですが、多くの開発者は依然として出力を Markdown エディターにコピー＆ペーストし、公開のために HTML へ変換しなければなりません。HTML Anything はその中間ステップを省略します。AI が読者に実際に見える最終 HTML を書き、しかも API キーを必要とせずデバイス上で行います。これにより、ワークフローは高速で、プライベートで、コストもかかりません（ユーザーが既に持っている AI サブスクリプションを除いて）。

主な機能

• エージェント検出 – 起動時にアプリが PATH をスキャンし、サポートされている 9 種類のコーディングエージェント CLI を見つけて、どれを使うか選択できます。
• 75 個の既製スキルテンプレート – 9 種類のサーフェスタイプ（雑誌記事、キーノートデッキ、履歴書、ポスター、小紅書カード、ツイートカード、Web プロトタイプ、データレポート、Hyper-frames 動画）向けの定義済みレイアウトと、数十種類のデザインバリエーション（スイス・インターナショナル、帰蔵エディトリアルなど）。
• ライブストリーミングレンダー – エージェントが JSON 行出力をストリーミングし、フロントエンドがそれを解析して iframe プレビューをリアルタイムで更新するため、ページが行ごとに構築される様子を確認できます。
• ワンクリック書き出し – WeChat 用のインライン CSS（「juice」）、X/Weibo/小紅書用の高 DPI PNG スクリーンショット、Zhihu の LaTeX プレースホルダー、またはプレーンな .html/.png のダウンロード。
• サンドボックス化されたプレビュー – 生成された HTML はサンドボックス化された iframe 内で実行され、スクリプトをホストから隔離します。
• API キー不要 – 選択したエージェントで既に持っている認証セッションを再利用します（例: claude login）。
• ローカルまたは Vercel にデプロイ可能 – pnpm -F @html-anything/next dev で実行するか、フロントエンドをデプロイします。AI コンポーネントは常にユーザーのマシン上に留まります。

典型的なワークフロー

1. サポートされているコーディングエージェント CLI を 1 つ以上インストールしてログインします。
2. リポジトリをクローンし、pnpm install を実行して開発サーバーを起動します。
3. ブラウザーでスキル/テンプレートを選択します（例: 雑誌スタイルの記事）。
4. ソースコンテンツ（Markdown、CSV など）を貼り付け、⌘+Enter を押します。
5. ローカルエージェントが HTML を生成し、プレビューへストリーミングされる様子を確認できます。
6. ワンクリックで目的のプラットフォームへ書き出すか、ファイルをダウンロードします。

誰が使うべきか – 手動の CSS 作業なしで AI 生成の公開可能な HTML を求め、サポートされているコーディングエージェント CLI を既に利用できるコンテンツクリエイター、マーケター、プロダクトライター、デザイナー。

リポジトリ構成

• next/ – Next.js フロントエンド（@html-anything/next）。
• e2e/ – Playwright エンドツーエンドテスト（@html-anything/e2e）。
• scripts/guard.ts – CI ヘルパースクリプト。
• next/src/lib/agents/ – 各 CLI の JSON 行プロトコルを共通インターフェースへ変換するアダプター。
• next/src/lib/templates/skills/ – 75 個のスキルフォルダー。それぞれに SKILL.md 記述子とサンプル HTML ファイルがあります。

ライセンス – Apache-2.0。

---

上記の詳細はすべてプロジェクトの README から直接引用したものです。