saglitzdesign-mcp

---

为什么

大模型在设计方面常常自信满满地犯错。它们会套用默认方案、编造过时规范，还会给出“简洁现代一点”之类的泛泛建议。SaglitzDesign 用一套精选、有来源、具指导性的知识库取而代之，供你的 Agent 按需查询——提供资深产品设计师、转化文案撰写人和技术 SEO 专家的综合指导。

让 Agent 设计付费墙、审核着陆页或规划 iOS 应用时，它会提取具体规则（“触控目标至少为 44pt”、“每个屏幕只设一个主按钮”、“LCP ≤ 2.5s”）、顶级应用中的真实模式，以及分阶段路线图，而不是凭空猜测。

• 不依赖运行环境。 服务只读取本地文件。不需要外部 API、账户，也无需进行任何配置。开箱即用，支持离线运行。
• 本地优先设计。 它仅通过 stdio 使用 MCP，并作为 MCP 客户端的子进程运行。它不支持 HTTP 或 SSE 传输，因此无法托管在远程服务器上，也无法通过网络访问——这也意味着你的提示词和代码永远不会离开你的设备。
• 明确具体，不含糊。 每篇文档都以 Agent 可直接照做的规则编写——包含数字、阈值、应做／不应做清单和反模式。
• 有据可依。 设计语言规范来自官方来源；设计模式取材于真实的顶级应用和网站；经典内容则从原著中提炼而来。

内容概览

涵盖 11 个类别的 96 篇知识文档：

类别	涵盖内容
🎨 设计语言	Material 3 与 M3 Expressive · Apple HIG + Liquid Glass（iOS 26）· 深入的 iOS、Android（Android 16 / M3 Expressive）和 macOS 应用设计指南 · Apple 无障碍功能（动态字体、VoiceOver、触控区域）和 Apple 发布准备（Info.plist 用途说明、entitlements、应用图标集、方向/多任务限制）· Apple Intelligence 设计（AI 功能：Writing Tools、App Intents、设备端 Foundation Models）· visionOS / 空间设计（Vision Pro）· Fluent 2 · 2026 年 Web 趋势 · 设计令牌与主题（W3C DTCG）· Apple WWDC 设计原则（流畅界面）
🧩 组件	按钮（层级、尺寸、状态、标签）· 表单与输入 · 导航 · 卡片 / 列表 / 模态框 / 底部弹层 / 空状态
🧠 UX	Nielsen 启发式原则与行为法则 · 无障碍功能（WCAG 2.2）· 字体排印 · 色彩与深色模式 · 间距与网格 · 动效 · 移动端 UX · 转化率 / CRO · 数据可视化 · 信息架构 · 国际化 / 本地化（RTL） · AI 产品 UX（聊天、流式传输、Agent 式交互）· 引导流程与权限预先提示
✨ 工艺	专家级润色标准 · 字体排印工艺 · 动画工艺（缓动、弹簧、可中断性）· UX 写作与认知负荷 · 0–40 分评审标准 · 简洁 / 极简应用设计 · 设计工程（语义化 HTML、CSS 架构、代码中的设计令牌）· 伦理设计（避免暗黑模式）· 图标设计（选择和使用图标系统）· AI 默认审美（各系统文档中提到的、生成式界面惯用的渐变、字体、卡片样式和文案）
📚 书籍	精选经典——设计： Norman、Krug、Refactoring UI、设计心理学、网格 / 字体排印、交互设计（Cooper/Tidwell）、情感化设计（Walter/Norman） · 营销： Cialdini、Positioning、StoryBrand + Ogilvy、Hooked
🗺️ 流程	产品设计与营销网站路线图 · 设计系统方法论（原子设计、组件 API、治理）· 设计交接（Figma Dev Mode、Code Connect、设计↔开发）
📣 营销	品牌与形象 · 邮件营销 · HTML 邮件开发（Outlook、深色模式、防错设计）· 广告创意 · 付费墙基准（RevenueCat 2026）· 增长框架（循环 / AARRR / PLG）· 定价策略 · 分析与实验 · 价值主张与 JTBD · 内容与分发（主题集群、社区、推荐）· App Store 优化（ASO）
🔎 SEO	技术 SEO（Core Web Vitals）· 页面 SEO 与 E-E-A-T · 面向设计师的 SEO
🤖 GEO	生成式引擎优化——提升在 ChatGPT / Perplexity / AI Overviews 中的可见度、llms.txt、引用策略
🔐 安全	Web 安全标头与 CSP——严格的 nonce/hash 策略、strict-dynamic、Trusted Types、HSTS、SRI、跨源隔离，以及审计人员仍会询问的已废弃标头。每项声明均引用规范或供应商文档，并按 90 天周期重新核验。
🖼️ 模式与示例	从顶级应用和网站中研究真实场景模式（包括 电子商务与结账以及 金融科技 / 信任流程），并收录精选的真实界面示例库
哪些文档的来源会受到检查，哪些不会。 在 96 份文档中，测试套件会根据分级允许列表检查其中 11 份文档的 sources:——六份 Apple 设计语言指南（apple-hig-liquid-glass、ios-app-design、macos-app-design、apple-accessibility、apple-shipping-readiness、wwdc-design-principles）和五份 security 文档。其余 85 份经过精选，但尚未检查；将检查扩展到这些文档是独立的工作，并非走个形式：根据当前测量结果，其中 66 份文档会在 282 条来源上检查失败——227 条 URL 引用，涉及 133 个不同的主机，另有 55 条不是 URL，因此没有可检查的主机。（227 和 55 是 282 的两部分，不是要相加的两个数字。）请注意，apple-intelligence-design 和 visionos-spatial-design 是与 Apple 相关的文档，但不属于强制检查范围。get_design_doc 会在来源旁注明某份文档属于哪一边，因此你不必回到这里查询。

