Design system lookup, CSS best practices, and AI-driven UI component generation via MCP tools
The English summary is being prepared. Showing the original description.
See how to installReview the instructions the agent will receive before you install.
Access design token libraries, CSS documentation, and AI-driven component generation.
Semantic search across 188+ design systems (Material, Ant Design, Carbon, Chakra, etc.):
# Setup
npx @southleft/design-systems-mcp
# Example queries via MCP
mcp__design_systems__search_components({ query: "button with loading state" })
mcp__design_systems__get_tokens({ system: "material", category: "color" })
mcp__design_systems__get_patterns({ pattern: "form validation error" })
Use cases: Find existing component patterns before building custom, get design token values, compare component API across systems.
MDN CSS documentation + browser compatibility via MCP:
mcp__css__query_property({ property: "container-type" }) # Container queries
mcp__css__check_compat({ property: "has()", browsers: ["chrome", "firefox", "safari"] })
mcp__css__get_examples({ selector: ":is()" })
Generate UI components from natural language:
# Configure Magic MCP with 21st-dev API key
mcp__magic__create_component({ description: "dark mode toggle with animation", framework: "react" })
mcp__magic__find_component({ query: "pricing table with feature comparison" })
/* CSS Custom Properties (recommended) */
--color-primary: #6366f1;
--spacing-md: 1rem;
--radius-lg: 0.5rem;
--font-sans: 'Inter', system-ui, sans-serif;
/* Token categories: color, spacing, typography, radius, shadow, z-index */
Skill({ skill: 'design-systems' }) for design token lookup, component pattern research, CSS best practices, AI component generation
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Ensure accessibility in UI components including semantic HTML, ARIA attributes, keyboard navigation, and WCAG 2.2 AA compliance.
The English summary is being prepared. Showing the original description.
Use when you want to improve response quality through meta-cognitive reasoning. Applies 15+ reasoning methods to reconsider and refine initial outputs.
The English summary is being prepared. Showing the original description.
N-round opposing-stance debates for trade-off analysis. Assigns pro/con roles to agents, runs structured debate rounds with quality scoring, and produces a moderator synthesis with confidence-rated recommendation. Generalizable to architecture, technology, security, and design decisions.
The English summary is being prepared. Showing the original description.
Force adversarial code review stance that eliminates confirmation bias — reviewer must find issues or re-analyze
The English summary is being prepared. Showing the original description.
Creates specialized AI agents on-demand when no existing agent matches a request. Use when the Router cannot find a suitable agent for a task. Enables self-evolution by generating persistent agents.
The English summary is being prepared. Showing the original description.
LLM-as-judge evaluation framework with 5-dimension rubric (accuracy, groundedness, coherence, completeness, helpfulness) for scoring AI-generated content quality with weighted composite scores and evidence citations
The English summary is being prepared. Showing the original description.