Skip to main content
Glama
HalidSaglam

saglitzdesign-mcp

by HalidSaglam

Server Configuration

Describes the environment variables required to run the server.

NameRequiredDescriptionDefault

No arguments

Instructions

Guidance the server publishes about itself, which clients place ahead of the tool catalog so the model reads it before choosing anything.

This server publishes no instructions, or was last inspected before Glama recorded them.

Capabilities

Features and capabilities supported by this server

Protocol revision2025-11-25

CapabilityDetails
tools
{
  "listChanged": true
}
prompts
{
  "listChanged": true
}
resources
{
  "listChanged": true
}
completions
{}

Tools

Functions exposed to the LLM to take actions

NameDescription
list_design_knowledgeA

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_knowledgeA

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_docA

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_guidanceA

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_languageA

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_checklistA

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_roadmapA

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_guideA

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_examplesA

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_freshnessA

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_tokensA

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_accessibilityA

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_recipeA

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, list-row, navigation, search, select, table, tooltip, form, pagination, skeleton, badge, or breadcrumb. Pair with get_component_guidance (the design rationale) and generate_design_tokens (the theme).

generate_color_systemA

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_pairingA

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_contrastA

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_libraryA

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_scaleA

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_systemA

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_motionA

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_lintA

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. It reads source and does not measure anything: nothing is rendered, no contrast ratio is computed and no tap target is sized, so no finding is or can be a visual or an accessibility verdict. Returns markdown plus structured output: findings (rule, severity, message, fix, doc, line), a severity summary, and a machine-readable notVisible list of what it could not check. Fast static design-time check — not a replacement for a full audit. Complements design_review_checklist.

audit_ux_copyA

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. It reads source and does not measure anything: no usability session is run, no A/B result is read, and no finding here is or can be a statement about whether the copy actually works for a reader. It also has no notion of register: it has no way to tell short UI copy from long-form prose, so a paragraph of accurate technical documentation can draw more jargon/filler hits than a paragraph of real hype. Returns markdown plus structured output: findings (rule, severity, message, fix, doc, line), a severity summary, a machine-readable notVisible list of what it could not check, and a metrics block carrying the same words/sentences/avgSentenceLen/Flesch/grade-level/you-we numbers the markdown table prints.

audit_ethical_designA

Audit a pasted snippet for named deceptive-pattern tells from ethical-design: confirmshaming decline copy, a pre-checked marketing or newsletter checkbox, a scarcity or deadline phrase with no live binding nearby, and an Accept all with no equally-named reject. It reads source and does not measure anything: no checkout is completed, no countdown is timed, no warehouse is queried, and no consent banner is clicked, so no finding is or can be a verdict on the business. Snippet only — there is no directory mode. Returns markdown plus structured output: findings (rule, severity, message, fix, doc, line), a severity summary, and a machine-readable notVisible list of what it could not check. Pair with get_design_doc('ethical-design') and a human looking at the render.

create_design_systemA

THE one-call foundation. Turn a brand color + product vibe + platform into a complete, coherent design-system starter: a direction card (named defaults to leave, the type pairing as a decision, one signature move, and a stock-region fact if the seed sits in indigo/violet/purple), 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_systemA

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_systemA

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_languagesA

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_screenshotA

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_tokensA

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_projectA

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. It reads source and does not measure anything: it loads no page, renders nothing, takes no screenshot, and no finding is or can be a rendered-output result. Returns markdown plus structured output: findings (rule, severity, message, fix, doc, file, line), a severity summary, a machine-readable notVisible list of what it could not check, and a scan block saying how many files and bytes were actually read, which files were skipped for size, which could not be opened, and whether the file or byte cap was hit — check that before trusting any absence in findings. It runs design_lint's rules and the consistency count, and nothing else: run audit_security, audit_generic_design, audit_seo_geo and audit_performance on the same directory for theirs. A missing or non-directory path is returned as an error result, not as an empty audit. 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.

audit_securityA

