Для чего этот сервер?

Этот сервер помогает AI-ассистентам напрямую работать с компонентами из Storybook. Вместо того чтобы описывать интерфейс словами, он подключается к живой дизайн-системе, вытаскивает HTML, стили, темы и зависимости компонентов. Разработчику не нужно вручную искать документацию — ассистент сам получает актуальную разметку и может использовать её в коде.

Каталог MCP
freema/mcp-design-system-extractor

freema/mcp-design-system-extractor

от freema

MCP сервер извлекает компоненты и их метаданные из Storybook дизайн-систем. Подключаясь к Storybook, получает HTML-код, стили и информацию о темах. Помогает разработчикам анализировать и интегриров...

Github Сайт сервера

README

Инструменты и схема сервера

Версии

Установить сервер

MCP Design System Extractor

A Model Context Protocol (MCP) server that extracts component information from Storybook design systems. Connects to Storybook instances and extracts HTML, styles, and component metadata.

Demo

Installation

Using Claude CLI (Recommended)

claude mcp add design-system npx mcp-design-system-extractor@latest \
  --env STORYBOOK_URL=http://localhost:6006

With self-signed certificate:

claude mcp add design-system npx mcp-design-system-extractor@latest \
  --env STORYBOOK_URL=https://my-storybook.example.com \
  --env NODE_TLS_REJECT_UNAUTHORIZED=0

Using npm

npm install -g mcp-design-system-extractor

Then configure in your MCP client (see Environment Variables).

From Source

git clone https://github.com/freema/mcp-design-system-extractor.git
cd mcp-design-system-extractor
npm install && npm run build
npm run setup  # Interactive setup for Claude Desktop

Key Dependencies

Puppeteer: Uses headless Chrome for dynamic JavaScript component rendering
Chrome/Chromium: Required for Puppeteer (automatically handled in Docker)
Works with built Storybook distributions

Часто задаваемые вопросы

У этого сервера пока нет списка инструментов.

Похожие MCP-сервера

21st-dev/Magic-MCP

от 21st-dev

Создаёт готовые React-компоненты по текстовому описанию прямо в Cursor, Windsurf и VS Code. Подтягивает стили из 21st.dev и показывает превью на лету.

mhmzdev/Figma-Flutter-MCP

от mhmzdev

Переводит Figma-макеты в Flutter-код: извлекает стили, цвета, типографику и структуру экранов, подсказывает подходящие виджеты и паттерны реализации.

mmntm/weblate-mcp

от mmntm

MCP-сервер для управления переводами в Weblate через AI-ассистентов. Позволяет искать, обновлять переводы, управлять проектами, компонентами и получать статистику. Ускоряет локализацию и автоматизи...

Tommertom/awesome-ionic-mcp

от tommertom

MCP инструмент для разработчиков Ionic и Capacitor: предоставляет компоненты фреймворка, плагины, документацию и позволяет выполнять CLI команды прямо через AI-ассистента. Ускоряет создание кроссплатформенных приложений.

x51xxx/copilot-mcp-server

от x51xxx

MCP сервер для подключения GitHub Copilot CLI к вашему редактору или ИИ-ассистенту. Позволяет выполнять неинтерактивные команды, анализировать код с @ссылками на файлы, проводить ревью, рефакторинг и пакетную обработку задач. Полезен разработчикам для автоматизации CI и ускорения работы с кодом.

Jpisnice/shadcn-ui-mcp-server

от jpisnice

Подтягивает актуальные исходники компонентов shadcn/ui v4 с демо и готовыми блоками для React, Svelte, Vue и React Native.