Raven について
Ravenは、コーディングエージェント向けにデザイン知識、デザインシステムのトークン、UI監査を提供するオープンソースのMCPサーバーです。ローカルページの要素を選び、セレクターや計算済みスタイルをエージェントに渡して変更を支援します。
主な機能
- 01デザイン原則とUIパターンの検索
- 02デザインシステムトークンの取得
- 03アクセシビリティとレイアウトの監査
- 04コンテンツとタイポグラフィの確認
- 05選択要素のスタイル情報の受け渡し
活用シーン
- 01ページ改修に合うパターンの検索
- 02コントラスト、タップ領域、文字組みの確認
- 03ローカルページの要素情報をコーディングエージェントに共有
MCP 対応
Ravenは、デザイン知識の検索、デザインシステムの照会、UI監査のツールをコーディングエージェントに提供するMCPサーバーです。全ツールはローカルstdioで利用でき、ホスト型エンドポイントは一部のツールを提供します。
設定
リモートサーバーはインストール不要です。クライアントを選んで設定をコピーするか、ワンクリックで導入できます。
https://mcp.ravenmcp.ai/api/mcpclaude mcp add --transport http ai-ravenmcp-raven https://mcp.ravenmcp.ai/api/mcp{"mcpServers":{"ai-ravenmcp-raven":{"type":"http","url":"https://mcp.ravenmcp.ai/api/mcp"}}}Cursor で開く{"servers":{"ai-ravenmcp-raven":{"type":"http","url":"https://mcp.ravenmcp.ai/api/mcp"}}}VS Code で開く{"mcpServers":{"ai-ravenmcp-raven":{"type":"http","url":"https://mcp.ravenmcp.ai/api/mcp"}}}{"mcpServers":{"ai-ravenmcp-raven":{"serverUrl":"https://mcp.ravenmcp.ai/api/mcp"}}}コマンドはターミナルで実行し、JSON は各クライアントの MCP 設定に貼り付けて再起動します。認可が必要なサーバーは初回接続時にログインを求めます。
ツール
45| パラメーター | 型 | 必須 | 説明 |
|---|---|---|---|
| format | enum | いいえ | 出力形式:full(すべての詳細)、checklist(影響と違反項目)、brief(概要のみ)。デフォルト:fullfull | checklist | brief |
| context | string | はい | デザイン対象(例:'signup form'、'pricing page'、'mobile nav'、'dark dashboard') |
| category | string | いいえ | カテゴリで絞り込み:accessibility、brand、color-systems、color-theory、component-architecture、d4d、gestalt、laws-of-ux、mobile-ux、nielsen-heuristics、research、responsive-layout、service-design、spacing-systems、typography、ux-writing |
| platform | enum | いいえ | プラットフォームのコンテキスト。'ios' は Apple HIG の原則(Dynamic Type、44pt のタップ領域、SF Symbols、安全領域、ダークモード、触覚フィードバック、App Review のプライバシー)を返します。'react-native' は RN の原則(44/48pt+hitSlop、accessibilityLabel/Role、フォントスケーリング、SafeAreaView、ダークモード、iOS+Android の一貫性、シークレット)を返します。どちらも Web/CSS 向けの原則セットに置き換わります。デフォルト:web。web | ios | react-native |
詳細
Raven MCP
オーディンのワタリガラスが世界の知識を持ち帰ったように、Raven はデザインの知見を持ち帰ります。
Raven はコーディングエージェント向けの MCP サーバーです。ローカルで実行中のアプリ内の要素をクリックして、変更したい内容を伝えると、Raven はセレクター、計算済みスタイル、デザイントークンをエージェントに送信し、コントラスト、タップ対象、タイポグラフィについて結果を監査します。
Raven MCP は、Andrew Cunliffe による個人のオープンソースプロジェクトです。Intuit Inc. や、ソースデータ内で言及されているその他の企業による推奨、提携、支援を受けていません。上流ソースとそのライセンスの完全な帰属情報については、NOTICE をご覧ください。
できること
Raven は Claude に、包括的なデザインナレッジベースへのアクセスを提供します。
- 原則 — ニールセンの10ヒューリスティクス、UXの21の法則すべて、ゲシュタルト原則、WCAGアクセシビリティ、タイポグラフィのルール、色彩理論、モバイルUX、D4Dフレームワーク、UXライティング、サービスデザイン、ブランド、カラーシステム(パレットサイズの規律)、スペーシングシステム(基本単位のグリッドとスケールの上限)
- パターン — サインアップフロー、価格ページ、ナビゲーション、ドロップダウン/選択メニュー、フォーム、ランディングページ、ダッシュボード、モーダル、空・エラー・読み込み状態、CTA、ソーシャルプルーフ、モバイルコンバージョン向けの実証済みUIパターン。さらに、コンテンツパターン(エラーメッセージ、空状態のコピー、通知、フォーム検証)とサービスパターン(サービスブループリント、担当者への引き継ぎ、サービスとしてのサインアップ、オムニチャネルの継続性、真実の瞬間)
- コンテンツシステム — Conversational Product Voice、GOV.UK、Shopify Polaris、Atlassian のボイス&トーンガイド
- リサーチ — やること・避けることのプロトコルとチェックリストを含む、定性・定量・ユーザビリティの各手法。指標フレームワーク:HEART、AARRR/海賊指標、North Star Metric、コンバージョンファネル、RICE、OKR。
- サービスデザイン — サービスブループリント(HTMLブループリントの生成機能付き。現状と理想の状態を比較)、担当者への引き継ぎパターン、サービスとしてのサインアップ、オムニチャネルの継続性、真実の瞬間/リカバリー、GOV.UK Service Standard
- ブランドとビジュアル — ロゴの使用方法(クリアスペース、最小サイズ、バリエーション、配置、節度)、グラデーションの使用方法(階層、パレット、コントラスト、トレンドとシグネチャー)、画像(一貫性、表現、目的)、ビジュアル階層、システムとしてのブランド、最新(2026年)のビジュアルデザイントレンド
- ビジネス — 収益化モデル、リテンション戦略、オンボーディングの最適化、成長の仕組み、プロダクト指標のフレームワーク
- トークン — Stripe、Linear などのデザインシステムトークン
- クリエイティブスタジオ — ローカル優先のブランドプロフィール、アセット参照、キャラクター参照プロフィール、プロバイダーに依存しない画像/動画/3D/音声生成ジョブ、キャンペーン計画、透明性の高いクリエイティブ評価。Raven にはメディアプロバイダーの認証情報は含まれていません。ジョブを独自のレンダラーに振り分けるには、
RAVEN_CREATIVE_RUNNERを設定してください。
インストール
ローカルstdio(npx/ソースから)はフル機能の製品で、Grab、パターンライブラリ、ファイルベースのTaste Engineを含む111個のツールを利用できます。ホスト型エンドポイントは機能が少ないため、いずれか1つの方法を選んで使い続けてください。
| 方法 | 手順 | ツール | Taste | Grab |
|---|---|---|---|---|
| ローカルstdio | npx -y raven-mcp(Claude Code、Cursor mcp.json、Codex、Desktop mcpb) | 111 | はい | はい |
| パブリックリモート | https://mcp.ravenmcp.ai/api/mcp | 約45 | いいえ | いいえ |
| 認証付きリモート | https://mcp.ravenmcp.ai/api/mcp-user(OAuth) | Taste + 監査(Grabなし) | はい | いいえ |
Claude Code — ワンコマンド
claude mcp add raven -- npx -y raven-mcp
Raven のエントリーは1つだけにすることをおすすめします。ローカルの raven と claude.ai/リモートの Raven の両方が接続されていると、エージェントには重複するツールセットが2つ表示されます。どちらの製品を使っているのかが明確になるよう、片方を無効にするか名前を変更してください(例:raven-local と raven-cloud)。
手動設定(Claude Desktop またはチームの .mcp.json)
{
"mcpServers": {
"raven": {
"command": "npx",
"args": ["-y", "raven-mcp"]
}
}
}
Cursor
上記と同じ mcp.json スニペット(~/.cursor/mcp.json またはプロジェクトの .cursor/mcp.json)で、完全なローカルサーバー(Grab + Taste)を実行できます。ホスト型のオプション:
- パブリック:「
"url": "https://mcp.ravenmcp.ai/api/mcp"」 — ステートレスツールが約45個あります。Grab も Taste も利用できません。 - 認証済み Taste:「
"url": "https://mcp.ravenmcp.ai/api/mcp-user"」 — OAuth を使用します。Taste は利用できますが、Grab は引き続きローカルのみです。
Codex
config.toml の mcp_servers 配下に追加します:
[mcp_servers.raven]
command = "npx"
args = ["-y", "raven-mcp"]
初回使用時、Codex では多数の Raven ツールの承認を求められる場合があります。これはクライアント側の承認ポリシーであり、Raven の機能が少ないわけではありません。
Claude Desktop — ワンクリック拡張機能
JSON を編集したくない場合は、raven.mcpb をダウンロードして、ダブルクリックしてください。Claude Desktop が Raven を自動的にインストールします。Node もターミナルも必要ありません。パッケージのバージョンは npm に追従します。
ソースから
git clone https://github.com/rhinocap/raven-mcp.git
cd raven-mcp && npm install && npm run build
ツール
| Tool | Description |
|---|---|
get_principles | UI コンテキストに関連するデザイン原則を取得します |
get_pattern | 特定の UI タイプで実証済みのパターンを取得します |
get_business_strategy | ビジネス/収益化戦略を取得します |
evaluate_design | デザインの説明を原則に照らして評価します。構造化された変更前/変更後のピクセル差分(fix_confirmed、changed_ratio、変更領域を含む)を取得するには、base64 PNG スクリーンショット(before_screenshot/after_screenshot)を渡します。ペイロード全体が大きすぎる場合は、compact: true を渡すとスコアと違反項目のみを返します(原則/パターンの本文全体は省略されます)。 |
search_knowledge | すべての原則、パターン、戦略を横断検索します |
get_checklist | UI タイプに応じた公開前チェックリストを取得します |
get_d4d_framework | Design for Delight フレームワークのテンプレートを取得します |
list_design_systems | 利用可能なデザインシステムを閲覧します |
get_design_system | 特定のデザインシステムのトークンを取得します |
compose_system | 異なるシステムのトークンを組み合わせます |
get_brand_system | 著名なブランドのスタイルを取り入れたシステム全体を取得します |
audit_page | HTML/CSS を Raven の品質基準に照らして監査します。静的監査には html を渡し、オプションの scroll_settle(表示ゲートを順に通過してから先頭に戻ります)および viewport パラメーターを使ってヘッドレスでレンダリングするには url を渡します。containerMaxWidth を指定すると、コンテナーのチェックでトークンが考慮されます。また、currentColor/トークンを使わずに色をハードコードしたインライン SVG アイコンも検出します。ペイロード全体が大きすぎる場合は、compact: true を渡すとスコア、違反項目、fix_priority のみを返します(埋め込み base64 スクリーンショットは省略されます)。 |
score_page | ページのカテゴリ別(0~10)デザインスコア(タイポグラフィ、アクセシビリティ、余白、色、レスポンシブレイアウト、デザイントークン、構造)を返します。スコアは audit_page と同じチェックに基づき、全体スコア/グレード、最も弱いカテゴリ、Raven が機械的に評価しないカテゴリ(ブランド、コンバージョン、モーション)も返します。URL モードでは、判定不能な行を数値スコアから除外したまま、判定可能なコントラスト不適合も集計します。html および/または url を渡します(URL のキャプチャはローカル/stdio のみ。リモートでは url は拒否されます) |
audit_layout | 視覚的なリズム、整列、光学的バランスを評価します。グリッド/フレックスの最終行にあるカードが一つだけ大幅に横へ伸び、他のカードよりはるかに幅広くなる孤立伸長も検出します |
audit_responsive_visibility | URL を複数のブレークポイントでレンダリングし、デスクトップでは表示される一方、モバイルでは非表示(display:none/opacity:0/サイズがゼロ)になるコンテンツ要素を検出します。それぞれを、見落としの可能性が高いもの(モバイルでコンテンツが消える)と意図的なもの(装飾)に分類します |
audit_contrast | レンダリングされたテキストの WCAG コントラストを計算します。3 値の status(pass、fail、indeterminate)、有効な背景、比率の範囲を示し、背景が判定可能な場合に限り合格までの差分を返します |
suggest_contrast_fix | WCAG に不適合な色の組み合わせを受け取り、AA/AAA の目標を満たす最小限の前景色/背景色の変更を返します。audit_contrast の不適合を修正する、具体的な合格値を示します |
audit_url | ライブ URL をビューポート×テーマごとにレンダリングし、スクロールを安定させ、操作を実行して、実際のピクセルと DOM をキャプチャします。その後、ページ/コントラスト/レスポンシブ/空白メディアのチェックに加え、キャプチャ画像のスライス画像の端の対称性とホバー状態の白飛びを検出します。すべての検出結果には confirmed/likely-artifact/inconclusive のタグを付け、重大度順に並べます。ペイロード全体が大きすぎる場合は、compact: true を渡すと検出結果と概要のみを返します(キャプチャごとの base64 スクリーンショットは省略されます)。 |
audit_content | 見出し、本文、CTA、ラベル、キャプション、指標、成果を UX ライティング原則と決定論的ヒューリスティックで評価し、項目ごとに pass/warn/fail を判定します(指標には数値+単位が必要、CTA は行動を促す表現で 4 語以内、本文では受動態/専門用語/曖昧な表現を検出、キャプションと見出しの重複を検出)。項目ごとに変更前→変更後の書き換え案も提示します。完全オフラインで動作します |
audit_typography | レンダリングされた DOM テキストノード(または指定されたスナップショット)を対象とするタイポグラフィのスケールレポートです。支配的なモジュラースケール比を検出してスケールから外れたサイズを指摘し、本文のリズムに対する行間の一貫性をチェックするとともに、4 種類を超えるウェイト階層や標準外の値を検出します。audit_page の合格/不合格によるタイポグラフィチェックをさらに掘り下げます |
audit_tap_targets | WCAG 2.5.5/Apple 44pt に基づく Web のタップターゲット監査です。レンダリングされた URL またはスナップショット内のすべてのインタラクティブ要素を列挙し、要素ごとの修正表を出力します。表にはセレクター、ロール、テキスト、計測した幅/高さ、軸ごとのピクセル不足量、具体的な CSS 修正案が含まれ、問題の深刻な順に並びます |
audit_device_frame | デバイスモックアップのフレーム内で切り抜かれたコンテンツを検出します。frames(コンテナのボックス+メディアの本来のサイズ+object-fit、または DevTools のスニペット)は、フレームとメディアのアスペクト比が異なる場合の object-fit:cover による切り抜き損失を検出します。clips(最初と最後のフレーム PNG)は焼き込み済みのパン/ズーム(Ken Burns)を検出します。edge_frames(PNG)はフレーム端で切れたコンテンツを検出します |
audit_video_playback | ページをレンダリングし、各 <video> が実際に再生されているかを確認します。currentTime、readyState、エラーコード、自動再生のブロック状態をサンプリングし、証拠に基づいて各クリップを playing |
audit_consistency | コーパス/複数ページ監査です。2 ページ以上を比較し、ページ間のコンテンツコンテナー幅とヒーロー見出しの階層の不一致を検出します。トークンが指定されていない場合は、コーパスから正規値(最頻値)を推定します。単一ページの監査では見逃される、ページ間の関連性に関する不具合を検出します |
audit_swiftui | SwiftUI のソースを Apple HIG に照らして監査します。Dynamic Type、セマンティックカラー、44pt のターゲット、4/8pt の間隔、AccentColor をチェックします |
audit_ios_screen | アクセシビリティ/ビュー階層のスナップショットからレンダリング済み iOS 画面を採点します。44pt のターゲット、コントラスト、リズムをポイント単位で評価します |
audit_ios_privacy | Info.plist(または Expo app.json)/PRIVACY.md/エンタイトルメント/ソースを監査します。使用目的を示す文字列の誠実さ、ATS、Android の権限、同梱されたシークレット、開示されていないデフォルトのデータ送信をチェックします |
audit_rn | React Native/Expo のソースを監査します。iOS HIG と Android Material に照らして、タッチ可能要素の a11y ラベル、44/48pt 以上のターゲットと hitSlop、フォントの拡大、SafeAreaView、ダークモードをチェックします |
generate_design_system | ブランドカラーからカスタムデザインシステムを生成します |
list_content_systems | ブランドのボイス&トーンのシステムを閲覧します(Conversational Product Voice、GOV.UK、Shopify Polaris、Atlassian) |
get_content_system | ブランドのボイス属性、トーンの変化、語彙、文法、コンテンツパターンを取得します |
get_content_principles | UX ライティングの原則を取得します。明瞭さ、能動態、エラーの構成、インクルーシブな表現を扱います |
get_content_pattern | エラーメッセージ、空状態の文言、通知、フォームの入力検証に使える文面の作成パターンを取得します |
get_research_method | 質的、量的、またはユーザビリティの調査手法を、プロトコルとチェックリスト付きで取得します |
get_metrics_framework | プロダクト指標のフレームワークを取得します。HEART、AARRR、North Star、コンバージョンファネル、RICE、OKR を扱います |
get_service_pattern | サービスデザインパターンを取得します。ブループリント作成、担当者への引き継ぎ、サービスとしてのサインアップ、オムニチャネル、真実の瞬間を扱います |
get_service_standard | GOV.UK Service Standard を取得します。サービス品質を評価する 14 項目を扱います |
generate_service_blueprint | サービスブループリントを HTML として出力します。現状、または現状と理想の並列表示に対応します |
get_brand_principles | ブランド/ビジュアルの原則を取得します。ロゴ、グラデーション、画像、階層、システムとしてのブランドを扱います |
get_brand_trends | 使用上のガイダンス付きで、現在(2026 年)のブランドおよびビジュアルデザインのトレンドを取得します |
list_creative_models | 画像、動画、3D、音声、キャラクターの一貫性、分析向けの、プロバイダーに依存しないクリエイティブモデルの枠を閲覧します |
list_creative_presets | クリエイティブのプリセットを閲覧します。商品撮影、マーケットプレイスのカード、UGC 広告、テレビスポット、ソーシャルメディア用パック、ストーリーボード、インフォグラフィックを扱います |
create_brand_profile | ブランドを考慮したクリエイティブ作業に使う、ローカルのブランドプロフィールを作成または更新します |
get_brand_profile | ローカルのクリエイティブブランドプロフィールを読み込みます |
list_brand_profiles | ローカルのクリエイティブブランドプロフィールを一覧表示します |
register_creative_asset | ローカルパスまたは URL をクリエイティブアセットの参照として登録します。Raven にファイルのバイト列がアップロードされることはありません |
create_character_profile | 登録済みアセットから、ローカルのキャラクター/アイデンティティ参照プロフィールを作成します |
create_generation_job | プロバイダーに依存しない画像、動画、音声、3D、キャンペーン、分析ジョブのペイロードを作成します。オプションで RAVEN_CREATIVE_RUNNER 経由で実行できます |
get_generation_job | クリエイティブ生成ジョブと、そのプロバイダーのペイロード/出力状態を読み込みます |
list_generation_jobs | ローカルのクリエイティブ生成ジョブを一覧表示します |
plan_creative_campaign | 複数アセットのキャンペーンを計画し、オプションで生成ジョブのドラフトを作成します |
score_creative | フック、ベネフィットの明確さ、製品の訴求、CTA、チャネルとの適合性、オーディエンスとの適合性、ブランドとの適合性について、プロンプト/スクリプト/コンセプトを採点します |
create_taste_profile | 名前付きのテイストプロフィール(持ち運び可能なデザイン判断ルールセット。rule_id、clause、category、severity、negative prompt、owner を含む)と先例コーパスを作成します。明示的なルールや DESIGN.md 形式の Markdown 文書から作成でき、ローカルの ~/.raven/taste/ に保存されます(RAVEN_TASTE_HOME で変更できます) |
get_taste_profile | 保存されたテイストプロフィールのルールカタログ全体、先例コーパス、サーフェスの紐付けを読み込みます |
list_taste_profiles | ローカルに保存されたテイストプロフィールを、ルール数/コーパス数とともに一覧表示します |
label_finding | 人間による accept/revise/reject の先例をプロフィールのコーパスに追加します。これが成長ループです。追記のみで、accept 判定はそのパターンを今後の監査で抑制します |
get_taste_interview | 2 つのモードがある調整インタビューです。kickoff(デフォルト、新規プロジェクト向け):プロフィールのボイスルールと 11 のデザイン要素(タイポグラフィ、間隔、色、レイアウト、モーション、画像、イントロ/ヒーローのアニメーション、読み込み状態、ナビゲーションパターン、スタイルの系統、専門ライブラリ)に基づく決定論的なインタビューです(サイトのデフォルトのビルドターゲットとして Next.js を提案します)。ほとんどの質問には平易な言葉による選択肢があり、ボイスに関する質問では同じメッセージを 3 種類の文体で提示するため、耳で選べます。参考資料についての質問では、インタビューで取り上げる例の URL/スクリーンショットを尋ねます。最後の自由回答式の質問では特徴的なこだわりを聞き、他のサーフェスで選んだものが判明していれば、その内容も提案します。質問はすべてスキップできます(必須なのはアイデンティティのみです)。refine(すでに紐付け済みのプロジェクトに不満がある場合):保存済みの紐付けに基づいて再度インタビューを行います。期待に届かなかった点、保存済みメモそれぞれを維持/強化/置換するか、任意の却下先例を確認します。回答は bind_taste_surface で保存されます |
bind_taste_surface | プロジェクトのサーフェス調整内容(サーフェス文字列、URL ホスト、ルールごとの重大度の上書き(off を含む)、ボイスメモ、参考資料)を保存します。project または紐付けられた URL ホストを通じて audit_taste に自動適用されます。プロジェクト単位で既存の内容を更新します。再紐付けの際、省略されたフィールドは保存済みの紐付けから引き継がれ(carried_forward として報告)、明示的な空の値を指定すると消去されます |
record_taste_decision | 学習ループです。実際の作業中にテイスト/方向性/デザインに関する決定を行った時点で記録します(何を選び、何を却下したか、その理由、ユーザーが指示、承認、修正のいずれを行ったか)。記録された決定は今後のキックオフインタビューに反映されます。繰り返し選ばれるものは、その要素の質問でデフォルト候補として提示され、標準の質問では扱われない決定カテゴリは新しいインタビュー質問になります |
list_taste_decisions | プロジェクトまたは要素で絞り込める決定台帳です |
audit_taste | HTML、コピー文、またはライブ URL をテイストプロフィールに照らして評価します。グラデーション、グロー/ネオン、2 つ目のアクセント色、禁止語を決定論的に検出します。コンテンツの移植で表示テキストが原文どおりか決定論的な単語差分で検証するには source_text を渡します。owner: raven のルールは、Raven の既存のページ/コントラスト/タップターゲットエンジンに渡されます。すべての検出結果には rule_id と具体的な証拠が記載されます(検出できない条項は推測せず、not_assessed として報告されます)。スコープタグ付きのルールは surface に応じて有効になり(それ以外ではスキップされ、surface を省略した場合は警告のみになります)、project を渡すと保存済みのサーフェス紐付けが自動適用されます。document_kind:'portrait' を指定すると、サーフェスについての文書ではメモとの一致性チェックをスキップします(ルールは引き続き適用されます)。data-taste-quote 領域は検出対象外となるため、法律を引用したページがその引用だけで違反と判定されることはありません。判定は BLOCK/WARN/PASS です |
generate_taste_portrait | 紐付けられたテイストサーフェスを、自己完結型のデザイン済み HTML ページとして出力します。ルール、メモ、ボイス、決定、誤り→正しい例を含み、説明対象のサーフェス自体に準拠します。アートディレクションはサーフェス固有の色の許可設定に応じて調整され、要素の少ないサーフェスでも自然に表示されます。project を省略すると、すべての紐付けとギャラリーが出力されます。すべてのポートレートは、それぞれのサーフェスに対して audit_taste(document_kind:'portrait')に合格します |
raven_reflect | ローカルの Raven 使用ログを要約し、パターンと不足点を見つけます |
意思決定グラフ
ローカルの意思決定グラフには、意思決定、エビデンス、ソースの3種類のノードがあります。これらを5種類のエッジで接続します:supersedes、scoped_alongside、supports、contradicts、derived_from。意思決定のステータスは candidate、active、superseded、contested のいずれかで、ノードが完全に削除されることはありません。
decision_add— スコープ、コンポーネント、根拠、却下した代替案とともに、active の意思決定を追加します。decision_evidence— 定量的または定性的なエビデンスを意思決定に添付します。decision_get— 1つのノードと、その接続先の近傍ノードおよび添付されたエビデンスを返します。decision_list— active、superseded、contested、または candidate の意思決定を一覧表示します。include_candidates:trueまたはstatus:"candidate"を渡さない限り、candidate は除外されます。decision_draft— 根拠が確定する前に意思決定を記録します。decision_commit— 根拠を確定し、レビュー用に類似する active の意思決定を提示します。decision_supersede— 両方のノードとその系譜を保持したまま、意思決定を置き換えます。decision_scope— 2つの active の意思決定のスコープを狭め、両立できるようにします。decision_history— 最も古いものから最新のものまで、置き換えの系譜を返します。ingest_transcript— Source ノードを保存し、呼び出し元のモデル用に抽出プロンプトを返します。decision_import— ローカルの git 履歴と対応する意思決定ドキュメントを読み込み、ソースに紐付いた抽出プロンプトを返します。ingest_transcript_results— 抽出した JSON を、derived_fromエッジでリンクされた candidate の意思決定に変換します。gap_scan— 未対応のコンポーネント、根拠の欠落または薄弱さ、競合する意思決定、派生情報の陳腐化を順位付けします。対応が不要な場合、digest_only:trueを指定すると通知を抑制します。
初回起動時は、decision_import を呼び出す → 返された抽出プロンプトをモデルで実行する → 各結果を ingest_transcript_results に渡す → candidate をレビューする → 保持する各意思決定に対して decision_commit を呼び出す、という手順を実行します。candidate は decision_get から引き続き参照できますが、decision_commit によってステータスが active に変わるまでは、デフォルトの decision_list と gap_scan では無視されます。
Figma コメントのアーカイブ(1行目が # Figma comments archive: <label> で、見出しに ## Thread <n> を使用する、figma-comments-archive/ 内の Markdown ファイル)はデフォルトで取り込まれます。決着済みのスレッドにはスレッドを考慮した抽出が適用され、出典情報には path#Thread <n> が使われます。インポートされた candidate は引き続き decision_commit が必要であり、自動的にコミットされることはありません。
エビデンスを添付する前に、インポート元の出典情報が Source ノードと照合されます。Git の参照は、そのインポートに含まれるコミットの完全一致、または一意のプレフィックス一致である必要があります。ドキュメントの参照は、インポートされたパスに一致する必要があり、行(#L12)または見出しフラグメントを続けることもできます。拒否された参照は rejected_source_refs に返されます。エビデンスノードがなくても、candidate は引き続き利用できます。
トランスクリプトの場合は、ingest_transcript を呼び出す → その抽出プロンプトを実行する → 結果を ingest_transcript_results に渡す → candidate をレビューしてコミットする、という手順を実行します。active の競合は decision_supersede または decision_scope で解決し、decision_history で系譜を確認し、健全性チェックには gap_scan を使用します。
エビデンスノードと supports / contradicts エッジは、意思決定に紐付いた定量的および定性的な結果を記録します。
review_diff の重大度ポリシー
review_diff はデフォルトでは助言的であり、判定は最大でも warn です。独立して組み合わせ可能な2つのオプトインにより、一致する違反を error に引き上げ、CI の判定を失敗にできます。
fail_on— ルールの許可リストです。有効なルールはimportant、bare-hex-color、hardcoded-font-size、hardcoded-font-family、hardcoded-spacingです。まずはimportantから始め、DESIGN.md のトークンが成熟したらトークンルールを追加してください。importantの検出結果には意図的な使用(メールクライアントとの互換性、レスポンシブ対応の上書き)が含まれる場合があるため、該当箇所の正当性を説明するか、構成を変更する必要があります。トークンルールは DESIGN.md でトークンが定義されている場合にのみ検出されます(実行されなかった場合はchecks_skippedで確認できます)。fail_on_governed— 記録済みの決定が適用される検出結果を引き上げます(語句のスコープとカテゴリの関連付けであり、矛盾を検証するものではありません)。チームの厳格モードを示すシグナルとしてオプトインしてください。
引き上げの対象は差分の範囲に限られます。失敗の原因になるのは新たに追加された行のみで、既存の違反は差分で触れるまでブロックされません。適用されたポリシーは severity_policy に出力されます。どちらも指定しない場合は、従来の助言的な動作がそのまま維持されます。review_diff はローカルの stdio 専用であり(ホスト型リモートエンドポイントでは利用できません)、npx raven-mcp を介して CI にポリシーを設定してください。
Figma のコメントをアーカイブする
アクセスできなくなる前に、Figma のコメント履歴を永続性のある JSON/Markdown としてアーカイブします。
FIGMA_TOKEN=<pat> node scripts/figma-comments-archive.mjs --md <fileKey>
PAT には file_comments:read が必要です。ノード名の解決を可能な限り試すには --resolve-nodes を追加します。このオプションには file_content:read も必要ですが、解決できない場合もアーカイブは成功します。
認証情報がない場合:Figma で、まず解決済みコメントを表示し、コメントフィルターをすべて解除します(非表示のスレッドはコピー対象に含まれず、キャンセル後は復元できません)。Figma には「すべてのコメントをコピー」する一括機能がないため、コメントパネルからスレッドのテキストを選択してコピーし、次のコマンドを実行します(macOS):
pbpaste | node scripts/figma-comments-archive.mjs --paste design-review
(最後の語句はアーカイブのラベルです。スペースを含まない任意の名前を指定できます。保存先のフォルダーを選ぶには --out somedir を追加します。)または、コマンドだけを実行してターミナルに貼り付け、Ctrl-D で終了します。
スレッドは空行で区切ります。スレッド内では、作成者の行に続くタイムスタンプの行("2 days ago"、"Yesterday"、"Mar 4, 2026")が各コメントの開始位置になります。
貼り付けモードでは <label>.txt(貼り付け内容をバイト単位でそのまま保存した、永続的な記録)を書き込み、読みやすい <label>.md アーカイブも必ず生成します。.md の内容を貼り付けたテキストと照合してください。メッセージ行自体がタイムスタンプに見える場合や、1つのコメント内に空行がある場合、.md でのグループ分けがずれることがあります。.txt は常に正確です。既存のラベルが上書きされることはありません。置き換えるには --force を渡してください。
クリックして変更(Grab)+ DESIGN.md
Grab はローカルの stdio のみで動作します。 ホスト型の Cursor/Claude リモートエンドポイントでは Grab を利用できません。クリックして変更するには、お使いのマシン上のループバックブリッジが必要です。Grab が必要な場合は、ローカルの npx/Cursor ローカルの mcp.json を使用してください。
Raven Grab はローカルページをエージェントに接続します。要素をクリックして変更内容を説明すると、そのセレクター、計算済みスタイル、対応する DESIGN.md トークン、トークンの選択肢がセッションに送信されます。ブリッジはループバック上で実行され、返されるスクリプトタグには、そのルートで必要な機能キーが含まれています。
計算済みスタイルはインラインで編集でき、変更内容は styleEdits としてエージェントに送信されます。
セットアップは1分もかかりません。
- ローカルの開発サーバーを起動します。
proxy_targetにローカルサーバーの URL を指定して、start_grab_sessionを呼び出します。proxy_targetを指定した場合、DESIGN.mdへのpathは省略可能です(Raven が最小限の一時的な DESIGN.md を作成します)。プロキシを使わずにスクリプトだけを挿入する場合は必須です。- 返されたブリッジ URL を開きます。ブリッジ経由で配信される HTML ページには、オーバーレイがすでに含まれています。
- 要素をクリックし、Grab パネルに適用したい変更を入力します。
get_grabbed_elementsを呼び出して、キューに追加された選択内容と指示を受け取ります(キューを空にすると、後続の送信に使える容量が空きます)。
管理しているページでは、proxy_target を省略し、返された <script> タグをページに貼り付けることもできます。
read_design_md を使うと、DESIGN.md ファイルとフラット化されたトークンインデックスを確認できます。init_design_md を使うと、保存済みの Raven システム、空のテンプレート、または getdesign.md のスターターからファイルを作成できます。update_design_md を使うと、ファイルの残りの部分を書き換えずに、1つのトークンを設定、名前変更、削除できます。
パターンライブラリ — Grab したものを保存してから変換する
proxy_target にはサードパーティの URL も指定できるため、自分の開発サーバーに限らず、閲覧が許可されているあらゆるサイトから Grab できます。Grab した内容は、タブを閉じると失われ、他のサイトの文字どおりの値として取得されます。この流れを完結させるのが、4つのツールです。
capture_reference— 取得した選択範囲を~/.raven/referencesに保存します。セレクター、計算済みスタイル、ホバー/フォーカス状態、バウンディング矩形、切り詰めた HTML、独自のメモ、タグが含まれます。キャプチャごとに 1 つの JSON レコードを作成するため、同じ要素を 2 回取得しても両方が保持されます。また、キャプチャした要素をレコードの隣に PNG としてレンダリングします。スタイルの一覧からパターンを見つけられる人はいないからです。このレンダリングはオフラインで行われ、すべての外部リクエストが中断されるため、保存したリファレンスから元のサイトへ再アクセスすることはありません。また、スクリプトを無効にして実行するため、キャプチャした要素内のスクリプトが実行されることもありません。そのことはレコードにfidelity: "offline"と記録されます。search_references— フリーテキスト、ホスト、所有者、タグで後から検索できます。結果ごとのスコアと、一致したフィールドを示すwhyが付属します。各結果にはクレジット表記と画像パスをまとめたdisplayオブジェクトが含まれるため、画像を取得するコンシューマーは帰属情報も一緒に扱えます。見ることとコピーすることは別です。結果にはhtml_availableが示されますが、キャプチャしたマークアップは含まれません。他の人の作品のコーパスを閲覧するだけで、その副作用としてマークアップが返されることがないようにするためです。構造を実際に読む場合はinclude_html: trueを渡してください。その場合、レスポンスには誰のマークアップが含まれているかが示されます。閲覧の目的に必要な情報は、デフォルトの結果にすべて含まれています。画像、セレクター、矩形、計算済みスタイルです。map_reference_to_tokens— キャプチャした値をあなたの DESIGN.md トークンに対応付けます。これにより、エージェントが書くコードでは、値をそのまま貼り付けるのではなく、あなたのタイポグラフィのスケールとカラーパレットが使われます。各バインディングには、トークン名だけでなく、解決済みの値と CSS 変数も含まれます。名前だけではスタイルシートに記述できないためです。また、別名のトークンは$refチェーンの末尾にある値に解決されます。純粋で決定論的な処理であり、モデルもネットワークも使いません。保存されたスタイルを直接読み取るため、マークアップを Raven の外に出さずに、見せてからトークンに変換する一連の処理を実行できます。forget_references—ref_idを指定して単一のリファレンスを削除するか、サブドメインも含めて特定のホストからのリファレンスをすべて削除します。PNG も一緒に削除します。削除は破壊的かつ永久的なため、ホスト一括削除はconfirm: trueがないと実行されず、先に削除対象となるレコード数が通知されます。
対応付けの判断基準を説明します。誤った対応付けは、対応できないと明示するよりも悪いからです。
- 色は RGB ではなく RGBA の距離で照合します。同じ 16 進数値でも不透明度が異なれば、完全一致ではなく近似一致になります。16 進数、カンマ形式とスペース形式の
rgb()/rgba()、hsl()、CSS の名前付きカラーを解決します。マッチャーが読み取れない構文(oklch()、lab())は、パレットが空だと報告するのではなく、その構文名を示します。 - 長さは、ルートを 16px として px に正規化します。パーセンテージとビューポート単位は包含サイズが必要なため、その理由を示す未対応として返し、推測で変換することはありません。
- 近さよりファミリーを優先します。 プロパティは、そのプロパティに対応するトークンファミリー内で対応付けられます。たとえば、数値がより近いタイポグラフィのトークンがあっても、
padding-topはスペーシングトークンを使用します。また、同じ精度のサイズトークンがあっても、line-heightは行間トークンを使用します。適切なファミリーに十分近いトークンがない場合は、ファミリーをまたいだ近似候補を明示する未対応の結果になります(「値が最も近いトークンはspace.4(16px)ですが、別のファミリーに属しています」)。そのため、font-sizeがスペーシングのスケールに誤って対応付けられることはありません。 - 同点の場合は、距離、ファミリーの適合度、トークンパスの短さ、辞書順の順に判定します。そのため、トークンの順序にかかわらず、同じ入力には常に同じバインディングが返されます。
- DESIGN.md 内の壊れた
$refチェーンや循環参照は、すべてのプロパティで一致が見つかった場合でもdiagnosticsに返されます。独自のトークンファイルの不備は、無視されずに報告されます。
ソースを尊重してください。アクセスが許可されているサイトから取得してください。ツールがペイウォールやログインを回避することはなく、すべてのキャプチャには owner: "third-party" が記録されます。
帰属表示と削除。 すべてのサードパーティのレコードには、取得元の URL、ホスト、アプリ名、取得日が保持され、search_references は読み取り時にこれらからクレジット表記を生成します。そのため、クレジット表記が古くなることはなく、画像のそばではなく画像と一緒に移動します。Raven は、取得したものに対する所有権を主張しません。
コーパスはローカルにあり、ご自身のマシンの ~/.raven/references に保存されます。このプロジェクトはそのコピーをホストしません。そのため、削除は依頼するのではなく、ご自身で実行します。権利者から素材の削除を求められた場合は、相手のホストを指定して forget_references を実行すると、そのホストとすべてのサブドメインのレコード、および画像がすべて削除されます。
forget_references({ host: "example.com", confirm: true })
削除したもの、読み取れなかったもの、削除を試みたものの失敗したものが報告されます。これらはそれぞれ異なる結果であり、ひとつにまとめられることはありません。削除が途中で失敗した場合は、画像ではなくレコードが残るため、もう一度実行すれば残ったものを見つけて削除を完了できます。確認プロンプトには削除対象となるレコードが正確に示され、それらの ID を expected_ref_ids として渡すと、削除対象をそのレコードに限定できます。途中で取得されたものがあれば、まとめて削除されるのではなく報告されます。このプロジェクト自体がご自身の素材を配布していると思われる場合は、https://github.com/rhinocap/raven-mcp/issues で issue を作成してください。
明確にしておきたい制約がひとつあります。ブリッジがサードパーティのサイトをプロキシしている間、そのページはブリッジ自身のオリジンから配信されるため、ページ上のスクリプトは Raven オーバーレイと同一オリジンになり、DESIGN.md のトークン名と値を読み取ることができます。Raven はプロキシセッション中、DESIGN.md のファイルパスと、すべての編集用ルート(レイヤーの移動、テンプレートやコンポーネントの書き込み、一括コミット)を利用できないようにしますが、トークン一覧を見せても問題のないプロキシサイトを利用してください。
クリエイティブスタジオ
Raven は、非公開ベンダーに依存したり、その仕組みを複製したりすることなく、メディア生成を取り巻くクリエイティブ制作ワークフローをサポートするようになりました。ツールはオーケストレーションの基本要素です。
create_brand_profileを使って、ブランドキットをローカルに保存します。register_creative_assetを使って、商品写真、ロゴ、参考素材、URL を登録します。create_character_profileを使って、キャラクター/アイデンティティのリファレンスセットを作成します。create_generation_jobを使って、プロバイダーですぐに利用できるペイロードを生成します。plan_creative_campaignを使って、キャンペーンのショットリスト全体を作成します。score_creativeを使って、クリエイティブのコンセプトを評価します。
デフォルトでは、ジョブは ~/.raven/creative にローカルのドラフトペイロードとして保存されます(RAVEN_CREATIVE_HOME で変更できます)。実際にメディアを生成するには、RAVEN_CREATIVE_RUNNER に、標準入力からジョブの JSON オブジェクトをひとつ読み取り、標準出力に JSON を返す実行可能ファイルを設定してください。このランナーから任意のプロバイダーを呼び出せます。Raven がソースコードに API キーを保存することはありません。
iOS / SwiftUI の監査
Raven は、Web/CSS の慣習ではなく、Apple Human Interface Guidelines に照らしてネイティブ iOS アプリを監査します。Web 専用のルール(lang、title、flex-wrap、clamp、max-width、CSS カスタムプロパティ、裸の hex)は iOS の入力には適用されません。また、get_checklist/get_principles に platform: "ios" を指定すると、Web 用ではなく HIG の項目(Dynamic Type、44pt のターゲット、SF Symbols、安全領域、ダークモードとの一貫性、App Review のプライバシー)が返されます。
audit_swiftui— SwiftUI のソース(source:文字列またはファイルの配列)を貼り付けます。ハードコードされた.font(.system(size:))が約 13pt 未満、意味的に小さすぎるフォント(.caption/.caption2)、ハードコードされたColor(red:green:blue:)/hex リテラル(アセットカタログやセマンティックなシステムカラーではないもの)、44×44pt 未満のインタラクティブなフレーム、4/8pt グリッドから外れた場当たり的な間隔を静的に検出します。セマンティックな Dynamic Type フォント、セマンティックなシステムカラー、SF Symbols、柔軟なフレームを高く評価します。省略可能なaccent_color_contents(AccentColor.colorset/Contents.jsonの生データ)を渡すと、アクセントカラーにコンポーネントが実際に定義されているかを検証します。これにより、システムブルーに暗黙にフォールバックする空または未定義の AccentColorを検出できます。audit_ios_screen—audit_layoutに相当する iOS 用ツールです。引数なしで呼び出すと、想定されるスナップショットの形式と、その取得方法(Accessibility Inspector/XCUITest)が返されます。{ elements: [{ label, rect, role, fontPt, fgColor, bgColor }], viewport }(任意で base64 のscreenshotも指定可能)を渡すと、44×44pt のタッチターゲット、コントラスト(iOS のsecondaryLabel/tertiaryLabelはプラットフォーム標準として扱われ、重大な失敗ではなく警告になります)、視覚的なリズム(配置、間隔の一貫性、視覚的なバランス)を評価します。audit_ios_privacy— 「怪しい問題がない」ことを確認するゲートです。info_plistまたは Expo のapp_json(管理対象の RN アプリには Info.plist がありません)と、任意のprivacy_md、entitlements、sourceを読み込みます。曖昧なNS*UsageDescriptionの文言やコードと矛盾する説明(例:requestAuthorization(toShare: [])では実現できない書き込みを示すNSHealthUpdateUsageDescription)、未使用のエンタイトルメント、Android の権限(Expo)、ATS のクリアテキスト例外、バンドルまたはapp.jsonのextraに含まれる出荷時のシークレット/キー、さらに選択時に開示されていないデフォルトのデータ送信経路(個人データをホスト型サーバーに暗黙に送信する、あらかじめ選択された「Recommended」オプション)を検出します。
3 つのツールすべてが audit_page と同じ形式(score、grade、summary、passes、errors、warnings、fix_priority)を返します(audit_ios_screen には metrics ブロックも追加されます)。
コマンド 1 つ: node scripts/ios-audit.mjs <app-dir> [--snapshot snap.json] [--md report.md] を実行すると、すべての入力を検出し、3 つのツールすべてを実行して集約レポートを生成します。
React Native / Expo の監査
React Native または Expo アプリを構築する場合も、同じように監査できます。RN は iOS と Android のネイティブウィジェットにレンダリングされるため、audit_ios_screen はすでにレンダリング後の出力をスコアリングします(アクセシビリティのスナップショットはプラットフォームレベルです)。audit_rn はJSX/StyleSheet のソースを対象とし、両プラットフォームで RN が準拠する必要のある iOS HIG と Android Material の規約に照らして評価します。これは audit_swiftui に相当する RN 向けの監査です。get_checklist/get_principles には platform: "react-native" を指定します。
audit_rn— RN のソース(source:文字列または配列)を貼り付けます。accessibilityLabel/accessibilityRoleがないタッチ操作要素(Pressable/Touchable*)、hitSlopがなく 44pt 未満のタッチ操作要素、Dynamic Type を気づかれないまま無効にするallowFontScaling={false}、fontSizeが約 13 未満の設定、SafeAreaView/useSafeAreaInsetsがない画面、さらに複数の表示モードがあるアプリではuseColorScheme/Appearanceを使わないハードコードされた色を検出します。color_scheme: "dark"/"light"(Expo のuserInterfaceStyle)を渡すと、意図的に単一モードにしているアプリではダークモードのチェックが抑制されます。SafeAreaView、hitSlop、Platformに対応したコード、テーマを評価します。audit_ios_privacyは Expo のapp_jsonも受け付けます。expo.ios.infoPlist、Android の権限、プラグインを監査し、expo.extra/設定内のシークレットと Google API キーをスキャンします。
コマンド 1 つで実行: node scripts/rn-audit.mjs <app-dir> [--snapshot snap.json] [--md report.md] は画面と app.json を検出し(userInterfaceStyle を読み取るため、ダークモードのみのアプリが誤検出されません)、すべての監査を実行します。
レスポンシブ表示の監査
audit_responsive_visibility は複数のブレークポイント(デフォルト:モバイル 390px、タブレット 768px、デスクトップ 1440px、ウルトラワイド 2160px)でページをレンダリングし、デスクトップでは表示されるのにモバイルでは隠れるコンテンツ要素を検出します。これにより、「モバイルで消える」種類のバグを見つけられます。検出された各要素は、見落としの可能性あり(隠すべきではないコンテンツ)または意図的(装飾的な要素)に分類されます。CSS(hidden、display:none、opacity:0、visibility:hidden)やレスポンシブな Tailwind クラス(hidden md:block など)による非表示を検出します。
使用方法:
audit_responsive_visibility(url)— デフォルトのブレークポイントでレンダリングし、不一致を検出します。audit_responsive_visibility(url, [390, 768, 1440])— ブレークポイントをカスタマイズします。- 背の高いコンテンツには、オプションの
viewportHeight(デフォルト:900px)を指定できます。
検出された要素について、セレクター、非表示にするクラス、各ブレークポイントでの表示状態、カテゴリを返します。
コントラスト監査
audit_contrast はすべてのテキスト要素の WCAG コントラストを計算し、3 種類の値を取る status(pass、fail、indeterminate)を報告します。判定可能な行には ratio、aa、aaa、delta_to_aa が含まれます。判定不能な行では required_aa は保持されますが、これら 4 つの指標は null として返されます。信頼できる候補範囲を取得できる場合、グラデーションやレイヤー状の背景では effective_bg と ratio_min / ratio_max が示されます。また、結果では indeterminate_bg_rows / indeterminate_bg_count が、AA の失敗とは別に集計されます。
実際の背景との合成はURL モードに適用されます。Raven はレンダリングされた DOM の祖先チェーンをたどり、解析可能な色とグラデーションレイヤーを CSS の描画順に合成し、グラデーションの内部をサンプリングして、ブラウザーの canvas を使って最新の計算済み色を正規化します。これは意図的に DOM の祖先チェーンの範囲内に限られます。opacity、display:contents、配置された透明なチェーン、写真、未対応のレイヤー、異なるスタッキングコンテキストにある兄弟要素の背景は判定不能として報告されます。Raven はスタッキングコンテキストをまたいでピクセルをサンプリングしません。スナップショットモードでは、従来どおり指定された bgColor を使い、背景を白として扱うモデルが維持され、その対象範囲は mode_note で通知されます。
使用方法:
audit_contrast(url)— ライブページをレンダリングし、すべてのテキストを監査します。audit_contrast(dom_snapshot: [{ selector, color, bgColor, fontPx?, bold?, text? }])— 事前に取得したスナップショットを監査します(動的なページや Cookie で保護されたページに便利です)。
status、判定可能な失敗の合格基準値との差、背景の実効色に関する根拠と範囲、判定不能な項目の個別集計を含む、すべてのテキスト行を返します。suggest_contrast_fix が受け付けるのは、判定可能で失敗している行のみです。判定不能な根拠や null の比率は、架空の色の推奨に変換せずにスキップされます。
WCAG の計算: コントラスト比は線形化した輝度を使って計算します(WCAG 2.1 § 1.4.3)。黒地に白のコントラスト比は正確に 21、白地に黒のコントラスト比も正確に 21 です。大きなテキスト(太字で 18.66pt 以上、または 24pt 以上)に必要なのは 3:1 / 4.5:1 AAA です。通常のテキストには 4.5:1 / 7:1 が必要です。
ヘッドレスブラウザー監査
audit_page は、ヘッドレス Chromium でライブ URL をレンダリングし、スクロールしてスクロール時に表示される要素の表示状態を安定させ、キャプチャ前に preload=none の動画を再生できます。これにより、まだ発火していない whileInView の状態が原因で「空白のセクション」と誤って報告されるのを防ぎます。
使い方:
- 静的 HTML モード — 即時の静的解析には
html文字列を渡します(既存の動作で、変更はありません)。 - レンダリング URL モード —
url(HTTP/HTTPS の完全な URL)を渡します。Raven が Chromium を起動し、ページをレンダリングして、必要に応じてスクロールし、ライブ DOM を監査します。scroll_settle: true— ビューポートの高さごとに短い間隔を置きながら、ページの上部から下部までスクロールします。IntersectionObserver/ whileInView のしきい値が発火できるようにし、遅延コンテンツの表示に合わせてページの高さを再計算するとともに、最下部で高さが連続して安定したことを確認します。その後、Raven はページ内のスクロール経路上で発火した有限時間のアニメーションが終了するまで待機してから、上部に戻り、キャプチャに向けて再度安定させます。スムーズスクロールは一時的に無効化されます。スクロールと安定化には最大 4 秒の制限があります。非常に長いページや継続的に伸びるページ、またはアニメーションがまだ続いているページが完全に安定しない場合、Raven は結果を無条件に信頼するのではなく、キャプチャ警告を出力し、animationsSettledは false のままになります。未ロードの動画(preload="none")は、空白でレンダリングされるかを検出するために再生されます。- 開始アニメーションの安定化(常に有効) — コンテンツの抽出やスクリーンショットの撮影前に、Raven は
document.getAnimations()をポーリングし、ビューポート内またはその近くで実行中の有限時間アニメーションがなくなるまで待機します(無限のスピナーやループは無視されます)。デフォルトの上限は 3 秒です。ライブラリの呼び出し元はanimation_settle_timeout_msを設定できます(上限は 10 秒)。ヒーロー要素がanimation-delayとbackwardsfill によって表示されるページも、空白状態やアニメーション途中ではなく、安定した状態でキャプチャされます。キャプチャのメタデータにあるanimationsSettledは、静止状態に達したかどうかを示します。 - 空白の誤検出(常に有効) — キャプチャ時に、Raven はキャプチャ対象のページ全体で、テキストを含むリーフノードとメディア/コンテンツ要素を測定します。その 30% を超える要素が
opacity:0、visibility:hidden、または完全に透明なテキスト色によって実質的に不可視の場合、capture_warningsにreveal-gate-false-blank: …が含まれます。これにより、キャプチャに基づく監査の呼び出し元は、レンダリング結果の監査が信頼できない可能性を把握できます。 viewport: { w, h }— レンダリング時のビューポートを設定します(デフォルト:{ w: 1440, h: 900 })。
動画アーティファクトの検出: preload="none"(または preload の指定がない)の <video> が readyState < 2 の状態でレンダリングされる場合(スクリーンショットでは黒いボックスとして表示されます)、Raven は結果で unloaded-video-artifact としてフラグを付けます。これは情報提供のみを目的としており、合否を示すものではありません。preload=none は意図的に使われることが多いためです。Cookie で保護されたホストでは、iOS/Android のメディアデーモンが Cookie を送信しないため、動画リクエストが失敗することがあります。Raven は、トラブルシューティング(例:デプロイ保護を無効にする、トークンベースのバイパスを使用する)に役立つよう、この点を通知します。
敵対的検証: adversarial_verify: true を設定すると、それぞれの検出結果を、異なる方法を使ってライブ DOM に対して個別に再確認します。検出結果には次のタグが付きます。
confirmed— ライブページで検出結果が実際に確認された場合(例:レンダリングされた DOM に<title>がない)likely-artifact— 静的監査方式に起因するアーティファクトである場合(例:<video preload="none">が空白でレンダリングされるが、これは想定された動作であり、リソースの欠落ではない)inconclusive— 検出結果を個別に検証できない場合(例:カラーパレットのサイズなどの集計ルール)
結果には adversarial_verification: { debunked_count, confirmed_count, inconclusive_count } が含まれます。ここで debunked_count は、likely-artifact の数です。これにより誤検出を把握し、実際の問題だけを修正できます。後方互換性があり、adversarial_verify が指定されていないか false の場合、出力は以前のバージョンと同一です。
セットアップ: 初回のみ、ブラウザーのバイナリをダウンロードするために npx playwright install chromium を実行します。url を指定して audit_page を呼び出したときにバイナリが見つからない場合は、インストールコマンドを実行するよう明確な案内が表示されます。
設計の変更前/変更後の差分
evaluate_design では、Base64 エンコードされた PNG スクリーンショットを受け付け、修正によってレンダリング結果が実際に変わったかどうかを測定できるようになりました。
使用方法:
before_screenshotとafter_screenshotを渡します(どちらも Base64 PNG で、data:image/png;base64,プレフィックスの有無は問いません)。- Raven は、画像の 0.1% を超えるピクセルが異なる場合(JPEG/PNG のデコードによるばらつきを考慮)、
fix_confirmed: trueを返します。 changed_ratio— 変更されたピクセルの正確な割合(0〜1)。changed_region— 変更されたピクセルのバウンディングボックス{ x, y, w, h }(変更が検出されなかった場合は null)。dimensions— 画像から算出した測定値(キャンバスサイズ、明るさ、色の変化)。ただし、これらはピクセルレベルの代替指標であり、Raven の原則に基づくスコアではありません。
description とともに変更前/変更後のスクリーンショットを渡すと、evaluate_design は原則に基づく評価とピクセル差分の両方を返します。スクリーンショットのみを渡した場合、評価では原則の検索を適切にスキップし、差分のみを返します。後方互換性があり、スクリーンショットを渡さない場合、ツールの動作は以前のバージョンと同じです。
実際の git ワークツリーでトークンの調整ループを完了します。
npx raven-polish --apply --verify "npm test"
CLI はデフォルトでドライランです(このリポジトリでは node scripts/raven-polish.mjs を実行します)。調整が提案された場合、またはいずれかの検出結果の重大度が error の場合は終了コード 1 を返し、調整対象がなくエラーもない場合に限り、終了コード 0 を返します。コミット済みの変更をレビューするには --range main...HEAD を渡します。適用前に提案されたパッチを確認し、その後、実際のリポジトリの状態に対して再度 review_diff を実行します。CI で使用するには、ワークフローの例を .github/workflows/ にコピーします。
リリース情報
Raven では、新しい原則、パターン、ブランドシステムを定期的にリリースしています。マイナー/メジャーリリースごとにメールを 1 通受け取るには、以下をご利用ください(パッチリリースのお知らせはありません)。
- Web: ravenmcp.ai/#updates — 10 秒で登録でき、メールアドレスの入力欄は 1 つだけです。
- 製品内: Claude に 「[email protected] で Raven の更新情報に登録して」 と頼むと、Claude が
raven_registerを呼び出し、登録が完了します。
マーケティングメールはありません。いつでも配信を停止できます。Resend を利用しています。
アップグレード後
Claude Code は、MCP サーバーへの接続時にツールリストをスナップショットとして取得します。アップグレード後、新しいツールを表示するには、セッションを再起動するか、/mcp を使って再接続してください。
Claude Desktop は、MCP サーバーへの接続時にツールリストをスナップショットとして取得します。アップグレード後、新しいツールを表示するには、アプリを再起動してください。
Codex CLI では、~/.codex/config.toml にツールごとの approval_mode エントリも必要です。設定がないと、新しいツールの呼び出しはキャンセルされます。不足している設定を確認するには node scripts/sync-codex-approvals.mjs を実行し、エントリを追加するには --write を付けてください。
追加されたエントリにより、これらのツールは自動承認されるため、表示されたリストを確認してください。新しいバージョンの Codex では、代わりにサーバーレベルの default_tools_approval_mode を設定できます。
すべてのプロジェクトを最初に調整
好みはサーフェスごとに異なります。同じデザイナーでも、ポートフォリオにはモノクロにアクセントカラーを1色だけ使うルールを適用し、プロダクトサイトにはそのルールを一切適用せず、それぞれに少し異なるトーンを求めることがあります。Taste Engine は、キックオフインタビュー(プロジェクトごとに1回実施。すべての質問はスキップ可能で、ほとんどの質問にはナビゲーションパターンから美的系統、専門ライブラリまで、平易な言葉で選べる選択肢があります)でこれに対応します。回答はサーフェスのバインディングとして保存され、以降の監査に自動的に適用されます。また、生成した成果物が期待に届かなかった場合は、mode:'refine'を使うと、その不満を保存済みのバインディングに基づく再インタビューに変え、行き詰まりを防げます。
プロダクトもパレットもなく、アイデアだけの状態からブランドを始めますか?同じインタビューが、ブランドの創出から始める包括的なジェネシスフローの最初のステップになります(会話を通じてブランドを考案し、独自の画像ツールでアセットを生成し、ムードボードを承認して、DESIGN.mdにデザインシステムをまとめます):docs/brand-genesis-flow.md。
Raven はこのフローを MCP サーバーの指示に組み込んでいるため、サーバーの指示に従うエージェント(Claude Code、Claude Desktop)はプロジェクトのキックオフ時に自動でインタビューを実施します:get_taste_interview → ユーザーに質問 → bind_taste_surface → 完了。クライアントにサーバーの指示が表示されない場合、またはこの手順を必須にしたい場合は、プロジェクトのCLAUDE.md/AGENTS.mdに次の1行を追加してください:
Before the first design/UI/copy work in this repo, run Raven's get_taste_interview
(profile <name>, project <repo-name>); if existing_binding is null, ask me its
questions and persist with bind_taste_surface. Pass project:'<repo-name>' on every
audit_taste after that.
すでに調整済みのプロジェクトでは、低コストの呼び出しを1回行うだけです(existing_bindingはnull以外の値を返し、エージェントは処理を続行します)。未調整の監査も引き続き実行でき、スコープ指定のルールはwarnに格下げされ、結果にはcalibration_hintが含まれます。そのため、調整は障壁ではなく、精度を高めるためのものです。
学習ループ
Raven は、あなた(と Claude)がよく使うパターンや、繰り返し現れる不足点を把握できるよう、利用状況の小さなローカル限定ログを保持します。
- 保存場所:
~/.raven/usage.jsonl(RAVEN_USAGE_LOG=/pathで変更できます)。 - 記録内容: ツール名、タイムスタンプ、経過時間(ミリ秒)、簡単なインサイトオブジェクト(監査スコア/警告ルール名、パターンの
type、ブランドの会社名、検索レイヤー)。監査対象のHTML、プロンプトのテキスト、ブランドのコピーは記録されません。 - 記録されない内容: ページ本文、生のクライアントコンテンツ、作業成果物。
- 完全に無効化:
RAVEN_NO_USAGE_LOG=1。 - 振り返り: Claude に 「Raven を何に使ってきた?」 と尋ねると、Claude は
raven_reflectを呼び出します。このツールはログをローカルで読み取り、直近N日間について、最もよく使うツール、繰り返し発生する監査の警告(ナレッジの不足が考えられます)、最もよく依頼するパターン、よく利用するデザインシステムをまとめます。
リモートサーバーにデータが送信されることはありません。繰り返し現れる不足点を新しいRavenの原則やパターンにする価値がある場合は、手動でissueを作成してください。以降の処理は、github.com/rhinocap/raven-mcpの自動パイプラインが行います。
ホスト型サーバー上のデータ
Raven は、2つのエンドポイントを持つホスト型のリモートMCPサーバーも運用しています。匿名エンドポイントはステートレスで、ストアが一切紐付けられていないため、送信したデータがどこかに書き込まれることはありません。認証済みエンドポイント(Taste Engine のセッションをまたぐプロファイル、サーフェスのバインディング、意思決定に使用されます)では、すべてのデータがアカウントに紐付けられ、確認済みのユーザーIDを名前空間として Upstash Redis に保存されます。ベアラートークン自体は保存されません。
delete_taste_dataツール(confirm: "DELETE")を使えば、いつでもすべてのデータを消去できます。このツールは名前空間内のすべてのキーを削除し、何も残っていないことを確認します。正確なキー構成や、データに含まれないレート制限カウンターなどの詳細は、docs/remote-mcp-privacy.mdをご覧ください。
開発
npm run dev # Run with tsx (hot reload)
npm run build # Compile TypeScript
npm start # Run compiled output
ライセンスと帰属表示
Raven MCP は Apache License, Version 2.0 の下で公開されています。著作権者は Andrew Cunliffe です(2026 年)。
Raven をフォーク、組み込み、または再配布する場合(全体または一部を問わず)、Apache-2.0 のライセンス通知、LICENSE ファイル、NOTICE ファイルをそのまま保持してください。Raven を別の製品に組み込んで提供する場合は、謝辞に「Raven MCP — https://ravenmcp.ai」への帰属表示を含めてください。
Raven のナレッジベースでは、Nielsen Norman Group、UX/心理学の法則に関する一次学術文献(Fitts、Hick、Miller など)、ゲシュタルト原則、WCAG(W3C)、plainlanguage.gov(パブリックドメイン)、GOV.UK(Open Government Licence v3.0)、Shopify Polaris、Atlassian Design など、多数のサードパーティーの情報源を参照しています。各エントリーには sources URL フィールドがあります。上流の情報源とライセンス条件の全リストは NOTICE を参照してください。一部には Apache-2.0 に加えて独自の条件があります。
これは個人プロジェクトです。Intuit Inc. や、ソースデータで言及されているその他の企業による推奨を受けたものではありません。
データ構造
すべてのナレッジは src/data/ に静的 JSON ファイルとして格納されています。
src/data/
principles/ # Nielsen, Laws of UX, Gestalt, accessibility, typography, color, mobile, D4D
patterns/ # signup, pricing, nav, forms, landing, dashboard, modals, empty/error/loading, CTA, social proof, mobile
business/ # monetization, retention, onboarding, growth, metrics
tokens/ # registry.json + systems/ (stripe, linear, vercel, …)
content/ # voice & tone: Conversational Product Voice, GOV.UK, Shopify Polaris, Atlassian
systems/ # registry.json + brand-voice JSONs (conversational-product-voice, gov-uk, polaris, atlassian)
principles/ # UX-writing principles (clarity, active voice, error anatomy, …)
patterns/ # copy recipes for errors, empty states, notifications, form validation
research/ # study protocols + metrics frameworks
principles/ # research fundamentals (method match, bias, sample size, ethics, triangulation, …)
methods/ # qualitative, quantitative, usability
frameworks/ # HEART, AARRR, North Star, conversion funnel, RICE, OKRs
service-design/ # service-level principles + patterns + frameworks
principles/ # Stickdorn, Shostack, peak-end, moments of truth, handoff
patterns/ # service blueprinting, human handoff, signup-as-service, omnichannel, moments of truth
frameworks/ # GOV.UK Service Standard (14 points)
brand/ # brand & visual design
principles/ # logo, gradient, imagery, hierarchy, brand-as-system
trends/ # 2026-current.json
コメント
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。