saglitzdesign-mcp

---

理由

LLM は自信たっぷりにデザインについて誤ったことを言います。ありきたりな設定に頼り、古い仕様を作り上げ、「すっきりとモダンに」といった一般論を述べます。SaglitzDesign は、エージェントが必要に応じて参照できる、厳選され、出典が明記され、具体的な指針を示すナレッジベースを提供します。まるでシニアプロダクトデザイナー、コンバージョンを高めるコピーライター、テクニカル SEO の専門家から同時にアドバイスを受けるようなものです。

エージェントにペイウォールのデザイン、ランディングページの監査、iOS アプリの計画を頼むと、推測ではなく、「タッチ領域は最低 44pt」「画面ごとに主要ボタンは 1 つ」「LCP は 2.5 秒以下」といった具体的なルール、人気アプリで実際に使われているパターン、段階的なロードマップを提示します。

• 実行環境に依存しません。 サーバーが読み込むのはローカルファイルのみです。外部 API もアカウントも設定も必要ありません。オフラインでもそのまま動作します。
• ローカルでの利用を前提に設計されています。 stdio のみで MCP を使用し、MCP クライアントの子プロセスとして実行されます。HTTP や SSE のトランスポートはないため、リモートでホストしたりネットワーク経由で接続したりできません。だからこそ、プロンプトやコードがデバイスの外に出ることもありません。
• 曖昧ではなく、具体的な指針を示します。 各ドキュメントは、数値、しきい値、推奨事項と禁止事項、アンチパターンなど、エージェントがそのまま適用できるルールとして書かれています。
• 根拠に基づいています。 公式ソースのデザイン言語仕様、実際の人気アプリやサイトを調査したパターン、原典の書籍から要点をまとめた古典的な知見を扱います。

内容

11 カテゴリにわたる 96 件のナレッジドキュメント：

カテゴリ	対応範囲
🎨 デザイン言語	Material 3 & M3 Expressive · Apple HIG + Liquid Glass (iOS 26) · iOS、Android（Android 16 / M3 Expressive）、macOSアプリの詳細なデザインガイド · Appleのアクセシビリティ（Dynamic Type、VoiceOver、タップ領域）と Appleのリリース準備（Info.plistの目的文字列、エンタイトルメント、アプリアイコンセット、画面の向き／マルチタスクの制限） · Apple Intelligenceのデザイン（AI機能：Writing Tools、App Intents、オンデバイスFoundation Models） · visionOS / 空間デザイン（Vision Pro） · Fluent 2 · 2026年のウェブトレンド · デザイントークンとテーマ設定（W3C DTCG） · Apple WWDCのデザイン原則（流動的なインターフェース）
🧩 コンポーネント	ボタン（階層、サイズ、状態、ラベル） · フォームと入力欄 · ナビゲーション · カード／リスト／モーダル／シート／空の状態
🧠 UX	Nielsenのヒューリスティックと行動法則 · アクセシビリティ（WCAG 2.2） · タイポグラフィ · 色とダークモード · 余白とグリッド · モーション · モバイルUX · コンバージョン／CRO · データ可視化 · 情報アーキテクチャ · i18n / ローカライゼーション（RTL） · AIプロダクトのUX（チャット、ストリーミング、エージェント型） · オンボーディングと権限リクエストの事前説明
✨ 仕上げ	熟練者レベルの仕上げ基準 · タイポグラフィの技巧 · アニメーションの技巧（イージング、スプリング、割り込み可能性） · UXライティングと認知負荷 · 0～40の評価基準 · クリーンでミニマルなアプリデザイン · デザインエンジニアリング（セマンティックHTML、CSSアーキテクチャ、コード内のトークン） · 倫理的なデザイン（ダークパターンの回避） · アイコングラフィ（アイコンシステムの選択と活用） · AIデフォルトの美学（生成インターフェースが採用しがちな定番のグラデーション、フォント、カードの装飾、コピー。各システム独自のドキュメントを出典として提示）
📚 書籍	名著の要点 — デザイン： Norman、Krug、Refactoring UI、デザイン心理学、グリッド／タイポグラフィ、インタラクションデザイン（Cooper/Tidwell）、感情的なデザイン（Walter/Norman） · マーケティング： Cialdini、Positioning、StoryBrand + Ogilvy、Hooked
🗺️ プロセス	プロダクトデザインとマーケティングサイトのロードマップ · デザインシステムの方法論（Atomic Design、コンポーネントAPI、ガバナンス） · デザインの引き継ぎ（Figma Dev Mode、Code Connect、デザイン↔開発）
📣 マーケティング	ブランディングとアイデンティティ · メールマーケティング · HTMLメール開発（Outlook、ダークモード、確実に表示されるメール） · 広告クリエイティブ · ペイウォールのベンチマーク（RevenueCat 2026） · グロースフレームワーク（ループ／AARRR／PLG） · 価格戦略 · 分析と実験 · 価値提案とJTBD · コンテンツと配信（トピッククラスター、コミュニティ、紹介） · App Store最適化（ASO）
🔎 SEO	テクニカルSEO（Core Web Vitals） · オンページSEOとE-E-A-T · デザイナー向けSEO
🤖 GEO	生成エンジン最適化 — ChatGPT / Perplexity / AI Overviewsでの可視性、llms.txt、引用の戦術
🔐 セキュリティ	ウェブセキュリティヘッダーとCSP — 厳格なnonce/hashポリシー、strict-dynamic、Trusted Types、HSTS、SRI、クロスオリジン分離、監査担当者が今も確認を求める旧式のヘッダー。すべての主張に仕様書またはベンダーのドキュメントを出典として付け、90日ごとに再検証します。
🖼️ パターンと事例	人気のアプリやサイトから調査した実際のパターン（Eコマースとチェックアウト、フィンテック／信頼構築のフローを含む）に加え、実際の画面例を集めた厳選ライブラリ
どのドキュメントのソースが検証され、どのドキュメントは検証されないのか。 96 件のドキュメントのうち、11 件は sources: がテストスイートによって階層化された許可リストと照合されます。対象は Apple のデザイン言語ガイド 6 件（apple-hig-liquid-glass、ios-app-design、macos-app-design、apple-accessibility、apple-shipping-readiness、wwdc-design-principles）と、security ドキュメント 5 件です。残りの 85 件はキュレーション済みですが、まだ検証されていません。それらにもアサーションを拡張するのは形式的な作業ではなく、独立した作業です。現在の測定では、85 件中 66 件が合計 282 件のソースで不合格になります。その内訳は、133 の異なるホストにまたがる URL 引用 227 件と、URL ではないためホストをチェックできないもの 55 件です（227 件と 55 件は 282 件の内訳であり、加算する 2 つの数値ではありません）。apple-intelligence-design と visionos-spatial-design は Apple 関連のドキュメントですが、検証対象には含まれていない点に注意してください。get_design_doc はソースの横に、ドキュメントがこの境界線のどちら側にあるかを表示するため、ここに戻って確認する必要はありません。

