コアコンセプト
Agent-First 哲学とシステムコンセプト
OpenPressがユーザーに手動でのコーディングを推奨しない理由と、システム全体が「AIエージェントとの協働」を中心に設計されているコア理念とアーキテクチャについて理解します。
従来のソフトウェア開発やドキュメント組版では、ユーザーは自らコードを記述し、コマンドライン (CLI) を実行し、手動でデバッグを行うことが期待されています。しかし、OpenPress では、このパラダイムを根本から覆します。
OpenPress は、Agent-First (AIエージェント優先) の哲学に基づいて構築されたフレームワークです。このドキュメントでは、システム全体の設計コンセプトを説明し、「コードを書くエンジニア」から「エージェントを指揮するアーキテクト」へとパラダイムシフトを図るための手助けをします。
1. コア理念:人間が意思決定を担い、エージェントが実行を担う
OpenPress の核心的な前提は非常にシンプルです。JSXコンポーネントを手動で記述したり、ターミナルでCLIコマンドを手動で打ち込んだりするべきではありません。
- 人間の役割: 意図、テイスト(デザインの方向性)、ビジネスロジックの提供、そして最終的な成果物のレビューを行います。あなたはプロジェクトの「編集長」であり「プロダクトマネージャー」です。
- エージェントの役割: あなたの意図を理解し、それを正確な React コードや Markdown (MDX) 構造に変換し、ビルドやデバッグのプロセスをすべて代行します。
したがって、複雑なプログラミング構文や設定手順を暗記する必要はありません。煩雑な実装の詳細はすべてAIが自動的に処理します。あなたが本当に習得すべきなのは、システム全体の動作におけるメンタルモデルと、エージェントに対して明確に指示を出す方法です。
2. Skills(スキル):ドメイン知識とテイストの注入
お気づきかもしれませんが、私たちは頻繁に Skills のインストール(例:npx skills add ...)に言及しています。Skill は OpenPress エコシステムにおいて極めて重要な概念です。
なぜ Skill が必要なのか?
OpenPress のコアフレームワーク自体は、「極めて純粋で特定の意見を持たない (Opinionless)」ものです。Markdown をウェブページやPDFに変換するための基盤となるエンジンを提供するだけで、「何が美しいプレゼンテーションなのか」や「優れたドキュメントの書き方」は理解していません。
Skill は、エージェントの「外部脳」であり「テイストフィルター」です。
- 能力の付与: UIデザイン Skill をインストールすると、エージェントは特定のCSSフレームワーク(例:Tailwind)を使用して、質感のある画面をレイアウトする方法を学習します。
- ドメイン知識の付与:
documentation-writerSkill をインストールすると、エージェントは専門的なテクニカルライティングの原則を学習し、雑然としたメモを構造化されたドキュメントにリファクタリングできるようになります。 - Starter テンプレートの同梱: 多くの Skill にはテンプレートファイルが同梱されています。エージェントに新規プロジェクトの作成を依頼すると、エージェントは Skill 内の starter ファイルを読み込み、プロジェクトをカスタマイズするための起点として使用します。
Skill は、あなたが雇い入れた「専門コンサルタントチーム」であり、エージェントはそれらコンサルタントの意見を統括し実行するCEOであると考えることができます。
3. 高度なコンポーネントアーキテクチャ(人間のためのメンタルモデル)
直接コードを書く必要はありませんが、エージェントと共通の言語を持つ必要があります。以下は、OpenPress がドキュメントを「コンポーネントツリー」として扱う際の3つの基本階層です。
- Workspace (ワークスペース): あなたのプロジェクト全体の宇宙です。1つのワークスペースには複数の異なる出版物を含めることができます。
- Press (出版物): 単一の独立したドキュメントやプレゼンテーション(例:A4サイズの企画書、または16:9のスライド)。
- Frame (フレーム/ページ): 物理的なページのキャリア(媒体)です。固定されているもの(表紙など)もあれば、コンテンツの長さに応じて自動的に複数の物理ページに展開されるもの(本文の段落など)もあります。
なぜ WYSIWYG (What You See Is What You Get) を放棄したのか? 私たちが React コンポーネントツリーを選択した理由は、AIエージェントが正確で構造化されたコードを出力することに非常に長けているからです。従来のドラッグ&ドロップ式エディタは、音声やテキストの指示で正確に制御することが困難ですが、構造化された JSX を通じて、エージェントに「このスライドに2カラムの比較図を追加して」と伝えるだけで、対応するコード構造を完璧に生成することができます。
4. 基盤となる黒魔術(なぜ詳細を気にする必要がないのか)
ユーザーの認知的負荷を解放するため、OpenPress の基盤エンジンは大量の煩雑なエンジニアリングの詳細を自動的に処理します。あなたもエージェントも、これらのことに時間を浪費する必要はありません。
- 自動ルーティング推論: システムはフォルダ名(例:
press/report/)に基づいて、ルートとslugを自動的に登録します。 - MDX 自動注入の魔法: 特定のフォルダ内に配置された React コンポーネントは、エンジンによって自動的に Markdown で使用できるように公開されます。エージェントが MDX を書く際、面倒な
importパスを処理することなく、直接<Chart />を使用することができます。 - ビルド時のID注入: エンジンはバックグラウンドで各スライドとブロックに隠しID (
data-op-id) を自動的に注入し、ビジュアルインターフェースとソースコード間の自動マッピングを実現します。
5. エージェントと完璧に協働する方法(実践ループ)
以上の概念を理解した上で、エージェントとの日常的なコラボレーションのワークフローは以下のようになります。
- 高レベルな意図の提供: 「10ページのプロダクトローンチ用プレゼンテーションを作成する必要があります。先ほどインストールしたブランド Skill を使用して、視覚的なスタイルの統一を確保してください。」
- エージェントに実行とビルドを任せる:
エージェントは自動的に
press.tsxを作成し、対応する MDX コンテンツを生成し、バックグラウンドでnpm run devを実行してプレビューを起動します。 - 「コメントマーカー (Comment Markers)」を利用したレビュー: 画面上でプレビュー結果を確認した際、自分でエディタを開いてコードを修正しないでください。システムの「コメントマーカー」機能を直接使用し、画面上で不満な箇所を選択して、「ここのフォントが小さすぎる」「この段落をもっと専門的に書き直して」といったコメントを残してください。
- クローズドループでの修正: エージェントに「画面上のすべての Comment Markers を処理してください」と指示します。すると、エージェントは ID をたどってソースコードを正確に見つけ出し、すべての問題を修正します。
結び
Agent-First の時代へようこそ。エンジニアとしての重荷を下ろし、「アーキテクト」としての楽しみを味わい始めてください。もし、より具体的な API パラメータやアーキテクチャの詳細(通常はエージェントが参照するため)を知りたい場合は、リファレンス セクションをご覧ください。