Golden-ratio design math: spacer calculator, spacing scale, grid widths, CSS vars, Tailwind setup.
MCPpedia last refreshed this data
app.goldenratio/mcp is an MCP server that golden-ratio design math: spacer calculator, spacing scale, grid widths, CSS vars, Tailwind setup. Its tool list has not been published yet over http, requires no API key, and scores 43/100 on MCPpedia's security, maintenance and efficiency rubric.
Config is the same across clients - only the file and path differ.
{
"mcpServers": {
"goldenratio-app": {
"url": "https://mcp.goldenratio.app/mcp"
}
}
}Are you the author?
Add this badge to your README to show your security score and help users find safe servers.
Golden-ratio design math: spacer calculator, spacing scale, grid widths, CSS vars, Tailwind setup.
This server supports HTTP transport. Be the first to test it - help the community know if it works.
Five weighted categories - click any category to see the underlying evidence.
No known CVEs.
No package registry to scan.
Be the first to review
Have you used this server?
Share your experience - it helps other developers decide.
Sign in to write a review.
Others in design
Design tokens from any live site: colours, type, spacing, components, drift against a baseline.
Draw and visually collaborate with your agents on tldraw's canvas.
MeiGen-AI-Design-MCP — Turn Claude Code / OpenClaw into your local Lovart. Local ComfyUI, 1,400+ prompt library, multi-direction parallel generation.
Inspect and edit Three.js scenes, materials, shaders, lights in real time from any AI agent
MCP Security Weekly
Get CVE alerts and security updates for app.goldenratio/mcp and similar servers.
Start a conversation
Ask a question, share a tip, or report an issue.
Sign in to join the discussion.
An MCP server for goldenratio.app. Agents can use the site's golden-ratio design tools: the Golden Calculator, the golden spacing scale, the golden grid, the CSS variables and the Tailwind plugin setup.
The math is the site's own code, unedited:
src/site/calc.js is a byte-for-byte copy of the site's src/utils/calc.js (the Golden Calculator).src/site/tailwindcss-golden-ratio.cjs is a byte-for-byte copy of index.js from tailwindcss-golden-ratio 0.3.5, the plugin the site's tailwind.config.js loads for every spacing value, grid width and CSS variable. The server runs that file as-is and calls its theme functions the way Tailwind does.src/site/grid-examples.json and src/site/spacing-cheatsheet.json are pulled out of the site's Grid.vue and Spacing.vue by the scripts in scripts/.Every output was checked against the live site (see Verification).
The server is read-only. It needs no account and no secrets, stores nothing, and never calls goldenratio.app.
Remote endpoint: https://mcp.goldenratio.app/mcp (Streamable HTTP, stateless, no auth, 120 requests a minute per IP). The original address, https://goldenratio-mcp.fly.dev/mcp, still works and serves the same server. Use of the hosted endpoint is covered by Hosted service.
# 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"
Add this to ~/.cursor/mcp.json (or a project's .cursor/mcp.json):
{
"mcpServers": {
"goldenratio-app": { "url": "https://mcp.goldenratio.app/mcp" }
}
}
For local stdio, use { "command": "node", "args": ["/absolute/path/to/goldenratio-mcp/dist/stdio.js"] }.
Grok Bot uses the same thing. Add a custom MCP connector with the URL https://mcp.goldenratio.app/mcp and no auth.
Add a remote (Streamable HTTP) server with the URL above. If the client only runs stdio servers, bridge it with npx -y mcp-remote https://mcp.goldenratio.app/mcp, or run node dist/stdio.js from a local build.
| Tool | Site feature | What it returns |
|---|---|---|
golden_calculator | Golden Calculator | Stack spacers 1-11 on a left and right side. Returns whether they're equal and every combination that makes the shorter side match ("Try"), plus what the site shows under each column. The site starts at left [6, 5, 6]. |
golden_spacing | Spacing cheatsheet | Spacers 1-11, half-1..11 and double-1..11 with exact values, px, CSS variable names and Tailwind keys, for any spacer_base / spacer_unit / prefix. With the defaults it also returns the site's rounded cheatsheet table. |
golden_grid | Golden Grid | w-grp-*, w-grp-half-*, w-grp-double-* widths (optionally in px for a container), the starter .container / .row CSS, all 38 example rows from the page with their totals, and a check of your own row. |
golden_css_variables | Site stylesheet | The :root block of --golden-ratio-* variables exactly as the site ships it (css, minified or json). |
tailwind_plugin_setup | "Get Started" on the home page | Install command and tailwind.config.js for tailwindcss-golden-ratio, its options, and the exact theme values it generates (spacing, scale, fontSize extras, borderWidth, lineHeight). |
golden_ratio_steps | Home page explainer / Alfred workflow | Step any number up or down by 1.61803398875. |
All tools are annotated readOnlyHint: true.