---

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

84 knowledge documents across 10 categories:

Category	Coverage
🎨 Design languages	Material 3 & M3 Expressive · Apple HIG + Liquid Glass (iOS 26) · deep iOS, Android (Android 16 / M3 Expressive) and macOS app‑design guides · Apple Intelligence design (AI features: Writing Tools, App Intents, on‑device Foundation Models) · visionOS / spatial design (Vision Pro) · Fluent 2 · 2026 web trends · design tokens & theming (W3C DTCG) · Apple WWDC design principles (fluid interfaces)
🧩 Components	Buttons (hierarchy, sizing, states, labels) · forms & inputs · navigation · cards / lists / modals / sheets / empty states
🧠 UX	Nielsen heuristics & behavioral laws · accessibility (WCAG 2.2) · typography · color & dark mode · spacing & grids · motion · mobile UX · conversion / CRO · data visualization · information architecture · i18n / localization (RTL) · AI product UX (chat, streaming, agentic) · onboarding & permission priming
✨ Craft	Expert polish standards · typographic craft · animation craft (easing, springs, interruptibility) · UX writing & cognitive load · 0–40 critique rubric · clean/minimal app design · design‑engineering (semantic HTML, CSS architecture, tokens‑in‑code) · ethical design (avoiding dark patterns) · iconography (choosing & using an icon system)
📚 Books	Distilled classics — design: Norman, Krug, Refactoring UI, psychology of design, grid/typography, interaction design (Cooper/Tidwell), emotional design (Walter/Norman) · marketing: Cialdini, Positioning, StoryBrand + Ogilvy, Hooked
🗺️ Process	Product‑design & marketing‑website roadmaps · design‑systems methodology (Atomic Design, component API, governance) · design handoff (Figma Dev Mode, Code Connect, design↔dev)
📣 Marketing	Branding & identity · email marketing · HTML email development (Outlook, dark mode, bulletproof) · ad creative · paywall benchmarks (RevenueCat 2026) · growth frameworks (loops/AARRR/PLG) · pricing strategy · analytics & experimentation · value proposition & JTBD · content & distribution (topic clusters, community, referral) · App Store Optimization (ASO)
🔎 SEO	Technical SEO (Core Web Vitals) · on‑page & E‑E‑A‑T · SEO for designers
🤖 GEO	Generative Engine Optimization — visibility in ChatGPT / Perplexity / AI Overviews, llms.txt, citation tactics
🖼️ Patterns & examples	Real‑world patterns studied from top apps & sites (incl. e‑commerce & checkout and fintech / trust flows), plus a curated library of real‑world example screens

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.

Prompt	What it does
build_landing_page	Designs & builds a conversion‑focused landing page, copy‑first, with a visual critique loop.
build_website	Builds a multi‑page marketing site — positioning, IA, SEO/GEO, shared design system.
build_mobile_app_ui	Builds iOS or Android screens on the correct platform baseline (HIG/Liquid Glass or Material 3).
critique_screenshot	Measures the screenshot, then critiques it against the fixed 0–40 rubric — cites real ratios and colour counts, specific elements, no padding.
review_paywall	Scores a paywall / subscription onboarding against real RevenueCat 2026 conversion benchmarks.
design_review	Audits an existing site/app — runs the deterministic auditors first, so findings lead with measured numbers, then the checklists and the 0–40 rubric, ranked by severity.
redesign	Improves an existing UI (bolder / quieter / higher‑converting) using the craft standards, with a measured before→after (consistency score, critique score, lint findings, contrast failures).
port_to_platform	Takes an existing UI to another platform (iOS ↔ Android ↔ macOS ↔ web) surface by surface — porting the intent and IA, never the components.

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

