アーキテクチャ

全体像

1. 01

   AI エージェント群

   Claude Code の 9 体のサブエージェントが収集と討議を担い、親セッションがその結果をノートとして書いて公開する。成果は LLM Wiki（LLM が一次ソースから書き、相互リンクで保守する知識ベース）に蓄積し、週次と月次の定点観測は自動で回る。

2. 02

   配信システム

   Astro で静的生成し、Cloudflare Workers の単一の Worker で配信する。同じランタイムの Workers AI が「ノートに聞く」チャットを動かす。無料枠内で運用。

3. 03

   デザインシステム

   DESIGN.md を正本に、色と字と余白をトークン 3 層で実装する。編集のたびにコントラストと整合を機械検査し、仕上げにレビューエージェントが定性検査する。

番号の順に、エージェントが書いたノートを配信システムが公開し、その見た目をデザインシステムが決める。3 つを結ぶ 4 つの接続点はページ末尾に示す。

サブエージェント

9 体

公開ノート

JA 155 件、EN 152 件

hook（自動検査）

6 本

コントラスト検査

7 組 × 2 テーマ

運用コスト

無料枠内

この構成で担当できること

4 点のうち、クラウド構成と生成 AI の組み込みは案件にも実績がある。デザインシステムの自動検査とエージェント群の統制は、このサイトが最初の実例である。

• AI を使うシステムの設計

  モデルの使い分け、エージェントの役割分担、書き込みの規律、安全策の設計。生成 AI を業務に入れるときの構成と統制を、動く形で組める。

  根拠： 領域 01 、生成 AI の案件

• 配信と運用の基盤

  クラウド（Cloudflare Workers）上の構成、CI/CD（コードを変えるたびに自動で検査して公開する仕組み）、コストの上限を決めた運用。小さく確実に公開し続ける基盤を設計できる。

  根拠： 領域 02 、クラウド構成の案件

• デザインシステムの構築と自動検査

  正本、トークン、コンポーネントの 3 層と、編集のたびに走る機械検査とレビュー。デザインの判断を検証可能な形にできる。

  根拠： 領域 03 、デザインシステムのノート

• 両者をつなぐ設計

  デザインの検査を開発フローに組み込み、ナレッジを公開ページとチャットの両方に流す。デザインとシステムの境目の判断を、一人で持てる。

  根拠： 接続点 、ノートに聞く

領域 01

AI エージェント群

研究と調査の成果をノートとして積み上げる仕組み。人が計画と検収を担い、実作業はサブエージェントに委ねる。

決めたこと

• 依頼はスキル（手順書）で受け、実作業は 9 体のサブエージェントに委ね、ファイルに書くのは親セッションだけにする
• 討議は Claude の Opus、収集と検査は軽い Sonnet に割り当て、最大の Fable は都度の指定にとどめる
• 成果は LLM Wiki の 3 層（一次ソース、wiki、スキーマ）に蓄積し、公開ノートは末尾に参照文献を必ず載せる

なぜ

論証の深さとトークンのコストは両立しない。役割ごとにモデルを分け、出典を台帳で追跡できる形にすると、討議の結論を後から検証できる。

どう確かめるか

• hook（ツール実行の前後に走る検査）が、不変領域への書込、シークレットの読み書き、指定漏れの起動をブロックする
• wiki の健全性検査（7 種）が 0 件になるまで、Stop hook がセッションの終了を止める
• 討議は一巡で終え、根拠は事前に固定し、エージェント別の消費を討議録に残す

詳細（スキル、エージェント、フック）

スキル

スキルは依頼の型ごとの手順書で、依頼の言い方で起動し、必須入力で分岐する。

