Skip to content

DESIGN.md

Latest commit

 

History

History
106 lines (81 loc) · 10.6 KB

DESIGN.md

File metadata and controls

106 lines (81 loc) · 10.6 KB
Raw

English | 한국어 | 简体中文 | 繁體中文 | 日本語 | Español

ScopeWeaver ランディングページ — DESIGN.md

ScopeWeaver の静的な GitHub Pages ランディングページです。英語が既定（landing/index.html）で、韓国語、簡体字中国語、繁体字中国語、日本語、スペイン語を対等に用意します（landing/{ko,zh-Hans,zh-Hant,ja,es}/index.html）。通常の HTML/CSS/JS を使い、フレームワーク、CDN、追跡機能、バックエンドはありません。相対アセットパスにより、プロジェクトの基底 /scopeweaver/ と言語別のサブディレクトリで配信します。

モード

理解と利用を促します。製品のショーウィンドウとして、開発者やセキュリティ研究者が ScopeWeaver を理解し、動作画面、タスクの流れ、コーディングエージェントからの操作を知り、制限を信頼して、リリースや初期設定のコマンドに到達できるようにします。

視覚の方針

アプリケーションのコンソールを、ページ全体の規模に広げます。

  • 背景 #fafafa、面 #ffffff、沈んだ面 #f4f4f3。
  • 墨色 #171717（ロゴのタイルと全幅のエージェント帯にも使用）。 補助・第 3 階層のテキストは #3f3f3f / #595959。暗い帯では本文 #fafafa、補助 #adb0b8（色味を持つ中立色で、#171717 上で ≥ 6:1）。
  • 控えめな青 1 色をリンク、アクセント、フォーカスに使用: #2563eb。 明るい面でのホバーは #1b45c9、暗い帯では #7cafff / #a8c8ff。リンクは --link / --link-hover を通し、暗い帯で変数を差し替えてホバー時も読めるようにします。
  • 細線 — 1px の #e6e6e4 / #d4d4d2 で各セクションを区切り、 重い区切りは使いません。
  • スコープグリッドの模様 — ロゴの 3×3 格子を反映する薄い 2 軸グリッドを、 ヒーローの背面（放射状マスク）とエージェント帯に置きます。これは合意したブランドの模様です。検出器は既定で装飾グリッドを指摘しますが、ここでは合意した視覚方針を優先します。
  • 奥行き — 実際のオフセットと柔らかいぼかしによる控えめな影を使い、 オフセットのない色付きの光輪は使いません。スクリーンショットは薄いアプリの外枠に収めます。

文字

  • Schibsted Grotesk（セルフホストの可変 woff2、太さ 400～900、OFL）を すべての本文・見出しに使用。見出しは太さ 640～660、字間 −0.028em、均衡した折り返し。大見出しは約 3.7rem までに制限します。
  • JetBrains Mono（セルフホストの可変 woff2、OFL）を、識別子、 コマンド、出典、小さなラベルに使用し、tnum/zero を有効にします。
  • セルフホストはラテン字体のみです。韓国語版は、ラテンの表示字体の後ろにシステムのハングル用 フォント（Apple SD Gothic Neo、Pretendard、Malgun Gothic、Noto Sans KR）を置き、ASCII の印象を統一します。韓国語は word-break: keep-all + overflow-wrap: break-word。本文のインライン <code> 識別子は overflow-wrap: anywhere とし、長いテスト名でグリッドを広げず折り返します（積み重ねるグリッドは minmax(0, 1fr)）。
  • 本文幅は約 33～68ch、機能的なテキストは 11px 以上とします。

構成

細線で区切った 1 列のセクションで、密度を意図的に変えます:

  1. ヒーロー — 5/7 分割。左に紹介文と操作、右に枠付きの大きな実際の ダッシュボードのスクリーンショットを置きます。
  2. 操作の紹介 — 7/5 分割。縦の ARIA タブリスト（5 つの実画面: ダッシュボード、タスク、検出事項、システム設定、LLM テンプレート）で、固定した枠付きスクリーンショットを切り替え、画面ごとの 1 行の説明を展開します。仕組み（連携する 2 グラフ、プランナー → 1 探索方針のワーカー → 事実・検出事項、人間の審査、再テスト）は文章で説明し、生成図は使いません。
  3. エージェントとの橋渡し — 墨色の全幅の帯。横の ARIA タブリストで Claude Code / Codex / Pi のインストールコマンドを切り替え、各々にコピーボタンを付けます。アダプターの 8 ツールと「操作用インターフェースであり代替ではない」という率直な説明を、枠付きのモバイル画面と並べます。
  4. インストール — 3 つの具体的な経路（ワンクリックスクリプト、Docker Compose、リリース アーカイブ）。コピーできるコマンドと、5 プラットフォームのアーカイブラベル + GHCR を示します。
  5. 要件 — 細線の 4 セル: PostgreSQL、別途設定した モデルプロバイダー、アダプター用の Node.js 22 以上、ローカルの実験対象。
  6. 制限と謝辞 — 平易な制限一覧（ローカル隔離環境のみ、過去のスコープ概要テストの不一致は 75a706d で修正、 現在の検証結果は VERIFICATION を参照し、テスト全体の合格や本番での有効性は一括して主張しない。Docker/Windows 未検証、npm audit の指摘、アダプターはローカルのテストデータで検証し、実際のコーディングエージェントとプロバイダー間の実行は独立検証していない。VERIFICATION にリンク）と、匿名化した所有者の作業フロー、ARTEX/AGPL-3.0 の出典、フォント・スクリーンショットの出典を並べます。
  7. フッター — ブランド、資料のリンク、ライセンス、そして「実サービスではなく 紹介ページ」という注記。