Tool	What it does
create_design_system	The one‑call foundation. Brand color + vibe + platform → a complete, coherent starter: WCAG‑verified color (light+dark), matched fonts, an icon library, a modular type scale, an elevation ramp, ready‑to‑paste tokens, the components to build, and a checklist — all generated to work together.
get_design_roadmap	Start here for process. A phased, expert process for a project type (website, landing page, iOS / Android / macOS app, SaaS web app) — each phase has a goal, exit criteria, and the exact docs to read.
search_design_knowledge	Natural‑language search across everything, returning the most relevant section of the best‑matching docs.
get_design_doc	Fetch any document in full by id.
get_component_guidance	Deep dive on a component or screen (button, form, paywall, hero, pricing…) — specs + real‑world patterns.
get_design_language	Full platform / design‑system references (Material 3, Liquid Glass, iOS/Android/macOS, Fluent 2, web trends, tokens).
compare_design_languages	Building on more than one platform? Side‑by‑side iOS / Android / macOS / web conventions for one surface (navigation, buttons, sheets, motion, forms…), plus the porting rules — and an explicit do NOT port list.
get_design_examples	Curated real‑world examples of a pattern from top apps/sites, with notes on what each does well. (Screenshots are a local‑only asset — see Visual examples.)
design_review_checklist	An assembled audit checklist per project type and focus (UI, UX, accessibility, SEO, GEO, conversion, copywriting).
seo_geo_guide	SEO and GEO guides, optionally narrowed to a topic.
import_design_tokens	Already have a design system? Paste your CSS custom properties, shadcn :root block, DTCG file or theme JSON and get back the roles it names, the roles it leaves undefined, a WCAG check on the pairs it defines, and the whole set re‑emitted as CSS / Tailwind / SwiftUI / Compose / DTCG. The inverse of generate_design_tokens — take a web theme to iOS, or audit an inherited one. Only named tokens are read; JS configs are never evaluated.
generate_design_tokens	Real artifacts, not advice — turns a color/spacing/type spec into CSS variables, Tailwind v4, SwiftUI, Jetpack Compose, and W3C DTCG JSON.
audit_accessibility	Deterministic WCAG 2.2 checks — exact contrast ratios for color pairs + tap‑target sizes per platform, with fixes.
get_component_recipe	Production‑ready, accessible reference code for a component (button, input, modal, toast, card, switch, tabs, empty‑state, list‑row) in react‑tailwind, html‑css, SwiftUI, or Compose — all states, ARIA, keyboard, correct motion.
generate_color_system	One brand color → a full palette. A 50–950 tonal scale, a cohesive neutral ramp, and light + dark semantic tokens — every text/UI pair WCAG‑verified and auto‑corrected. Feeds straight into generate_design_tokens.
suggest_font_pairing	Curated, production font pairings for a vibe (SaaS, editorial, bold, native…) — heading + body (+ mono) with paste‑ready CSS stacks, weights, rationale, and a type scale.
fix_contrast	Repairs a failing color pair: computes the nearest accessible color (hue/saturation preserved) that meets your WCAG target — the corrected value, not just a fail report.
suggest_icon_library	Recommends the right icon system for a vibe/platform (Lucide, Phosphor, Solar, SF Symbols, Material Symbols…) — with license, install command, coverage, fit rationale, and usage rules.
generate_type_scale	A modular type scale (base × ratio) → named steps with line‑heights, tracking, and fluid clamp(), as CSS variables + Tailwind.
generate_elevation_system	A cohesive layered box‑shadow ramp (flat→modal) as CSS variables + Tailwind, with dark‑mode guidance.
generate_layout_system	Breakpoints (with what changes at each), container widths, a column grid, an intrinsic auto‑fit grid, container queries, and a fluid section‑rhythm scale — CSS variables + Tailwind v4.
generate_motion	Easing + duration tokens and ready‑to‑paste keyframe animations (fade/slide/scale/spring/shimmer) in CSS, Framer Motion, or SwiftUI — reduced‑motion included.
design_lint	Lints an HTML/CSS/JSX/Tailwind snippet for design & a11y anti‑patterns (hardcoded values, killed focus, missing alt/labels, clickable divs, unlabelled inputs…) with line numbers and fixes. Tag‑aware, so formatting never changes the verdict.
measure_screenshot	Measures your actual screen. Give it a PNG and it reports the real palette and colour count, true WCAG contrast ratios for the pairs on screen, density, and structural detections (alignment, rhythm, off‑grid gaps) each with a confidence level — plus a self‑contained HTML report you can open and share. Pure‑Node PNG decoding, no network, no dependencies.
audit_design_system	Is there actually a system here? Point it at real CSS/JSX and get a consistency score plus the sprawl behind it: how many distinct colors, sizes, radii, shadows and spacings are in use, which colors are indistinguishable duplicates, what's off the 4pt grid, token adoption — and a consolidation plan.
audit_ux_copy	Objective copy audit — readability (Flesch), sentence length, passive voice, jargon, filler, user‑focus, weak CTAs — with flagged phrases and fixes.
list_design_knowledge	Browse the full knowledge index by category / platform.
knowledge_freshness	Reports each doc's age vs a per‑category staleness threshold, so the base can be kept current.

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:

URI	What it is
saglitzdesign://index	The whole index: every document by category, with platform and last‑verified date.
saglitzdesign://doc/{id}	One knowledge document in full (83 of them). Autocompletes on id.
saglitzdesign://recipe/{component}	A component's spec plus its reference implementation in every available stack.

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

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.

Extending the knowledge base

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.