shadcn-ui-mcp-server and mcp-design-system-extractor

These are complements: one provides pre-built component knowledge for shadcn/ui specifically, while the other extracts and analyzes components from any Storybook-based design system, allowing developers to leverage AI assistance across different design system sources.

Maintenance 16/25
Adoption 19/25
Maturity 25/25
Community 20/25
Maintenance 10/25
Adoption 8/25
Maturity 24/25
Community 18/25
Stars: 2,731
Forks: 283
Downloads: 6,752
Commits (30d): 1
Language: TypeScript
License: MIT
Stars: 56
Forks: 13
Downloads:
Commits (30d): 0
Language: TypeScript
License: MIT
No risk flags
No risk flags

About shadcn-ui-mcp-server

Jpisnice/shadcn-ui-mcp-server

A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation,compaitable with react,svelte 5,vue & React Native

This project helps AI assistants quickly generate user interfaces using shadcn/ui components. It takes natural language requests from a developer, processes them, and outputs ready-to-use code for React, Svelte, Vue, or React Native. A software developer who uses AI tools to speed up their UI development workflow would find this valuable.

AI-assisted coding frontend development UI component generation React development Svelte development Vue development

About mcp-design-system-extractor

freema/mcp-design-system-extractor

MCP (Model Context Protocol) server that enables AI assistants to interact with Storybook design systems. Extract component HTML, analyze styles, and help with design system adoption and refactoring.

This tool helps frontend developers, UI/UX designers, and anyone building web interfaces to deeply understand and work with existing design systems. It connects to your Storybook instance, extracts rendered component HTML, analyzes styles like colors and typography, and identifies component dependencies. The output provides structured information about your design system, making it easier to adopt existing components, refactor parts of your UI, or migrate designs across frameworks.

frontend-development design-system-management UI-component-analysis web-design code-refactoring

Scores updated daily from GitHub, PyPI, and npm data. How scores work