スキル	依頼の型	必須入力	呼ぶエージェント
source-collection	論文、AI 動向、業界情報の収集	mode（academic、ai-frontier、industry）	source-researcher ほか
critical-review	ノートの批判的検討	lens（design-theory、pedagogy、industry-career）	academic-critic
industry-perspective	産業ペルソナでの役割論	persona（design-firm、strategy-consulting、independent-office）	practice-auditor、industry-lead
designer-role-roundtable	産学合同討議	問い、対象ノート、年範囲	討議系の 4 体
wiki-ingest	素材の wiki 取り込み	素材と対象ページ	なし
wiki-lint	wiki の健全性検査	なし	なし
doc-write	docs の手順書	保存先、検証済みの事実	doc-writer
ui-design-implementation	UI の制作と改修	対象ページ	design-reviewer
design-system-check	デザインの検証	なし	design-reviewer

エージェント

エージェントは読み取り専用で結果を返し、書くのは親セッションにする。役割は prompt の 1 行目の dispatch header で切り替える。

エージェント	系統	モデル	dispatch header
industry-lead	討議	Opus	persona（design-firm、strategy-consulting、independent-office）
practice-auditor	討議	Opus	lens（revenue-viability、differentiator-reality、evidence-methodology、liability-provenance、demand-side）
disruption-provocateur	討議	Opus	axis（historical-disruption、global-arbitrage、platform-power、end-user-indifference）
academic-critic	討議	Opus	canon（design-theory、design-education、design-industry）
source-researcher	収集	Sonnet	profile（scholarly、vendor-primary、official、analyst、developer-voice、expert-commentary、labor-market）
paper-screening-agent	収集	Sonnet	なし
docs-researcher	収集	Sonnet	なし
design-reviewer	レビュー	Sonnet	mode（system-health、ui-analysis）
doc-writer	文書	Sonnet	なし（docs に書く）

フック

フックは Claude Code がツール実行やセッション終了の前後に走らせる検査で、操作を止めるものと、次の行動を促すものがある。

イベント	フック	何をする
PreToolUse	guard-paths	raw/ への書込、シークレットの読み書き、未公開研究を含むノートの非公開指定（draft か so_theory）のない書込をブロック
PreToolUse	dispatch-header-gate	header が無いか許容外の値の起動をブロック
PostToolUse	design-system-gate	CSS や画面の編集後に機械検査を実行し、結果を返す
PostToolUse	claude-assets-sync、readme-sync	.claude や README に関わる編集後に、一覧と README の更新を促す
Stop	stop-wiki-gate	wiki/ に変更があれば wiki:lint を実行し、違反が残れば終了をブロック（G1）

領域 02

配信システム

ノートとチャットを、低コストで止まらずに届ける基盤。

決めたこと

• Astro で静的生成し、Cloudflare の単一 Worker で配信する
• 「ノートに聞く」チャットは同じ Worker の Workers AI で動かす（Llama 3.3 70B）
• 無料枠の範囲で運用し、外部サービスへの接続は Workers AI の 1 つだけにする

なぜ

配信と API を同じランタイムに置くと、構成が 1 つの設定ファイルに収まり、ローカルと CI のどちらからも同じ手順で公開できる。

どう確かめるか

• main への push と PR ごとに CI が wiki の健全性検査、型検査、ビルドを実行する
• デプロイ設定は git 管理のコードで、公開は 1 コマンド
• 公開ノートの外部リンクは週次で到達性を検査し、定点観測が 7 日を超えて空けば通知する

詳細（構成、ノートに聞く、自動の仕事）

構成

配信と API を 1 つの Worker に置き、設定は git 管理のコードで持つ。