ワークフロー（/ プロンプト）—「…を作って」

質問への回答に加え、SaglitzDesign にはビルド全体を最初から最後までオーケストレーションするプロンプトも含まれています。Claude Code では、インストール方法に応じた名前で / メニューに表示されます。Claude Code プラグインとしてインストールした場合は /saglitzdesign:build_landing_page などになります。これらはプラグインコマンドで、各ワークフローにつき 1 つのファイルが commands/ に生成されます。サーバー単体でインストールした場合は /mcp__saglitzdesign__build_landing_page となり、メニューには saglitzdesign:build_landing_page (MCP) と表示されます。この表示も (MCP) の接尾辞を含めて入力できます。同じプロンプトにたどり着くための、少し回りくどい方法です。うまくいかないのは、接尾辞を省いた短縮形です。Claude Code は裸の server:prompt エイリアスを、Anthropic のファーストパーティコネクターにのみ使用します。URL は https で、api.anthropic.com 上の /v1/design/ 配下でなければなりません。他のサーバーには、stdio でもリモートでも、このエイリアスは割り当てられません（上記のプラグインの /saglitzdesign:build_landing_page はこのエイリアスに似ているだけで、プラグインコマンドの名前空間を使う別の仕組みです）。

これらのいずれかを呼び出すと、エージェントが手順全体を実行します。ロードマップ → ポジショニングとコピー → デザインシステムを生成（色、タイポグラフィ、レイアウト、エレベーション、トークン）→ 実例 → コンポーネントのレシピに基づいて実際のコードを記述 → 決定論的な検証ゲート（design_lint、audit_accessibility、audit_design_system、audit_ux_copy）を実行 → ブラウザーで開いてスクリーンショットを撮り、批評ルーブリックに照らして採点し、合格するまで反復します。

ワークフロー	内容
build_landing_page	コンバージョン重視のランディングページを、コピーを優先して設計・構築し、ビジュアル批評を繰り返します。
build_website	複数ページのマーケティングサイトを構築します。ポジショニング、IA、SEO/GEO、共通のデザインシステムに対応します。
build_mobile_app_ui	プラットフォームの適切な基準（HIG/Liquid Glass または Material 3）に沿って、iOS または Android の画面を構築します。
build_dashboard	情報量の多い SaaS ダッシュボード／アプリシェルを構築します。ナビゲーション、テーブル、空の状態などに対応し、KPI カードを貼り付けただけのマーケティングページにはしません。
critique_screenshot	**スクリーンショットを計測してから批評します。**固定の 0～40 の評価基準に照らし、実際の比率や色数、具体的な要素を挙げ、無駄を省きます。
review_paywall	実際の RevenueCat 2026 コンバージョンベンチマークに照らして、ペイウォール／サブスクリプションのオンボーディングを採点します。
design_review	既存のサイト／アプリを監査します。まず決定論的な監査ツールを実行し、計測値を最初に示したうえで、チェックリストと 0～40 の評価基準に基づいて重要度順に指摘します。
redesign	クラフト基準に沿って既存の UI を改善します（より大胆に／控えめに／コンバージョン率を高く）。一貫性スコア、批評スコア、Lint の指摘、コントラストの不備を計測して改善前後を比較します。
port_to_platform	既存の UI を別のプラットフォーム（iOS ↔ Android ↔ macOS ↔ Web）へ、画面ごとに移行します。意図と IA を引き継ぎ、コンポーネントは引き継ぎません。