Audit a web project or snippet for security defects a frontend actually ships: missing or weak Content-Security-Policy, absent HSTS, unpinned cross-origin scripts, mixed content, credentials in localStorage, secret-named NEXT_PUBLIC_/VITE_ variables, unsandboxed third-party iframes, wildcard postMessage, raw-HTML sinks with no sanitiser, production source maps and un-ignored .env files. Header state is inferred from wherever your stack declares it — next.config, vercel.json, netlify.toml, _headers, staticwebapp.config.json, firebase.json, Nuxt routeRules, a Remix/React Router headers export, SvelteKit hooks.server.ts and kit.csp, Astro middleware and Next.js middleware or its Next 16 rename proxy.ts, new Response(body, { headers }) and new Headers({…}) on Cloudflare Workers/Deno/Bun — and, as rules rather than places, a quoted header-name property in any JSON or object literal, and any call whose method name is set, setHeader, append or header whatever the object is called (res.set, res.setHeader, headers.set, headers.append, Fastify reply.header, Hono c.header, Koa ctx.set) — and , read as text and never evaluated. It reads source and does not measure anything: it makes no request to your site, tests no live endpoint, and no finding is or can be a penetration-test or vulnerability-scan result — so do not call it expecting one. Returns markdown plus structured output: findings (rule, severity, message, fix, doc, file, line), a severity summary, and a machine-readable notVisible list of what it could not check. A missing or non-directory path is returned as an error result, not as an empty audit. Pair with audit_project for design drift and audit_accessibility for WCAG.

audit_generic_designA

Audits a web project or snippet for the specific defaults generated interfaces reach for: the stock Tailwind indigo/violet/purple gradient (as classes, hex, or OKLCH), Inter/Roboto/Open Sans/DM Sans/Plus Jakarta Sans as the only declared typeface on a brand surface, emoji standing in for icons, the rounded-2xl + shadow-lg + border card recipe repeated across a page, gradient-filled heading text, an eyebrow label over every heading, the backdrop-blur + white/10 glassmorphism recipe, three or more animate-pulse or animate-shimmer placeholders, stock hype-opener copy ('unlock the power of', 'say goodbye to', …), stacked filler adverbs ('seamlessly', 'effortlessly', …), and a page whose every call to action is drawn from the stock set ('Get Started', 'Learn More'). Every finding is a fact about the source text — a class name, a phrase, a repeated structure — never a judgement about whether the result is good design; it reports facts, not taste, so pair it with design_review_checklist or get_design_doc("design-critique-scoring") for actual critique. It reads source and does not measure anything: it makes no network request, renders nothing, and no finding is or can be a rendered-output or aesthetic judgement. Returns markdown plus structured output: findings (rule, severity, message, fix, doc, file, line), a severity summary, a machine-readable notVisible list of what it could not check, and a 0-100 score itemised to the same rule, weight and evidence the markdown prints — each rule counts once no matter how many times it fires, so a long page never scores higher purely for its length. In directory mode it does not read story, test or fixture files (.stories., .story., .spec., .test., fixtures/, mocks/), whose job is to demonstrate a component rather than ship a surface; it reports how many it skipped. The copy rules match English only, so a page in another language is scored by the visual rules alone. A missing or non-directory path is returned as an error result, not as an empty audit. Pair with audit_project for design drift and design_review_checklist for critique.

audit_seo_geoA

Audit a page, a component or a whole web project for the SEO and GEO signals that are actually in the source: a missing , and one longer or shorter than the width a result gives it; a missing meta description, and one outside the width a snippet gives it; more than one on a page; a heading level skipped in the outline; no canonical link at all; a canonical written as a relative URL in a self-contained document; a canonical left pointing at localhost or a staging host; an hreflang set that never lists the page itself; JSON-LD that does not parse, or that declares no @context or @type; JSON-LD declaring a type whose rich result Google has retired; an image with no alt attribute at all; robots.txt crawl rules, including the AI crawlers behind ChatGPT, Claude, Perplexity and Google's AI surfaces; a robots.txt that names no sitemap; no llms.txt beside it; and content that exists only once a script has run. It reads source and does not measure anything: no request is made to your site, nothing is rendered, and no finding is or can be a Core Web Vitals result, an indexing status or a ranking outcome — so do not call it expecting a vitals or ranking report. Absence is only ever claimed where it can be proven — a self-contained HTML document, or a whole directory — and a scan that hits its cap downgrades every absence claim to an unconfirmed note. Returns markdown plus structured output: findings (rule, severity, message, fix, doc, file, line), a severity summary, and a machine-readable notVisible list of what it could not check. A missing or non-directory path is returned as an error result, not as an empty audit. Pair with audit_performance for the delivery signals, audit_ux_copy for whether the writing earns the click, and seo_geo_guide for the guidance behind the rules.

audit_performanceA

