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.
安装
npx @modelcontextprotocol/inspector node dist/index.js工具（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