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.
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.
- 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…
- Getting Started: How to install and run Vue Design System.
- Terminology: Introduction to the system concepts and its hierarchy.
- Naming of Things: Naming is hard, so it’s good to have clear guidelines.
- Directory Structure: What goes where and why.
- Working with the System: Concrete examples on how to work with
- Editing Living Documentation: How to customize the living system documentation.
- Component Status: Clear labels that reflect the state of completion.
- Component QA: How to review new components and keep the quality high.
- Frequently Asked Questions: How to use icons, how to use font-face, etc.