Saglitzdesign

SaglitzDesign MCP

An expert design & marketing brain for your AI coding agent.

A Model Context Protocol server that gives Claude, Cursor, and any MCP client expert‑level guidance on web, iOS, Android and macOS design — plus the UX, copywriting, SEO, GEO and marketing knowledge that makes a product actually convert.

96 curated knowledge documents · 36 tools · 9 build/review/port workflows · MCP resources with id autocomplete · a one‑call design‑system builder · real token/color/type/elevation/motion/a11y generators · design & UX‑copy linters · production component recipes · phased roadmaps · real‑world visual examples

Why · What's inside · Tools · Resources · Install · Usage · Your own rules · Changelog · License

Why

LLMs are confidently wrong about design. They reach for defaults, invent outdated specs, and give generic "make it clean and modern" advice. SaglitzDesign replaces that with a curated, sourced, prescriptive knowledge base your agent can query on demand — the kind of guidance you'd get from a senior product designer, a conversion copywriter, and a technical SEO all at once.

Ask your agent to design a paywall, audit a landing page, or plan an iOS app, and it pulls concrete rules ("44pt minimum touch target", "one primary button per screen", "LCP ≤ 2.5s"), real patterns from top apps, and a phased roadmap — instead of guessing.

• Runtime‑independent. The server reads only local files. No external API, no account, nothing to configure. It just works, offline.
• Local by design. It speaks MCP over stdio only and runs as a child process of your MCP client. There is no HTTP or SSE transport, so it cannot be hosted remotely or reached over a network — which is also why your prompts and code never leave your machine.
• Prescriptive, not vague. Every doc is written as rules an agent applies verbatim — numbers, thresholds, do/don't lists, anti‑patterns.
• Grounded. Design‑language specs from official sources; patterns studied from real top apps and sites; classics distilled from the actual books.

What's inside

96 knowledge documents across 11 categories:

Which documents' sources are enforced, and which are not. Of the 96 documents, 11 have their sources: checked by the test suite against a tiered allowlist — the six Apple design‑language guides (apple-hig-liquid-glass, ios-app-design, macos-app-design, apple-accessibility, apple-shipping-readiness, wwdc-design-principles) and the five security documents. The other 85 are curated but not yet checked, and extending the assertion to them is its own piece of work rather than a formality: measured today, 66 of the 85 would fail on 282 sources between them — 227 URL citations across 133 distinct hosts, plus 55 that are not URLs at all and so have no host to check. (The 227 and the 55 are the two halves of the 282, not two figures to add.) Note that apple-intelligence-design and visionos-spatial-design are Apple‑topic documents that sit outside the enforced set. get_design_doc prints which side of this line a document is on, next to its sources, so you never have to come back here to find out.

Workflows (/ prompts) — "build me a…"