工作流（/ 提示词）——“帮我构建一个……”

除了回答问题，SaglitzDesign 还提供可端到端编排完整构建流程的提示词。在 Claude Code 中，它们会显示在 / 菜单中，名称取决于安装方式。作为 Claude Code 插件安装时，它们的名称是 /saglitzdesign:build_landing_page 等——这是插件命令，每个工作流在 commands/ 中对应一个生成的文件。单独安装服务时，它们的名称是 /mcp__saglitzdesign__build_landing_page，菜单中显示为 saglitzdesign:build_landing_page (MCP)。这个标签也可以直接输入，连 (MCP) 后缀也要输入——只是这是访问同一提示词的较笨拙方式。不能使用的是去掉后缀的简写：Claude Code 只会将裸的 server:prompt 别名交给 Anthropic 官方连接器——URL 必须是 https，位于 api.anthropic.com，且路径在 /v1/design/ 下；其他服务，无论是 stdio 还是远程服务，都不会获得这种别名。（上文插件的 /saglitzdesign:build_landing_page 看起来像这种别名，但它实际上是插件命令命名空间，属于另一种机制。）

调用工作流后，Agent 会运行完整流程——路线图 → 定位与文案 → 生成设计系统（颜色、字体、布局、层级、令牌）→ 实际示例 → 根据组件方案编写实际代码 → 运行确定性验证关卡（design_lint、audit_accessibility、audit_design_system、audit_ux_copy）→ 在浏览器中打开、截图、根据评审标准评分，并持续迭代，直至通过。

工作流	功能
build_landing_page	设计并构建以转化为目标的落地页，优先撰写文案，并通过视觉评审循环持续改进。
build_website	构建多页面营销网站，包括定位、信息架构、SEO/GEO 和共享设计系统。
build_mobile_app_ui	按照正确的平台基准（HIG/Liquid Glass 或 Material 3）构建 iOS 或 Android 界面。
build_dashboard	构建信息密集的 SaaS 仪表盘／应用框架，包括导航、表格和空状态，而不是一个硬塞 KPI 卡片的营销页面。
critique_screenshot	先测量截图，再进行评审，依据固定的 0–40 分评分标准，列出真实比例和颜色数量，指出具体元素，不说空话。
review_paywall	根据 RevenueCat 2026 年转化基准评估付费墙／订阅引导流程。
design_review	审查现有网站／应用——先运行确定性审查器，让结果以测量数据开篇，再给出检查清单和 0–40 分评分标准，并按严重程度排序。
redesign	运用工艺标准改进现有 UI（更大胆／更克制／更利于转化），并对改版前后进行量化对比（统一性评分、评审评分、lint 结果、对比度问题）。
port_to_platform	将现有 UI 移植到另一个平台（iOS ↔ Android ↔ macOS ↔ web），逐个界面进行移植——移植设计意图和信息架构，而非组件。

