Skip to main content
There are five ways to create a Design System, all available from the + Create button on the My design systems tab of the Design System Gallery. Whichever method you choose, clicking the final button in the modal sends a prompt to the agent, which generates the Design System and saves it as a .ds file in your project.
Use this to extract a Design System directly from an existing codebase on disk, its CSS, Tailwind config, and other design tokens.
  1. Click + Create and select Import from codebase.
  2. In the Import from codebase modal, enter the Codebase path or click Browse to select a folder.
  3. Enter a Name for the Design System, and optionally add Notes describing anything specific it should focus on.
  4. Click Generate.
Use this to extract a Design System from one or more Figma files.
  1. Click + Create and select Import from Figma design.
  2. In the Import from Figma design modal, paste one or more Figma URLs (comma-separate multiple files).
  3. Enter a Name, and optionally add Notes.
  4. Click Generate.
Use this when you already have a Design.md file describing your design language.
  1. Click + Create and select Import from Design.md.
  2. In the Import from Design.md modal, paste the contents of your Design.md file into the Design.md contents field.
  3. Enter a Name.
  4. Click Create.
Use this to extract a Design System from an existing design saved on one of your Canvases.
  1. Click + Create and select Import from Kombai design.
  2. In the Import from Kombai design modal, select a Canvas from the dropdown. Click + Add project if the project you want isn’t listed yet.
  3. Select the Design you want to extract the Design System from.
  4. Enter a Name, and optionally add Notes.
  5. Click Generate.
Use this to extract a Design System from a live website.
  1. Click + Create and select Import from URL.
  2. In the Import from URL modal, paste the Website URL.
  3. Enter a Name, and optionally add Notes.
  4. Click Generate.
You can also ask Kombai to generate a Design System directly via chat, for example by pasting a website or Figma URL and asking it to extract the Design System from it.