Design Lounge

Design Lounge MCP

Design Lounge を MCP サーバーとして利用できます。エージェントは次のことができます。

• ライブラリからデザインする：543 件のパーツ概要、84 種類のテーマ、46 種類のフォントの組み合わせ、方向性の指示付きの 43 種類のレシピ、Lounge Icons、Sanzo Wada の配色を利用できます。毎回同じ方法で方向性を選び、サイトごとに見た目が似通わないようにします。
• AI らしさを取り除く：ありきたりなコピー、長いダッシュ、アイコンカードの 3 点セット、グラデーション、インディゴの配色、絵文字アイコン、架空の数値、固定されたテーマ・フォントの組み合わせ・ファミリーからの逸脱を取り除きます。
• 検索で見つけてもらい、引用される：SEO、AEO（回答エンジン）、GEO（ChatGPT、Claude、Perplexity、Gemini）に対応します。head、シェアカード、検索および AI クローラー向けの robots.txt、サーバー側でレンダリングされたテキスト、JSON-LD をチェックします。
• ページを確認する：Chromium で 1280×800 と 390×844 のサイズを使い、モーションを減らした状態で確認します。axe を実行し、フォント、ラベル、プライマリー要素、タップ対象のサイズを測定して、スクリーンショットを保存します。

サーバーはスキルと同じ skills/design-lounge フォルダーを読み込むため、ルールは一か所で管理されます。スキルが手順を示し、サーバーは文章だけではできない作業を行います。検索、履歴に基づいた決定的な選択、すべてのパーツ・テーマ・フォントの組み合わせの画像表示、ページを読み込んでレンダリングするチェックなどです。

スキルも一緒にインストールされます

サーバーをインストールすると、スキルもインストールされます。サーバーの起動時に、スキルが ~/.agents/skills/design-lounge に配置され、マシン上の各クライアントのスキルフォルダーにもリンクされます。対象は Claude Code（~/.claude/skills）、Cursor（~/.cursor/skills）、Codex（~/.codex/skills）です。これは skills CLI が使うものと同じ構成です。スキルを読み込むクライアントは、デザインを始める前に手順全体を利用できます。初回起動後に、クライアントを一度再読み込みしてください。

• サーバーの更新時に、サーバー自身のコピーも更新されます。
• npx skills add や手動編集など、別の方法でインストールされたコピーには手を加えず、その旨を通知します。install_skill に replace: true を指定すると、サーバーのコピーに置き換えられます。
• install_skill に project_path を指定すると、プロジェクトの .claude/skills、.cursor/skills、.agents/skills にもコピーされます。プロジェクトのスキルのみを読み込むクライアント向けです。
• スキルに対応していないクライアントでは、start_design が守るべきルール（優先されるのはそれらの文言、Rules リスト、Look の失敗項目です）を同じファイルから読み込んで返し、残りは read_guide で提供します。
• DESIGN_LOUNGE_SKILL_INSTALL=off を指定すると、インストールが無効になります。

エージェントに追加する

Claude Code

claude mcp add design-lounge --scope user -- npx -y design-lounge-mcp@latest

Cursor（~/.cursor/mcp.json）、Windsurf、Claude Desktop（claude_desktop_config.json）、および次の形式を受け取るその他のクライアント：

{
  "mcpServers": {
    "design-lounge": { "command": "npx", "args": ["-y", "design-lounge-mcp@latest"] }
  }
}

VS Code（.vscode/mcp.json）：

{ "servers": { "design-lounge": { "type": "stdio", "command": "npx", "args": ["-y", "design-lounge-mcp@latest"] } } }

Codex（~/.codex/config.toml）：

[mcp_servers.design-lounge]
command = "npx"
args = ["-y", "design-lounge-mcp@latest"]

@latest を指定すると、起動のたびに新しいリリースがあるか確認されるため、再インストールしなくてもライブラリが更新されます。初回起動後にクライアントを一度再読み込みし、サーバーがインストールしたスキルを読み込ませてください。

レンダリングを使ったチェック（スクリーンショット、axe、測定したラベルとボタン、テーマボード、フォント見本）には、ヘッドレス Chromium が必要です。エージェントに install_browser を一度実行するよう依頼するか（約 100 MB）、npx playwright install chromium --only-shell を実行してください。これがなくてもほかのチェックはすべて実行され、レポートにはページを確認していないことが記載されます。

ホステッド版（Claude.ai、ChatGPT、およびローカルプログラムを実行できないその他のクライアント向け）：https://www.designlounge.live/api/mcp をカスタムコネクターとして追加してください（Streamable HTTP、サインイン不要）。ライブラリ、start_design、選択機能、公開 URL または貼り付けた HTML の静的レビューを利用できます。ファイルパス、履歴ファイル、スキルとブラウザーのインストール、レンダリングを使ったチェックなど、マシン上での操作が必要な機能は含まれません。取得するのは公開アドレスのみで、アドレスごとに 1 分間あたり 60 リクエストまで許可されます。最近の選択履歴を保持している場合は、独自の履歴を history として渡してください。

リポジトリをクローンして実行する場合は、cd mcp && pnpm install を実行してから、コマンドとして node /path/to/designs/mcp/src/server.mjs を使用してください。

ツール

