What is Designer MCP?
designer-mcp is an MIT licensed TypeScript MCP server from the HeLa MCP ecosystem, where it is the Design component. Its 37 tools turn design theory into code: OKLCH tokens, a 35-gate anti-slop test, a 25-check WCAG 2.1 audit, framework-native components, CSS output, motion snippets and logo tools.
The README calls it Design-Theory-as-a-Service. Instead of retrieving code snippets, it encodes design principles such as OKLCH color math, motion physics, type scaling and accessibility as algorithms with strict quality gates.
It is the HeLa Phenotype server, the Design component of the HeLa MCP ecosystem, and covers 17 design systems across 37 tools. A live demo, the Ellis UI collection, shows 24 aesthetic systems built from one letter.
What changes in your agent's output
- A 35-gate slop test and a six-axis self-critique reject anything that scores below 3, so weak output is revised.
- Themes come as OKLCH tokens with dark mode derived automatically, shipped as
:rootplus media query anddata-themeoverrides. - Components such as button, card, navbar and hero output as HTML with Tailwind, typed React TSX or Vue 3 SFC.
- Motion snippets for motion.dev or anime.js all include a
prefers-reduced-motionguard.
A typical design flow
- Run
pre_flight_scanto detect the project's framework, fonts, palette tokens and motion libraries. - Use
evaluate_styleordetect_genreto choose a direction, thengenerate_rulesandgenerate_tokens. - Build with
get_componentorgenerate_template, and export CSS, SCSS or CSS Modules. - Check the result with
anti_pattern_check,self_critiqueandaudit_accessibility.
Who Designer MCP is for
Best for
- Front-end builders who want an agent to follow explicit rules. Related: DESIGN.md and tailwind-design-system.
- Teams that need a quick accessibility score. Related: web-accessibility-skill.
- Brand work that includes logos, favicons and presentation boards.
Not for
- Anyone who needs Figma data. It generates designs and code, and does not read Figma files.
- Users who want a one-line hosted setup. The README installs it by cloning and building.
- Projects with no Node.js, since the requirement is Node.js 18 or newer.
Use it with UiChemy
Designer MCP gives an agent tokens, components and CSS for a static or React front end. For a WordPress site, UiChemy's Composer writes the layout as real code inside Elementor or Gutenberg. Click Get Started on uichemy.com.
Connect Designer MCP: Anti-Slop UI and Brand Design Tools for AI Agents to your AI client
git clone https://github.com/1999AZZAR/designer-mcp.git && cd designer-mcp && npm install && npm run buildCheck requirements
You need Node.js 18 or newer. For the
logo_*tools, thelogo_rendererstool reports which rendering backends are installed on your machine.Clone the repository
Run
git clone https://github.com/1999AZZAR/designer-mcp.gitand move into the folder.Install and build
Run
npm installand thennpm run build.Register it in your client
Follow the README's Configuring with AI Assistants section for your client. The HeLa ecosystem docs cover profiles and multi-client setup.
Try a tool
Ask your agent to run
list_optionsto see the available systems, palettes, archetypes and hybrids.
Endpoints and ports
https://1999AZZAR.github.io/designer-mcp/Ellis UI collection, 24 aesthetic systemshttps://github.com/1999AZZAR/hela-mcp-ecosystemProfiles, workflows and multi-client setupWhat you can do with it
- Anti-slop quality gatesA 35-gate test and six-axis self-critique push the agent to revise generic output.
- OKLCH token systemSixteen curated themes with dark mode derived automatically.
- Framework-native componentsHTML with Tailwind, React TSX with typed props, or Vue 3 script setup components.
- CSS output engineVanilla CSS, CSS Modules with eight states, SCSS with mixins, or a single tokens file.
- WCAG 2.1 auditTwenty-five static checks, from alt text and unlabeled inputs to skip links and viewport scale lock.
- Motion systemStyle-aware presets for motion.dev and anime.js, each guarded for reduced motion.
- Brand design referencesFetches DESIGN.md files from a 328 plus brand catalog, with 62 brands shipped locally.
- Logo and brand-mark toolsEight logo tools cover audit, search, rendering, delivery variants, concept sheets and client boards.
Tools it exposes
evaluate_style
Scores 17 design systems against the product context.
pre_flight_scan
Scans an existing project for framework, fonts, palette and motion libraries.
generate_rules
Generates design rules for a style, palette and archetype or hybrid.
generate_tokens
Generates a complete OKLCH token system with light and dark CSS.
generate_tailwind_config
Generates a ready-to-use tailwind.config.js.
anti_pattern_check
Runs the 35-gate slop test on HTML or CSS.
self_critique
Scores output on six quality axes, and anything under 3 triggers revision.
audit_accessibility
Runs a 25-check WCAG 2.1 static audit and returns a 0 to 100 score, an A to F grade and fixes.
get_component
Returns a production-ready component as HTML, React or Vue via the framework parameter.
generate_css_output
Produces vanilla CSS, CSS Modules, SCSS or a tokens-only file as named files.
generate_motion_snippet
Produces a motion.dev or anime.js snippet in eight categories, matched to the style.
brand_fetch_design_md
Downloads a DESIGN.md for a real brand.
logo_audit
Audits logo SVGs for live text, rasters, filters, gradients and tiny details.
logo_search_library
Searches a library of 1,432 logo SVGs by type, technique, industry, color and mood.
Frequently asked questions
What is Designer MCP?
It is a Model Context Protocol server, published as designer-mcp, that codifies UI design theory into 37 tools. It covers OKLCH tokens, anti-slop quality gates, WCAG 2.1 audits, component and CSS output, motion snippets and logo design.
How do I install designer-mcp?
Clone the repository, run npm install, then npm run build. Node.js 18 or newer is required. After building, register the server in your client using the README's Configuring with AI Assistants section.
What does the anti-slop test do?
The anti_pattern_check tool runs a 35-gate slop test on HTML or CSS, and self_critique scores output on six axes. Anything scoring below 3 triggers a revision, which keeps generic output from shipping.
Which frameworks can it output?
Components come as HTML with Tailwind, React TSX with typed props, or Vue 3 single-file components through the framework parameter. CSS output can be vanilla, CSS Modules, SCSS or a tokens-only file.
Does it work with Claude Code, Cursor and other agents?
The README has a Configuring with AI Assistants section and points to the HeLa ecosystem docs for profiles and multi-client setup. Check those for the exact steps for Claude Code, Cursor or another client, since this page does not list client-specific config.
How accurate is the accessibility audit?
The README describes it as a 25-check static auditor covering alt text, unlabeled inputs, empty buttons and links, heading order, focus-visible removal, skip links, landmarks and viewport scale lock. It returns a 0 to 100 score, an A to F grade and fixes.
What else helps keep AI design output consistent?
Rule files and skills do similar work in a lighter form, without running a server. Designer MCP instead runs 37 tools, including a 35-gate anti-slop test and 25 static WCAG 2.1 checks. Related: create-design-md and Theme Factory.