Audit a page, a component or a whole web project for the performance signals that are actually in the source: a hero image held back by loading="lazy", or contradicting its own fetchpriority; the LCP-candidate image declaring no fetch priority at all; a hero background declared in CSS or an inline style, which the HTML preload scanner never sees; images with no width/height or aspect-ratio to reserve their box; a in the carrying neither defer nor async nor type="module"; @font-face blocks with no font-display; fonts served from a third-party font CDN; and scripts loaded from more distinct remote domains than any reading of "minimise" defends. It reads source and does not measure anything: Core Web Vitals are 75th-percentile field data from real devices, this loads nothing and times nothing, and no finding is or can be an LCP, INP or CLS verdict — so do not call it expecting a vitals report. Its hero rules are deliberately narrow (the first image inside , with the header logo and the mid-article diagram structurally excluded), which means some pages get no hero finding at all; that limitation and the others are returned explicitly rather than left to read as a clean result. Returns markdown plus structured output: findings (rule, severity, message, fix, doc, file, line), a severity summary, and a machine-readable notVisible list of what it could not check. A missing or non-directory path is returned as an error result, not as an empty audit. Pair with audit_seo_geo for the crawl and answer-engine signals, and measure_screenshot for the rendered result.

audit_apple_uiA

Audit an iOS or macOS app's UI against Apple's own documentation: point it at the project directory and it reads the four surfaces an Xcode project declares configuration on — the information property list, INFOPLIST_KEY_* build settings in project.pbxproj, the entitlements plist, and each colorset's Contents.json — infers whether the project targets iOS or macOS from those plus the Swift imports, and runs eight rules. Configuration: a custom colorset with no luminosity: dark appearance, the deprecated UIRequiresFullScreen key (either spelling), a microphone entitlement declared under one capability and not its twin, and — on macOS only — no App Sandbox entitlement, reported as a fact about the Mac App Store channel rather than as a defect. Swift: NavigationView, .font(.system(size:)) on iOS only, a colour written as numbers, and a Button whose whole label is one SF Symbol. Every platform-scoped rule stays silent when the platform signals do not settle the question, and the report says which platform was inferred and from what, so a silence can be read as the gate rather than as a result. It reads source and does not measure anything: it builds nothing, runs no simulator, takes no screenshot, and no finding is or can be a rendered-output, contrast, notarization or App Review result. Returns markdown plus structured output: findings (rule, severity, message, fix, doc, file, line — configuration findings carry no line, since a missing key has no position), a severity summary, a scan block saying how much was actually read, and a long machine-readable notVisible list of what it structurally could not check, every entry of it derived from a run. Directory only — there is no snippet mode, because configuration is the backbone of this audit and a snippet carries none of it. A missing path, a path that is a file, or a code argument is returned as an error result, not as an empty audit. Pair with get_design_doc("apple-hig-liquid-glass"), get_design_doc("apple-accessibility") and get_design_doc("apple-shipping-readiness") for the guidance behind the rules.

audit_android_uiA

Audit an Android app's UI against Material 3 and android-app-design: point it at the project (or module) directory and it reads AndroidManifest.xml, resource XML and Kotlin, infers whether the folder is an Android project from those plus Compose/Android imports, and runs six rules. Configuration: windowOptOutEdgeToEdgeEnforcement="true" (deprecated and ignored on Android 16), enableOnBackInvokedCallback="false" (the predictive-back opt-out), and a values/themes.xml or values/colors.xml with no values-night/ file among the surfaces read. Compose: a Color(0x…) literal, fontSize = N.sp, and an androidx.compose.material.Button-style Material 2 import (not material3, not material.icons). Every configuration rule stays silent when no Android signal was found, and the report says whether the platform was inferred and from what, so a silence can be read as the gate rather than as a result. It reads source and does not measure anything: it builds nothing, starts no emulator, takes no screenshot, and no finding is or can be a rendered-output, contrast, TalkBack or Play review result. Returns markdown plus structured output: findings (rule, severity, message, fix, doc, file, line — configuration findings carry no line, since a manifest attribute has no useful source position), a severity summary, a scan block saying how much was actually read, and a machine-readable notVisible list of what it structurally could not check, every entry of it derived from a run. Directory only — there is no snippet mode, because configuration is the backbone of this audit and a snippet carries none of it. A missing path, a path that is a file, or a code argument is returned as an error result, not as an empty audit. Pair with get_design_doc("material-3") and get_design_doc("android-app-design") for the guidance behind the rules.