只需输入，例如 /saglitzdesign:build_landing_page a SaaS invoicing tool for freelancers——命令名称之后的所有内容都会成为需求说明，工作流会询问缺少的信息，然后开始构建。/mcp__saglitzdesign__… 格式只会将第一个空格分隔的词作为需求说明，因此需求说明是短语时，请使用插件命令。这些命令由你输入：每个命令都带有 disable-model-invocation，因此 Agent 不会自行启动命令。用自然语言提出需求时，它会转而使用技能；这些技能涵盖了许多相同领域——设计评审、落地页转化、Apple 平台——但提供的是指导，而不是这种编排式构建。saglitzdesign 技能自身的触发词包含付费墙，因此用自然语言讨论付费墙时确实会触发技能；但技能都不包含 review_paywall 的 RevenueCat 基准评分，只有在你输入该命令时才会运行。

视觉评审循环会使用已连接的任意浏览器工具（Claude in Chrome、Playwright 或 chrome-devtools MCP）查看并改进自身的输出。 如果没有浏览器工具，它会直接审查代码。

工具

工具	功能说明
create_design_system	一次调用，奠定基础。 输入品牌色、风格和平台，即可生成一张方向卡（列出可保留的命名默认项、作为决策的字体搭配、一项标志性设计手法；如果种子色位于靛蓝／紫罗兰／紫色范围，还会提供一条常见配色区域事实），以及通过 WCAG 验证的颜色（浅色＋深色）、搭配字体、图标库、模块化字体比例尺、层级阴影梯度、可直接粘贴的令牌、待构建的组件和检查清单——所有内容均协同生成。
get_design_roadmap	流程从这里开始。 针对项目类型（网站、落地页、iOS / Android / macOS 应用、SaaS Web 应用）提供分阶段的专家流程——每个阶段都有目标、退出标准和需要阅读的准确文档。
search_design_knowledge	以自然语言搜索全部内容，返回最匹配文档中最相关的部分。
get_design_doc	按 ID 获取任意文档的完整内容。
get_component_guidance	深入了解某个组件或界面（按钮、表单、付费墙、主视觉区、定价等）——包含规范和真实案例模式。
get_design_language	完整的平台／设计系统参考资料（Material 3、Liquid Glass、iOS/Android/macOS、Fluent 2、Web 趋势、令牌）。
compare_design_languages	要为多个平台构建产品？ 并排比较某个界面在 iOS / Android / macOS / Web 上的约定（导航、按钮、底部面板、动效、表单等），并提供移植规则和明确的 不要移植 清单。
get_design_examples	精选热门应用／网站中某种模式的真实案例，并附上各自的优点说明。（截图仅为本地资源——参见视觉示例。）
design_review_checklist	按项目类型和重点（UI、UX、无障碍、SEO、GEO、转化、文案）整理的审核清单。
seo_geo_guide	SEO 和 GEO 指南，可按主题进一步筛选。
import_design_tokens	已有设计系统？ 粘贴 CSS 自定义属性、shadcn :root 区块、DTCG 文件或主题 JSON，即可获取其中命名的角色、未定义的角色、对已定义颜色组合进行的 WCAG 检查，以及重新输出为 CSS / Tailwind / SwiftUI / Compose / DTCG 的完整集合。这是 generate_design_tokens 的逆向操作——将 Web 主题移植到 iOS，或审核继承而来的主题。只读取已命名的令牌；绝不会执行 JS 配置。
generate_design_tokens	生成实际产物，而非建议——将颜色／间距／字体规范转换为 CSS 变量、Tailwind v4、SwiftUI、Jetpack Compose 和 W3C DTCG JSON。
audit_accessibility	确定性的 WCAG 2.2 检查——精确计算颜色组合的对比度，以及各平台的点击目标尺寸，并提供修复方案。
get_component_recipe	为组件（button、input、modal、toast、card、switch、tabs、empty-state、list-row、navigation、search、select、table、tooltip、form、pagination、skeleton、badge、breadcrumb）提供适用于生产环境且无障碍的参考代码，支持 react-tailwind、html-css、SwiftUI 或 Compose——涵盖所有状态、ARIA、键盘操作和正确的动效。传入你的 scales——即 generate_color_system 返回的 neutral、primary 和 danger 色阶——生成的代码就会使用你的颜色，包括深色模式色调。
generate_color_system	一个品牌色 → 完整调色板。 生成 50–950 色调阶梯、协调统一的中性色阶、与品牌色相协调的状态色（danger / success / warning），以及浅色＋深色语义令牌——所有文本／UI 颜色组合均通过 WCAG 验证并自动校正。可直接馈入 generate_design_tokens。
suggest_font_pairing	根据风格（SaaS、编辑风、粗犷、原生等）推荐精选的生产级字体搭配——标题＋正文（＋等宽字体），包含可直接粘贴的 CSS 字体栈、字重、选择理由和字体比例尺。
fix_contrast	修复未通过检查的颜色组合：计算符合 WCAG 目标的最接近的无障碍颜色（保留色相／饱和度）——返回校正后的值，而不只是失败报告。
suggest_icon_library	根据风格／平台推荐合适的图标系统（Lucide、Phosphor、Solar、SF Symbols、Material Symbols 等）——附带许可证、安装命令、覆盖范围、适配理由和使用规则。
generate_type_scale	模块化字体比例尺（基准 × 比率）→ 带行高、字距和流式 clamp() 的命名级别，以 CSS 变量＋Tailwind 形式输出。
generate_elevation_system	生成协调统一的分层盒阴影梯度（扁平→模态框），以 CSS 变量＋Tailwind 形式输出，并提供深色模式指南。
generate_layout_system	断点（说明各断点的变化）、容器宽度、列网格、内在自适应网格、容器查询和流式区块节奏比例尺——以 CSS 变量＋Tailwind v4 形式输出。
generate_motion	生成缓动＋时长令牌，以及可直接粘贴的关键帧动画（淡入／滑动／缩放／弹簧／闪烁），支持 CSS、Framer Motion 或 SwiftUI——包含减少动态效果的支持。
design_lint	检查 HTML/CSS/JSX/Tailwind 代码片段中的设计与无障碍反模式（硬编码值、禁用焦点、缺失 alt／标签、可点击的 div、未标注的输入框等），并标出行号和修复方法。识别标签，因此格式变化不会影响判定。返回 Markdown 和结构化输出——问题、严重性摘要，以及机器可读的 notVisible 列表，列出无法检查的内容。
measure_screenshot	测量你的实际界面。 输入 PNG，即可获取实际调色板和颜色数量、屏幕上颜色组合的真实 WCAG 对比度、密度、结构检测结果（对齐、节奏、偏离网格的间距），每项都带有置信度；若明显的颜色簇位于 Tailwind 靛蓝／紫罗兰／紫色范围，还会提供一条常见配色区域事实。另附可独立打开和分享的 HTML 报告。纯 Node PNG 解码，无网络、无依赖项。
audit_project	审核真实代码库，而非代码片段。 指定目录后，它会遍历设计源文件、检查每个文件，并评估整个项目的一致性——可发现单文件检查无法发现的跨文件偏差。问题按最严重文件优先排序，并标出文件:行号；另附明确清单，列出未检查的内容。返回 Markdown 和结构化输出——问题、严重性摘要、机器可读的 notVisible 列表，以及 scan 区块，报告实际读取的文件数和字节数、因大小而跳过或无法打开的文件，以及是否达到上限。路径不存在或不是目录时会返回错误结果，而非空审核结果。
audit_security	审核 Web 项目或代码片段中实际可能进入生产环境的缺陷——缺失或薄弱的 Content-Security-Policy、缺少 HSTS、跨源脚本未固定版本、混合内容、localStorage 中的凭据、名称含秘密信息的 NEXT_PUBLIC_/VITE_ 变量、未沙盒化的第三方 iframe、通配符 postMessage、没有消毒器的原始 HTML 注入点、生产环境源映射，以及未忽略的 .env 文件。它会从技术栈声明配置的位置推断响应头状态——next.config、vercel.json、netlify.toml、_headers、staticwebapp.config.json、firebase.json、Nuxt routeRules、Remix headers 导出、SvelteKit hooks.server.ts / kit.csp、Astro 中间件和 Next 中间件，或其 Next 16 更名后的 proxy.ts、Workers/Deno/Bun 中的 new Response(…, { headers }) 和 new Headers({…})、任何 JSON 或对象字面量中带引号的响应头属性名、接收 set、setHeader、append 或 header 方法调用（无论对象名是什么，如 res.set / res.setHeader、headers.set / headers.append、Fastify reply.header、Hono c.header、Koa ctx.set），以及 <meta http-equiv>。它只读取文本，不会执行；不会发出网络请求，并会说明无法检查的内容。返回 Markdown 和结构化输出——问题、严重性摘要，以及机器可读的 notVisible 列表，列出无法检查的内容。路径不存在或不是目录时会返回错误结果，而非空审核结果。
audit_seo_geo	审核源代码中实际存在的 SEO 和 GEO 信号——缺少 <title> 或标题长度不在搜索结果可显示范围内；meta 描述也进行同样检查；存在多个 H1、跳过标题级别、缺少 canonical、独立文档中的 canonical 使用相对路径、canonical 指向 localhost 或预发布环境、hreflang 集合未列出页面自身、JSON-LD 无法解析或未声明 @context/@type，或声明的类型属于 Google 已停用富媒体搜索结果的类型；缺少 alt 文本；robots.txt 抓取规则（包括 ChatGPT、Claude、Perplexity 和 Google AI 功能背后的 AI 爬虫）；robots.txt 未指定站点地图、旁边没有 llms.txt，以及只有脚本运行后才存在的内容。只有能够证实缺失时才会报告缺失——例如独立 HTML 文档或完整目录；扫描达到上限时，所有缺失声明都会降级为未经确认的说明。它只读取源代码，不进行任何测量：不会发出请求，因此没有任何结果代表 Core Web Vitals、索引状态或排名情况。返回 Markdown 和结构化输出——问题、严重性摘要，以及机器可读的 notVisible 列表，列出无法检查的内容。
audit_performance	审核源代码中实际存在的性能信号——被 loading="lazy" 延迟加载或与自身 fetchpriority 冲突的主视觉区图片；未声明 fetch priority 的 LCP 候选图片；在 CSS 或内联样式中声明、因而无法被 HTML 预加载扫描器发现的主视觉区背景；未设置 width/height 或 aspect-ratio 来预留空间的图片；<head> 中既无 defer、也无 async 或 type="module" 的 <script src>；未设置 font-display 的 @font-face；第三方字体主机；以及从不同远程域名加载的脚本数量超过任何对“尽量减少”的合理理解所能支持的范围。主视觉区规则刻意设得很窄——仅检查 <main> 中的第一张图片，并在结构上排除页眉 Logo 和文章中段的示意图——因此某些页面不会产生任何主视觉区问题，并会明确报告这一点，而不是让人误以为结果干净。Core Web Vitals 来自实测数据；此工具不会加载或计时任何内容。返回 Markdown 和结构化输出。
audit_apple_ui	依据 Apple 官方文档审核 iOS 或 macOS 应用。 指定 Xcode 项目目录：它会读取项目声明配置的四类内容——信息属性列表、project.pbxproj 中的 INFOPLIST_KEY_* 构建设置、entitlements plist，以及每个 colorset 的 Contents.json——根据这些内容和 Swift 导入项推断目标平台为 iOS 还是 macOS，并运行八条规则：自定义 colorset 未设置 luminosity: dark 外观；已弃用的 UIRequiresFullScreen 键（两种拼写）；麦克风 entitlement 只在一项 capability 中声明而未在对应项中声明；macOS 上缺少 App Sandbox entitlement（报告为 Mac App Store 渠道相关事实，而非缺陷）；以及 NavigationView、仅限 iOS 的 .font(.system(size:))、用数字指定颜色，以及整个 Button 标签仅含一个 SF Symbol。若平台判定信号不足，所有平台范围规则都会保持静默；报告会列出判定结果和依据的信号，因此静默表示未通过判定门槛，而非审核结论。它不会构建项目、运行模拟器或截取屏幕。返回 Markdown 和结构化输出——问题、严重性摘要、scan 区块，以及此服务提供的最完整 notVisible 列表，其中每项都根据实际运行结果生成。仅支持目录；传入 code 参数、路径不存在或路径为文件时，会返回错误结果，而非空审核结果。
audit_android_ui	依据 Material 3 和 android-app-design 审核 Android 应用。 指定项目或模块目录：它会读取 AndroidManifest.xml、资源 XML 和 Kotlin 文件，根据这些内容以及 Compose/Android 导入项推断该目录是否为 Android 项目，并运行六条规则：关闭 edge-to-edge 的属性（已弃用，且在 Android 16 上会被忽略）；关闭预测性返回的设置；已读取的界面中存在日间主题 XML，但没有 values-night/ 文件；Color(0x…) 字面量；fontSize = N.sp；以及 Material 2 组件导入。若未发现 Android 信号，所有配置规则都会保持静默；报告会列出判定结果和依据的信号，因此静默表示未通过判定门槛，而非审核结论。它不会构建项目、启动模拟器或截取屏幕。返回 Markdown 和结构化输出——问题、严重性摘要、scan 区块，以及机器可读的 notVisible 列表，其中每项都根据实际运行结果生成。仅支持目录；传入 code 参数、路径不存在或路径为文件时，会返回错误结果，而非空审核结果。
audit_design_system	这里真的存在一套系统吗？ 指定真实 CSS/JSX，即可获取一致性评分以及背后的繁杂情况：当前使用的不同颜色、尺寸、圆角、阴影和间距数量；哪些颜色重复且无法区分；哪些值偏离 4pt 网格；令牌采用情况——以及一份精简整合计划。
audit_generic_design	审核生成式界面常用的具体默认设计——常见的 Tailwind 靛蓝／紫罗兰／紫色渐变（以类名、十六进制值或 OKLCH 表示）；品牌界面唯一声明的字体为 Inter/Roboto/Open Sans/DM Sans/Plus Jakarta Sans；用 Emoji 代替图标；整页重复使用 rounded-2xl + shadow-lg + 边框卡片组合；渐变填充的标题文本；每个标题上方都有眉题标签；backdrop-blur + white/10 玻璃拟态组合；三个或更多 animate-pulse / animate-shimmer 占位符；常见的夸张开场文案；连续堆叠的填充副词；以及每个 CTA 都来自常见集合的页面。每项发现都是源代码中的事实——类名、短语或重复结构——绝不评判结果是否属于优秀设计；0–100 分的评分统计不同信号，而非出现次数，并按规则和文件:行号逐项列出。可与 design_review_checklist 或 get_design_doc("design-critique-scoring") 搭配使用，评估审美部分。返回 Markdown 和结构化输出——问题、严重性摘要、机器可读的 notVisible 列表、逐项评分，以及（目录模式下）标记截断读取的 scan 区块。路径不存在或不是目录时会返回错误结果，而非空审核结果。
audit_ux_copy	客观审核文案——可读性（Flesch）、句子长度、被动语态、行话、填充词、用户关注度、力度不足的 CTA——并标出相关短语和修复建议。
audit_ethical_design	审核粘贴的代码片段中来自 ethical-design 的已知欺骗性模式特征——让用户羞愧地拒绝文案（“不用了，我讨厌……”）、预先勾选的营销或新闻通讯复选框、附近没有实时约束依据的稀缺性或截止日期话术，以及没有同等命名拒绝选项的“全部接受”。每项发现都是关于某个短语或属性的事实——并非对业务的判定。它只读取源代码，不进行测量。仅支持代码片段；不支持目录模式。返回 Markdown 和结构化输出——问题、严重性摘要，以及机器可读的 notVisible 列表。
list_design_knowledge	按类别／平台浏览完整的知识索引。
knowledge_freshness	报告每份文档的时效与相应类别过期阈值的对比，帮助知识库保持更新。

