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

88 knowledge documents across 10 categories:

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; 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 say, e.g., "/build_landing_page for a SaaS invoicing tool for freelancers" — the workflow asks for anything missing, then builds 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

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

Five skills — clean-interface-design, landing-page-conversion, design-review, motion-and-animation, apple-platform-design — each standalone guidance that also points to the full MCP for depth. See skills/.

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