goldenratio.app

goldenratio-mcp

goldenratio.app 用の MCP サーバーです。エージェントは、サイトの黄金比デザインツール（Golden Calculator、黄金比スペーシングスケール、黄金比グリッド、CSS 変数、Tailwind プラグインのセットアップ）を利用できます。

計算には、サイト独自のコードをそのまま使用しています。

• src/site/calc.js は、サイトの src/utils/calc.js（Golden Calculator）のバイト単位で同一のコピーです。
• src/site/tailwindcss-golden-ratio.cjs は、tailwindcss-golden-ratio 0.3.5 の index.js のバイト単位で同一のコピーです。このプラグインは、サイトの tailwind.config.js がすべてのスペーシング値、グリッド幅、CSS 変数に対して読み込みます。サーバーはこのファイルをそのまま実行し、Tailwind と同じ方法でテーマ関数を呼び出します。
• src/site/grid-examples.json と src/site/spacing-cheatsheet.json は、scripts/ 内のスクリプトでサイトの Grid.vue と Spacing.vue から抽出したものです。

すべての出力をライブサイトと照合済みです（検証を参照）。

サーバーは読み取り専用です。アカウントやシークレットは不要で、何も保存せず、goldenratio.app にアクセスすることもありません。

リモートエンドポイント： https://mcp.goldenratio.app/mcp（Streamable HTTP、ステートレス、認証不要、IP ごとに毎分 120 リクエスト）。元のアドレス https://goldenratio-mcp.fly.dev/mcp も引き続き利用でき、同じサーバーを提供します。ホストされたエンドポイントの利用については、ホストサービスを参照してください。

インストール

Claude Code

# remote (nothing to install)
claude mcp add --transport http goldenratio-app https://mcp.goldenratio.app/mcp

# or local stdio
git clone https://github.com/truefrontier/goldenratio-mcp && cd goldenratio-mcp && npm install && npm run build
claude mcp add goldenratio-app -- node "$PWD/dist/stdio.js"

Cursor / Grok Bot

~/.cursor/mcp.json（またはプロジェクトの .cursor/mcp.json）に以下を追加します。

{
  "mcpServers": {
    "goldenratio-app": { "url": "https://mcp.goldenratio.app/mcp" }
  }
}

ローカルの stdio を使用する場合は、{ "command": "node", "args": ["/absolute/path/to/goldenratio-mcp/dist/stdio.js"] } を使用してください。

Grok Bot でも同じ設定を使用します。カスタム MCP コネクターを追加し、URL に https://mcp.goldenratio.app/mcp を指定して、認証は設定しないでください。

その他の MCP クライアント

上記の URL を指定して、リモート（Streamable HTTP）サーバーを追加します。クライアントが stdio サーバーのみを実行できる場合は、npx -y mcp-remote https://mcp.goldenratio.app/mcp でブリッジするか、ローカルビルドから node dist/stdio.js を実行してください。

ツール

ツール	サイトの機能	返される内容
golden_calculator	Golden Calculator	左右にスペーサー 1～11 を積み重ねます。左右が等しいかどうかと、短い側と一致するすべての組み合わせ（「試す」）に加え、各列の下にサイトが表示する内容を返します。サイトでは左側の初期値は [6, 5, 6] です。
golden_spacing	スペーシング早見表	任意の spacer_base / spacer_unit / prefix に対して、スペーサー 1～11、half-1..11、double-1..11 の正確な値、px 値、CSS 変数名、Tailwind キーを返します。デフォルト値を使用した場合は、サイトの丸め処理済み早見表も返します。
golden_grid	Golden Grid	w-grp-*、w-grp-half-*、w-grp-double-* の幅（コンテナーに対する px 表示も指定可能）、基本の .container / .row CSS、ページにある 38 個すべてのサンプル行とその合計、自分で指定した行のチェック結果を返します。
golden_css_variables	サイトのスタイルシート	サイトに含まれる --golden-ratio-* 変数の :root ブロックをそのまま返します（css、minified、または json）。
tailwind_plugin_setup	ホームページの「Get Started」	tailwindcss-golden-ratio のインストールコマンドと tailwind.config.js、オプション、および生成される正確なテーマ値（spacing、scale、fontSize extras、borderWidth、lineHeight）を返します。
golden_ratio_steps	ホームページの解説 / Alfred ワークフロー	任意の数値を 1.61803398875 倍、またはその逆数倍にします。