Beyond answering questions, SaglitzDesign ships prompts that orchestrate an entire build end‑to‑end. In Claude Code they appear in the / menu under a name that depends on how you installed it. Installed as the Claude Code plugin they are /saglitzdesign:build_landing_page and so on — plugin commands, one generated file per workflow in commands/. With the server installed on its own they are /mcp__saglitzdesign__build_landing_page, which the menu labels saglitzdesign:build_landing_page (MCP). That label is typeable too, (MCP) suffix and all — it is just a clumsier way to reach the same prompt. What does not work is that short form with the suffix dropped: Claude Code hands the bare server:prompt alias to first‑party Anthropic connectors only — the URL has to be https, on api.anthropic.com, under /v1/design/ — and no other server gets one, stdio or remote. (The plugin's /saglitzdesign:build_landing_page above only looks like that alias — it is a plugin command namespace, a different mechanism.)

Invoke one and the agent runs the full method — roadmap → positioning & copy → generates the design system (color, type, layout, elevation, tokens) → real examples → writes the actual code from the component recipes → runs the deterministic verify gate (design_lint, audit_accessibility, audit_design_system, audit_ux_copy) → opens it in a browser, screenshots, scores it against the critique rubric, and iterates until it passes.

Just type, e.g., /saglitzdesign:build_landing_page a SaaS invoicing tool for freelancers — everything after the command name becomes the brief, and the workflow asks for anything missing, then builds it. The /mcp__saglitzdesign__… form takes only the first whitespace‑separated word as its brief, so use the plugin command whenever the brief is a phrase. These are yours to type: every command carries disable-model-invocation, so the agent never starts one on its own. Asked in prose it reaches for the skills instead, and they cover much of the same ground — design review, landing‑page conversion, Apple platforms — as guidance rather than as this orchestrated build. The saglitzdesign skill's own trigger vocabulary names paywalls, so prose about one does reach a skill; what no skill carries is review_paywall's RevenueCat benchmark scoring, which runs only when you type it.

The visual critique loop uses whatever browser tool is connected (Claude in Chrome, Playwright, or chrome‑devtools MCP) to see and refine its own output. Without one, it reviews the code directly.

Tools

Resources

Beyond tools, the knowledge base is exposed as MCP resources, so clients that support them (Claude Desktop, Cursor) can @‑mention a document directly — with id autocompletion — instead of spending a tool call:

Visual examples

get_design_examples serves a curated library of real app/site screens. The screenshots themselves are third‑party assets and are not redistributed, so the published npm package ships the annotations and source links without the images — the tool detects this and says so rather than pretending otherwise. If you clone the repo you can rebuild the local image library; see scripts/regenerate-examples.md.

Install

Requirements: Node.js 20+.

From npm (no clone needed):

npx saglitzdesign-mcp

From source:

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

Claude Code

Register it once (via npm — no clone), available in every project:

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

Or, if you cloned the repo, point it at the built file:

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

As a plugin

One install brings all three pieces — the MCP server, all nine skills (the eight depth skills plus the umbrella that routes into them) and a slash command for every workflow:

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

The plugin declares its server as npx -y saglitzdesign-mcp@latest, so the server itself still comes from npm; the skills and the commands are files inside the plugin. claude plugin details saglitzdesign@saglitz lists what arrived.

The three ways of installing do not carry the same payload:

The npm package's files: list covers dist/, knowledge/ and recipes/, and does not name skills/ or commands/ — so an MCP-only install has every tool and every document and none of the skill or command files. The skills CLI is the mirror image: it copies each SKILL.md into your agent and brings no server, so the tools those skills point at are not there unless you also install one. Cloning the repository gets the source of all of it — but not a runnable server: dist/ is gitignored, so a clone needs npm install && npm run build before node dist/index.js starts. Everything else in the table is a tracked file and arrives with the clone.

Claude Desktop

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

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

Cursor / other MCP clients

Run npx -y saglitzdesign-mcp over stdio (or node /absolute/path/to/dist/index.js from a clone).

Requires Node 20 or newer. It also runs on Node 18 with a warning; below that the launcher exits with an explanation instead of a syntax error.

Your client launches the server — you don't start it yourself. Run by hand it will print its status and then wait on standard input for a client that never arrives, which looks like a hang but is the server working correctly.

As skills (no MCP server)

Prefer lightweight, self-contained skills? Install the condensed SaglitzDesign skills into any skills-compatible agent:

npx skills@latest add HalidSaglam/saglitzdesign-mcp

Nine skills. saglitzdesign is the umbrella: it carries no depth guidance of its own, and routes the work into whichever of the other eight fits. Those eight — clean-interface-design, landing-page-conversion, design-review, motion-and-animation, apple-platform-design, android-platform-design, design-system-audit, ship-quality-gate — are each standalone guidance that also points to the full MCP for depth. See skills/.

Each skill is copied into your agent and its content hash pinned in skills-lock.json, so an installed skill does not change when this repository does. Re-run the command above to pick up a new skill or an edited one.

Dev & debug

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

Usage

Once connected, just talk to your agent naturally — it decides when to call the tools:

"Using saglitzdesign, plan the design of an iOS fitness app." → get_design_roadmap returns a 7‑phase plan with the docs to read at each step.

"Review my landing page for conversion with saglitzdesign." → design_review_checklist (landing‑page / conversion) + get_design_examples.

"How should a primary button behave on mobile?" → get_component_guidance returns specs, states, labels and anti‑patterns.

"Show me real paywall examples." → get_design_examples returns annotated screenshots.

"What's llms.txt and how do I set it up?" → seo_geo_guide (GEO) returns the tactic with a ready‑to‑use example.

Your own design rules

Point the server at a directory of your own and your documents join the base — searchable, readable, and, if you ask, part of the review checklist:

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

Or in claude_desktop_config.json / any MCP client, alongside command and args:

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

Several directories are allowed, separated the way PATH is on your platform.

• Your rules lead. When a search is genuinely about something you documented, your document comes first — measured by how many of the query's terms it covers, so a short house‑rules file is not buried by a long reference.
• Same id replaces ours. A file with id: buttons takes over from the built‑in one. That is deliberate, and it is announced at startup rather than happening quietly. Wherever it is served it is marked as your team's document, so nothing of yours is ever quoted as though it were sourced platform guidance.
• review: [website, saas-web-app] in the frontmatter puts the document into those project types' design_review_checklist, ahead of the curated list — the difference between your rules being findable and your rules being enforced.

Editing files inside the installed package works until npm update deletes them. Use the environment variable.

Adding to this repository

Drop a Markdown file anywhere under knowledge/ with frontmatter:

---
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…

The server indexes every .md on startup — no rebuild needed for content changes (just restart the server). A /refresh-knowledge command (.claude/commands/) can re‑research stale docs with agents.

How the knowledge was built

Design‑language and SEO/GEO docs were researched from official documentation and current sources (cited in each file's sources). Real‑world UI patterns were studied from top apps and websites; the visual example library was curated the same way. Classic design and marketing books were distilled into original, prescriptive syntheses — no source text is reproduced.

On images: screenshot files are a local research asset. They are not included in this repository or any published package. Without them, get_design_examples gracefully degrades to descriptions plus source links. To rebuild the local image library (or add your own examples), see scripts/regenerate-examples.md.

Find it on

Also listed in the official MCP Registry and on npm.

License

MIT © 2026 Saglitz Design.

The knowledge/ documents are original syntheses with sources cited per file. Referenced screenshots are not part of this repo and may not be redistributed — see NOTICE.md.