たとえば、/saglitzdesign:build_landing_page フリーランサー向けのSaaS請求ツール のように入力してください。コマンド名以降のすべてが依頼内容となり、ワークフローが不足情報を確認してから構築します。/mcp__saglitzdesign__… 形式では、空白で区切られた最初の単語だけが依頼内容として扱われるため、依頼内容がフレーズの場合はプラグインコマンドを使ってください。コマンドはすべてユーザーが入力するものです。それぞれに disable-model-invocation が設定されているため、エージェントが自ら実行することはありません。文章で依頼すると、代わりにスキルが使われます。デザインレビュー、ランディングページのコンバージョン、Apple プラットフォームなど、スキルでも同じ分野の多くをカバーしますが、ここでの一連の構築ワークフローではなく、ガイダンスとして提供されます。saglitzdesign スキルのトリガー語にはペイウォールが含まれているため、ペイウォールについて文章で依頼するとスキルが起動します。ただし、スキルでは review_paywall の RevenueCat ベンチマークによる採点は行われません。これはコマンドを入力した場合のみ実行されます。

ビジュアル批評の反復では、接続されているブラウザツール（Claude in Chrome、Playwright、または chrome-devtools MCP）を使って、自身の出力を確認・改善します。ブラウザツールがない場合は、コードを直接レビューします。

ツール

