# HalidSaglam/saglitzdesign-mcp [Health: Active]

**Category:** 📐 Architecture & Design  
**Repository:** https://github.com/HalidSaglam/saglitzdesign-mcp  
**GitHub Stars:** 5  
**npm Downloads (last month):** 1019  
**Views:** 4  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/halidsaglam-saglitzdesign-mcp

## Description
Expert design & marketing knowledge for web / iOS / Android / macOS UI/UX: 83 sourced, prescriptive docs plus deterministic generators (design tokens, color systems, type scales, WCAG a11y) and a one-call createdesignsystem. Offline, no API key, reads only local files. Install via NPM: npx -y saglitzdesign-mcp.

## Tools
Capabilities this server exposes over MCP:

- **list_design_knowledge** — List the knowledge-base index (design languages, UI components, UX, craft, books, process, marketing, SEO, GEO, patterns). Returns every document grouped by category — each with its id, title, platform, and tags. Use this first to discover what's available and get exact ids; then read one with get_design_doc, or search by need with search_design_knowledge.
- **search_design_knowledge** — Search the whole knowledge base with a natural-language query — UI components, UX, accessibility, typography, color, motion, conversion, copywriting, SEO/GEO, platform design languages, craft standards, distilled design & marketing books, roadmaps, and real-world app/site patterns. Returns the top-matching documents, each with its single most relevant section excerpted and its id. Use for open-ended 'how should I…' questions; if you already know the id use get_design_doc, to browse everything use list_design_knowledge.
- **get_design_doc** — Fetch one knowledge-base document in full by its id. Returns the whole document — title, metadata, prescriptive body, and cited sources. Ids come from list_design_knowledge or search_design_knowledge; if the id is unknown it suggests near matches.
- **get_component_guidance** — Get expert guidance for designing one UI component or screen pattern (button, form, navigation, card, modal, hero, pricing page, onboarding, paywall, checkout, empty state, dashboard…). Returns the most relevant docs in full — specs, states, sizing, anti-patterns, and real-world patterns from top apps/sites. Use when designing a specific element; for copy-paste code use get_component_recipe, for annotated screenshots use get_design_examples.
- **get_design_language** — Fetch the full reference document for one modern design language or platform design system (Material 3, Apple HIG/Liquid Glass, iOS/Android/macOS, Apple Intelligence, visionOS, Fluent 2, 2026 web trends, design tokens). Returns the complete spec — rules, do/don't lists, numbers, and examples — for the chosen system. Use when you need the authoritative platform baseline before designing; for a specific component use get_component_guidance, and to plan a whole project use get_design_roadmap.
- **design_review_checklist** — Generate a structured design-review checklist for a project type (mobile app, website, landing page, dashboard), assembled from the knowledge base: key rules and anti-patterns per area. Use it to audit an existing design or as acceptance criteria for a new one.
- **get_design_roadmap** — The SaglitzDesign roadmap: a phased, expert design process for a given project type (website, landing page, iOS app, Android app, macOS app, SaaS web app). Each phase has a goal and the exact knowledge-base docs to consult. Use this FIRST when starting any design project, then fetch phase docs as you reach them.
- **seo_geo_guide** — SEO and GEO expertise for websites — classic SEO (technical, on-page, design-impact) and GEO, Generative Engine Optimization for AI answer engines (ChatGPT, Perplexity, Google AI Overviews, llms.txt, citations). Returns the full relevant guide docs, optionally narrowed to a topic. Use when planning or auditing a site's discoverability; pair with get_design_roadmap('website') for the full process.
- **get_design_examples** — Fetch curated real-world examples of a design pattern from top apps and websites (paywalls, onboarding, auth, navigation, checkout, settings, empty states, heroes, pricing, features, social proof, signup, dashboards, footers). Returns, for each example, the app/site, what it does well, and a source link to view the screenshot. NOTE: this installation does not bundle the screenshot images (they are third-party assets, excluded from the published package), so the notes and links are returned WITHOUT inline images — open the links, or use your own browser tool, if you need to see them.
- **knowledge_freshness** — Report how fresh each knowledge document is (age since last verification vs its category's staleness threshold). Use this to decide which docs need re-research; refresh workflow is documented in the repo's /refresh-knowledge command.
- **generate_design_tokens** — Turn a design-token spec (semantic colors + optional spacing/radius/type scales) into REAL, ready-to-use artifact files: CSS custom properties, Tailwind v4 @theme, SwiftUI, Jetpack Compose, and W3C DTCG JSON. Deterministic — outputs code, not advice. Use it to give a project one source of truth across web, iOS and Android. Pair with audit_accessibility to verify the palette's contrast.
- **audit_accessibility** — Deterministic design-time accessibility checks: WCAG 2.2 color-contrast ratios for text/UI color pairs, and minimum tap/target sizes per platform (iOS 44pt, Android 48dp, web 24px min / 44 recommended). Returns exact ratios, pass/fail, and fixes — the machine-verifiable slice of a11y you can run before code. For keyboard/screen-reader/Dynamic Type checks, see get_design_doc('accessibility').
- **get_component_recipe** — Get production-ready, accessible reference CODE for a UI component in a chosen stack (react-tailwind, html-css, swiftui, compose) — not advice, actual copy-paste code with all states, ARIA/accessibility, keyboard support and correct motion, grounded in the SaglitzDesign specs. Use when you need to actually build a button, input, modal, toast, card, switch, tabs, empty-state, or list-row. Pair with get_component_guidance (the design rationale) and generate_design_tokens (the theme).
- **generate_color_system** — Turn ONE brand color into a complete, accessibility-verified palette: a 50–950 tonal scale, a cohesive brand-tinted neutral ramp, and full light + dark semantic tokens (background, surface, border, text, primary/onPrimary, subtle, focus ring). Every text/UI pair is checked against WCAG 2.2 and auto-adjusted to pass. Deterministic — outputs a real palette, not advice. Feed the result into generate_design_tokens, then audit_accessibility.
- **suggest_font_pairing** — Recommend production-ready font pairings for a brand/product from an intent or vibe (e.g. 'modern SaaS dashboard', 'luxury editorial', 'bold marketing landing', 'native iOS app', 'developer tool'). Returns matched heading + body (+ mono) with ready-to-paste CSS stacks, weights, source, the reason each pairing works, pairing rules, and a suggested type scale. Deterministic curated recommendations, not generic advice. Pair with generate_design_tokens to emit the fonts as tokens.
- **fix_contrast** — Repair a failing color pair: given a foreground and background hex, compute the NEAREST accessible color (hue & saturation preserved, lightness nudged) that meets the WCAG 2.2 target — not just a pass/fail report. Use when audit_accessibility flags a pair and you need the corrected value to ship. For a full pass/fail audit use audit_accessibility; to build a whole palette use generate_color_system.
- **suggest_icon_library** — Recommend the right icon library for a product from an intent/vibe/platform (e.g. 'minimal SaaS dashboard', 'friendly consumer app with personality', 'iOS app', 'Android Material app', 'dense admin panel'). Returns matched open-source (or platform-native) icon systems with license, install command, coverage, the reason each fits, usage rules, and universal icon best-practices. Deterministic curated guidance — icons are NOT bundled; install the chosen library in your own project. Pair with suggest_font_pairing and generate_color_system.
- **generate_type_scale** — Generate a modular typographic scale from a base size and ratio: named steps (xs…6xl) with sizes, line-heights, letter-spacing, and optional fluid clamp() that scales display type down on small screens. Emits CSS custom properties and a Tailwind v4 @theme block. Deterministic real output. Pair with suggest_font_pairing and generate_design_tokens.
- **generate_elevation_system** — Generate a cohesive elevation / box-shadow ramp (layered ambient + direct light) with semantic level names (flat…modal), as CSS custom properties and Tailwind @theme, plus dark-mode guidance. Deterministic. Use one shadow token per level instead of hand-tuning shadows per component.
- **generate_motion** — Generate a motion system: easing tokens (decelerate/accelerate/standard/spring as cubic-beziers), duration tokens, and ready-to-paste keyframe animations (fade-in, slide-up, scale-in, spring-pop, shimmer) in CSS, Framer Motion, or SwiftUI — grounded in the animation-craft rules (ease-out on enter, small distances, never scale(0), honor reduced-motion). Deterministic real code.
- **design_lint** — Lint a snippet of HTML / CSS / JSX / Tailwind for design & accessibility anti-patterns: hardcoded colors instead of tokens, px font-sizes, removed focus outlines, images without alt, clickable divs, icon-only buttons without labels, positive tabindex, ad-hoc radii, !important overuse. Returns findings with line numbers, severity, and fixes. Fast static design-time check — not a replacement for a full audit. Complements design_review_checklist.
- **audit_ux_copy** — Audit UI / marketing copy objectively: readability (Flesch reading ease + grade level), average sentence length, passive voice, jargon/hype words, filler, user-focus ('you' vs 'we'), and weak CTAs. Returns metrics plus specific flagged phrases and fixes. The machine-checkable slice of UX writing — pair with get_design_doc('ux-writing') for voice/tone judgment.
- **create_design_system** — THE one-call foundation. Turn a brand color + product vibe + platform into a complete, coherent design-system starter: accessibility-verified color (light+dark), a matched font pairing, an icon library, a modular type scale, an elevation ramp, ready-to-paste design tokens (CSS/Tailwind or SwiftUI/Compose), the components to build, and a build checklist — all generated to work together. Use this FIRST when someone says 'design/build me a website/app' to lay the foundation, then get_component_recipe for each component and get_design_roadmap for the full process.
- **audit_design_system** — Measure how systematic an existing UI really is: paste CSS / SCSS / Tailwind / JSX source and get a consistency score plus the sprawl behind it — how many distinct colors, font sizes, radii, shadows and spacing values it actually uses, which colors are near-duplicates nobody can tell apart, which spacing is off the 4pt grid, token adoption, stray font families, !important and magic z-index. Returns a consolidation plan wired to the generators. Use it before a redesign, on an inherited codebase, or to prove a design system is (or isn't) being followed. Deterministic static analysis; complements design_lint (per-line anti-patterns) with a whole-codebase view.
- **generate_layout_system** — Generate the layout foundation the other generators leave out: breakpoints (with what changes at each), container max-widths, edge padding, a column grid, an intrinsic auto-fit card grid, container queries, and a fluid section-rhythm scale — as CSS custom properties and a Tailwind v4 @theme block, plus the rules that matter more than the numbers (design narrow-first, cap the measure at 45–75ch, prefer intrinsic layout to media queries). Deterministic real code. Pair with generate_type_scale and generate_design_tokens.
- **compare_design_languages** — Compare how iOS (HIG/Liquid Glass), Android (Material 3), macOS and the web each solve ONE design problem — navigation, buttons, modals/sheets, typography, color, elevation, motion, forms, lists, icons, search or settings. Returns a side-by-side table of the concrete conventions per platform, the rules for porting a design between them, and an explicit 'do NOT port' list. Use when building the same product on more than one platform, or when deciding whether a pattern that works on one platform belongs on another.
- **measure_screenshot** — Measure a real screenshot from its actual pixels — the exact palette and how many distinct colours it really uses, true WCAG contrast ratios for the colour pairs on screen, whitespace/density, and structural detections (left-edge alignment, vertical rhythm, off-grid gaps) each carrying a confidence level. Returns a markdown measurement and, on request, a self-contained HTML report you can save, open and share. PNG only. Reads the local file you name; makes no network call. Use it before critiquing a UI so the review cites measured numbers instead of impressions; pair with fix_contrast for failing pairs and audit_design_system for the codebase behind the screen.
- **import_design_tokens** — Read an EXISTING design system and convert it: paste CSS custom properties (a Tailwind v4 @theme block, a shadcn :root block, plain CSS), a W3C DTCG token file, or a theme object as JSON, and get back the roles it names, the semantic roles it is missing, a WCAG contrast check on the pairs it defines, and the whole set re-emitted as CSS / Tailwind / SwiftUI / Compose / DTCG. The inverse of generate_design_tokens — use it to take a web theme to iOS or Android, to audit an inherited system, or to see what a third-party theme leaves undefined. Only NAMED tokens are read; a bare hex inside a rule carries no role and is never imported as one (use audit_design_system to count those). JavaScript configs are never evaluated.
- **audit_project** — Audit a real codebase instead of a pasted snippet: point it at a directory and it walks the design source, runs the design/accessibility lint over every file, and scores the whole thing for consistency — how many distinct colours, type sizes, radii, shadows and spacings the project actually uses, and which colours are indistinguishable duplicates. Returns findings ranked worst-file-first with file:line, plus an explicit list of what it did not look at. Cross-file drift is the thing a single-file lint cannot see, which is the point of this tool. Reads only the directory you name; makes no network call. Pair with measure_screenshot for the rendered result and audit_ux_copy for the words.

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

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

## Documentation

## What HalidSaglam/saglitzdesign-mcp MCP server does

HalidSaglam/saglitzdesign-mcp MCP server supplies design and marketing knowledge for web, iOS, Android, and macOS projects. Its knowledge base covers platform design languages, components, UX, accessibility, typography, motion, copywriting, SEO, GEO, marketing, security, process, and real-world interface patterns. Documents include metadata, prescriptive guidance, and cited sources.

The server supports both research and production-oriented work. An agent can search for design guidance, retrieve a document by ID, compare platform conventions, or follow a phased roadmap for a website, landing page, SaaS product, or native application. It can also produce code and structured outputs rather than only recommendations.

## How it works

HalidSaglam/saglitzdesign-mcp runs locally as an MCP child process and communicates through stdio. It does not expose HTTP or SSE endpoints. The implementation reads bundled and local files, makes no external API calls, and does not require an account or credential. Prompts and project files therefore remain on the local machine when the server is used as described.

A typical workflow begins by calling `get_design_roadmap` or `create_design_system`. The agent can then retrieve relevant design-language or component documents, generate tokens and layout foundations, request reference code, and run deterministic checks. Knowledge discovery starts with `list_design_knowledge`, `search_design_knowledge`, or a direct document lookup with `get_design_doc`.

## Setup and configuration

Install the package with npm:

```bash
npx -y saglitzdesign-mcp
```

Configure the command as a local stdio MCP server in a compatible client. The supplied material explicitly identifies Claude and Cursor as clients, and the server is intended for MCP clients generally. No environment variables, API keys, remote URL, or additional service configuration are required.

## Tools and capabilities

HalidSaglam/saglitzdesign-mcp MCP server includes capabilities in four broad areas:

- **Knowledge and workflows:** search and browse design documents, retrieve platform references, create project roadmaps, assemble review checklists, compare design languages, inspect knowledge freshness, and consult SEO/GEO guidance.
- **Design generation:** create complete starter systems; generate colors, type scales, elevation, motion, layouts, and design tokens for CSS, Tailwind, SwiftUI, Jetpack Compose, and W3C DTCG formats.
- **Implementation support:** request component guidance, production-oriented recipes for supported stacks, icon-library recommendations, and curated examples from real applications and websites. Example recipes cover elements such as buttons, inputs, modals, tabs, cards, toasts, and list rows.
- **Auditing and measurement:** check WCAG 2.2 contrast and platform target sizes, repair failing color pairs, lint HTML/CSS/JSX/Tailwind, assess UX copy, measure design-system consistency, audit project directories, import named tokens, and measure PNG screenshots. Screenshot and project audits read the paths supplied by the caller and do not make network calls.

The generators are described as deterministic. For example, color generation returns a tonal palette and semantic light/dark tokens, while token generation emits artifacts for selected platforms. The component recipes provide reference code with states and accessibility details, not just design rationale.

## Limitations and notes

The package is local and stdio-only, so it cannot be hosted as a remote HTTP or SSE MCP endpoint. Screenshot measurement accepts PNG files, and the example library returns notes and source links rather than bundled third-party screenshot images. The server’s audits are scoped: design lint is a static snippet check, while project auditing examines the directory provided; neither should be treated as a complete runtime or usability evaluation. JavaScript configurations are not evaluated by token import, which reads named token structures instead.

The knowledge base is curated and sourced, but the repository distinguishes documents whose sources are enforced by tests from documents that are not yet covered by that check. Developers should use the returned source information and freshness report when source recency matters.

For teams adopting HalidSaglam/saglitzdesign-mcp MCP server, the main fit is an agent-assisted design and implementation workflow that benefits from local, repeatable guidance and generated artifacts rather than live SaaS data or external integrations.

_Full upstream README: https://allmcps.com/mcp/halidsaglam-saglitzdesign-mcp/readme_