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

# Create

> Scaffold a new design module from the skeleton-design source and wire its dependencies into your project.

`ooneex design:create` builds a front-end design system as a module in your project. It scaffolds a base module, takes it out of the backend wiring, marks it as a design module, then clones the upstream `skeleton-design` repository and copies its source into your module — components, hooks, icons, fonts, styles, and utils. The result is a ready-to-use design system under `modules/<name>/src/` with its dependencies already installed.

A design module is not part of your backend. It is a self-contained UI layer that your [SPA](/spa/overview) and other front-end code consume. See the [Design System overview](/design-system/overview) for how it fits into the project.

## Command

```bash theme={null}
ooneex design:create [options]
```

The name is normalized to PascalCase with any trailing `Module` stripped, and the folder on disk uses kebab-case. If you omit `--name`, the command prompts for it.

## Examples

```bash theme={null}
# Interactive: prompts for the design module name
ooneex design:create
```

```bash theme={null}
# Provide the name up front
ooneex design:create --name=ui
```

## Options

| Option     | Description                            | Default             |
| ---------- | -------------------------------------- | ------------------- |
| `--name`   | Name of the design module to create.   | Prompted if omitted |
| `--cwd`    | Working directory the command runs in. | Current directory   |
| `--silent` | Skip prompts and log output.           | `false`             |

## What happens

When you run the command, it works through these steps in order:

1. **Scaffolds a base module** under `modules/<kebab-name>/` — `package.json` (named `@module/<kebab>`), `tsconfig.json`, `<kebab>.yml`, and the usual module files.
2. **Un-registers it from `AppModule` and `SharedModule`.** A design module is a front-end layer, not part of the backend, so it is removed from the backend module wiring.
3. **Removes the scaffolded `<Pascal>Module.ts`** and its spec file — a design module does not need a backend module class.
4. **Marks the module as `type: "design"`** in its `<kebab>.yml` config so the toolchain treats it as a design system.
5. **Clones the upstream `skeleton-design` repository** (`https://github.com/ooneex/skeleton-design.git`, a shallow clone) and copies its `src/` into the module's `src/`.
6. **Installs the design's dependencies** into your project — `dependencies` via `bun add` and `devDependencies` via `bun add -D`.

<Note>
  This command clones the design source over the network, so it needs `git` installed and an active internet connection.
</Note>

## What you get

After the command finishes, you have a complete design system under `modules/<name>/src/` — components, hooks, icons, fonts, styles, and utils, with every dependency already installed.

* Browse the generated layout in the [structure reference](/design-system/structure).
* Start consuming it in your front-end code with the [usage guide](/design-system/usage).

To take a design module back out of your project, see [Remove](/design-system/remove).

## Use with Claude and Codex

The toolchain ships a matching `ooneex:design` skill. It guides your AI agent around the design system layout — where components, hooks, icons, fonts, styles, and utils live — so the agent can create the module and then work inside it correctly. Initialize the skills once for your agent:

<Tabs>
  <Tab title="Claude">
    ```bash theme={null}
    ooneex claude:init
    ```

    Then ask Claude in natural language — it maps the request to the command and runs it:

    ```text Prompt icon="terminal" wrap theme={null}
    Create a design module called ui.
    ```
  </Tab>

  <Tab title="Codex">
    ```bash theme={null}
    ooneex codex:init
    ```

    Then ask Codex in natural language — it maps the request to the command and runs it:

    ```text Prompt icon="terminal" wrap theme={null}
    Create a design module called ui.
    ```
  </Tab>
</Tabs>

For example, the prompt above maps to `ooneex design:create --name=ui`, then the agent can navigate the resulting design system using the `ooneex:design` skill.

See [design:create](/cli/commands/design-create) for the full command reference.