资源

除了工具之外，知识库还以 MCP 资源的形式提供，因此支持资源的客户端（Claude Desktop、Cursor）可以直接通过 @ 提及文档，并自动补全 ID，而不必调用工具：

URI	内容
saglitzdesign://index	完整索引：按类别列出每份文档，并附带平台和最后验证日期。
saglitzdesign://doc/{id}	一份完整的知识文档（共 96 份）。可自动补全 id。
saglitzdesign://recipe/{component}	组件规范，以及该组件在所有可用技术栈中的参考实现。

视觉示例

get_design_examples 提供经过筛选的真实应用／网站屏幕库。屏幕截图本身是第三方素材，不会再分发，因此发布的 npm 包只包含注释和源链接，不包含图片——工具会检测到这一点并如实说明，而不会假装图片存在。克隆仓库后，可以重建本地图片库；请参阅 scripts/regenerate-examples.md。

安装

要求： Node.js 20+。

通过 npm 安装（无需克隆）：

npx saglitzdesign-mcp

从源代码安装：

git clone https://github.com/HalidSaglam/saglitzdesign-mcp.git
cd saglitzdesign-mcp
npm install
npm run build

Claude Code

注册一次（通过 npm，无需克隆），即可在每个项目中使用：

claude mcp add --scope user saglitzdesign -- npx -y saglitzdesign-mcp

