The Designer
未认领MCP server for production-grade UI design — 27 tools covering design rules, OKLCH tokens with auto dark mode, WCAG 2.1 accessibility audit, React/Vue/HTML component output, vanilla CSS/SCSS/CSS Modules generation, anime.js v4 motion, anti-slop quality gates, and 328+ brand references.
01 / 选择客户端
03 / 添加配置
claude mcp add --transport stdio 'the-designer' -- 'npx' '-y' '@modelcontextprotocol/inspector' 'node' 'dist/index.js'04 / 在客户端中确认
打开客户端的 MCP 设置，确认服务器已连接并列出工具。复制配置不代表连接成功。
更多AI & ML服务器
浏览完整目录安全概况
已认领和已认证的服务器每周接受一次静态扫描，显示代码能触及的范围（外部服务、环境变量、shell 命令、代理配置目录）以及带有已知公告的依赖。认领此列表即可获得。 安全概况的工作原理
24 个工具中显示 24 个
文档中列出的工具 (24)
内容来自项目文档。服务器握手不会验证每个工具的说明或行为。
anti_pattern_check
Run 31-gate slop test on HTML/CSS
brand_fetch_design_md
Download DESIGN.md for a real brand
brand_list
List all 328+ brands by category
build_custom_tokens
Build custom OKLCH token system from paper/accent/font values — also emits dark mode derivation
detect_genre
Classify brief into editorial / modern-minimal / atmospheric / playful
evaluate_style
Score 17 design systems against product context
export_project
Full project scaffold (config + HTML + components)
generate_8state_component
Standalone HTML preview with all 8 interactive states — animated via anime.js spring physics
generate_motion_snippet
Generate a ready-to-paste motion.dev or anime.js snippet matched to the current design style's physics and easing. Supports 8 categories: entrance, micro, stagger, scroll, loader, transition, counter, typewriter. Every snippet includes a prefers-reduced-motion guard.
generate_palette_variants
Light/dark/high-contrast variants from hex colors
generate_rules
Generate design rules for style + palette + archetype/hybrid
generate_tailwind_config
Generate ready-to-use tailwind.config.js
generate_template
Full HTML starter page — ships with anime.js v3 animations
generate_tokens
Generate complete OKLCH token system. Returns css (light :root), fullcss (light + dark @media + [data-theme="dark"] overrides), darkcss, darktokens
get_cross_cutting_rules
Get standalone rules (a11y, motion, icons, tokens, responsive)
get_reference
Pull full content of any reference doc
list_installed_skills
Detect installed skill submodules
list_options
List all available systems, palettes, archetypes, hybrids
list_themes
List all 16 themes with OKLCH values, fonts, axis metadata
palette_convert
Convert palette JSON to CSS / Tailwind / SCSS / Figma / Android / Swift
palette_fetch
Fetch live palettes from Color Hunt
pre_flight_scan
Scan existing project for framework, fonts, palette, motion libs
self_critique
Score output on 6 quality axes (P-H-E-S-R-V) — anything < 3 triggers revision
validate_combo
Validate style + palette + hybrid combo