部品	役割	なぜそれか
Astro 6	静的生成の Web フレームワーク。既定で JS を出さない	ノート中心のサイトに静的生成が合い、Cloudflare アダプタで Worker にそのまま載る
Cloudflare Workers（Static Assets）	ビルド済みの静的アセットを単一の Worker で配信し、/api/chat だけをサーバー側で動かす	配信と API を同じランタイムに置け、無料枠（10 万リクエスト/日）で足りる
Workers AI	「ノートに聞く」の生成モデル（Llama 3.3 70B）を動かす	同じ Worker から binding 1 つで呼べ、無料枠（10,000 Neurons/日）で運用できる
wrangler	名前、互換日付、ルート、AI binding を 1 つの設定ファイルに集約して公開する	デプロイ構成を git に置き、ローカルと CI で同じ手順にする
Custom Domain	apex ドメインを Worker に直接割り当てる	DNS と証明書を Cloudflare が自動で作り、更新する
GitHub Actions	CI の検査と、自動ウォッチの後の公開を実行する	PC の起動状態に左右されずに更新と公開を続ける
Tailwind CSS 4	トークンを @theme で定義し、ユーティリティで組む	トークンとクラス名が 1:1 で対応する
TypeScript 6	astro check による型検査	完了ゲート G3 と CI の検査に使う
mermaid 11	ノート内の図をクライアントで描画する	図のあるページだけ読み込み、失敗時はソースを見せる
p5.js 2 と CodeMirror 6	トップのヒーロー用のスケッチとコード編集（現在は非表示）	使うモジュールだけ動的に読み込む

ノートに聞く

チャットは検索と生成の 2 段で、外部の検索基盤は使わない。日本語の公開ノートだけが対象になる。

段階	何をする	どこで動く
取り込み	日本語の公開ノートをビルド時にバンドルへ埋め込む。draft と秘匿ブロックは除く	astro build
検索	文字 bigram の一致に英数語と完全一致の加点で採点し、上位 4 件を選ぶ。依存ライブラリなし	Worker の /api/chat
生成	4 件の抜粋（各約 2,400 字）を system prompt に注入し、Llama 3.3 70B が答える	Workers AI（無料枠 10,000 Neurons/日）

自動の仕事

定点観測と検査は GitHub Actions で回し、人の PC に依存しない。

仕事	起動	内容	成果物
週次 AI 動向ウォッチ	毎週月曜の朝	source-collection（mode: ai-frontier）で直近 7 日の「AI とデザイン」の動向を、3 ティアの出典で集める	週次ノート（日本語と英語版）と出典台帳。push と公開まで自動
月次学術ウォッチ	毎月第 1 月曜、週次の前	source-collection（mode: academic）で直近 1 か月の査読論文とプレプリントを集め、選別する	月次ノート（日本語と英語版）とコーパス
欠落の検知	週次ウォッチの前（発報は公開の後）	前回の週次ノートから 7 日を超えていれば、公開を終えてからジョブを失敗させる	GitHub の失敗通知
リンクの到達性	週次ウォッチの前	公開ノートの外部リンクを検査する。失敗しても続ける	ログ（差し替えは人が判断）
CI の検査	main への push と PR のたび	wiki の健全性検査、型検査、ビルド	合否

領域 03

デザインシステム

見た目の判断を 1 か所に集め、実装と検査を対応させる仕組み。

決めたこと

• DESIGN.md（Pinterest のデザイン分析）を正本にし、実装の値はすべてそこへ対応づける
• 色、字、余白を 3 層のトークン（値の定義、意味づけ、部品）で実装する
• 正本にない判断（ダークテーマ、hover、和文の書体）は、根拠をコードのコメントに残す

なぜ

正本と実装が 1:1 だと、見た目の判断を後から追跡できる。判断の根拠がコードに残ると、AI エージェントも同じ規律で編集できる。

どう確かめるか

• CSS や画面を編集するたびに hook が機械検査を走らせる（両テーマで 7 組のコントラスト、トークンの整合、色の直書き）
• 仕上げは design-reviewer エージェントが定性検査し、合否を返す

詳細（正本とトークン、テーマと型、検査）

正本とトークン

DESIGN.md（Pinterest のデザイン分析）が正本で、色と字と余白を 3 層のトークンで実装する。ページは semantic 層だけを参照し、primitive を直接使わない。

