Generate Design System with AI

About this plugin

Generate design system with AI, it turns one brand colour and a typeface into a complete, documented design system - saving you days of setup.💡 How to use Groundwork?Pick your inputs: a brand colour and a typeface, or start from a reference file.Choose your components: 15 available, all selected by default.Generate: variables, components and documentation are built in one pass.🎯 Key Features:Variables: primitives, semantic tokens with light and dark modes, plus spacing, radius and typography scales.15 components: Button, Input, Select, Checkbox, Radio, Switch, Badge, Alert, Avatar, Tooltip, Accordion, Tabs, Toast, Modal and Card - every value bound to a variable.20 documentation pages: anatomy diagrams, properties, states, specs, do's and don'ts and accessibility notes for every component.design.md: the whole system as one markdown file for engineering, with CSS variables and JSON.Accessible by default: colours generated in OKLCH, every primary action checked to clear WCAG AA.Live preview in light and dark before you generate.✨ Upcoming Updates:More components - table, date picker, menu and paginationMotion tokens and documented transitionsDensity and breakpoint scalesGroundwork is free until November 2026 - every feature, no account needed.Got ideas on how we can improve Groundwork? We'd love to hear from you. Drop us an email at [email protected]. Thank you!