資料一覧 / html-anything

HTML Anything

nexu-io/html-anything — Markdown・表・JSON などをローカルのコーディングエージェント CLI に渡し、単一ファイル HTML をストリーミング生成する Next.js アプリ。API キーは不要で、既存の CLI ログインセッションを再利用する。

1 — 概要
位置づけ

README が掲げるコンセプトは「Markdown は下書き、HTML が人間向けの最終成果物」である。エディタはブラウザ上で入力を受け取り、選択した SKILL.md テンプレートとデザインシステムをプロンプトに織り込み、特権プロセスがローカル CLI を起動して stdout の JSON 行を解析し、生成中の HTML を Server-Sent Events でクライアントへ流す。プレビューは sandbox 付き iframe に閉じ、ホストの Cookie や localStorage とは分離する。

8検出する CLI 系統
75SKILL テンプレート
9成果物サーフェス
0追加 API キー
2 — スタックと配置
実装の骨格
領域内容
フレームワークNext.js 16（package.json の依存）、React 19、App Router 配下の src/app
状態Zustand（src/lib/store.ts ほか）
入力パースMarkdown は marked、表形式は papaparse と xlsx（ブラウザ完結）
サニタイズdompurify でプレビュー前にユーザー生成 HTML を制限
エクスポートjuice で CSS インライン化（WeChat 等）、modern-screenshot で iframe を高 DPI PNG に、スライドは pptxgenjs
デプロイWeb 層は Vercel 想定。エージェント実行は常にユーザーマシン上の CLI
リクエストの流れ（要約）
flowchart TD A[ブラウザ UI] -->|POST /api/convert| B[Next.js Route Handler] B -->|spawn + stdin| C[ローカルエージェント CLI] C -->|JSON lines stdout| B B -->|SSE| A A -->|srcdoc 更新| D["iframe sandbox"]
3 — コーディング CLI
検出と起動

起動時に PATH を走査し、GUI から起動した Node プロセスで見落としがちな ~/.local/bin や /opt/homebrew/bin なども候補に含める。各 CLI には src/lib/agents/ の薄いアダプタ（argv.ts · invoke.ts 等）が対応し、stream-json 形式の stdout を POST /api/convert が SSE に橋渡しする。

エージェント検出コマンド起動の要点（README より）
Claude Codeclaudeclaude -p --output-format stream-json
OpenAI Codexcodexcodex exec --json --sandbox workspace-write
Cursor Agentcursor-agentcursor-agent --print --output-format stream-json --force --trust
Gemini CLIgeminigemini --output-format stream-json --yolo
GitHub Copilot CLIcopilotcopilot --allow-all-tools --output-format json
OpenCodeopencode-cli / opencodeopencode run --format json --dangerously-skip-permissions -
Qwen Coderqwenqwen --yolo -
Aideraideraider --no-pretty --no-stream --yes-always --message-file -
セキュリティ境界: ブラウザから直接シェルに触れず、サーバー側ルートがローカルプロセスを生成する。サンドボックス iframe は allow-scripts allow-same-origin で生成物のスクリプトとフォント CDN を許可しつつ、ホストオリジンとは隔離する。
4 — テンプレート（SKILL）
カタログ構造

各スキルは src/lib/templates/skills/<id>/ に SKILL.md（Claude Code の Skills 規約＋拡張 frontmatter）と example.html を持つ。ピッカーは mode（prototype / deck / frame / social / office / doc / mockup / vfx など）と scenario（design / marketing / engineering 等）でグルーピングする。

  • prototype — SaaS LP、ダッシュボード、データレポート、履歴書、長文ドキュメントなどの Web 系
  • deck — 横スワイプのキーノート系（Swiss International、Guizang Editorial、XHS 系など多数）
  • frame — Hyperframes / Remotion 向けの 1920×1080 フレーム列と遷移マーカー
  • social — X、小紅書、Spotify、Reddit 風カード
  • office — PM 仕様、エンジニアリングランブック、財務、人事、請求書、OKR など

README の「9 deliverable surfaces」は、上記モードをユーザー向けに束ねたマーケティング上の区分（記事・スライド・レジュメ・ポスター・SNS カード・Web プロト・レポート・Hyperframes 動画など）に対応する。

5 — 変換・プレビュー・エクスポート
ランタイム動作
  • SSE: エージェント stdout の JSON 行からテキストデルタを抽出し、クライアントが iframe srcdoc を増分更新する（中断・再プロンプト可能）。
  • フォーマット自動判定: Markdown / CSV / TSV / JSON / SQL / プレーンテキストを受け付け、表はブラウザ内パースのみで外部アップロードしない。
  • WeChat / Zhihu: juice による CSS インライン化と、数式の mjx-container を Zhihu 互換の data-eeimg プレースホルダへ変換する経路（README 記載）。
  • X 等の画像貼付: iframe を modern-screenshot で 2× PNG 化し ClipboardItem 経由でコンポーザへ渡す。
ローカル起動 
git clone https://github.com/nexu-io/html-anything.git
cd html-anything
pnpm install
pnpm dev
# → http://localhost:3000

以降はテンプレート選択 → 素材貼り付け → ⌘+Enter（README のクイックスタート）。

6 — 上流との関係
依存する OSS の役割
プロジェクトHTML Anything での役割
nexu-io/open-designエージェント検出、デザインシステムモデル、SKILL.md プロトコル。src/lib/agents/ と src/lib/templates/skills/ がこの設計を直接反映。
mdnice/markdown-nicejuice インライン CSS が WeChat / Zhihu 貼り付けで破綻しにくいことの実証参照。
gcui-art/markdown-to-imageiframe → 高 DPI PNG のエクスポート着想。
alchaincyf/huashu-md-htmlCJK フォント・8px ベースライン・コントラスト等、各 SKILL の硬い制約の源流。
一次情報

本ページは公開リポジトリの README とディレクトリ構成に基づく要約であり、バージョン差で実装詳細が変わる場合がある。