Fragments Mcp
Wire a design-system MCP into Claude Code or Cursor so agents discover Fragments components, preview renders, and run accessibility audits without leaving the repo.
Overview
io.github.ConanMcN/fragments-mcp is a MCP server for the Build phase that exposes nine design-system tools for Fragments component discovery, rendering, and accessibility auditing.
What is this MCP server?
- Nine MCP tools for design-system workflows: discovery, rendering, and accessibility auditing
- Stdio npm package @fragments-sdk/mcp (v0.5.7) for Claude Code, Cursor, and other MCP hosts
- Component discovery so agents pick real tokens and patterns instead of inventing one-off UI
- Rendering support to validate layouts against the system before merge
- Built-in a11y auditing aligned with shipping accessible SaaS and marketing sites
- 9 MCP tools for component discovery, rendering, and a11y auditing
- Package @fragments-sdk/mcp version 0.5.7
- Transport: stdio
What problem does it solve?
Coding agents invent off-brand UI and miss accessibility issues because they cannot see your real component library or run structured a11y checks.
Who is it for?
Indie builders using the Fragments design system who want Claude Code or Cursor to implement screens with real components and audit passes before code review.
Skip if: Teams without Fragments or any design-system package, or builders who only need generic browser scraping instead of component-level tooling.
What do I get? / Deliverables
After you add the stdio MCP server, agents query Fragments components, preview renders, and surface a11y findings so shipped UI stays on-system and more accessible.
- Agent-discoverable Fragments component metadata and usage context
- Render previews for validating UI against the system
- Accessibility audit feedback agents can turn into concrete fixes
Recommended MCP Servers
Journey fit
How it compares
Design-system MCP integration with nine specialized tools, not a generic Figma plugin or single-purpose CSS linter skill.
Common Questions / FAQ
Who is io.github.ConanMcN/fragments-mcp for?
Solo and small-team frontend builders on Fragments who want MCP-connected agents to discover components, render variants, and run a11y audits during implementation.
When should I use io.github.ConanMcN/fragments-mcp?
Use it during Build when you are composing pages from a shared library, refactoring duplicate UI into Fragments, or tightening accessibility before Ship.
How do I add io.github.ConanMcN/fragments-mcp to my agent?
Install the npm package @fragments-sdk/mcp, configure stdio transport in your MCP client (e.g. Claude Code or Cursor), and follow the fragments repo packages/mcp setup for paths and credentials if any.