すべてのツールには readOnlyHint: true が注釈されています。

対象外

• 計算ツールの紙吹雪、色、ボタンの UI。ツールはページが表示するものと同じ状態を返します。
• Alfred ワークフローのダウンロード自体。golden_ratio_steps は同じ計算を行います。
• 3 つのツールページ以外のもの（ホームページの文章、ヘッダー、フッター）。

意図的に維持しているサイトの仕様

• --golden-ratio は 1.61803398875px として出力されます。プラグインは比率を単位なしの数値として渡し、Tailwind 1 は単位なしの数値に px を追加します。--gr は単位なしの比率です。golden_css_variables はこれを再現するため、出力はサイトとバイト単位で一致します。
• Spacing ページの表は手作業で丸められています（たとえば、spacer 5 は 14.828px と表示されますが、正確な値は 14.8328px です）。golden_spacing は両方を返します。values はサイトの CSS で使われている正確な数値で、site_cheatsheet は掲載されている表です。
• golden_calculator の列の高さは、正確な計算値を小数第1位に丸めたものです。サイトではレンダリング後の高さを測定し、Chrome が 1/64px 単位で丸めるため、両者に 0.1px の差が生じる場合があります。一致するかどうか、および等しい／等しくないという判定は同じです。
• このプラグインは、サイトと同じく Tailwind CSS 1.x を対象としています（tailwindcss ^1.4）。

ホスト型サービス

https://mcp.goldenratio.app/mcp のエンドポイント（https://goldenratio-mcp.fly.dev/mcp からもアクセス可能）は、保証なし、現状のまま無料で提供されています。予告なく変更、レート制限、または停止される場合があります。

許容される利用。 サービスを悪用したり、過負荷にしたり、レート制限を回避しようとしたり、違法な用途に使用したりしないでください。そのような場合、該当するトラフィックをブロックすることがあります。

データ。 このサーバーではアカウントは不要です。送信されたデータは保存されず、リクエストログや IP ログも記録されません。レート制限を適用するため、各クライアントの IP アドレスを約 1 分間メモリに保持し、その後破棄します。このサービスは Fly.io でホストされており、トラフィックは同社によってルーティングされ、同社のプライバシーポリシーに従って処理されます。データを販売することはありません。

ライセンス

MIT、Copyright (c) 2026 Brandname Maker LLC d/b/a True Frontier。サードパーティに関する通知は THIRD_PARTY.md に記載されています。

goldenratio.app と True Frontier の名称およびロゴは、このライセンスの対象外です。

開発

npm install
npm run build        # tsc, then copies src/site into dist/site unchanged
npm test             # calls every tool through a real MCP client over stdio
node scripts/smoke.mjs https://mcp.goldenratio.app/mcp   # same, against the remote
npm run start:http   # local Streamable HTTP on :8080/mcp
npm run extract      # regenerate the JSON data from a ../goldenratio-app checkout

デプロイ：fly deploy（アプリ goldenratio-mcp。fly.toml を参照してください）。

検証

2026年10月26日に、稼働中のサイトを対象にヘッドレス Chrome で検証しました。152項目すべてが完全に一致しました。

• golden_css_variables の :root ブロック（min）は、サイトの稼働中のスタイルシートのものと同一です。
• 33個すべての w-grp-* の幅が稼働中の CSS と一致します。33個すべての --golden-ratio-* の値が一致し、各 .h-N ユーティリティは対応する変数を参照しています。
• Spacing ページの両方の表は、セル単位で site_cheatsheet と一致します。
• Grid ページの38行のサンプルは、site_examples（行クラスと列クラス）と一致します。
• 電卓の状態を49種類検証しました。サイトの初期状態、手動で選んだ8ケース、ランダムな40ケースを、それぞれサイトのボタンをクリックして設定しました。等しい／等しくない、「Try」／「Using」の見出し、一覧表示されるすべての組み合わせが、両方で一致しました。高さの差は0.1px以内でした。