特徴的な操作

操作紹介のタブリストです。選択時、枠付き画面を透明度でクロスフェードし、grid-template-rows による折りたたみアニメーションで説明を表示します。セクションごとの登場演出ではなく、ここに 1 つの演出を置きます。Up/Down/Home/End によるロービング tabindex を使い、横のエージェントタブは Left/Right を使います。

アクセシビリティと状態

  • スキップリンク、ランドマーク、ラベル付きナビゲーション、見えるテーマ対応のフォーカスリング（明るい面では青、 暗い面では明るい青）。
  • 正しい aria-selected / tabindex / hidden を持つ ARIA タブ。キーボードで 操作可能。コピーボタンはローカライズした状態（Copy/Copied · 복사/복사됨）を通知し、クリップボード非対応では手動選択に戻ります。
  • モバイルのナビゲーション開閉に aria-expanded を使用。ヘッダー項目は縮小せず、 ≤420px で間隔を狭め、320px まで対応します。アイコンだけの GitHub リンクは、視覚的に隠した「GitHub」をアクセシブル名として保持します。
  • 選択、スクロールバー、フォーカスリング、リンクの下線位置、 等幅の表用数字など、ブラウザーの表示をテーマに合わせます。
  • prefers-reduced-motion では、遷移と滑らかなスクロールを無効にします。
  • 画像は幅・高さと aspect-ratio を持ち、配置のずれを防ぎます。ヒーローの 画面は fetchpriority="high"、残りは初期表示範囲より下なら遅延読み込みにします。

誠実さと出典

すべてのスクリーンショットに架空のデモデータと明記します。所有者の作業フローは匿名化した連携の証拠に限り、対象、検出事項、メッセージ、モデル使用量、認証情報は含めません。主張の出典は README、アダプターの README、PROVENANCE、VERIFICATION、v0.1.0 の変更履歴です。ScopeWeaver は AGPL-3.0 の ARTEX の派生物で、ローカルの隔離環境での研究に用途を制限します。

実施した検証（ビルド時、ブラウザー以外）

  • tools/validate-landing.mjs（landing/ の外）: アセットの存在、相対 基底パスの安全性、EN/KO の id・タブ・操作の対応、言語間リンク、デモの注記、計画メタデータを配信しないこと、.nojekyll の存在 — 17/17。
  • JS と検証スクリプトに node --check。
  • Impeccable の検出器: 19 → 残存 4（暗い帯に対して静的に照合される単一アクセントのホバー、 内側の枠で内容を収める合意済みの全幅の帯）。どちらも正しく描画されます。助言扱いのグリッド模様は合意したブランド方針です。
  • 調整担当が Chrome で英語・韓国語を 1440px と 390px で確認し、 1 回の修正後、320px でも横にはみ出さないと確認しました。画面タブ、エージェントタブ、キーボードの切り替え、モバイルメニュー、言語リンク、ローカライズしたコピーの通知が合格。コンソールエラーは観測せず、下方の遅延スクリーンショットは移動時に読み込まれました。
  • Pages は landing/ のみを配置し、アップロード前にファイルの整合性と JavaScript の 構文を確認します。開発用のドキュメントや非公開の実行時データは、公開成果物の外に置きます。

実装の帰属

Claude Code に claude-opus-5-5、medium の推論強度で依頼しました。主実装のセッションは、プロバイダーの保護による中断後、claude-opus-4-8 に自動フォールバックしました。対象を限定したブラウザー QA の修正セッションは、全体を claude-opus-5-5 の medium で実行しました。そのため、このページの実装を Opus 5.5 のみの成果とはしません。