Prompts

Interactive templates invoked by user choice

NameDescription
build_landing_pageDesign & build a conversion-focused landing page end-to-end using SaglitzDesign expertise — generated design system, real code, deterministic audit gate, visual critique loop.
build_websiteDesign & build a multi-page marketing website end-to-end — positioning, IA, SEO/GEO, a generated shared design system, audit gate and visual critique loop.
build_mobile_app_uiDesign & build iOS or Android app screens end-to-end on the correct platform baseline, with generated tokens, real component code and an audit gate.
build_dashboardDesign & build a dense SaaS dashboard or app shell — navigation, tables, empty/loading states, a generated product-UI system — not a marketing page in disguise.
critique_screenshotGrounded, reproducible visual critique of an attached UI screenshot against the fixed 0–40 rubric — cites specific elements, no padding.
review_paywallScore a paywall or subscription onboarding against real RevenueCat 2026 conversion benchmarks and paywall-anatomy rules.
design_reviewAudit an existing website / app / landing page against SaglitzDesign checklists, the deterministic auditors, and the 0–40 critique rubric.
redesignImprove an existing UI (bolder, quieter, cleaner, higher-converting) using SaglitzDesign craft standards, with measured before→after.
port_to_platformTake an existing design or implementation to another platform (iOS ↔ Android ↔ macOS ↔ web) — porting the intent and IA, not the components.

Resources

Contextual data attached and managed by the client

