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の他のサーバー
ディレクトリ全体を見る未申請リスティング
このMCPサーバーはあなたのものですか？
このリスティングは公開情報から自動的にインデックスされました。申請することで、ページの編集、互換性の設定、成長ツールのアンロックができます。2分以内に完了します。
このサーバーを申請するセキュリティプロファイル
申請済みおよび認証済みのサーバーは毎週の静的スキャンを受け、コードが到達できる範囲（外部サービス、環境変数、シェルコマンド、エージェント設定フォルダ）と既知のアドバイザリを持つ依存関係が表示されます。このリスティングを申請すると利用できます。 セキュリティプロファイルの仕組み
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