Features

Craft precise designs with ease.

Manage colors and typography.

Set consistent padding and radii.

Library

Reusable UI for consistency.

Intuitive token managment

Layouts to start projects fast.

Resources Tools Showcase

UI Lab Pro

Free

Limited to 3 projects
Core design tools for quick prototyping
Standard color palette
Basic typography
Core Components

Recommended

Pro

Lifetime access with free updates
Unlimited projects
50 premium templates for web & mobile
100 advanced components (forms, modals, dashboards)
Advanced style management (tokens, themes, variants)
Export to code (React, Tailwind, HTML)

Sorry this plugin isn't available for public use yet.

To get early access, leave your email and be the first to try an early version.

$39.99 1 License

Fundamentals Components Tutorials

Introduction
Installation
Quick Start

Plugin Interface Overview
Navigation
Keyboard Shortcuts

Creating Your First Design System
Adding Components
Exporting Design Tokens

Color Palette Generator
Typography Generator
Spacing Generator

Button
Input
Card

Header
Footer
Sidebar

Page Layouts
Form Templates
Dashboard Templates

Design Tokens
Component Architecture
Theming and Modes

Design System Guidelines
Component Usage
Accessibility Integration

Performance Optimization
Migrating Existing Projects
Custom Component Creation

Plugin API
Hooks and Utilities
Types and Interfaces

Configuration Files
Environment Setup
Plugin Settings

Roadmap
Contributing
Changelog

Docs / getting started / Creating Your First Design System

Creating Your First Design System

Planning Your Design System

Setting Up Foundation

Color Palette

Typography Scale

Spacing System

Creating Base Components

Documentation Best Practices

Search functionality coming soon...

Type to see future search results here