ツール	機能
create_design_system	1回の呼び出しで基盤を構築します。 ブランドカラー＋雰囲気＋プラットフォームから、方針カード（変更せずに使う名前付きのデフォルト、判断事項としての書体の組み合わせ、特徴となる要素を1つ、シードがインディゴ／バイオレット／パープル系の場合は既成デザインに関する事実）に加えて、WCAG 検証済みのカラー（ライト＋ダーク）、組み合わせ済みフォント、アイコンライブラリ、モジュール式のタイプスケール、エレベーションランプ、そのまま貼り付けられるトークン、構築するコンポーネント、チェックリストを生成します。すべてが連携するように生成されます。
get_design_roadmap	プロセスを確認するなら、ここから始めてください。 プロジェクトの種類（ウェブサイト、ランディングページ、iOS／Android／macOS アプリ、SaaS ウェブアプリ）に応じた段階的な専門家向けプロセスです。各フェーズには目標、完了条件、読むべきドキュメントが明記されています。
search_design_knowledge	すべてのドキュメントを自然言語で検索し、最も関連性の高いドキュメントから該当するセクションを返します。
get_design_doc	ID を指定して、任意のドキュメントを全文取得します。
get_component_guidance	コンポーネントや画面（ボタン、フォーム、ペイウォール、ヒーロー、価格設定など）を詳しく解説します。仕様と実際のパターンを確認できます。
get_design_language	プラットフォーム／デザインシステムのリファレンス一式（Material 3、Liquid Glass、iOS／Android／macOS、Fluent 2、ウェブのトレンド、トークン）を提供します。
compare_design_languages	複数のプラットフォーム向けに構築していますか？ 1つの画面領域について、iOS／Android／macOS／ウェブの規約を並べて比較します（ナビゲーション、ボタン、シート、モーション、フォームなど）。移植時のルールと、明確な「移植してはいけない」リストも提供します。
get_design_examples	主要なアプリ／サイトから、パターンの実例を厳選して紹介し、それぞれの優れた点を説明します。（スクリーンショットはローカルでのみ利用できるアセットです。ビジュアル例を参照してください。）
design_review_checklist	プロジェクトの種類と重点分野（UI、UX、アクセシビリティ、SEO、GEO、コンバージョン、コピーライティング）に合わせた監査チェックリストを作成します。
seo_geo_guide	SEO と GEO のガイドを提供します。必要に応じてトピックを絞り込めます。
import_design_tokens	すでにデザインシステムがありますか？ CSS カスタムプロパティ、shadcn の :root ブロック、DTCG ファイル、またはテーマ JSON を貼り付けると、名前が付けられている役割、定義されていない役割、定義済みの組み合わせの WCAG チェックを確認できます。また、全体を CSS／Tailwind／SwiftUI／Compose／DTCG 形式で出力できます。generate_design_tokens の逆方向の処理です。ウェブのテーマを iOS に移行したり、既存のテーマを監査したりできます。読み取るのは名前付きトークンだけで、JS 設定は評価されません。
generate_design_tokens	アドバイスではなく、実際に使える成果物を生成します。 カラー／スペーシング／書体の仕様を、CSS 変数、Tailwind v4、SwiftUI、Jetpack Compose、W3C DTCG JSON に変換します。
audit_accessibility	WCAG 2.2 の決定的なチェックを実行します。カラーの組み合わせごとの正確なコントラスト比と、プラットフォームごとのタップ対象サイズを確認し、修正方法を提示します。
get_component_recipe	react-tailwind、html-css、SwiftUI、Compose 向けに、本番環境で使えるアクセシブルなコンポーネントのリファレンス コード（ボタン、入力欄、モーダル、トースト、カード、スイッチ、タブ、空状態、リスト行、ナビゲーション、検索、選択欄、テーブル、ツールチップ、フォーム、ページネーション、スケルトン、バッジ、パンくずリスト）を提供します。すべての状態、ARIA、キーボード操作、適切なモーションを含みます。generate_color_system が返すニュートラル、プライマリ、危険の各ランプである scales を渡すと、ダークモード用の色合いも含め、指定した色を使ったコードが返されます。
generate_color_system	ブランドカラー1色から、パレット一式を生成します。 50–950 のトーンスケール、調和のとれたニュートラルランプ、ブランドに調和するステータスカラー（危険／成功／警告）、ライト＋ダークのセマンティックトークンを生成します。テキスト／UI のすべての組み合わせは WCAG 検証済みで、自動修正されます。generate_design_tokens にそのまま渡せます。
suggest_font_pairing	雰囲気（SaaS、エディトリアル、太字、ネイティブなど）に合わせて、本番環境向けのフォントの組み合わせを厳選して提案します。見出し＋本文（＋等幅）に加え、そのまま貼り付けられる CSS スタック、ウェイト、選定理由、タイプスケールを提供します。
fix_contrast	コントラスト基準を満たさない色の組み合わせを修正します。色相／彩度を維持したまま、指定した WCAG 基準を満たす最も近いアクセシブルな色を計算し、不適合の報告だけでなく、修正後の値を返します。
suggest_icon_library	雰囲気／プラットフォーム（Lucide、Phosphor、Solar、SF Symbols、Material Symbols など）に合ったアイコンシステムを提案します。ライセンス、インストールコマンド、対応範囲、適合理由、使用ルールも確認できます。
generate_type_scale	モジュール式のタイプスケール（基準値 × 比率）から、行の高さ、字間、流動的な clamp() を含む名前付きの段階を生成します。CSS 変数＋Tailwind 形式で出力します。
generate_elevation_system	一貫性のあるレイヤー別のボックスシャドウランプ（フラット→モーダル）を、CSS 変数＋Tailwind 形式で生成し、ダークモードの指針も提供します。
generate_layout_system	ブレークポイント（各段階で変わる内容を含む）、コンテナ幅、カラムグリッド、内在サイズに応じて自動調整されるグリッド、コンテナクエリ、流動的なセクション間隔のスケールを生成します。CSS 変数＋Tailwind v4 形式で出力します。
generate_motion	イージング＋デュレーションのトークンと、そのまま貼り付けられるキーフレームアニメーション（フェード／スライド／スケール／スプリング／シマー）を、CSS、Framer Motion、SwiftUI 形式で生成します。モーションの軽減設定も含みます。
design_lint	HTML/CSS/JSX/Tailwind のスニペットを対象に、デザインと a11y のアンチパターン（値のハードコード、フォーカスの無効化、alt／ラベルの欠落、クリック可能な div、ラベルのない入力欄など）を行番号と修正案付きで検出します。タグを認識するため、書式が判定結果に影響することはありません。Markdown と構造化出力の両方を返します。検出結果、重大度の概要、確認できなかった項目を機械可読形式で示す notVisible リストが含まれます。
measure_screenshot	実際の画面を測定します。 PNG を渡すと、実際のパレットと色数、画面内の組み合わせの正確な WCAG コントラスト比、密度、構造上の検出結果（配置、リズム、グリッドから外れた間隔）をそれぞれ信頼度付きで報告します。また、目立つクラスターが Tailwind のインディゴ／バイオレット／パープル系にある場合は、既成デザインに関する事実も提示します。開いて共有できる、自己完結型の HTML レポートも生成します。PNG のデコードは純粋な Node.js で行い、ネットワークも依存関係も使用しません。
audit_project	スニペットではなく、実際のコードベースを監査します。 ディレクトリを指定すると、デザインソースを走査して全ファイルを lint し、プロジェクト全体の一貫性を評価します。単一ファイルの lint では見えない、ファイル間のずれも検出します。検出結果は問題の大きいファイルから順に、ファイル名と行番号付きで並び、確認対象外となった項目も明示します。Markdown と構造化出力の両方を返します。検出結果、重大度の概要、notVisible の機械可読リストに加え、実際に読み取ったファイル数とバイト数、サイズ超過でスキップしたファイルや開けなかったファイル、上限に達したかどうかを示す scan ブロックが含まれます。パスが存在しない場合やディレクトリでない場合は、空の監査結果ではなくエラー結果を返します。
audit_security	実際に出荷されるウェブプロジェクトやスニペットの欠陥を監査します。 欠落または弱い Content-Security-Policy、HSTS の不在、クロスオリジンのスクリプトに対する固定バージョン指定の欠如、混在コンテンツ、localStorage 内の認証情報、秘密情報らしい名前の NEXT_PUBLIC_／VITE_ 変数、サンドボックス化されていないサードパーティの iframe、ワイルドカードの postMessage、サニタイザーのない生 HTML の挿入先、本番用ソースマップ、無視設定されていない .env ファイルを検出します。ヘッダーの状態は、スタック内で宣言されている場所から推測します。対象には next.config、vercel.json、netlify.toml、_headers、staticwebapp.config.json、firebase.json、Nuxt の routeRules、Remix の headers エクスポート、SvelteKit の hooks.server.ts／kit.csp、Astro のミドルウェア、Next のミドルウェアまたは Next 16 での名称変更後の proxy.ts、Workers／Deno／Bun の new Response(…, { headers }) および new Headers({…})、任意の JSON またはオブジェクトリテラル内で引用符付きのヘッダー名プロパティ、オブジェクト名にかかわらずメソッド名が set、setHeader、append、header の呼び出し（res.set／res.setHeader、headers.set／headers.append、Fastify の reply.header、Hono の c.header、Koa の ctx.set）、および <meta http-equiv> が含まれます。これらはテキストとして読み取られ、評価されることはありません。ネットワークリクエストは行わず、確認できなかった内容も示します。Markdown と構造化出力の両方を返します。検出結果、重大度の概要、確認できなかった項目を機械可読形式で示す notVisible リストが含まれます。パスが存在しない場合やディレクトリでない場合は、空の監査結果ではなくエラー結果を返します。
audit_seo_geo	ソース内に実際に存在する SEO／GEO シグナルを監査します。 <title> の欠落や、検索結果で表示される範囲を外れたタイトル、同様の問題があるメタディスクリプション、複数の H1、見出しレベルの飛ばし、canonical の欠落、自己完結型ドキュメント内で相対パスとして記述された canonical、localhost やステージングを指したままの canonical、ページ自体を含んでいない hreflang セット、解析できない JSON-LD、@context／@type の未宣言、Google がリッチリザルトの提供を終了した型の宣言、alt テキストの欠落、robots.txt のクロールルール（ChatGPT、Claude、Perplexity、Google の AI サーフェスが使う AI クローラーを含む）、サイトマップを記載していない robots.txt、隣接する llms.txt の不在、スクリプト実行後にしか存在しないコンテンツを検出します。不在を指摘するのは、その不在を証明できる場合（自己完結型 HTML ドキュメント、またはディレクトリ全体）のみです。走査に上限がある場合、不在の指摘はすべて未確認の注記に格下げされます。ソースを読み取るだけで、測定は行いません。リクエストは行わないため、検出結果に Core Web Vitals の評価、インデックス登録状況、ランキング結果は含まれません。Markdown と構造化出力の両方を返します。検出結果、重大度の概要、確認できなかった項目を機械可読形式で示す notVisible リストが含まれます。
audit_performance	ソース内に実際に存在するパフォーマンスシグナルを監査します。 loading="lazy" によって読み込みが遅延される、または自身の fetchpriority と矛盾するヒーロー画像、フェッチ優先度が未指定の LCP 候補画像、HTML のプリロードスキャナーから見えない CSS またはインラインスタイルで宣言されたヒーロー背景、ボックス領域を確保する width／height または aspect-ratio がない画像、defer、async、type="module" のいずれも指定されていない <head> 内の <script src>、font-display のない @font-face、サードパーティのフォントホスト、そして「最小限にする」という方針を正当化できる範囲を超える種類のリモートドメインから読み込まれるスクリプトを検出します。ヒーローに関するルールは意図的に限定的です。対象は <main> 内の最初の画像で、ヘッダーのロゴと記事中盤の図は構造上除外されます。そのため、ヒーローに関する指摘がまったくないページもあり、その場合は問題なしと受け取られる余地を残さず、明示的に報告します。Core Web Vitals はフィールドデータです。このツールは何も読み込まず、時間計測も行いません。Markdown と構造化出力を返します。
audit_apple_ui	Apple の公式ドキュメントに照らして、iOS または macOS アプリを監査します。 Xcode プロジェクトのディレクトリを指定すると、プロジェクトが設定を宣言する4つの箇所、すなわち情報プロパティリスト、project.pbxproj 内の INFOPLIST_KEY_* ビルド設定、entitlements plist、各 colorset の Contents.json を読み取ります。これらと Swift のインポートからターゲットが iOS か macOS かを推測し、8つのルールを実行します。luminosity: dark の外観指定がないカスタム colorset、非推奨の UIRequiresFullScreen キー（どちらの表記も対象）、一方の capability でのみ宣言されたマイクエンタイトルメント、macOS での App Sandbox エンタイトルメントの欠落（欠陥ではなく、Mac App Store での配布に関する事実として報告）、さらに NavigationView、iOS でのみ対象となる .font(.system(size:))、数値で記述された色、ラベル全体が SF Symbol 1つである Button を検出します。プラットフォーム固有のルールは、シグナルから判断できない場合は常に無通知となります。レポートには判定結果と根拠となるシグナルが記載されるため、無通知が結果ではなく判定条件によるものだと分かります。ビルド、シミュレーターの実行、スクリーンショットの撮影は行いません。Markdown と構造化出力の両方を返します。検出結果、重大度の概要、scan ブロックに加え、このサーバーが提供する中で最も長い notVisible リストが含まれます。リストの各項目はすべて実行結果に基づいています。ディレクトリのみが対象です。code 引数、存在しないパス、またはファイルへのパスを渡した場合は、空の監査結果ではなくエラー結果を返します。
audit_android_ui	Material 3 と android-app-design に照らして、Android アプリを監査します。 プロジェクトまたはモジュールのディレクトリを指定すると、AndroidManifest.xml、リソース XML、Kotlin を読み取り、それらと Compose／Android のインポートからフォルダーが Android プロジェクトかどうかを推測し、6つのルールを実行します。非推奨で Android 16 では無視されるエッジツーエッジ無効化属性、予測型「戻る」の無効化、読み取ったファイルの中に values-night/ ファイルがない日中テーマ XML、Color(0x…) リテラル、fontSize = N.sp、Material 2 コンポーネントのインポートを検出します。Android のシグナルが見つからない場合、設定に関するルールはすべて無通知となります。レポートには判定結果と根拠となるシグナルが記載されるため、無通知が結果ではなく判定条件によるものだと分かります。ビルド、エミュレーターの起動、スクリーンショットの撮影は行いません。Markdown と構造化出力の両方を返します。検出結果、重大度の概要、scan ブロックに加え、機械可読な notVisible リストが含まれます。リストの各項目はすべて実行結果に基づいています。ディレクトリのみが対象です。code 引数、存在しないパス、またはファイルへのパスを渡した場合は、空の監査結果ではなくエラー結果を返します。
audit_design_system	ここに本当にシステムはありますか？ 実際の CSS／JSX を指定すると、一貫性スコアと、ばらつきの実態を取得できます。使用されている異なる色、サイズ、角丸、シャドウ、スペーシングの数、区別できない重複色、4pt グリッドから外れた値、トークンの採用状況を確認し、統合計画を立てられます。
audit_generic_design	生成されたインターフェースでよく使われる既定値を対象に監査します。 既成の Tailwind インディゴ／バイオレット／パープルのグラデーション（クラス、hex、OKLCH 形式）、ブランドを表現する画面で唯一宣言されている書体が Inter／Roboto／Open Sans／DM Sans／Plus Jakarta Sans であること、アイコンの代わりに絵文字を使うこと、ページ全体で繰り返される rounded-2xl ＋ shadow-lg ＋ 枠線付きカードのレシピ、グラデーション塗りの見出しテキスト、すべての見出しの上に付いたアイブロウラベル、backdrop-blur ＋ white/10 のグラスモーフィズムレシピ、3つ以上の animate-pulse／animate-shimmer プレースホルダー、ありきたりな煽り文句、過剰に重ねた補助副詞、すべての CTA が既成の文言セットから選ばれたページを検出します。各指摘は、クラス名、フレーズ、繰り返される構造など、ソースに関する事実であり、仕上がりが優れたデザインかどうかの評価ではありません。0〜100 のスコアは出現回数ではなく、異なるシグナルの数を数え、ルールとファイル名・行番号ごとに内訳を示します。審美眼に関する評価には design_review_checklist または get_design_doc("design-critique-scoring") と組み合わせてください。Markdown と構造化出力の両方を返します。検出結果、重大度の概要、機械可読な notVisible リスト、スコアの内訳に加え、ディレクトリモードでは読み取りが途中で切り詰められたことを示す scan ブロックが含まれます。パスが存在しない場合やディレクトリでない場合は、空の監査結果ではなくエラー結果を返します。
audit_ux_copy	客観的なコピー監査を行います。読みやすさ（Flesch）、文の長さ、受動態、専門用語、冗長な表現、ユーザー中心の度合い、弱い CTA を検出し、該当するフレーズと修正案を示します。
audit_ethical_design	ethical-design に定義された、名前付きの欺瞞的パターンの兆候をスニペットから監査します。 確認シェイミングを含む辞退文言（「いいえ、私は……が嫌いです」）、事前にチェックされたマーケティング／ニュースレター用チェックボックス、近くに有効な制約がない希少性や期限の表現、同等の名前が付いた拒否 विकल्पのない「すべて承諾」を検出します。各指摘は、フレーズや属性に関する事実であり、ビジネスへの評価ではありません。ソースを読み取るだけで、何も測定しません。スニペットのみが対象で、ディレクトリモードはありません。Markdown と構造化出力の両方を返します。検出結果、重大度の概要、機械可読な notVisible リストが含まれます。
list_design_knowledge	カテゴリ／プラットフォーム別に、ナレッジインデックス全体を閲覧できます。
knowledge_freshness	各ドキュメントの経過期間とカテゴリごとの陳腐化しきい値を報告し、ナレッジベースを最新の状態に保てるようにします。