或者，如果你克隆了仓库，可以将其指向构建后的文件：

claude mcp add --scope user saglitzdesign node /absolute/path/to/saglitzdesign-mcp/dist/index.js

作为插件安装

一次安装即可获得全部三部分——MCP 服务、全部九个技能（八个深度技能加上负责将请求路由到这些技能的总入口），以及每个工作流对应的斜杠命令：

claude plugin marketplace add HalidSaglam/saglitzdesign-mcp
claude plugin install saglitzdesign@saglitz

该插件将服务声明为 npx -y saglitzdesign-mcp@latest，因此服务本身仍来自 npm；技能和命令则是插件中的文件。运行 claude plugin details saglitzdesign@saglitz 可查看已安装的内容。

三种安装方式提供的内容并不相同：

安装方式	服务、知识库、配方	技能	/saglitzdesign:… 命令
claude plugin install saglitzdesign@saglitz	是	全部九个——八个深度技能加上总入口	每个工作流一个
npx saglitzdesign-mcp / claude mcp add	是	—	—
npx skills@latest add HalidSaglam/saglitzdesign-mcp	—	全部九个——八个深度技能加上总入口	—

npm 包的 files: 列表涵盖 dist/、knowledge/ 和 recipes/，不包含 skills/ 或 commands/——因此，仅安装 MCP 会获得所有工具和文档，但不会获得任何技能或命令文件。Skills CLI 则恰好相反：它会将每个 SKILL.md 复制到你的 Agent 中，但不包含服务，因此除非你也安装了服务，否则这些技能所指向的工具并不存在。克隆仓库可以获得全部源文件，但无法直接运行服务：dist/ 被 gitignore，因此克隆后需要运行 npm install && npm run build，才能启动 node dist/index.js。表格中的其他内容都是受版本控制的文件，克隆时会一并获取。

