Design systems

1. 1

   If your component library uses private packages, go to 'Workspace settings' then 'Build secrets' and add any necessary secrets like npm tokens.

   This allows Lovable to access your private code when building your design system.

2. 2

   From the Lovable prompt box, click the '+' menu, select 'Design', then 'Use a design system', and finally 'Create design system'.

   This creates a new, dedicated project that will house your design system.

3. 3

   Tell Lovable how your design system is distributed: either provide an npm package name, a public Git repository URL, or upload loose files/private repository contents.

   Lovable needs to know where to find your existing components and styles to build the design system. Alternatively, you can give Lovable structured instructions (including PDFs, Markdown, screenshots) to build a new design system from scratch.

4. 4

   Select 'Release version' in your design system project.

   This makes your design system available for other projects to connect to, generates its documentation, and bumps its version number.

I want to create a new design system. It will be an npm-wrapper design system for the package 'my-awesome-ui-kit'. Please set up the project and prepare it for release.

Design system

A collection of reusable components, guidelines, and standards that help you build consistent user interfaces across multiple applications or projects.

React component libraries

A set of pre-built, reusable pieces of user interface (like buttons, forms, or navigation bars) made with the React programming tool.

Schema

A structured description of the design system's elements, like its colors, fonts, and components, that a computer can easily understand and use.

npm package

A bundle of code that can be easily shared and reused by other software projects, often managed through a package manager called npm.

Type definitions (.d.ts)

Special files that describe the structure and types of a JavaScript library, helping tools like Lovable understand how to use its components even if the original code isn't directly available.

Tokens

Small, reusable pieces of design information, like specific color codes, font sizes, or spacing values, that ensure consistency across a design system.

Adherence scanner

A feature that automatically checks if your project is following the rules and guidelines set by your design system, like using approved colors or components.

• Trying to connect more than one design system to a single project.
• Attempting to convert an existing project into a design system instead of creating a new one through the dedicated flow.
• Expecting to use a design system in other projects before it has been released at least once.
• Editing the design system's files directly within a connected project, as local changes will be overwritten during updates.
• Using an npm-wrapped design system where the underlying package does not provide type definitions, which will cause release failures.
• Expecting Lovable to automatically discover tokens or components if they are not in standard locations (e.g., tokens not in top-level styling files, components not exported from `src/index.ts` or `src/components/`).
• Not providing build secrets for private npm packages, leading to authentication failures during release.