リソース

ツールに加えて、ナレッジベースは MCP リソースとして公開されているため、これに対応するクライアント（Claude Desktop、Cursor）では、ツール呼び出しを使わずにドキュメントを直接 @ でメンションできます。ID の自動補完にも対応しています。

URI	内容
saglitzdesign://index	カテゴリごとのすべてのドキュメントと、プラットフォーム、最終確認日を含むインデックス全体です。
saglitzdesign://doc/{id}	ナレッジドキュメント1件の全文（全96件）です。id は自動補完されます。
saglitzdesign://recipe/{component}	コンポーネントの仕様と、利用可能なすべてのスタックでのリファレンス実装です。

ビジュアル例

get_design_examples は、実際のアプリやサイトの画面を集めたライブラリを提供します。 スクリーンショットは第三者のアセットであり、再配布されないため、公開されている npm パッケージには画像ではなく、注釈とソースへのリンクが含まれています。ツールはこの点を検出し、そうでないかのように装うのではなく、その旨を伝えます。リポジトリをクローンすると、ローカルの画像ライブラリを再構築できます。詳しくは scripts/regenerate-examples.md を参照してください。

インストール

要件： Node.js 20 以降。

npm から（クローンは不要）：

npx saglitzdesign-mcp

ソースから：

git clone https://github.com/HalidSaglam/saglitzdesign-mcp.git
cd saglitzdesign-mcp
npm install
npm run build