Claude Desktop

将以下内容添加到 ~/Library/Application Support/Claude/claude_desktop_config.json：

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

Cursor / 其他 MCP 客户端

通过 stdio 运行 npx -y saglitzdesign-mcp（如果是从克隆的仓库运行，则使用 node /absolute/path/to/dist/index.js）。

需要 Node 20 或更高版本。 在 Node 18 上也可以运行，但会显示警告；低于该版本时，启动器会退出并说明原因，而不是报语法错误。

由客户端启动服务，你无需自行启动。手动运行时，服务会打印状态，然后等待客户端通过标准输入连接。由于客户端并未连接，这看起来像是卡住了，但服务其实正在正常工作。

作为技能（无需 MCP 服务）

更喜欢轻量、独立的技能？将精简版 SaglitzDesign 技能安装到任何兼容 skills 的 Agent 中：

npx skills@latest add HalidSaglam/saglitzdesign-mcp

共有九项技能。saglitzdesign 是总入口：它本身不提供深入指导，而是将任务分派给其他八项技能中最合适的一项。这八项技能——clean-interface-design、landing-page-conversion、design-review、motion-and-animation、apple-platform-design、android-platform-design、design-system-audit、ship-quality-gate——各自都是独立的指导，也会指向完整的 MCP，以提供深入内容。请参阅 skills/。