NameDescription
knowledge-indexEvery knowledge document grouped by category, with its id, platform and last-verified date.
accessibilityux · both · a11y, wcag, contrast, keyboard, screen-readers, aria
ad-creativemarketing · both · ads, creative, meta, tiktok, google, ugc, testing
ai-default-aestheticcraft · web · craft, ai, defaults, tailwind, shadcn, typography, color, icons
ai-feature-securitysecurity · web · security, ai, prompt-injection, llm, streaming, tool-calling
ai-product-uxux · both · ai, llm, chat, streaming, agentic, conversational, trust
analytics-experimentationmarketing · both · analytics, metrics, north-star, ab-testing, experimentation, retention
android-app-designdesign-language · mobile · android, material, navigation, play-store, adaptive
android-patternspattern · mobile · android, material, conventions, top-apps
animation-craftcraft · both · animation, motion, easing, springs, interruptibility, css, web
app-store-optimizationmarketing · mobile · aso, app-store, google-play, screenshots, keywords, conversion
apple-accessibilitydesign-language · both · apple, accessibility, ios, macos, swiftui, dynamic-type, voiceover, contrast, reduce-motion, hig
apple-hig-liquid-glassdesign-language · mobile · ios, apple, hig, liquid-glass, swiftui, materials, accessibility
apple-intelligence-designdesign-language · both · apple-intelligence, ai, foundation-models, writing-tools, siri, app-intents, on-device, ios, macos
apple-shipping-readinessdesign-language · both · apple, ios, ipados, macos, shipping, info-plist, privacy, purpose-strings, entitlements, app-sandbox, hardened-runtime, notarization, app-icons, icon-composer, orientation, multitasking, app-store
auth-and-session-uxsecurity · web · security, auth, passkeys, webauthn, cookies, session, csrf, 2fa
brand-on-native-platformscraft · mobile · branding, ios, liquid-glass, content-layer, typography, iconography, dark-mode, dynamic-type
branding-identitymarketing · both · branding, logo, identity, brand-voice, naming
buttonscomponent · both · buttons, cta, interaction, touch-targets, states
cards-lists-modalscomponent · both · cards, lists, modals, bottom-sheets, tables, empty-states
clean-app-designcraft · both · minimal, clean, whitespace, radius, restraint, fonts, icons
color-systemsux · both · color, palette, dark-mode, semantic-tokens, contrast
content-distributionmarketing · web · content-marketing, distribution, topic-clusters, community, referral, lifecycle
conversion-uxux · web · conversion, cro, landing-page, cta, social-proof, pricing
data-visualizationux · both · dataviz, charts, dashboards, tufte, storytelling-with-data
design-critique-scoringcraft · both · critique, heuristics, scoring, delight, brand, motion
design-engineeringcraft · both · frontend, css-architecture, semantic-html, tokens-in-code, components
design-handoffprocess · both · handoff, figma, dev-mode, tokens, code-connect, collaboration, specs
design-of-everyday-thingsbook · both · interaction-design, usability, feedback, mental-models, error-prevention
design-systems-methodologyprocess · both · design-system, atomic-design, components, governance, tokens
design-tokens-themingdesign-language · cross-platform · tokens, theming, dtcg, style-dictionary, dark-mode, multi-brand, figma
dont-make-me-thinkbook · web · usability, navigation, content, scanning, usability-testing
ecommerce-checkoutpattern · both · ecommerce, checkout, cart, payment, conversion, abandonment
email-html-developmentmarketing · web · email, html-email, outlook, dark-mode, responsive, mjml, deliverability
email-marketingmarketing · web · email, newsletter, lifecycle, deliverability, design
emotional-designbook · both · emotional-design, delight, personality, brand-voice, engagement
ethical-designcraft · both · ethics, dark-patterns, deceptive-patterns, consent, privacy, trust
fintech-trustpattern · both · fintech, finance, trust, money, kyc, security, transactions
fluent-2design-language · cross-platform · microsoft, fluent, windows, web, react, tokens, materials
forms-inputscomponent · both · forms, inputs, validation, labels, mobile-keyboard
frontend-attack-surfacesecurity · web · security, xss, sanitization, clickjacking, supply-chain, secrets, postmessage
geo-fundamentalsgeo · web · ai-search, llm, citations, llms-txt, ai-overviews, entity-seo
geo-tactics-checklistgeo · web · ai-search, llm, citations, llms-txt, schema, checklist
grid-typography-classicsbook · both · grids, typography, layout, hierarchy, detailing
growth-frameworksmarketing · both · growth, growth-loops, aarrr, plg, retention, virality
hooked-retentionbook · mobile · retention, habits, onboarding, notifications, engagement, ethics
i18n-localizationux · both · i18n, l10n, rtl, localization, text-expansion, global
iconographycraft · both · icons, iconography, phosphor, lucide, sf-symbols, material-symbols, consistency
influence-persuasionbook · both · persuasion, social-proof, marketing, conversion, ethics
information-architectureux · both · ia, navigation, taxonomy, labeling, sitemap, card-sorting
interaction-design-classicsbook · both · interaction-design, cooper, about-face, personas, patterns, goal-directed
ios-app-designdesign-language · mobile · ios, apple, hig, navigation, app-store
macos-app-designdesign-language · macos · macos, apple, hig, menu-bar, keyboard, windows
marketing-website-roadmapprocess · web · process, roadmap, marketing, positioning, copywriting, seo, geo, cro
material-3design-language · mobile · android, material, motion, color, shape, compose, wear-os
mobile-auth-patternspattern · mobile · auth, login, social-sign-in, sso, forms
mobile-checkout-paymentspattern · mobile · checkout, payments, ecommerce, forms, trust
mobile-empty-states-buttonspattern · mobile · empty-state, illustration, cta, buttons, primary-action
mobile-navigation-homepattern · mobile · navigation, tab-bar, home-feed, cards, skeleton-loading
mobile-onboarding-paywallpattern · mobile · onboarding, paywall, conversion, personalization, free-trial, subscription
mobile-settings-listspattern · mobile · settings, lists, grouped-lists, toggles, information-architecture
mobile-uxux · mobile · mobile, thumb-zone, gestures, ios, android, onboarding
modern-css-design-primitivescraft · web · css, tokens, dark-mode, color, contrast, baseline, container-queries, anchor-positioning
motion-microinteractionsux · both · motion, animation, easing, micro-interactions, transitions
naming-features-and-labelscraft · both · naming, name, names, feature-names, labels, label, wording, ux-writing, terminology, information-architecture, i18n, product-language
navigationcomponent · both · navigation, tab-bar, sidebar, navbar, information-architecture
on-page-seoseo · web · titles, meta-descriptions, headings, internal-linking, eeat, entity-seo, ai-overviews, local-seo
onboarding-permission-primingux · mobile · onboarding, activation, permissions, priming, notifications, att, time-to-value
paywall-benchmarksmarketing · mobile · paywall, subscription, onboarding, conversion, revenuecat, trial, retention
positioning-messagingbook · both · positioning, messaging, strategy, homepage, category-design
pricing-strategymarketing · both · pricing, monetization, packaging, value-based, saas
principles-heuristicsux · both · heuristics, usability, cognition, fitts-law, hicks-law
privacy-consent-and-trackingsecurity · web · security, privacy, gdpr, kvkk, consent, cookies, analytics, dark-patterns
product-design-roadmapprocess · both · process, roadmap, workflow, discovery, wireframe, design-system, testing
psychology-of-designbook · both · psychology, gestalt, attention, memory, motivation, decision-making
refactoring-uibook · both · visual-design, hierarchy, spacing, color, typography, polish
search-designcomponent · both · search, searching, search-field, searchbar, filters, scope, tokens, suggestions, autocomplete, empty-states, zero-results, navigation, ios, ipados, macos
seo-for-designersseo · web · core-web-vitals, layout-shift, font-loading, image-optimization, mobile-first, accessibility
spacing-layoutux · both · spacing, grid, layout, whitespace, responsive
storybrand-copywritingbook · both · copywriting, storybrand, headlines, cta, messaging
technical-seoseo · web · core-web-vitals, structured-data, crawling, javascript-seo, hreflang, sitemaps
theming-off-the-shelfprocess · both · theming, shadcn, radix, material, design-tokens, adoption, dark-mode, css-variables
typographyux · both · typography, fonts, type-scale, readability, variable-fonts
typography-craftcraft · both · typography, typesetting, fonts, hierarchy, opentype
ux-writingcraft · both · ux-writing, microcopy, errors, empty-states, cognitive-load
value-proposition-jtbdmarketing · both · value-proposition, jtbd, jobs-to-be-done, positioning, canvas
visionos-spatial-designdesign-language · both · visionos, spatial, vision-pro, ar, vr, gaze, immersive
visual-craft-standardscraft · both · craft, polish, alignment, spacing, depth, hierarchy
web-dashboardspattern · web · dashboard, sidebar, navigation, cards, app-shell, data
web-feature-sectionspattern · web · features, bento, grid, screenshots, product-marketing
web-hero-sectionspattern · web · hero, landing, cta, headline, signup
web-landing-signuppattern · web · landing, saas, signup, onboarding, forms, product-screenshot
web-pricing-sectionspattern · web · pricing, plans, comparison, conversion
web-security-headerssecurity · web · security, csp, headers, trusted-types, hsts, sri, clickjacking, cors
web-social-proof-footerpattern · web · testimonials, social-proof, footer, newsletter, sitemap
web-trends-2026design-language · web · web, trends, bento, glassmorphism, brutalism, dark-mode, typography, animation, ai
wwdc-design-principlesdesign-language · both · apple, wwdc, fluid-interfaces, motion, principles, materials, haptics
badgeA short status or count label. Colour is never the only signal; a pill, not a gradient.
breadcrumbA short trail that names the current page to assistive tech, not colour alone.
buttonA single-action trigger with clear variant hierarchy and a stable loading state.
cardA content container with optional media, clamped title, body, footer actions, and an optional whole-card-clickable variant.
empty-stateThe three-part empty state (icon → headline → explanation → one primary CTA) with first-use, no-results, and error variants.
formA short form with labeled fields, an accessible error, a primary submit, and a marketing opt-in that defaults to off.
inputA labeled text field with helper text and an accessible error state.
list-rowA settings/list row — leading icon, title with optional subtitle, and a single trailing accessory (chevron OR control, never both).
modalAn accessible dialog that traps focus, closes on Escape, and returns focus to its trigger.
navigationA labelled tab bar for compact widths and a matching sidebar for dashboards — active state is a shape, not colour alone.
paginationPrevious / next plus numbered pages, with the current page named to assistive tech and disabled ends.
searchA search field with a leading icon, a clear button once there is text, and a cancel affordance that dismisses the keyboard.
selectA labelled listbox or native select — one value, keyboard-complete, error as text not colour.
skeletonA static loading placeholder that matches content shape, with no pulse or shimmer.
switchA toggle for instant-effect settings, with role=switch, a 44px hit area, and a reduced-motion-safe thumb slide.
tableA semantic data table with a caption, column headers, and a selected-row indicator that is not colour alone.
tabsAccessible tabs with roving tabindex, arrow-key navigation, an active indicator, and a deep-linking note.
toastA transient, non-blocking notification that announces politely and auto-dismisses.
tooltipA short label that appears on hover and keyboard focus, dismissed with Escape, and never the only way to name a control.

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/HalidSaglam/saglitzdesign-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server