goldenratio.app

goldenratio-mcp

适用于 goldenratio.app 的 MCP 服务。Agent 可以使用该网站的黄金比例设计工具：黄金计算器、黄金间距比例、黄金网格、CSS 变量和 Tailwind 插件配置。

数学计算使用网站自身的代码，未经修改：

• src/site/calc.js 与网站的 src/utils/calc.js（黄金计算器）逐字节相同。
• 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 客户端

添加远程（Streamable HTTP）服务，并使用上述 URL。如果客户端只能运行 stdio 服务，可以通过 npx -y mcp-remote https://mcp.goldenratio.app/mcp 进行桥接，或者在本地构建后运行 node dist/stdio.js。

工具

工具	网站功能	返回内容
golden_calculator	黄金计算器	在左右两侧堆叠 1-11 号间距块。返回两侧是否相等，以及所有能让较短一侧匹配的组合（“Try”），并返回网站在每列下方显示的内容。网站默认从左侧 [6, 5, 6] 开始。
golden_spacing	间距速查表	提供 1-11、半个 1-11 和两倍 1-11 的间距块及其精确值、px、CSS 变量名和 Tailwind 键，适用于任意 spacer_base / spacer_unit / prefix。使用默认值时，还会返回网站上的四舍五入速查表。
golden_grid	黄金网格	返回 w-grp-*、w-grp-half-*、w-grp-double-* 宽度（可选返回容器的 px 值）、初始 .container / .row CSS、页面上的全部 38 个示例行及其总值，并检查你自己的行。
golden_css_variables	网站样式表	网站原样提供的 :root 中 --golden-ratio-* 变量块（css、minified 或 json 格式）。
tailwind_plugin_setup	首页上的“Get Started”	tailwindcss-golden-ratio 的安装命令和 tailwind.config.js、选项，以及其生成的精确主题值（spacing、scale、fontSize 额外值、borderWidth、lineHeight）。
golden_ratio_steps	首页说明 / Alfred 工作流	按 1.61803398875 的倍数向上或向下计算任意数字。

所有工具均标注为 readOnlyHint: true。

未涵盖内容

• 计算器的纸屑效果、颜色和按钮 UI。工具会返回页面显示的相同状态。
• Alfred 工作流下载本身。golden_ratio_steps 执行相同的数学计算。
• 三个工具页面之外的任何内容（首页文案、页眉、页脚）。

有意保留的网站特性

• --golden-ratio 的值为 1.61803398875px。该插件传递的是不带单位的比率，而 Tailwind 1 会为不带单位的数字添加 px。--gr 是不带单位的比率。golden_css_variables 会复现这一行为，使其输出与网站逐字节一致。
• Spacing 页面中的表格经过手动取整（例如，间距 5 显示为 14.828px，精确值为 14.8328px）。golden_spacing 会同时返回两种值：values 是网站 CSS 使用的精确数字，site_cheatsheet 是页面上显示的表格。
• golden_calculator 中的列高是精确计算后取整到 0.1px 的值。网站测量的是渲染后的高度，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 地址保留在内存中约一分钟，随后将其删除。此服务托管于 Fly.io，由其路由流量并根据自身的隐私政策进行处理。我们不会出售任何数据。

许可证

MIT，版权所有（c）2026 Brandname Maker LLC，以 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（min）中的 :root 块与网站线上样式表中的对应内容完全一致。
• 所有 33 个 w-grp-* 宽度均与线上 CSS 匹配。所有 33 个 --golden-ratio-* 值均匹配，且每个 .h-N 工具类都指向对应的变量。
• Spacing 页面的两张表格均与 site_cheatsheet 逐单元格匹配。
• Grid 页面的 38 个示例行均与 site_examples 匹配（行类和列类）。
• 检查了 49 种计算器状态：网站的初始状态、8 个手选案例和 40 个随机案例，每种状态均通过点击网站按钮设置。两侧的相等／不相等结果、“Try”／“Using”标题以及每个列出的组合均匹配。高度相差不超过 0.1px。