AIインフラストラクチャのWebサイトデザイン

穏やかなエージェント・ランタイムのランディングページ

この公式の同梱サンプルは、Halcyonを長期稼働するAIエージェント向けのランタイムとして提示します。作成された見出し「Calmer infrastructure for the agents already running your business」は、インフラストラクチャを別のモデルインターフェースではなく、安定化のためのレイヤーとして位置付けます。その後、表示されるランタイム、支出、タスク、監査の例によって、その立場を支えます。

サンプルデータによるインフラストラクチャのストーリー

このページは、複数の技術的な関心事を1つのマーケティングフローで説明する必要があるインフラストラクチャチームに適しています。言葉の流れは、より穏やかなエージェント運用という広い約束から具体的なプリミティブへ、さらにSDKとCLIを通じた実装へのアクセスへと移ります。この順序により、導入部分をドキュメントページに変えることなく、技術読者が読み進める理由を与えます。

表示される数値は、サンプルのランディングページコンテンツの一部です。運用上の概念を具体化するデザインの方法を示すものですが、Halcyonのサービス性能、稼働時間、料金、接続されたバックエンドの挙動を確立するものではありません。

ランタイムモックアップからセールス招待へ

中央に浮かぶピル型ナビゲーションには、Halcyon、Platform、Metrics、Docs、Changelog、Get startedが表示されます。ヒーローは、大きな見出しと角丸のランタイムモックアップを1.05fr/0.95frで分割しています。やや広いテキストカラムが前提を担い、入れ子状のカードシェルがサンプル指標に独立した視覚コンテナを与えます。これにより提案されたプロダクトを想像しやすくなりますが、カードは運用上の証拠ではありません。

見出しは大きな行に折り返され、「Calmer infrastructure」から「for the agents already running your business」へと移ります。後者のフレーズに施されたグレーの処理が、プロダクトカテゴリーと対象ユーザーの間に視覚的な変化を生みます。この強調によって約束は記憶に残りやすくなりますが、狭い画面ではサイズに応じた慎重なレスポンシブ対応が必要です。

1. ランタイムモックアップから始める

   まずプロダクトのメッセージを置き、その横にランタイムパネルを配置します。パネルの「research-agent / tier-3」ラベル、ステータス行、支出カード、タスクカード、監査エントリーによって、インフラストラクチャが整理する対象を示します。

2. 6つのプリミティブへ展開する

   プラットフォームのグリッドには、identity、spend、audit、sandbox、routing、ergonomicsという6つの番号付きカードが表示されます。identityはコード標本を含む背の高いセルを占め、spendとauditがその横に配置され、最後の3つにはより短いセルが使われます。原案の導入文には「Five primitives」とありますが、実際には6つが描画されています。観察された構造として6枚のカードのレイアウトを維持し、この不一致は検証済みのプロダクト分類ではなく、サンプルコピーとして扱ってください。

3. 1つのアクションで締めくくる

   クロージングパネルをダークな背景に変更し、「Less duct tape between the model and the bill.」を中央に配置します。短い評価・料金ステートメントから「Talk to an engineer」へと導き、競合する複数の終着点ではなく、ページに最後の1つのアクションを与えます。

スコープと機能の境界

Halcyonはデザインのみで構成されたランディングページ案です。ボタンにビジネス用のハンドラーはなく、一致するセクションへ到達できるのはPlatformリンクだけです。Metrics、Docs、Changelogの遷移先は存在せず、フッターリンクはプレースホルダーです。サンプルの稼働時間、支出、タスク数、レイテンシー、資金調達、セキュリティに関するラベルは、サービスのエビデンスではありません。移動する会社名ストリップの名前は顧客や推薦を証明するものではなく、SOC 2/ISO 27001のテキストも認証を検証するものではありません。コンソールへのアクセス、請求、ルーティング、ストレージ、セールスへの連絡には、別途実装が必要です。

柔らかさは、稼働するインフラストラクチャシステムによるものではなく、シルバーのキャンバス、Plus Jakarta Sans、セージのアクセント、入れ子状の角丸シェルによって生まれています。CSSは、背景メッシュのドリフト、脈動するステータスドット、ホバー時に一時停止する、継続的に移動する会社名ストリップを追加します。IntersectionObserverは、セクションがビューポートに入ると表示します。Reduced-motionルールはメッシュのドリフトとセクションの表示を無効にしますが、パルスとマーキーは無効にしません。デザインを改変する際は、残るこれらのアニメーションを考慮してください。

ソースと帰属

OpenDesignはCommunityの配布元です。ソースドキュメントでは、ソフトなビジュアルとモーションのガイダンスをTaste Skill by Leonxlnxに帰属しています：https://github.com/Leonxlnx/taste-skill。この上流の役割は維持しつつ、この作例を上流の作者本人が制作したことや、基礎となる方向性をOpenDesignが独自に制作したことを示唆しないでください。マニフェストは同梱プラグインについてMITを宣言していますが、描かれているすべてのアセットについて個別の権利を確立するものではありません。