Flutter design system template: design tokens, Atomic Design components, DartDoc, a Widgetbook gallery, and an MCP server for AI coding assistants.
A starter template for building a Flutter design system the "right way": design tokens, type-safe components built with Atomic Design, DartDoc on every public API, and a live component gallery powered by Widgetbook. Based on the talk "Do Caos ao Design System".
They're kept as siblings on purpose: designsystem stays a clean, publishable package with no gallery/dev-tooling baggage; widgetbook and mcpserver are each just one of potentially many consumers of it (an app could depend on designsystem the same way widgetbook does).
Whenever you add or edit a component, re-run buildrunner (or dart run buildrunner watch while developing) so Widgetbook picks up the change.
See designsystem/README.md for the package's architecture, principles, and folder layout.
mcpserver/ exposes the designsystem's components, tokens, and enums as MCP tools, so an agent can look up an exact prop schema instead of guessing. It's already wired up for this repo in .mcp.json. See mcpserver/README.md for the tool list and how to point it at a different designsystem copy.
MIT — use this as a starting point for your own design system, rename designsystem/Ds to your brand, and swap the tokens.
From the project README.
Add the radar badge to your README — it shows your project was picked up by MCP Radar and links to this page:
[](https://mcp.liqiwa.com/s/tecrodrigocastro--design-system-flutter-template.html)
The top new MCP servers of the week, every Monday. No spam, unsubscribe anytime.