層	役割	例
primitive	DESIGN.md の色、書体、角丸の値をそのまま転記する。Tailwind の @theme に置く	--color-primary #e60023、--color-surface-card、--radius-md 16px
semantic	用途別の名前を付け、ライトとダークで値を切り替える単一の場所。:root と .dark に置く	--background、--foreground、--muted-foreground、--link
component	部品のクラスに semantic を束ねる。@layer components に置く	.btn-primary、.tag、.link、.prose、.t-headline

テーマと型

正本にない判断（ダーク、和文、hover）はサイト拡張として足し、根拠をコードのコメントに残す。

項目	決めたこと	根拠
ライトとダーク	html の dark クラスで切り替え、保存が無ければ OS の設定に従う。床は surface-dark #262622、本文リンクは明るい赤に差し替える	DESIGN.md。ブランド赤は暗い床で 3.2:1 しか取れず、文字は 4.5:1（WCAG AA）を保つ
書体	Inter Variable と Zen Kaku Gothic New をセルフホストし、コードだけ JetBrains Mono。階層は色でなくウェイトで作る	Pin Sans の代替指定（DESIGN.md）、階層はウェイト
和文の組み	文節単位で折り返し、行頭に小書き仮名や長音を置かない。行間は欧文より広く 1.7	OS 任せだと環境ごとに声が変わる。文節改行は Chrome の auto-phrase
色の使い方	Pinterest Red は CTA、現在地、ワードマークにだけ使い、文字色には回さない	DESIGN.md
形と影	角丸は 16px と 32px の 2 値。影はカードに置かず、モーダルだけ	DESIGN.md
余白と幅	8px 単位。最大幅 1280px、行長 60ch と 75ch。区切りは影でなく罫	DESIGN.md

検査

検査は編集のたびに機械で走り、仕上げにエージェントが定性で見る。

検査	対象	いつ走るか
コントラスト	文字 4 組が 4.5:1 以上、面と罫 3 組が 3:1 以上を、ライトとダークの両方で	CSS、.astro、DESIGN.md の編集後に PostToolUse hook が実行する
トークンの整合	主要な semantic トークン 5 つが :root に定義され、.dark で上書きされているか	同じ hook
色のベタ書き	src 以下の .astro にある hex、rgb、hsl、oklch の直書き	同じ hook（警告として返す）
定性レビュー	3 層が保たれているか、正本と実装が一致しているか、両テーマで読めるか、未定義のクラスがないか	design-system-check スキルから design-reviewer（mode: system-health）が実行し、機械検査の exit 0 と「合格」がそろえば合格
UI 分析	対象ページをタイポグラフィ、レイアウト、色、レスポンシブ、一貫性の 5 観点で	ui-design-implementation スキルから design-reviewer（mode: ui-analysis）が実行し、5 段階で評価

領域どうしはどこで結ばれているか

領域ごとに担当が分かれていると、境目で判断が落ちる。このサイトでは境目を 4 か所に絞り、それぞれを仕組みにした。

• デザイン × AI

  デザインの検査が開発フローの中で走る

  CSS や画面を編集した瞬間に hook が機械検査を実行し、結果を編集中のエージェントに返す。デザインシステムの規律が、人の目を待たずに実装へ効く。

• AI × 配信

  ノートが公開ページとチャットの両方に流れる

  エージェントが書いたノートは、ビルド時に公開ページになり、同時にチャットの検索コーパスになる。非公開の下書きと秘匿ブロックは、両方から同じ規則で除かれる。

• 配信 × デザイン

  デザインの資産を配信物に同梱する

  和文と欧文の書体はセルフホストして Worker の静的アセットとして配信し、テーマの初期化は描画前のインラインスクリプトで行う。見た目が外部の CDN や後読みに依存しない。

• デザイン × AI

  デザインの判断も wiki に記録する

  UX レビューやデザインシステムの検討は、会話で終えずノートとして残し、索引と更新記録に載せる。次のセッションのエージェントが同じ判断を繰り返さないための記録である。