Claude Code

一度登録すれば（npm 経由、クローン不要）、すべてのプロジェクトで利用できます。

claude mcp add --scope user saglitzdesign -- npx -y saglitzdesign-mcp

または、リポジトリをクローンした場合は、ビルド済みファイルを指定します。

claude mcp add --scope user saglitzdesign node /absolute/path/to/saglitzdesign-mcp/dist/index.js

プラグインとして

1回のインストールですべての3つの要素が揃います。MCP サーバー、9つすべてのスキル（8つの詳細スキルと、それらに振り分ける包括スキル）、そして各ワークフロー用のスラッシュコマンドです。

claude plugin marketplace add HalidSaglam/saglitzdesign-mcp
claude plugin install saglitzdesign@saglitz

プラグインではサーバーとして npx -y saglitzdesign-mcp@latest を指定しているため、サーバー自体は引き続き npm から取得されます。スキルとコマンドはプラグイン内のファイルです。claude plugin details saglitzdesign@saglitz を実行すると、インストールされた内容を確認できます。

3つのインストール方法で、含まれる内容は同じではありません。

インストール	サーバー、ナレッジベース、レシピ	スキル	/saglitzdesign:… コマンド
claude plugin install saglitzdesign@saglitz	あり	9つすべて — 8つの詳細スキルと包括スキル	ワークフローごとに1つ
npx saglitzdesign-mcp / claude mcp add	あり	—	—
npx skills@latest add HalidSaglam/saglitzdesign-mcp	—	9つすべて — 8つの詳細スキルと包括スキル	—

