Vue Design System

Vue Design System is an open-source tool for prototyping UI design systems. It provides you and your team a set of organized tools, patterns & practices to build upon, so that you can get started with the actual design system faster.

The tool is built on top of Vue.js, Vue Styleguidist & Vue Webpack Template and is aimed for designers and front-end developers who have at least basic knowledge of component based workflows + HTML, SCSS & JavaScript.

Even though this is a system prototyping tool first and foremost, it has all the means to turn into your organization’s actual design system in the end.

Made by @viljamis and other contributors. Read more from the official docs on GitHub.


  • A set of interconnected patterns & practices for you and your team.
  • Global design tokens that can be used inside any component.
  • Simple and sane SVG icon and @font-face defaults.
  • Live reloading for both the app and the system documentation.
  • Automatic generation of documentation (the very page you’re looking at).
  • Documentation and the app logic are separated, so you can have public docs while the app itself is private.
  • Autoprefixing, SCSS, Webpack & CSS extraction included by default (Extend with lint-on-save & unit tests).
  • And more…

Get Started

View Project on GitHub or View Documentation