ツール	機能
start_design	最初に呼び出します。ユーザーの言葉（フロー、モード、指定されたスタイル、落ち着きを表す言葉）を読み取り、レシピを順位付けし、プロジェクトフォルダーと最近の選択を確認して、概要と手順を返します
get_recipe	レシピの手順を返します。それぞれ、履歴によって選択できない場合はその旨が示されます
pick_direction	落ち着きを表す言葉によるフィルター、履歴、グループの確認、番号の順に処理します。条件に合う方向性を渡します
check_pick	ヒーロー、作品、フッター、形状、フレームの独自性を確認します。「異なる点」の行を返します
record_pick	主張済みまたは完成済みの行を ~/.design-lounge/history.jsonl に追加し、以前の主張を報告します
search_pieces / get_piece	作品を検索し、その概要を読み取ります。get_piece はデモのサムネイルを添付し、demo: true を指定すると HTML ソースも追加します。images: true を指定した search_pieces は、最初の 6 件のサムネイルを添付します
browse_library	ムード別のテーマと組み合わせに加え、ファミリー、レシピ、カテゴリ、コレクション、種類、モーション、スケールを閲覧します
get_theme / get_pairing / get_family	固定されたトークンとルールを CSS として返します。テーマには各役割を示すボードが、組み合わせには書体見本が付属します
get_icons / search_wada	Lounge Icons を SVG で取得します。Wada の組み合わせを単語または最も近い hex 値で検索します
read_guide	任意のメソッドファイル、またはその一部を読み取ります
review_page	デザイン、アクセシビリティ、SEO、AEO、GEO をまとめて確認します。問題が最初に示され、それぞれに根拠と修正方法が付属します。ウェブとスマートフォンのフレームは画像で返されます
install_skill	スキルをプロジェクトにインストールするか、別の方法でインストールされたユーザー用コピーを置き換えます
install_browser	レンダリング後のチェックで使用するヘッドレス Chromium を一度ダウンロードします
audit_slop	デザインのみを確認します。AI らしさが出てしまう表現とキットからの逸脱を検出します
audit_search	SEO、AEO、GEO のみを確認します
suggest_schema	ページ上の事実のみをもとに JSON-LD を作成し、不足しているフィールドを一覧表示します

すべてのレビュー用ツールは、path（ファイル、または index.html を含むフォルダー）、url（公開 URL または localhost）、あるいは html を受け取ります。path の場合、ページと同じ階層または上位階層にある DESIGN.md を読み取り、固定されたテーマ、組み合わせ、ファミリー、Free モード、指定された美的スタイルを確認します。指定された美的スタイルは、記載された禁止事項を解除します。

サーバーは、design、review、deslop の 3 つのプロンプトと、lounge://guide/<file> のリソースとしてメソッドファイルも提供します。

書き込まれる内容と、マシンの外部に送信される内容

• スキル。 起動時に、スキルを ~/.agents/skills/design-lounge に書き込み、利用中のクライアント向けに ~/.claude/skills、~/.cursor/skills、~/.codex/skills へリンクします。このツールが作成していないコピーが置き換えられることはありません。DESIGN_LOUNGE_SKILL_INSTALL=off を設定すると無効になります。削除するには、これらのフォルダーを削除してください。
• 最近の選択。 record_pick は ~/.design-lounge/history.jsonl に行を追加するため、作成する 2 つのサイトのデザインが似通うことはありません。このファイルを読み取るのはこのツールだけです。
• キャッシュされた画像。 テーマボードと書体見本は ~/.cache/design-lounge/boards にキャッシュされます。スクリーンショットは一時フォルダー、または out_dir に保存されます。
• ホストされたエンドポイント。 データは保持しません。リクエストごとに新しいサーバーが起動し、レビュー対象のページは取得後に破棄されます。
• ネットワーク。 レビューでは、指定したページ、そのスタイルシート、robots.txt、sitemap.xml、llms.txt、共有用画像を、お使いのマシンから取得します。書体見本の読み込みには Google Fonts を使用します。サムネイルとデモは同梱されており、不足しているものがある場合に限り designlounge.live に問い合わせます。Design Lounge に送信される情報はなく、トラッキングもありません。

設定

変数	デフォルト
DESIGN_LOUNGE_SKILL	同梱の skill/、次に ../skills/design-lounge
DESIGN_LOUNGE_HISTORY	~/.design-lounge/history.jsonl
DESIGN_LOUNGE_SKILL_INSTALL	on。スキルのインストールを省略するには off を設定します
DESIGN_LOUNGE_ASSETS	同梱の assets/、次にリポジトリの public/thumbs と src/demos、その次に公開サイト
DESIGN_LOUNGE_CACHE	レンダリング済みテーマボードと書体見本の保存先 ~/.cache/design-lounge/boards

開発

pnpm test                              # unit tests and a stdio round trip
pnpm release patch --dry-run           # sync the skill, test, and pack, without publishing
node test/client.mjs                   # list the tools
node test/client.mjs review_page '{"path":"test/fixtures/slop.html"}'

pnpm release patch（または minor、major、x.y.z。npm の 2FA を使用する場合は --otp <code>）を実行すると、ライブラリからスキルを同期し、テストを実行して、package.json と server.json のバージョンを同時に更新し、npm と MCP Registry に公開してからコミットとタグ付けを行います。プッシュは行いません。

pnpm pack を実行すると、まずスキルフォルダーを skill/ に、サムネイルとデモを assets/ にコピーします（scripts/bundle.mjs）。そのため、公開パッケージにはライブラリと画像が含まれます。パッケージのサイズは約 12 MB です。

Susan Acharya による Design Lounge を使用してデザインしました。