每项技能都会复制到你的 Agent 中，并将其内容哈希固定在 skills-lock.json 中，因此已安装的技能不会因本仓库变化而改变。再次运行上面的命令，即可获取新技能或更新后的技能。

开发与调试

npm run dev       # run from TypeScript via tsx
npm run inspect   # open the MCP Inspector UI

用法

连接后，只需自然地与 Agent 对话——它会决定何时调用工具：

“使用 saglitzdesign，为一款 iOS 健身应用规划设计。” → get_design_roadmap 会返回一份包含 7 个阶段的计划，并列出每个阶段要阅读的文档。

“使用 saglitzdesign，检查我的落地页转化效果。” → design_review_checklist（落地页 / 转化）+ get_design_examples。

“移动设备上的主按钮应该如何响应？” → get_component_guidance 会返回规格、状态、标签和反模式。

“给我看看真实的付费墙示例。” → get_design_examples 会返回带注释的截图。

“llms.txt 是什么？该如何设置？” → seo_geo_guide（GEO）会提供相应策略和可直接使用的示例。

自定义设计规则

将服务指向你自己的目录，你的文档就会加入基础知识库——可搜索、可阅读；如果你提出要求，还会纳入审查清单：

claude mcp add --scope user saglitzdesign \
  --env SAGLITZDESIGN_KNOWLEDGE_DIR=/path/to/our-design-rules \
  -- npx -y saglitzdesign-mcp

