SaglitzDesign
An expert design & marketing brain for your AI coding agent.
SaglitzDesign is an open-source MCP server. It gives Claude, Cursor and any MCP client prescriptive, sourced guidance on web, iOS, Android and macOS design, plus the UX, copywriting, SEO, GEO and marketing knowledge that makes a product convert. Runtime-independent, offline, no account.
Why
LLMs are confidently wrong about design: defaults, outdated specs, generic "make it clean and modern" advice. SaglitzDesign swaps that for a curated, sourced, prescriptive knowledge base your agent queries on demand, like a senior product designer, a conversion copywriter and a technical SEO at once.
Install
Node 20+. One line for Claude Code; a config snippet for Claude Desktop or Cursor.
claude mcp add --scope user saglitzdesign -- npx -y saglitzdesign-mcp{
"mcpServers": {
"saglitzdesign": {
"command": "npx",
"args": ["-y", "saglitzdesign-mcp"]
}
}
}npx -y saglitzdesign-mcpThirty tools
Your agent decides when to call them.
create_design_systemThe one-call foundation. Brand color + vibe + platform → a complete, coherent starter: WCAG-verified color (light + dark), matched fonts, an icon library, a type scale, an elevation ramp, ready-to-paste tokens, the components to build and a checklist.
get_design_roadmapStart here for process. A phased, expert process for your project type — each phase with a goal, exit criteria and the exact docs to read.
search_design_knowledgeNatural-language search across everything, returning the most relevant section of the best-matching docs.
get_design_docFetch any document in full by id.
get_component_guidanceDeep dive on a component or screen — button, form, paywall, hero, pricing — with specs and real-world patterns.
get_design_languageFull platform references: Material 3, Liquid Glass, iOS / Android / macOS, Fluent 2, web trends, design tokens.
get_design_examplesCurated real-world examples of a pattern from top apps and sites, each with notes on what it does well and a link to the source screen.
design_review_checklistAn assembled audit checklist per project type and focus: UI, UX, accessibility, SEO, GEO, conversion, copy.
seo_geo_guideTechnical SEO and GEO guides, optionally narrowed to a topic.
get_component_recipeProduction-ready, accessible component code — button, input, modal, card, tabs and more — in React/Tailwind, HTML/CSS, SwiftUI or Compose, with every state and ARIA baked in.
generate_design_tokensTurn a color/spacing/type spec into real token files: CSS variables, Tailwind v4, SwiftUI, Compose and W3C DTCG JSON — one source of truth across platforms.
generate_color_systemOne brand color → a full 50–950 tonal scale, a neutral ramp and light + dark semantic tokens, every pair WCAG-verified and auto-corrected.
generate_type_scaleA modular type scale (base × ratio) → named steps with line-heights, tracking and fluid clamp(), as CSS variables + Tailwind.
generate_elevation_systemA cohesive layered box-shadow ramp (flat → modal) as CSS variables + Tailwind, with dark-mode guidance.
generate_motionEasing + duration tokens and paste-ready keyframes (fade / slide / scale / spring / shimmer) in CSS, Framer Motion or SwiftUI — reduced-motion included.
suggest_font_pairingCurated production font pairings for a vibe — heading + body (+ mono) with paste-ready CSS stacks, weights, rationale and a type scale.
suggest_icon_libraryRecommends the right icon system for a vibe / platform — Lucide, Phosphor, Solar, SF Symbols… — with license, install, coverage and usage rules.
audit_accessibilityDeterministic WCAG 2.2 checks: exact contrast ratios and per-platform tap-target sizes, with pass/fail and fixes — before you write code.
fix_contrastRepairs a failing color pair: the nearest accessible color (hue/saturation preserved) that meets your WCAG target — the corrected value, not just a report.
design_lintLints an HTML / CSS / JSX / Tailwind snippet for design & a11y anti-patterns — hardcoded values, killed focus, missing labels, clickable divs — with line numbers and fixes. Tag-aware, so formatting never changes the verdict.
audit_ux_copyObjective copy audit — readability, sentence length, passive voice, jargon, filler, weak CTAs — with flagged phrases and fixes.
measure_screenshotMeasures a real screenshot from its pixels: the true palette and colour count, exact WCAG contrast ratios for the pairs on screen, density, and structural detections — alignment, rhythm, off-grid gaps — each with a confidence level. Returns a self-contained HTML report you can open and share.
audit_projectAudits a real codebase instead of a snippet. Point it at a directory: it walks your design source, lints every file, and scores the whole project for consistency — cross-file drift being exactly what a single-file lint cannot see. Findings ranked worst-file-first with file:line, plus an explicit list of what it did not look at.
audit_design_systemPoint it at real CSS or JSX and get a consistency score plus the sprawl behind it: how many distinct colours, sizes, radii and shadows are actually in use, which colours are indistinguishable duplicates, what sits off the 4pt grid, and how much goes through tokens.
import_design_tokensAlready 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 or DTCG. The inverse of generate_design_tokens — take a web theme to iOS, or audit an inherited one.
generate_layout_systemBreakpoints, container widths, a column grid, container queries and a fluid section-rhythm scale — as CSS custom properties and a Tailwind v4 theme.
compare_design_languagesHow iOS, Android, macOS and the web each solve one surface — navigation, buttons, sheets, motion, forms — with the rules for porting between them and an explicit do-NOT-port list.
list_design_knowledgeBrowse the full knowledge index by category and platform.
knowledge_freshnessReports each doc's age against a staleness threshold, so the base stays current.
audit_projectAudits a real codebase instead of a snippet. Point it at a directory: it walks your design source, lints every file, and scores the whole project for consistency — cross-file drift being exactly what a single-file lint cannot see. Findings ranked worst-file-first with file:line, plus an explicit list of what it did not look at.
The knowledge base
88 curated documents across 10 categories, plus 98 resources your client can @-mention directly. Design-language specs from official sources, patterns studied from real top apps, classics distilled from the books.
Read the knowledge baseMaterial 3 & Expressive, Apple HIG + Liquid Glass, iOS / Android / macOS guides, Fluent 2, 2026 web trends, design tokens.
Buttons, forms & inputs, navigation, cards, lists, modals, sheets, empty states.
Nielsen heuristics, WCAG 2.2, typography, color & dark mode, spacing, motion, mobile UX, conversion.
Optical corrections, spacing discipline, typographic craft, UX writing, a 0–40 critique rubric.
Norman, Krug, Refactoring UI; Cialdini, Positioning, StoryBrand, Ogilvy, Hooked.
End-to-end roadmaps: 8-phase product design, marketing-website positioning to CRO, design handoff, and theming an off-the-shelf system rather than rebuilding it.
Technical SEO (Core Web Vitals), on-page & E-E-A-T, SEO for designers.
Generative Engine Optimization: visibility in ChatGPT / Perplexity / AI Overviews, llms.txt.
Positioning & JTBD, pricing, growth loops, analytics & A/B testing, branding, email, ad creative, paywall benchmarks.
Real conventions studied from top apps and sites: navigation, auth, checkout, onboarding, paywalls, dashboards, hero and pricing sections — plus a curated library of annotated example screens.
How you use it
Talk to your agent naturally, mentioning saglitzdesign.
“Using saglitzdesign, plan the design of an iOS fitness app.”
get_design_roadmap → a phased plan with the docs to read at each step.
“Review my landing page for conversion with saglitzdesign.”
design_review_checklist + get_design_examples.
“How should a primary button behave on mobile?”
get_component_guidance → specs, states, labels, anti-patterns.
“Measure this screenshot of my app.”
measure_screenshot → the real palette, exact contrast ratios, alignment and spacing, as numbers.
“Turn our Tailwind theme into SwiftUI tokens.”
import_design_tokens → the roles it names, the ones it is missing, and the set re-emitted for iOS.
“What's llms.txt and how do I set it up?”
seo_geo_guide (GEO) → the tactic with a ready-to-use example.
/ Guide
Frequently asked
What is an MCP server, and why does my AI agent need one for design?
MCP (Model Context Protocol) is the standard way to give an AI coding agent tools and knowledge it does not have on its own. Left to itself, an agent designs from memory: outdated specs, generic defaults, confident guesses about contrast ratios and touch targets. SaglitzDesign gives it 84 sourced documents and 28 tools it can call instead — so it looks the answer up rather than inventing it.
Which clients does it work with?
Any MCP client. Claude Code, Claude Desktop and Cursor are one line or a small config block each; anything else that speaks MCP over stdio works with `npx -y saglitzdesign-mcp`. It also exposes its documents as MCP resources, so clients that support them can @-mention a document directly.
Does it send my code, screenshots or designs anywhere?
No. The server makes no network calls at all — every tool reads only files bundled with the package or the input you pass it. Screenshots you measure are decoded locally with Node's own zlib; nothing is uploaded, and there is no telemetry. That is enforced by the tool annotations, not just promised in a README.
Do I need an account, an API key, or a subscription?
None of the three. It is MIT-licensed and free, it works offline, and there is nothing to sign up for. Install it and it runs.
Does it use AI to judge my design?
No — that is the point. The tools are deterministic: the same input always produces the same output. Contrast ratios are computed, not estimated. Colour counts are counted. Where something genuinely cannot be known from the input — whether a colour pair is really text on that background — the tool says so instead of guessing. Your agent still does the judging; SaglitzDesign gives it facts to judge with.
What can it actually measure, as opposed to advise on?
Real input, not descriptions. Paste a screenshot and it reports the true palette, exact WCAG contrast ratios, whitespace and structural detections like edge alignment and off-grid spacing, each with a confidence level. Paste a stylesheet and it scores how systematic it is: how many distinct colours, radii and shadows are really in use, and which colours are indistinguishable duplicates.
I already have a design system. Will it try to replace it?
No. `import_design_tokens` reads what you already have — CSS custom properties, a shadcn `:root` block, a DTCG file — and reports the roles it names, the roles it leaves undefined, and the contrast of the pairs it defines. It can re-emit the same system as SwiftUI or Compose tokens, which is how you take a web theme to native. The knowledge base's own advice is to adopt and theme an existing system rather than rebuild it.
Is it only for the web?
No. It covers web, iOS, Android and macOS, with platform references for Material 3, Apple HIG and Liquid Glass, visionOS and Fluent 2 — and a tool that compares how each platform solves the same surface, including an explicit list of what not to port between them.
An expert design & marketing brain for your AI coding agent.