数日前、X で興味深い投稿を見かけました。Anthropic の Claude Code チームが、内部ドキュメントを Markdown で書くのをやめ、直接 HTML で書くことを発表しました。その理由は：Markdown は著者のため、HTML は読者のためである。
その後すぐに、html-anything というプロジェクトが GitHub で話題になりました。すでに 2,500 以上のスターを獲得しています。これは、あなたのローカル AI エージェントに、あなたの代わりに HTML を書かせることができます。Markdown や PPTX を出力するのではなく、純粋な静的 HTML ファイルを出力します。要件を左側に入力し、中央でテンプレートを選択し、右側で結果をリアルタイムにプレビューします。
インストール後、あなたがするべきことはたった一つ：必要なものを記述することです。例：「技術ブログの記事を作成して、ダークテーマで、コード例とデータチャートを含むもの。」
AI が自動的にテンプレートを選択し、デザイン制約を適用し、完全な HTML ファイルを出力します。それは仕掛品ではなく、完成品です。
AI を提供するのではなく、調整するだけ
実装に関して、html-anything はモデルを同梱しておらず、API キーも販売していません。 簡単に言えば、あなたのコンピュータにすでにインストールされている AI ツールを呼び出します。Claude Code、Cursor、Gemini CLI、Copilot… 以前に使用してログインしたことがあれば、それを単に使用します。追加の登録や支払いは必要ありません。
生成されるすべてのページは完成品であり、途中の作品ではない
75 の注意深くデザインされたテンプレートが付属しています。各テンプレートには厳格な制約があります：
- CJK 優先フォントスタック。
- 8px ベースライングリッド。
- コントラスト比 ≥ 4.5。
- 実際のデータを使用する必要がある。
- プレースホルダーテキストは禁止。
利点は、出力が専門的な基準に適合することを保証することです。9 つの一般的なシナリオをカバーします：
- Web プロトタイプ。 ランディングページ、価格ページ、管理ダッシュボード、技術ブログなどを作成するために使用できます。
- プレゼンテーション。 20 種類のスタイルから選択可能、以下で詳しく説明します。
- 動画生成。 記述して直接 MP4 動画としてエクスポート。以下で詳しく説明します。
- ソーシャルメディアカード。 小紅書、Twitter、Spotify などのスタイルのグラフィックをワンクリックで生成。
- オフィス文書。 週次レポート、要件定義書、財務報告書、その他の日常的なオフィス文書のテンプレート。
- 履歴書。
- データレポート。
- …その他のシナリオ。
この 9 つのシナリオの中で、プレゼンテーションテンプレートは別に議論する価値があります。20 種類のプレゼンテーションスタイルがあります。技術講演や製品デモを行う方々は、この部分に目を見張るでしょう。
- スイス・インターナショナルスタイル： メインカラーと 16 列グリッドを使用します。クライン・ブルー、レモン・グリーンなどから選択。22 の固定レイアウトから直接適用。「高そうに見える」厳格な雰囲気で開きます。
- マガジン＆E-インクスタイル： 10 のレイアウトに 5 つの配色を組み合わせ、インク、インディゴポーセリン、クラフト紙など。精巧に印刷された芸術雑誌のように見えます。
- そして、
deck-xhs-pastel(小紅書パステル)、deck-hermes-cyber(エルメス・サイバーネオン)、deck-replit(Replit 製品デモスタイル) などのスタイル。
ビデオフレームスクリプト、直接 MP4 にレンダリング可能
静的ページとプレゼンテーションに加えて、html-anything は動画コンテンツも生成できます。heygen-com/hyperframes仕様に準拠する 10 個のフレームスクリプトを提供します。Remotion に渡して .mp4にレンダリングします。
frame-glitch-title – グリッチアートタイトルフレーム。シアン/マゼンタの色収差オフセット、CRT 走査線、破損データ字幕、段落 ASCII ノイズ。サイバーパンクテーマ用。frame-logo-outro – ブランドロゴアウトロフレーム。ロゴがブロックごとに組み立て + 発光グロー、スローガンが浮上、CTA が出現。製品発表の締めカード。vfx-text-cursor – カーソルタイピングエフェクト。各文字がマゼンタ × シアンの色収差軌跡とともに出現。引用文を入れると、映画的なオープニングフレームが得られます。
ワンクリックで複数プラットフォームにエクスポート
コンテンツが生成されたら、次のステップは公開です。Html-anything はワンクリックで複数の主要プラットフォームにエクスポートする機能をサポートし、手動でのフォーマット作業の手間を省きます。
- WeChat 公式アカウント： CSS は完全にインライン化され、貼り付けて直接使用可能。
- X / 微博 / 小紅書： 自動的に 2 倍高 DPI PNG としてレンダリングされ、クリップボードにコピー。
- 知乎： LaTeX 数式は自動的に画像プレースホルダーに処理されます。
異なるプラットフォーム向けに同じコンテンツを再フォーマットする苦しみを経験したことがあるなら、この機能は非常に実用的です。
ストリーミングレンダリング + サンドボックスプレビュー
生成中の体験も重要です。Html-anything は SSE (Server-Sent Events) ストリーミングレンダリングを使用して、AI の創造プロセスをリアルタイムで見られるようにします。AI によってページが「描かれる」様子を見ることができます。間違った方向に行っていると気づいたら、すぐに中断して再プロンプトでき、生成リソースの無駄を避け、創造プロセスをより制御可能にします。
セキュリティも考慮されています。機能のみを気にする雑な実装ではありません。生成されたすべての HTML はサンドボックス化された iframe でプレビューされ、ローカルストレージとクッキーを分離します。
これらの機能を見て、試してみたくてウズウズしている方もいるでしょう。
⚠️ 前提条件： 少なくとも 1 つのサポートされている AI CLI、例えば Claude Code をローカルにインストールしており、機能する状態である必要があります。
インストール (3 ステップ):
- コードをコンピュータにクローンします。 bashbash
git clone https://github.com/nexu-io/html-anything - ディレクトリに移動し、依存関係をインストールします。 bashbash
cd html-anything pnpm install - 1 つのコマンドで起動します。 bashbash
pnpm devブラウザでhttp://localhost:3000を開くとインターフェースが表示されます。
各テンプレートがどのように見えるかを見たいですか？リポジトリ内の skills/ディレクトリを開いてください。各テンプレートに example.htmlファイルがあります。ダブルクリックすると効果を確認できます。
2 つの小さな問題
もちろん、プロジェクトは完璧ではありません。現在 2 つの主な制限があります：
- 現在、HTML と PNG 形式のみ出力できます。PDF または PPTX が必要な場合は、ブラウザの印刷機能またはサードパーティツールによる変換に頼る必要があります。
- コンテンツの変更には、AI エージェントによる再生成が必要です。 AI CLI をインストールしていない人にとって、敷居が少し高くなっています。
最後に
これだけ機能について話した後、最初の話題に戻りましょう — HTML それとも Markdown?
コミュニティではかなり議論があります。Markdown で十分だと思う人もいれば — シンプルで直接的、バージョン管理に適している。HTML こそ正解だと思う人も — 自由なレイアウト、WYSIWYG。どちらの見方にも一理あります。
私は、重要なのはフォーマット自体ではなく、あなたが置かれている状況だと思います。
- メモを取る、ドキュメントを書く。 Markdown で十分。
- クロスプラットフォーム公開、細かいレイアウトが必要。 HTML の利点が発揮される。
特に今、AI が HTML を書くのを手伝ってくれるので、フォーマットの壁はもはや問題ではありません。あなたはどう思いますか？
このプロジェクトは Apache-2.0 ライセンスの下でオープンソースです。興味のある方は、GitHub リポジトリでソースコードとドキュメントを確認できます。
オープンソースアドレス： https://github.com/nexu-io/html-anything