或者在 claude_desktop_config.json / 任意 MCP 客户端中，与 command 和 args 一起配置：

"env": { "SAGLITZDESIGN_KNOWLEDGE_DIR": "/path/to/our-design-rules" }

可以配置多个目录，分隔方式与所在平台上的 PATH 相同。

• 优先采用你的规则。 如果搜索确实涉及你记录的内容，你的文档会优先显示——优先级取决于它涵盖的查询词数量，因此简短的内部规则文件不会被冗长的参考文档埋没。
• 相同 ID 会替换我们的文档。 带有 id: buttons 的文件会接替内置文件。这是有意为之，并会在启动时明确提示，不会悄然发生。无论文档在哪里提供，都会标记为你团队的文档，因此不会把你的内容误引为平台指南。
• 在 frontmatter 中设置 review: [website, saas-web-app]，即可将文档加入这些项目类型的 design_review_checklist，并排在精选列表之前——这决定了你的规则是仅可查找，还是会被实际执行。

在已安装的软件包中编辑文件虽然有效，但 npm update 会将其删除。请使用环境变量。

向此仓库添加内容

在 knowledge/ 下的任意位置添加带有 frontmatter 的 Markdown 文件：

---
id: my-topic
title: "My Topic"
category: ux            # design-language | component | ux | seo | geo | pattern | craft | book | process | marketing | security
platform: both          # mobile | web | macos | both
tags: [tag1, tag2]
sources: ["https://…"]
updated: 2026-07-08
---

Content served verbatim to clients…

服务会在启动时为每个 .md 文件建立索引——内容变更无需重新构建（只需重启服务）。.claude/commands/ 中的 /refresh-knowledge 命令可通过 Agent 重新研究过时的文档。

知识库的构建方式

设计语言和 SEO/GEO 文档基于官方文档和最新资料进行研究（来源在每个文件的 sources 中注明）。我们研究了热门应用和网站中的真实 UI 模式，并以同样的方式整理了视觉示例库。经典设计和营销书籍则被提炼为原创、可操作的综合指南——未复现任何原文。

关于图片： 截图文件属于本地研究资料，不会包含在本仓库或任何已发布的软件包中。没有这些文件时，get_design_examples 会自动降级为提供描述和来源链接。要重建本地图像库（或添加你自己的示例），请参阅 scripts/regenerate-examples.md。

可在以下平台找到

也已列入 官方 MCP 注册表 和 npm。

许可证

MIT © 2026 Saglitz Design。

knowledge/ 中的文档为原创汇编，并在各文件中注明了来源。 引用的屏幕截图不属于此仓库，且不得再分发 — 请参阅 NOTICE.md。