> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kombai.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Create a Design System

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](./overview#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.

<AccordionGroup>
  <Accordion title="Import from codebase">
    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**.
  </Accordion>

  <Accordion title="Import from Figma design">
    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**.
  </Accordion>

  <Accordion title="Import from Design.md">
    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**.
  </Accordion>

  <Accordion title="Import from Kombai design">
    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**.
  </Accordion>

  <Accordion title="Import from URL">
    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**.
  </Accordion>
</AccordionGroup>

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.