npm パッケージの files: リストには dist/、knowledge/、recipes/ が含まれていますが、skills/ や commands/ は含まれていません。そのため、MCP のみをインストールした場合、すべてのツールとドキュメントは利用できますが、スキルやコマンドのファイルは含まれません。skills CLI はその逆で、各 SKILL.md をエージェントにコピーしますが、サーバーは含まれないため、別途インストールしない限り、スキルが参照するツールは利用できません。リポジトリをクローンするとすべてのソースを取得できますが、サーバーはそのままでは実行できません。dist/ は gitignore されているため、node dist/index.js を起動する前に、クローン先で npm install && npm run build を実行する必要があります。表に記載されているその他のファイルはすべて追跡対象で、クローン時に取得されます。

Claude Desktop

~/Library/Application Support/Claude/claude_desktop_config.json に追加します。

{
  "mcpServers": {
    "saglitzdesign": {
      "command": "npx",
      "args": ["-y", "saglitzdesign-mcp"]
    }
  }
}

Cursor / その他の MCP クライアント

stdio 経由で npx -y saglitzdesign-mcp を実行します（または、クローン先から node /absolute/path/to/dist/index.js を実行します）。

Node 20 以降が必要です。 警告は表示されますが、Node 18 でも実行できます。それより古いバージョンでは、ランチャーは構文エラーを出す代わりに、説明を表示して終了します。

サーバーを起動するのはクライアントであり、自分で起動する必要はありません。手動で実行すると、ステータスを表示した後、接続してこないクライアントからの標準入力を待ち続けます。一見ハングしているように見えますが、サーバーは正常に動作しています。

スキルとして（MCP サーバーなし）

軽量で自己完結したスキルをお探しですか？ 圧縮版の SaglitzDesign スキルを、skills互換のエージェントにインストールできます：

npx skills@latest add HalidSaglam/saglitzdesign-mcp

9つのスキルがあります。saglitzdesignは包括的なスキルで、独自の詳細なガイダンスは持たず、ほかの8つのうち適切なものに作業を振り分けます。ほかの8つ、clean-interface-design、landing-page-conversion、design-review、motion-and-animation、apple-platform-design、android-platform-design、design-system-audit、ship-quality-gateは、それぞれ単独で使えるガイダンスであり、より詳しい内容を参照できるフル版MCPにも案内します。skills/を参照してください。

各スキルはエージェントにコピーされ、その内容のハッシュはskills-lock.jsonに固定されるため、このリポジトリが変更されてもインストール済みのスキルは変わりません。新しいスキルや編集済みのスキルを取り込むには、上記のコマンドを再実行してください。

開発とデバッグ

npm run dev       # run from TypeScript via tsx
npm run inspect   # open the MCP Inspector UI

使い方

接続したら、エージェントに自然な言葉で話しかけるだけです。ツールを呼び出すタイミングはエージェントが判断します：

「saglitzdesignを使って、iOSのフィットネスアプリのデザインを計画してください。」 → get_design_roadmapが、各ステップで読むドキュメントを含む7フェーズの計画を返します。

「saglitzdesignを使って、コンバージョンの観点からランディングページをレビューしてください。」 → design_review_checklist（ランディングページ／コンバージョン）とget_design_examples。

「モバイルでは、プライマリボタンはどのように動作すべきですか？」 → get_component_guidanceが仕様、状態、ラベル、アンチパターンを返します。

「実際のペイウォールの例を見せてください。」 → get_design_examplesが注釈付きのスクリーンショットを返します。

「llms.txtとは何ですか？ どう設定すればよいですか？」 → seo_geo_guide（GEO）が、すぐに使える例とともに手法を返します。

独自のデザインルール

サーバーに独自のディレクトリを指定すると、そのドキュメントがベースに加わります。検索や閲覧が可能になり、依頼すればレビュー用チェックリストにも追加されます：

claude mcp add --scope user saglitzdesign \
  --env SAGLITZDESIGN_KNOWLEDGE_DIR=/path/to/our-design-rules \
  -- npx -y saglitzdesign-mcp

または、claude_desktop_config.json／任意のMCPクライアントで、commandとargsに加えて指定します：

"env": { "SAGLITZDESIGN_KNOWLEDGE_DIR": "/path/to/our-design-rules" }

複数のディレクトリを指定できます。区切り文字は、プラットフォーム上のPATHと同じです。

• 独自のルールが優先されます。 検索内容が、実際にドキュメント化した事項に関するものである場合、該当ドキュメントが最初に表示されます。これは、クエリの用語をどれだけ含んでいるかで判断されるため、短い社内ルールのファイルが長いリファレンスに埋もれることはありません。
• 同じIDは既存のものに置き換わります。 id: buttonsを持つファイルは、組み込みのファイルに取って代わります。これは意図的な動作であり、ひそかに起こるのではなく、起動時に通知されます。提供時には常にチームのドキュメントとして示されるため、独自の内容がプラットフォームのガイダンスを出典とするかのように引用されることはありません。
• **フロントマターのreview: [website, saas-web-app]**は、そのドキュメントを該当するプロジェクト種別のdesign_review_checklistに、厳選されたリストよりも優先して追加します。これにより、独自のルールが検索可能になるだけでなく、確実に適用されます。

インストール済みパッケージ内のファイルを編集しても、npm updateで削除されるまでしか保持されません。環境変数を使用してください。

このリポジトリへの追加

フロントマターを付けたMarkdownファイルを、knowledge/以下の任意の場所に配置します：

---
id: my-topic
title: "My Topic"
category: ux            # design-language | component | ux | seo | geo | pattern | craft | book | process | marketing | security
platform: both          # mobile | web | macos | both
tags: [tag1, tag2]
sources: ["https://…"]
updated: 2026-07-08
---

Content served verbatim to clients…

サーバーは起動時にすべての.mdをインデックス化します。コンテンツの変更に再ビルドは必要ありません（サーバーの再起動だけで済みます）。.claude/commands/内の/refresh-knowledgeコマンドを使うと、エージェントによって古くなったドキュメントを再調査できます。

ナレッジの構築方法

デザイン言語とSEO／GEOのドキュメントは、公式ドキュメントと最新の情報を調査して作成し、各ファイルのsourcesに出典を記載しています。実際のUIパターンは人気のアプリやウェブサイトを調査し、ビジュアル事例ライブラリも同じ方法で厳選しました。古典的なデザイン書やマーケティング書は、独自の規範的な要約にまとめており、原文は転載していません。

画像について：スクリーンショットファイルは、ローカルでの調査用素材です。このリポジトリにも、公開されるパッケージにも含まれません。画像がない場合、get_design_examplesは説明とソースへのリンクを表示する形に自動で切り替わります。ローカルの画像ライブラリを再構築する方法（または独自の事例を追加する方法）については、scripts/regenerate-examples.mdを参照してください。

見つける

公式 MCP レジストリおよびnpmにも掲載されています。

ライセンス

MIT © 2026 Saglitz Design.

knowledge/ 内のドキュメントは、各ファイルに出典を明記した独自の統合資料です。 参照されているスクリーンショットはこのリポジトリに含まれておらず、再配布できません。 NOTICE.mdをご覧ください。